// Major page sections
const { useState, useEffect } = React;

function Hero({ onAppoint, onCustomize }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <div>
              <div className="eyebrow"><span className="rule"></span>Volume I · Spring 2026</div>
              <h1 className="hero-headline">
                Jewellery <span className="swash">with</span><br/>
                your story,<br/>
                set in <span className="swash italic">18k gold.</span>
                <span className="small">Hand-set in Dubai · Worn around the world</span>
              </h1>
              <p className="hero-sub">
                Since 2017, Hiba Jaber has translated initials, names, heritage and
                meaningful milestones into fine jewellery — designed in studio with you,
                made by our artisans in Dubai Design District.
              </p>
              <div className="hero-ctas">
                <button className="cta-pill" onClick={onAppoint}><span className="dot"></span>Book a Private Appointment</button>
                <button className="cta-pill ghost" onClick={onCustomize}>Start Customizing</button>
              </div>
            </div>
            <div className="hero-meta">
              <div><b>2017</b> Founded</div>
              <div><b>457</b> pieces in atelier</div>
              <div><b>18k</b> gold standard</div>
              <div><b>GIA</b> Gemologist</div>
            </div>
          </div>

          <div className="hero-media">
            <div className="hero-side">SCROLL · 01 / 09 · THE SIGNATURE</div>
            <div className="frame">
              <img src="media/hero-signature-ring-on-fabric.webp" alt="Hiba Jaber signature ring"/>
              <div className="corner"><span className="star"></span>This Season</div>
              <div className="caption">
                <div>
                  <div className="ttl">Signature H · Thick Duo Rings</div>
                  <div className="sub">Two-tone 18k · Princess cut</div>
                </div>
                <div className="price">AED 7,650</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProofMarquee() {
  const items = [
    { t: "Featured by Harper's Bazaar Arabia", tag: "Press" },
    { t: "Stocked at Ounass", tag: "Retail" },
    { t: "GIA Diamond Gemologist", tag: "Certified" },
    { t: "Studio · d3 Building 2", tag: "Dubai" },
    { t: "Two-year warranty on every piece", tag: "Care" },
    { t: "Free UAE & worldwide delivery", tag: "Service" },
  ];
  const loop = [...items, ...items];
  return (
    <div className="proof">
      <div className="proof-track">
        {loop.map((x, i) => (
          <span key={i}>
            <span className="tag">{x.tag}</span>
            <span>{x.t}</span>
            <span className="sep"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

function CollectionRail() {
  return (
    <section className="section tight">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="rule"></span>The House</div>
            <h2>Find your <span className="italic" style={{color:"var(--gold-deep)"}}>chapter</span>.</h2>
          </div>
          <div className="ai">Six collections, one studio. Begin with what speaks first — initials,
            heritage, tennis, infinity. Each piece is offered ready or made to order.</div>
        </div>
      </div>
      <div className="container">
        <div className="col-rail">
          {window.HJ_DATA.collections.map((c, i) => (
            <div key={c.id} className="col-tile">
              <div className="num">{String(i + 1).padStart(2, "0")} / 06</div>
              <h3>{c.name}</h3>
              <p>{c.sub}</p>
              <div className="arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedGrid({ onOpen }) {
  const [tab, setTab] = useState("all");
  const tabs = [
    { id: "all", label: "Editor's Edit" },
    { id: "Necklaces", label: "Necklaces" },
    { id: "Bracelets", label: "Bracelets" },
    { id: "Rings", label: "Rings" },
  ];
  const items = window.HJ_DATA.featured.filter(p => tab === "all" || p.cat === tab);
  return (
    <section className="section" id="shop">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="rule"></span>Atelier · Currently</div>
            <h2>From the <span className="italic" style={{color:"var(--gold-deep)"}}>bench</span>, this week.</h2>
          </div>
          <div className="ai">A small edit from the 457 pieces in studio — selected for what is
            available now and what tells the house clearly. Live prices from our Shopify atelier.</div>
        </div>
        <div className="tab-bar">
          {tabs.map(t => (
            <button key={t.id} className={"tab " + (tab === t.id ? "active" : "")} onClick={() => setTab(t.id)}>{t.label}</button>
          ))}
          <button className="tab" style={{marginLeft:"auto"}}>View all 457  →</button>
        </div>
        <div className="prod-grid">
          {items.map(p => (
            <article key={p.id} className="prod" onClick={() => onOpen(p)} style={{cursor:"pointer"}}>
              <div className="media">
                <img src={p.img} alt={p.name}/>
                <span className="tag">{p.tag}</span>
                <div className="quick">
                  <button className="primary">Quick view</button>
                  <button>Add ♥</button>
                </div>
              </div>
              <div className="info">
                <div>
                  <h4>{p.name}</h4>
                  <div className="sub">{p.sub}</div>
                </div>
                <div className="price">
                  <span className="from">from</span>
                  {window.HJ_AED(p.price)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Bespoke() {
  const steps = window.HJ_DATA.bespoke;
  const [active, setActive] = useState(0);
  const cur = steps[active];

  return (
    <section className="bespoke" id="customize">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="rule" style={{background:"var(--gold)"}}></span>Create Your Jewellery</div>
            <h2>Five steps from <span style={{fontStyle:"italic", color:"var(--gold)"}}>idea</span> to heirloom.</h2>
          </div>
          <div className="ai">A guided process led by our design team in studio or online.
            From first sketch to delivery, every piece is yours alone.</div>
        </div>

        <div className="bespoke-tabs">
          {steps.map((s, i) => (
            <button key={s.n} className={"bespoke-tab " + (i === active ? "active" : "")} onClick={() => setActive(i)}>
              <span className="n">— {s.n}</span>
              <span className="t">{s.t}</span>
            </button>
          ))}
        </div>

        <div className="bespoke-panel">
          <div className="copy">
            <div className="eyebrow" style={{color:"var(--gold)"}}>Step {cur.n} of 05</div>
            <h3>{cur.t}.</h3>
            <p>{cur.d}</p>
            <div className="meta">
              <div><strong>3–4 days</strong><span>Design Turnaround</span></div>
              <div><strong>2–3 weeks</strong><span>Creation Window</span></div>
              <div><strong>Free</strong><span>UAE Delivery</span></div>
              <div><strong>$40</strong><span>Worldwide FedEx</span></div>
            </div>
          </div>

          <div className="bespoke-vis">
            <div className="big">{cur.n}</div>
            <div className="bottom">
              <div>
                <div className="label">Working sketch</div>
                <div className="word italic">"For Layla, with love."</div>
                <div style={{marginTop:14, fontSize:11, letterSpacing:"0.14em", color:"rgba(231,221,201,0.55)", textTransform:"uppercase"}}>
                  18k Yellow Gold · 0.42 ct · Latin & Arabic
                </div>
              </div>
              <div className="check">
                {steps.map((s, i) => (
                  <div key={s.n}>
                    <span className={"tick " + (i <= active ? "on" : "")}>{i <= active ? "✓" : ""}</span>
                    {s.t}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Founder() {
  return (
    <section className="spread" id="about">
      <div className="container">
        <div className="spread-grid">
          <div className="founder-img-wrap">
            <img src="media/founder-hiba-jaber-portrait.webp" alt="Hiba Jaber, founder"/>
            <div className="signature">— Hiba</div>
          </div>
          <div>
            <div className="eyebrow"><span className="rule"></span>The Designer</div>
            <h2 style={{marginTop:14}}>
              A house built on <span className="italic" style={{color:"var(--gold-deep)"}}>quiet</span> storytelling.
            </h2>
            <p className="lead" style={{marginTop:24}}>
              "Every piece begins with a memory I'm asked to keep safe — a child's
              name, a grandmother's letter, the day someone chose someone. My job
              is to hold it in gold."
            </p>
            <p>
              Born in Morocco to Palestinian parents, raised in Jordan, Hiba trained in
              Fashion Management at London College of Fashion, studied jewellery design at
              Istituto Lorenzo de' Medici in Florence, and learned gem-cutting in Sri Lanka
              before opening her Dubai studio in 2017.
            </p>
            <p>
              She is a certified GIA Diamond Gemologist. Each piece in the house carries
              her signature on the certificate that accompanies it.
            </p>
            <div className="bio-meta">
              <div><strong>LCF · London</strong><span>Fashion BA</span></div>
              <div><strong>Florence</strong><span>Jewellery Design</span></div>
              <div><strong>GIA</strong><span>Diamond Gemologist</span></div>
            </div>
            <div className="flex-row">
              <button className="cta-pill ghost">Read her full story  →</button>
              <button className="cta-pill" style={{background:"var(--gold)", color:"#fff"}}>Meet Hiba in studio</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Tennis({ onOpen }) {
  const t = window.HJ_DATA.tennis;
  const [hero, ...rest] = t;
  return (
    <section className="tennis-feat" id="tennis">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="rule"></span>High Jewellery · Volume I</div>
            <h2>The <span className="italic" style={{color:"var(--gold-deep)"}}>tennis</span> archive.</h2>
          </div>
          <div className="ai">Graduated lines, full diamond, fancy yellow cushions and heart-cut
            classics. These pieces live in the studio safe — appointment required.</div>
        </div>

        <div className="tennis-cards">
          <div className="tennis-hero" onClick={() => onOpen(hero)}>
            <img src={hero.img} alt={hero.name}/>
            <div className="ov"></div>
            <div className="info">
              <div className="eyebrow" style={{color:"var(--gold)"}}>Archive piece</div>
              <h3>{hero.name}</h3>
              <p>{hero.sub}</p>
              <div className="row">
                <span>{window.HJ_AED(hero.price)}</span>
                <span>Private viewing  →</span>
              </div>
            </div>
          </div>
          <div className="tennis-stack">
            {rest.slice(0, 2).map(p => (
              <div key={p.id} className="tennis-mini" onClick={() => onOpen(p)} style={{cursor:"pointer"}}>
                <img src={p.img} alt={p.name}/>
                <div className="copy">
                  <div>
                    <h4>{p.name}</h4>
                    <div className="sub">{p.sub}</div>
                  </div>
                  <div className="price">
                    <span className="l">From</span>
                    {window.HJ_AED(p.price)}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="tennis-stack">
            {rest.slice(2).map(p => (
              <div key={p.id} className="tennis-mini" onClick={() => onOpen(p)} style={{cursor:"pointer"}}>
                <img src={p.img} alt={p.name}/>
                <div className="copy">
                  <div>
                    <h4>{p.name}</h4>
                    <div className="sub">{p.sub}</div>
                  </div>
                  <div className="price">
                    <span className="l">From</span>
                    {window.HJ_AED(p.price)}
                  </div>
                </div>
              </div>
            ))}
            <div className="tennis-mini" style={{gridTemplateColumns:"1fr", padding:0}}>
              <div className="copy" style={{padding:22}}>
                <div className="eyebrow gold">By Appointment</div>
                <h4 style={{fontSize:24, marginTop:8}}>Twelve archive pieces, available for private viewing in studio.</h4>
                <button className="cta-pill" style={{marginTop:14, alignSelf:"flex-start"}}>
                  <span className="dot"></span>Request viewing
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Heritage() {
  return (
    <section className="section tight" id="stories">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="rule"></span>Our Stories</div>
            <h2>Pieces that <span className="italic" style={{color:"var(--gold-deep)"}}>mean</span> something.</h2>
          </div>
          <div className="ai">From heritage symbols to gifting milestones, the studio's most
            requested commissions — and the stories behind them.</div>
        </div>

        <div className="heritage-grid">
          <div className="heritage-cell dark">
            <div className="eyebrow" style={{color:"var(--gold)"}}>Heritage · 01</div>
            <h3 style={{color:"#F4EAD5"}}>The Watermelon.</h3>
            <p>A symbol of presence, carried close in 18k yellow gold with ruby
              and emerald pavé. One of the studio's most-requested pieces.</p>
            <div className="pair">
              <img src="media/product-17-palestine-watermelon-necklace.webp" alt=""/>
              <div className="listing">
                <strong style={{color:"#F4EAD5"}}>Palestine Watermelon Necklace</strong>
                <span style={{color:"rgba(231,221,201,0.7)"}}>Ruby · Emerald · 18k Yellow Gold</span>
                <span style={{color:"var(--gold)", marginTop:8, fontWeight:600, letterSpacing:"0.06em"}}>AED 5,600</span>
              </div>
            </div>
          </div>

          <div className="heritage-cell">
            <div className="eyebrow gold">Mother's Day · Commission</div>
            <h3>A duo, for two hands.</h3>
            <p>The studio's signature commission. Two interlocking rings, one carried
              by mother, one by daughter — engraved with what would never need saying.</p>
            <div className="pair">
              <img src="media/lifestyle-layered-gemstone-jewelry.webp" alt="" style={{gridColumn:"span 2", aspectRatio:"16/9"}}/>
            </div>
            <div className="listing" style={{marginTop:14}}>
              <strong>Signature H · Thick Duo Rings</strong>
              <span>Available as a pair, from AED 7,650</span>
            </div>
          </div>

          <div className="heritage-cell">
            <div className="eyebrow gold">Personalise · The Initial</div>
            <h3>One letter, well-set.</h3>
            <p>Your letterform — Latin, Arabic, or both — set in diamond on a bold
              paperclip chain. Made to order in 14 days.</p>
            <div className="pair">
              <img src="media/product-15-single-initial-necklace-bold-chain-diamonds.webp" alt=""/>
              <div className="listing">
                <strong>Single Initial Necklace</strong>
                <span>14k & 18k · Diamond pavé</span>
                <span style={{color:"var(--gold-deep)", marginTop:8, fontWeight:600, letterSpacing:"0.06em"}}>From AED 4,550</span>
              </div>
            </div>
          </div>

          <div className="heritage-cell dark" style={{background:"#221C16"}}>
            <div className="eyebrow" style={{color:"var(--gold)"}}>Gifting</div>
            <h3 style={{color:"#F4EAD5"}}>Quietly wrapped.</h3>
            <p>Every piece arrives in a hand-tied box with a personalised note from the
              designer. Same-day in-studio collection available with appointment.</p>
            <div className="flex-row" style={{marginTop:"auto"}}>
              <span className="eyebrow" style={{color:"var(--gold)"}}>Under AED 5,000</span>
              <span className="eyebrow" style={{color:"rgba(231,221,201,0.55)"}}>Bridal</span>
              <span className="eyebrow" style={{color:"rgba(231,221,201,0.55)"}}>Anniversary</span>
              <span className="eyebrow" style={{color:"rgba(231,221,201,0.55)"}}>For Him</span>
              <span className="eyebrow" style={{color:"rgba(231,221,201,0.55)"}}>National Love</span>
            </div>
            <button className="cta-pill" style={{alignSelf:"flex-start", marginTop:18, background:"var(--gold)", color:"#fff"}}>
              Shop the Gift Edit  →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Appointment({ onAppoint }) {
  const [date, setDate] = useState("Sat 30 May");
  const [time, setTime] = useState("11:00");
  const [type, setType] = useState("Consultation");
  return (
    <section className="section" id="visit">
      <div className="container">
        <div className="appointment">
          <div className="appt-img">
            <img src="media/appointment-consultation-in-studio.webp" alt="Consultation in studio"/>
          </div>
          <div className="appt-card">
            <div className="eyebrow"><span className="rule"></span>Visit the studio</div>
            <h2>An hour. <span className="italic" style={{color:"var(--gold-deep)"}}>Tea</span>. Your jewellery.</h2>
            <p>Private appointments at our Dubai Design District studio — for new commissions,
              repairs, sizing, or simply to see archive pieces in person. Hiba personally meets
              all bespoke clients.</p>

            <div className="appt-hours">
              <div className="row"><span>Monday – Friday</span><span>10:00 — 20:00</span></div>
              <div className="row"><span>Saturday – Sunday</span><span>10:00 — 16:00</span></div>
              <div className="row"><span>Repairs · Drop-off & pick-up</span><span>Mon – Fri · 10:00 — 17:00</span></div>
            </div>

            <div className="appt-form">
              <div className="row2">
                <label>Date
                  <select value={date} onChange={e => setDate(e.target.value)}>
                    {["Fri 29 May","Sat 30 May","Sun 31 May","Mon 1 Jun","Tue 2 Jun","Wed 3 Jun"].map(d => <option key={d}>{d}</option>)}
                  </select>
                </label>
                <label>Time
                  <select value={time} onChange={e => setTime(e.target.value)}>
                    {["10:00","11:00","12:00","14:00","15:00","16:00","17:00"].map(t => <option key={t}>{t}</option>)}
                  </select>
                </label>
              </div>
              <label>Visit type
                <select value={type} onChange={e => setType(e.target.value)}>
                  <option>Consultation</option>
                  <option>New commission</option>
                  <option>View tennis archive</option>
                  <option>Repair · resize</option>
                </select>
              </label>
              <button className="cta-pill" onClick={onAppoint}>
                <span className="dot"></span>Reserve {date} · {time}
              </button>
            </div>

            <div className="channels">
              <a href="https://wa.me/971507280604" target="_blank" rel="noopener"><HJ_I.whatsapp /> WhatsApp +971 50 728 0604</a>
              <a href="tel:+971507280604"><HJ_I.phone /> +971 50 728 0604</a>
              <a href="mailto:Sales@hibajaber.com"><HJ_I.mail /> Sales@hibajaber.com</a>
            </div>
          </div>
        </div>

        <div style={{marginTop:48, display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:32}} className="addr-grid">
          <div style={{border:"1px solid var(--line)", padding:0, overflow:"hidden", position:"relative"}}>
            <img src="media/location-map-d3-building-2.webp" alt="d3 location map" style={{width:"100%", display:"block"}}/>
          </div>
          <div style={{padding:"6px 0"}}>
            <div className="eyebrow"><span className="rule"></span>Find Us</div>
            <h3 style={{fontSize:32, fontStyle:"italic", margin:"14px 0"}}>Dubai Design District<br/>Building 2 · Studio 211</h3>
            <p style={{color:"var(--muted)", fontSize:14, lineHeight:1.65, maxWidth:380}}>
              Underground parking is available — mention "a short meeting at Hiba Jaber"
              at security. Walk past Joe & The Juice and Bageri Form toward Building 2.
            </p>
            <div className="bio-meta" style={{marginTop:24}}>
              <div><strong>+971 50<br/>728 0604</strong><span>Sales · WhatsApp</span></div>
              <div><strong>Sales@</strong><span>Sales & enquiries</span></div>
              <div><strong>Info@</strong><span>Repairs · tracking</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  return (
    <section className="reviews">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="rule"></span>From the Studio Log</div>
            <h2>What clients have <span className="italic" style={{color:"var(--gold-deep)"}}>written.</span></h2>
          </div>
          <div className="ai">Selected entries from the studio guestbook and Google reviews —
            shared with permission. Names appear as written.</div>
        </div>

        <div className="reviews-grid">
          {window.HJ_DATA.reviews.map((r, i) => (
            <div key={i} className="review">
              <div className="stars">★ ★ ★ ★ ★</div>
              <p>"{r.text}"</p>
              <div className="who">— {r.who}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Press() {
  return (
    <div className="press-strip">
      <div className="container press-strip-inner">
        <div className="label">As seen in & stocked at</div>
        <div className="press-list">
          {window.HJ_DATA.press.map(p => <span key={p}>{p}</span>)}
        </div>
        <a className="eyebrow ink">Press kit  →</a>
      </div>
    </div>
  );
}

function Closing() {
  const [val, setVal] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section className="closing">
      <div className="container">
        <div className="eyebrow"><span className="rule long"></span>Volume II arrives <span className="italic" style={{color:"var(--gold-deep)"}}>Autumn 2026</span><span className="rule long" style={{marginLeft:12}}></span></div>
        <h2 style={{marginTop:24}}>
          Carry the<br/>house with you,<br/><span className="it">on paper.</span>
        </h2>
        <p>The Atelier Letter — new pieces, private events, founder notes, and first access
          to one-of-one archive pieces. Quarterly. Quietly.</p>
        <form className="nl-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
          <input type="email" placeholder="your@email" value={val} onChange={e => setVal(e.target.value)} required disabled={sent}/>
          <button type="submit">{sent ? "Subscribed ✓" : "Subscribe →"}</button>
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="brand">
            <div className="glyph">Hiba Jaber</div>
            <p>A Dubai contemporary fine-jewellery house. Bespoke 18k gold, hand-set in studio
              since 2017.</p>
            <div className="legal">HIBA JABER FZ-LLC · Dubai, UAE</div>
          </div>
          <div>
            <h5>Shop</h5>
            <ul>
              <li>Customize</li>
              <li>Tennis Jewellery</li>
              <li>Rings · Necklaces · Bracelets</li>
              <li>Heritage</li>
              <li>Ready to Ship</li>
              <li>Gift Cards</li>
            </ul>
          </div>
          <div>
            <h5>House</h5>
            <ul>
              <li>About Hiba</li>
              <li>Our Stories</li>
              <li>Press</li>
              <li>Stockists & Ounass</li>
              <li>Almasati by Hiba Jaber</li>
              <li>Careers</li>
            </ul>
          </div>
          <div>
            <h5>Care</h5>
            <ul>
              <li>Book Appointment</li>
              <li>Repairs & Resizing</li>
              <li>2-Year Warranty</li>
              <li>Shipping · UAE Free</li>
              <li>Returns</li>
              <li>FAQ</li>
            </ul>
          </div>
          <div className="contact-block">
            <h5>Studio</h5>
            <div style={{lineHeight:1.7}}>
              Dubai Design District<br/>
              Building 2 · Studio 211<br/>
              Dubai, UAE<br/><br/>
              <a href="https://wa.me/971507280604">+971 50 728 0604</a><br/>
              <a href="mailto:Sales@hibajaber.com">Sales@hibajaber.com</a><br/>
              <a href="mailto:info@hibajaber.com">info@hibajaber.com</a><br/><br/>
              <span style={{color:"var(--gold)", letterSpacing:"0.18em", fontSize:11, textTransform:"uppercase"}}>Instagram · @hibajaber_official</span>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© HIBA JABER FZ-LLC · 2017 – 2026 · All rights reserved</div>
          <div className="pay">
            <span>VISA</span><span>MC</span><span>AMEX</span><span>APPLE PAY</span><span>TABBY</span>
          </div>
          <div>EN · العربية</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, ProofMarquee, CollectionRail, FeaturedGrid, Bespoke, Founder, Tennis, Heritage, Appointment, Reviews, Press, Closing, Footer });