// Eva — Home page

function PageHome({ go, openConsult }) {
  const products = window.EVA_PRODUCTS;
  const featured = products.filter(p => p.featured);
  const reviews = window.EVA_REVIEWS.slice(0, 3);

  return (
    <main className="evaPage evaHome">
      {/* HERO */}
      <section className="evaHero">
        <div className="evaHero__media">
          <img src="media/hero-banner-wide.webp" alt="Eva fine jewellery" />
          <div className="evaHero__veil" />
        </div>
        <div className="evaHero__inner">
          <div className="evaHero__copy">
            <div className="evaHero__eyebrow">
              <DiamondGlyph size={12} color="var(--gold)" />
              <span>Gold &amp; Diamond Park · Dubai</span>
            </div>
            <h1 className="evaHero__title">
              Bespoke fine jewellery,<br/>
              <em>certified diamonds</em> —<br/>
              ready in <span className="evaHero__num">24 hours</span>.
            </h1>
            <p className="evaHero__sub">
              Engagement rings, wedding bands and one-of-a-kind pieces — designed with you in the boutique, then crafted in-house at Gold &amp; Diamond Park.
            </p>
            <div className="evaHero__ctas">
              <button className="evaBtn evaBtn--gold evaBtn--lg" onClick={openConsult}>Book a private consultation</button>
              <a className="evaBtn evaBtn--ghost evaBtn--lg" href={"https://wa.me/" + window.EVA_FACTS.whatsapp} target="_blank" rel="noreferrer">WhatsApp the boutique</a>
            </div>
            <div className="evaHero__rating">
              <span className="evaStars">★★★★★</span>
              <span><strong>5.0</strong> · 30 reviews · Tripadvisor · #49 of 905 Shopping in Dubai</span>
            </div>
          </div>
          <aside className="evaHero__card">
            <div className="evaHero__cardEyebrow">Today at Eva</div>
            <div className="evaHero__cardRow">
              <span>Boutique</span><strong>Open · 10 – 21h</strong>
            </div>
            <div className="evaHero__cardRow">
              <span>Master jeweller</span><strong>On the bench</strong>
            </div>
            <div className="evaHero__cardRow">
              <span>Next slot</span><strong>16:00 today</strong>
            </div>
            <div className="evaHero__cardRow">
              <span>Bespoke ETA</span><strong>From under 24h</strong>
            </div>
            <button className="evaHero__cardCta" onClick={openConsult}>Reserve a slot →</button>
          </aside>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section className="evaSection evaSection--tight">
        <TrustStrip />
      </section>

      {/* SIGNATURE COLLECTIONS GRID */}
      <section className="evaSection">
        <SectionEyebrow>Signature collections</SectionEyebrow>
        <h2 className="evaH2">A small library of the things we make best.</h2>
        <p className="evaLede">Each piece is photographed in-house. Prices are indicative — your stone, metal and finishing change them.</p>
        <div className="evaCollGrid">
          {window.EVA_COLLECTIONS.map((c, i) => {
            const sample = products.find(p => p.cat === c.slug) || products[i % products.length];
            return (
              <button key={c.slug} className="evaCollCard" onClick={() => go("collections", c.slug)}>
                <div className="evaCollCard__img" style={{ background: "var(--champagne)" }}>
                  <img src={sample.image} alt={c.label} />
                </div>
                <div className="evaCollCard__meta">
                  <div className="evaCollCard__label">{c.label}</div>
                  <div className="evaCollCard__tag">{c.tagline}</div>
                </div>
              </button>
            );
          })}
        </div>
      </section>

      {/* FEATURED PIECES */}
      <section className="evaSection evaSection--dark">
        <SectionEyebrow light>This month at the boutique</SectionEyebrow>
        <h2 className="evaH2 evaH2--light">Three pieces on the velvet.</h2>
        <div className="evaFeatured">
          {featured.map((p) => (
            <article key={p.id} className="evaFeaturedCard">
              <div className="evaFeaturedCard__img">
                <img src={p.image} alt={p.name} />
              </div>
              <div className="evaFeaturedCard__meta">
                <div className="evaFeaturedCard__cat">{p.catLabel}</div>
                <h3>{p.name}</h3>
                <div className="evaFeaturedCard__tags">
                  {p.tags.map(t => <span key={t}>{t}</span>)}
                </div>
                <div className="evaFeaturedCard__price">
                  {aed(p.price)}
                  {p.wasPrice && <em>was {aed(p.wasPrice)}</em>}
                </div>
                <button className="evaBtn evaBtn--gold" onClick={openConsult}>Enquire privately</button>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* BESPOKE TEASER */}
      <section className="evaSection evaSection--bespoke">
        <div className="evaBespoke">
          <div className="evaBespoke__media">
            <img src="media/hero-portrait.webp" alt="Bespoke jewellery" />
            <div className="evaBespoke__seal">
              <DiamondGlyph size={20} color="var(--gold)" />
              <strong>24h</strong>
              <span>turnaround</span>
            </div>
          </div>
          <div className="evaBespoke__copy">
            <SectionEyebrow>The Eva bespoke service</SectionEyebrow>
            <h2 className="evaH2">Designed with you.<br/>Crafted under our roof.</h2>
            <p className="evaLede">A sketch over Arabic coffee, a CAD render the same evening, a finished ring on velvet — often inside 24 hours. Our master jewellers cut, set and polish on-site in Gold &amp; Diamond Park.</p>
            <ol className="evaBespoke__steps">
              <li><span>01</span><div><strong>Consult</strong><em>Stone, setting, story.</em></div></li>
              <li><span>02</span><div><strong>Design</strong><em>Sketch &amp; CAD render.</em></div></li>
              <li><span>03</span><div><strong>Craft</strong><em>Cast, set, polish — in-house.</em></div></li>
              <li><span>04</span><div><strong>Deliver</strong><em>From under 24 hours.</em></div></li>
            </ol>
            <div className="evaBespoke__cta">
              <button className="evaBtn evaBtn--gold" onClick={() => go("bespoke")}>Start a bespoke piece</button>
              <button className="evaBtn evaBtn--ghost" onClick={openConsult}>Or book a 45-min consult</button>
            </div>
          </div>
        </div>
      </section>

      {/* DIAMOND EDUCATION TEASER */}
      <section className="evaSection">
        <div className="evaEdu">
          <div className="evaEdu__copy">
            <SectionEyebrow>Before you choose</SectionEyebrow>
            <h2 className="evaH2">A diamond should be earned, not guessed at.</h2>
            <p className="evaLede">The Eva guide to the 4Cs, lab-grown vs natural, and the difference between GIA, IGI and HRD certification — written plainly, with no salesman tricks.</p>
            <button className="evaBtn evaBtn--dark" onClick={() => go("education")}>Read the Eva guide →</button>
          </div>
          <div className="evaEdu__pills">
            <div className="evaEdu__pill"><strong>Cut</strong><span>The brilliance multiplier.</span></div>
            <div className="evaEdu__pill"><strong>Colour</strong><span>D to Z — colourless to warm.</span></div>
            <div className="evaEdu__pill"><strong>Clarity</strong><span>From IF to I3.</span></div>
            <div className="evaEdu__pill"><strong>Carat</strong><span>Weight, not size.</span></div>
            <div className="evaEdu__pill evaEdu__pill--gold"><strong>Natural vs Lab</strong><span>Same chemistry, different price.</span></div>
            <div className="evaEdu__pill evaEdu__pill--gold"><strong>GIA · IGI · HRD</strong><span>Three certifying houses.</span></div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="evaSection evaSection--champagne">
        <SectionEyebrow>In their own words</SectionEyebrow>
        <h2 className="evaH2">Three of thirty perfect reviews.</h2>
        <div className="evaQuotes">
          {reviews.map((r, i) => (
            <figure key={i} className="evaQuote">
              <div className="evaQuote__mark">"</div>
              <blockquote>{r.quote}</blockquote>
              <figcaption>
                <strong>{r.name}</strong>
                <span>{r.date} · Tripadvisor</span>
              </figcaption>
            </figure>
          ))}
        </div>
        <div className="evaQuotes__cta">
          <a className="evaBtn evaBtn--ghost" href={window.EVA_FACTS.tripadvisorUrl} target="_blank" rel="noreferrer">Read all 30 on Tripadvisor →</a>
          <button className="evaBtn evaBtn--dark" onClick={() => go("testimonials")}>More from clients</button>
        </div>
      </section>

      {/* VISIT PREVIEW */}
      <section className="evaSection evaSection--visit">
        <div className="evaVisit">
          <div className="evaVisit__map">
            <iframe
              title="Google Maps for Eva Jewellers at Gold and Diamond Park"
              src="https://www.google.com/maps?q=Eva%20Jewellers%20Gold%20and%20Diamond%20Park%20Dubai&z=16&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
          <div className="evaVisit__copy">
            <SectionEyebrow>The boutique</SectionEyebrow>
            <h2 className="evaH2">Shop 5, Building 1.<br/>Gold &amp; Diamond Park.</h2>
            <p className="evaLede">Off Sheikh Zayed Road, Al Quoz. Ground floor. Forty paces from the main entrance. Look for the bay-window of black velvet and gold.</p>
            <dl className="evaVisit__details">
              <div><dt>Hours</dt><dd>Daily 10:00 – 21:00</dd></div>
              <div><dt>Call</dt><dd><a href={"tel:" + window.EVA_FACTS.phone.replace(/\s/g,"")}>{window.EVA_FACTS.phone}</a></dd></div>
              <div><dt>WhatsApp</dt><dd><a href={"https://wa.me/" + window.EVA_FACTS.whatsapp} target="_blank" rel="noreferrer">{window.EVA_FACTS.whatsappDisplay}</a></dd></div>
              <div><dt>Email</dt><dd><a href={"mailto:" + window.EVA_FACTS.email}>{window.EVA_FACTS.email}</a></dd></div>
            </dl>
            <button className="evaBtn evaBtn--gold" onClick={openConsult}>Reserve your appointment</button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.PageHome = PageHome;