/* === Home page === */
function Home({ setPage, openConsult }) {
  const D = window.MONILI;
  const [tIdx, setTIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTIdx(i => (i + 1) % D.testimonials.length), 6800);
    return () => clearInterval(t);
  }, []);

  const featured = ["six-prong-solitaire", "cushion-halo", "tennis-bracelet", "ruby-halo",
                    "pave-eternity", "tennis-chain", "halo-stud", "sapphire-halo"]
    .map(id => D.pieces.find(p => p.id === id));

  return (
    <main data-screen-label="Home">
      {/* === HERO === */}
      <section className="hero" data-screen-label="Hero">
        <div className="hero-grid">
          <div className="hero-left">
            <div className="hero-eyebrow fade-up">
              <span className="dot"></span>
              <span className="eyebrow">Custom Masterpieces · Dubai · Since 2005</span>
            </div>
            <h1 className="hero-title fade-up delay-1">
              Custom <em>masterpieces,</em><br/>crafted in Dubai<br/>since 2005.
            </h1>
            <p className="hero-sub fade-up delay-2">
              Certified diamonds, bespoke design, and no-pressure guidance from our in-house designers —
              Gold &amp; Diamond Park and Souk Madinat Jumeirah.
            </p>
            <div className="hero-cta fade-up delay-3">
              <button className="btn btn-gold" onClick={openConsult}>
                Book a Private Consultation <Icon name="arrow" size={14}/>
              </button>
              <button className="btn btn-ghost" onClick={() => setPage("bespoke")}>
                Begin a Custom Design
              </button>
            </div>
            <div className="hero-meta fade-up delay-4">
              <div className="hero-meta-block">
                <span className="hero-meta-num">5.0</span>
                <span className="hero-meta-label">Tripadvisor · 107 reviews</span>
              </div>
              <div className="hero-meta-block">
                <span className="hero-meta-num">#11</span>
                <span className="hero-meta-label">of 905 Shopping · Dubai</span>
              </div>
              <div className="hero-meta-block">
                <span className="hero-meta-num">GIA · IGI</span>
                <span className="hero-meta-label">Certified, every diamond</span>
              </div>
            </div>
          </div>
          <div className="hero-right">
            <img src="media/hero/hero-discover-the-magic.webp" alt="Monili fine jewellery composition"/>
            <div className="hero-marker">
              <span className="label">Showroom 01</span>
              <span className="name">Gold &amp; Diamond Park</span>
              <span style={{fontSize:11.5, opacity:.7}}>Shop 58, Building 4 · Sheikh Zayed Road</span>
            </div>
            <span className="hero-side-tag">No pressure · No rush · No obligation</span>
          </div>
        </div>
      </section>

      <TrustStrip/>

      {/* === FEATURED COLLECTIONS === */}
      <section className="section" data-screen-label="Featured Collections">
        <div className="container">
          <div className="section-head">
            <div className="section-head-left">
              <span className="eyebrow eyebrow-gold">Atelier Selections</span>
              <h2 className="section-title">A curated <em>house selection.</em></h2>
              <p className="section-lede">
                Pieces from our flagship cases — engagement, eternity, tennis bracelets and gemstone halos.
                Every piece can be made yours: re-stoned, resized, or reimagined entirely as a bespoke commission.
              </p>
            </div>
            <button className="btn-link" onClick={() => setPage("collections")}>
              See all pieces <Icon name="arrow" size={14}/>
            </button>
          </div>

          <div className="products-grid">
            {featured.map((p, i) => (
              <div key={p.id} className="product-card" onClick={() => setPage("collections")}>
                <div className="product-card-frame">
                  {p.tag && <span className={"tag" + (i === 0 ? " gold" : "")}>{p.tag}</span>}
                  <img src={p.img} alt={p.name}/>
                </div>
                <div className="product-meta">
                  <div className="product-name">{p.name}</div>
                  <div className="product-spec">{p.spec}</div>
                  <div className="product-cta-row">
                    <span className="product-enquire">Enquire · Price on Request</span>
                    <Icon name="arrow" size={14}/>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === BESPOKE TEASER === */}
      <section className="section bespoke-teaser" data-screen-label="Bespoke Teaser">
        <div className="container">
          <div className="section-head">
            <div className="section-head-left">
              <span className="eyebrow eyebrow-gold">The Bespoke Journey</span>
              <h2 className="section-title">Made for one. <em>Made by hand.</em></h2>
              <p className="section-lede">
                Bring a stone, a sketch, an idea, or a piece of inherited gold. From the first
                consultation to the final reveal, your commission stays under one roof — designed,
                cast, set and polished in our own Dubai atelier.
              </p>
            </div>
            <button className="btn btn-gold" onClick={() => setPage("bespoke")}>
              Begin Your Commission <Icon name="arrow" size={14}/>
            </button>
          </div>
          <div className="steps-row">
            {D.bespoke.map(s => (
              <div key={s.id} className="step-card" onClick={() => setPage("bespoke")}>
                <span className="step-num">— {s.num}</span>
                <span className="step-title">{s.name}</span>
                <span className="step-copy">{s.blurb}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === HERITAGE SPLIT === */}
      <section className="section" data-screen-label="Heritage Teaser">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <img src="media/store/store-about-feature.webp" alt="Inside the Monili atelier" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", border: "1px solid var(--line)" }}/>
              <div style={{
                position: "absolute", bottom: 24, right: -28, background: "var(--paper)", border: "1px solid var(--line)",
                padding: "20px 24px", maxWidth: 260, boxShadow: "var(--shadow-card)"
              }}>
                <div className="eyebrow eyebrow-gold">Established</div>
                <div className="serif" style={{ fontSize: 56, lineHeight: 1, marginTop: 4 }}>2005</div>
                <div style={{ fontSize: 12, color: "var(--charcoal)", marginTop: 6, lineHeight: 1.4 }}>
                  Founded in Gold &amp; Diamond Park by Panky Karamchandani &amp; Vipul Gor.
                </div>
              </div>
            </div>
            <div>
              <span className="eyebrow eyebrow-gold">Our Heritage</span>
              <h2 className="section-title">A Dubai jewellery house, <em>founder-led to this day.</em></h2>
              <p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--charcoal)" }}>
                Twenty years ago, two friends opened a single workshop in Gold &amp; Diamond Park with a simple idea:
                fine jewellery should be made under one roof, by people you can speak to by name.
                That idea is still our practice. Every certified diamond, every commission, every quiet repair
                passes through our own atelier — and very often, the same hands that began with us in 2005.
              </p>
              <div style={{ display: "flex", gap: 16, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn btn-ghost" onClick={() => setPage("heritage")}>Read our story</button>
                <button className="btn-link" onClick={() => setPage("showrooms")}>Visit a showroom <Icon name="arrow" size={14}/></button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* === TESTIMONIALS === */}
      <section className="section testimonials" data-screen-label="Testimonials">
        <div className="container-narrow">
          <span className="eyebrow eyebrow-gold">In Our Clients' Words</span>
          <div className="testimonial" style={{ marginTop: 24 }}>
            <div>
              <p className="testimonial-quote" key={tIdx}>{D.testimonials[tIdx].quote}</p>
              <div className="testimonial-meta">
                <span className="testimonial-name">— {D.testimonials[tIdx].name}</span>
                <span className="testimonial-source">{D.testimonials[tIdx].source}</span>
              </div>
              <div className="testimonial-pager">
                {D.testimonials.map((_, i) => (
                  <button key={i} className={"pager-dot" + (i === tIdx ? " active" : "")} onClick={() => setTIdx(i)}/>
                ))}
              </div>
            </div>
            <div className="testimonial-right">
              <div className="testimonial-stars">
                {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16}/>)}
                <span style={{marginLeft:10, fontSize:13, color:"var(--onyx)", fontWeight:600, letterSpacing:0}}>5.0 / 5</span>
              </div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.25 }}>
                A near-perfect record across <strong>107 verified reviews</strong> — ranked <strong>#11 of 905</strong> shopping destinations in Dubai.
              </div>
              <p style={{ fontSize: 13, color: "var(--charcoal)", margin: 0, lineHeight: 1.6 }}>
                Recurring praise: no pressure, named advisors (Deepak · Rahul · Imran), exceptional craftsmanship,
                and long client relationships of fifteen years and more.
              </p>
              <a href="https://www.tripadvisor.com/Attraction_Review-g295424-d20295063-Reviews-Monili_Jewellers-Dubai_Emirate_of_Dubai.html"
                 target="_blank" rel="noreferrer" className="btn-link">
                Read on Tripadvisor <Icon name="arrow" size={14}/>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* === SHOWROOM PICKER === */}
      <section className="section" data-screen-label="Showroom Picker">
        <div className="container">
          <div className="section-head">
            <div className="section-head-left">
              <span className="eyebrow eyebrow-gold">Three Private Showrooms</span>
              <h2 className="section-title">Come and <em>be received.</em></h2>
              <p className="section-lede">
                Our flagship sits in Gold &amp; Diamond Park, the heart of Dubai's jewellery district.
                Two further boutiques sit inside Souk Madinat Jumeirah, by the water.
              </p>
            </div>
            <button className="btn-link" onClick={() => setPage("showrooms")}>
              All showrooms <Icon name="arrow" size={14}/>
            </button>
          </div>
          <div className="showroom-row">
            {D.showrooms.map(s => (
              <div key={s.id} className="showroom-card" onClick={() => setPage("showrooms")}>
                <div className="showroom-card-frame">
                  <img src={s.img} alt={s.name}/>
                  <span className={"showroom-card-flag" + (s.flagship ? " flagship" : "")}>
                    {s.flagship ? "Flagship" : s.label}
                  </span>
                </div>
                <div className="showroom-card-body">
                  <div className="showroom-card-name">{s.name}</div>
                  <div className="showroom-card-addr">{s.shop}<br/>{s.address}</div>
                  <div className="showroom-card-hours"><Icon name="calendar" size={14}/> {s.hours}</div>
                  <div className="showroom-card-cta">
                    <a href={`tel:${s.phoneRaw}`} onClick={e => e.stopPropagation()}><Icon name="phone" size={12}/> Call</a>
                    <a onClick={e => { e.stopPropagation(); setPage("showrooms"); }}><Icon name="pin" size={12}/> Map &amp; hours</a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === END CTA === */}
      <section style={{ background: "var(--onyx)", color: "var(--ivory)", padding: "100px 0" }} data-screen-label="End CTA">
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>The Personal Way to Buy Fine Jewellery</span>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 72px)", fontWeight: 400, lineHeight: 1.04, margin: "20px 0 0 0", letterSpacing: "-0.012em" }}>
            Sit with a designer.<br/><em style={{ color: "var(--gold-soft)" }}>Leave with a story.</em>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "rgba(247,243,236,0.78)", margin: "28px auto 0", maxWidth: 580 }}>
            Every consultation is private, complimentary and without obligation.
            You walk in with an idea — you leave with sketches, certified options and an itemised quote.
          </p>
          <div style={{ display: "inline-flex", gap: 14, marginTop: 36, flexWrap: "wrap", justifyContent: "center" }}>
            <button className="btn btn-gold" onClick={openConsult}>Book a Private Consultation <Icon name="arrow" size={14}/></button>
            <button className="btn btn-ghost" style={{ borderColor: "rgba(247,243,236,0.4)", color: "var(--ivory)" }} onClick={() => setPage("bespoke")}>
              Or begin a Custom Design
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Home = Home;