// Eva — Education page

function PageEducation({ go, openConsult }) {
  const { useState } = React;
  const [openId, setOpenId] = useState("cut");
  const [stone, setStone] = useState("natural");

  const fourCs = [
    { id: "cut", letter: "C", title: "Cut", lede: "The one C the cutter controls.",
      body: "Cut is the geometry of the diamond's facets — the proportions, symmetry and polish that turn light into fire. A poorly cut 1.5ct stone can look duller than a perfect 1.0ct. GIA grades round brilliants Excellent → Poor. At Eva we don't sell below Very Good." },
    { id: "color", letter: "C", title: "Colour", lede: "D to Z — colourless to warm.",
      body: "D, E and F are colourless and command a premium. G–J are 'near colourless' and are where most of our brides sit — eye-clean against a face-up setting, far better value than D for a halo or a yellow-gold band." },
    { id: "clarity", letter: "C", title: "Clarity",  lede: "Inclusions, plainly explained.",
      body: "FL and IF are flawless. VVS1–VS2 inclusions are invisible without 10× magnification — our usual recommendation. SI1 and SI2 can be eye-clean depending on the inclusion's position; we'll show you under loupe before you decide." },
    { id: "carat", letter: "C", title: "Carat", lede: "Weight, not size.",
      body: "One carat is 0.2 grams. A 1.0ct round is about 6.5mm across; a 2.0ct is about 8.1mm — not double the look. We'll show you sizers on your finger before you commit. Hidden tip: stones just under round-number weights (0.9, 1.4, 1.9ct) face up almost identical, for noticeably less." },
  ];

  const certs = [
    { code: "GIA", full: "Gemological Institute of America", note: "The gold standard for natural diamonds. Strictest cut grading. We recommend GIA for any natural stone over 0.5ct.", strong: true },
    { code: "IGI", full: "International Gemological Institute", note: "Dominant for lab-grown diamonds and a major issuer for natural. Antwerp-headquartered, widely accepted.", strong: true },
    { code: "HRD", full: "Hoge Raad voor Diamant", note: "Antwerp's diamond authority — historically the European standard. Often seen on natural stones cut in Belgium.", strong: false },
  ];

  return (
    <main className="evaPage evaEduPage">
      <section className="evaSection evaEduPage__head">
        <SectionEyebrow>The Eva diamond guide</SectionEyebrow>
        <h1 className="evaH1">Plain answers to the questions every couple asks at the velvet.</h1>
        <p className="evaLede">Read this before you visit, or with us at the bench — whichever you prefer. There is no salesman trick in it.</p>
      </section>

      {/* 4Cs */}
      <section className="evaSection">
        <h2 className="evaH2">The 4Cs — but useful.</h2>
        <div className="evaFourCs">
          {fourCs.map((c) => (
            <button key={c.id} className={"evaFourC " + (openId === c.id ? "is-on" : "")} onClick={() => setOpenId(openId === c.id ? "" : c.id)}>
              <div className="evaFourC__letter">{c.letter}</div>
              <div className="evaFourC__title">{c.title}</div>
              <div className="evaFourC__lede">{c.lede}</div>
              <div className="evaFourC__chev">{openId === c.id ? "−" : "+"}</div>
            </button>
          ))}
        </div>
        {openId && (
          <div className="evaFourCBody">
            {fourCs.filter(c => c.id === openId).map(c => (
              <p key={c.id}>{c.body}</p>
            ))}
          </div>
        )}
      </section>

      {/* NATURAL VS LAB */}
      <section className="evaSection evaSection--champagne">
        <SectionEyebrow>Natural or lab-grown?</SectionEyebrow>
        <h2 className="evaH2">Same chemistry. Different price. Different story.</h2>
        <p className="evaLede">Eva sells both, honestly. The decision is yours — here is the trade-off, laid out.</p>
        <div className="evaCompare">
          <div className="evaCompareTabs">
            <button className={stone === "natural" ? "is-on" : ""} onClick={() => setStone("natural")}>Natural diamond</button>
            <button className={stone === "lab" ? "is-on" : ""} onClick={() => setStone("lab")}>Lab-grown diamond</button>
          </div>
          <div className="evaCompareGrid">
            <div>
              <h4>What it is</h4>
              <p>{stone === "natural"
                ? "Carbon crystallised under the earth's crust over billions of years; mined, cut, certified. Chemically identical to lab-grown — but with a geological provenance."
                : "Carbon crystallised in a lab over a few weeks using HPHT or CVD. Chemically and optically identical to a natural diamond — same hardness, same brilliance."}</p>
            </div>
            <div>
              <h4>Typical price</h4>
              <p>{stone === "natural"
                ? "From AED ~3,500/ct for melee up to AED 200,000+/ct for D-flawless. Our 1.31ct natural-fancy-yellow engagement ring is AED 13,335."
                : "Roughly 25–40% of a comparable natural stone. Our 2-carat lab-grown solitaire is AED 4,999; a 3.5ct pear is AED 7,499."}</p>
            </div>
            <div>
              <h4>Certification</h4>
              <p>{stone === "natural" ? "GIA is the standard. IGI and HRD also widely accepted." : "IGI dominates. GIA also grades lab-grown — its reports are clearly distinguished from natural."}</p>
            </div>
            <div>
              <h4>Resale</h4>
              <p>{stone === "natural" ? "Holds value better and is more readily resold or reset." : "Resale value is still emerging. Buy a lab-grown because you love the stone today, not as an investment."}</p>
            </div>
          </div>
        </div>
        <div className="evaCompare__cta">
          <button className="evaBtn evaBtn--gold" onClick={openConsult}>See both, side by side, in the boutique</button>
        </div>
      </section>

      {/* CERTIFICATIONS */}
      <section className="evaSection">
        <SectionEyebrow>Reading the paperwork</SectionEyebrow>
        <h2 className="evaH2">GIA, IGI, HRD — what each means.</h2>
        <p className="evaLede">Every diamond Eva sets above 0.3ct comes with a grading report. Three letters do the work.</p>
        <div className="evaCertGrid">
          {certs.map(c => (
            <div key={c.code} className={"evaCert " + (c.strong ? "is-strong" : "")}>
              <div className="evaCert__code">{c.code}</div>
              <div className="evaCert__full">{c.full}</div>
              <p>{c.note}</p>
            </div>
          ))}
        </div>
      </section>

      {/* METALS */}
      <section className="evaSection evaSection--tight">
        <SectionEyebrow>Metal &amp; setting</SectionEyebrow>
        <h2 className="evaH2">18K gold and platinum, explained.</h2>
        <div className="evaMetalGrid">
          <div className="evaMetal evaMetal--yellow">
            <div className="evaMetal__swatch" />
            <h4>18K Yellow Gold</h4>
            <p>Warm, traditional, the classic Dubai metal. 75% gold, 25% silver &amp; copper. Doesn't tarnish; needs no plating.</p>
          </div>
          <div className="evaMetal evaMetal--rose">
            <div className="evaMetal__swatch" />
            <h4>18K Rose Gold</h4>
            <p>Pink hue from a higher copper alloy. Flatters most skin tones, especially under sunlight. Doesn't fade.</p>
          </div>
          <div className="evaMetal evaMetal--white">
            <div className="evaMetal__swatch" />
            <h4>18K White Gold</h4>
            <p>Gold alloyed with palladium and rhodium-plated for a cool finish. Replating every 18–24 months — free at Eva.</p>
          </div>
          <div className="evaMetal evaMetal--platinum">
            <div className="evaMetal__swatch" />
            <h4>Platinum</h4>
            <p>Denser, naturally white, hypoallergenic, never needs plating. About 30–40% more expensive than white gold for the same piece.</p>
          </div>
        </div>
      </section>

      {/* CARE */}
      <section className="evaSection evaSection--dark">
        <SectionEyebrow light>Care &amp; aftercare</SectionEyebrow>
        <h2 className="evaH2 evaH2--light">Your ring should outlive both of us.</h2>
        <div className="evaCareGrid">
          <div><strong>Free polish &amp; repair</strong><p>Forever, on any piece bought from Eva. Drop it off, collect it sparkling.</p></div>
          <div><strong>Free rhodium replate</strong><p>For white-gold pieces, every 18–24 months — done in-house, usually same day.</p></div>
          <div><strong>Complimentary pickup &amp; drop-off</strong><p>Within Dubai, we'll come to you for cleanings and resizings.</p></div>
          <div><strong>Free worldwide shipping</strong><p>For Eva Gems online orders. Insured, tracked, signed.</p></div>
        </div>
      </section>
    </main>
  );
}

// =================== ABOUT ===================
function PageAbout({ go, openConsult }) {
  return (
    <main className="evaPage evaAboutPage">
      <section className="evaAboutHero">
        <div className="evaAboutHero__media">
          <img src="media/hero-3.webp" alt="" />
          <div className="evaAboutHero__veil" />
        </div>
        <div className="evaAboutHero__copy">
          <SectionEyebrow light>The house of Eva</SectionEyebrow>
          <h1 className="evaH1 evaH1--light">Two generations.<br/>One velvet tray.</h1>
          <p className="evaLede evaLede--light">A small Dubai boutique with a long memory — born from a 1966 family-jeweller lineage, opened on its own in 2007, and trading online today as Eva Gems.</p>
        </div>
      </section>

      <section className="evaSection">
        <div className="evaStory">
          <div className="evaStory__col">
            <div className="evaStory__year">1966</div>
            <h3>Mamiya, our family house</h3>
            <p>The story begins in 1966 with Mamiya — our parent jeweller in Dubai, founded when the city was still finding its skyline. Three generations of cutters, setters and polishers. Eva is its boutique sibling.</p>
          </div>
          <div className="evaStory__col">
            <div className="evaStory__year">2007</div>
            <h3>Eva opens at Gold &amp; Diamond Park</h3>
            <p>Shop 5, Building 1. A small space with a deliberate counter — built around a single idea: bespoke fine jewellery, certified diamonds, made on-site, fast. The under-24-hours promise dates from this year.</p>
          </div>
          <div className="evaStory__col">
            <div className="evaStory__year">Today</div>
            <h3>One brand, three names</h3>
            <p>The boutique is <strong>Eva Jewellers FZCO</strong> (the legal name on the till). The online store is <strong>Eva Gems</strong>, evagems.com. The parent group is <strong>Mamiya</strong>. They are all one family — but you only ever need to know us as Eva.</p>
          </div>
        </div>
      </section>

      <section className="evaSection evaSection--champagne">
        <div className="evaCraft">
          <div className="evaCraft__copy">
            <SectionEyebrow>Craft</SectionEyebrow>
            <h2 className="evaH2">A small bench. A long memory.</h2>
            <p className="evaLede">Our master jewellers between them have over 100 years on the bench. Most of our settings are still done by hand — the laser is for finishing, not shortcutting. We will say no to a job we can't do beautifully.</p>
            <ul className="evaCraft__list">
              <li>In-house CAD &amp; casting</li>
              <li>Master diamond setter on premises</li>
              <li>Hand-polishing &amp; rhodium plating</li>
              <li>GIA / IGI / HRD certification handling</li>
              <li>Complimentary lifetime polish &amp; repair on Eva pieces</li>
            </ul>
          </div>
          <div className="evaCraft__media">
            <img src="media/hero-4.webp" alt="" />
          </div>
        </div>
      </section>

      <section className="evaSection evaSection--tight">
        <SectionEyebrow>The names, untangled</SectionEyebrow>
        <h2 className="evaH2">If you've seen us under another name, it was still us.</h2>
        <div className="evaNames">
          <div className="evaName"><strong>Eva</strong><span>The customer-facing brand. The boutique. The wordmark. What you call us.</span></div>
          <div className="evaName"><strong>Eva Jewellers FZCO</strong><span>The legal entity. Appears on receipts, in directories, in the footer below.</span></div>
          <div className="evaName"><strong>Eva Gems</strong><span>The online storefront — evagems.com. Same boutique, same prices, free worldwide shipping.</span></div>
          <div className="evaName evaName--dim"><strong>Mamiya</strong><span>Our parent family-jeweller group, est. 1966. Where our craftspeople were trained. Not the same shop.</span></div>
        </div>
      </section>

      <section className="evaSection evaSection--dark">
        <div className="evaAboutCta">
          <h2 className="evaH2 evaH2--light">Come to the boutique.</h2>
          <p className="evaLede evaLede--light">Forty paces from the main entrance at Gold &amp; Diamond Park. The kettle's on.</p>
          <div className="evaAboutCta__btns">
            <button className="evaBtn evaBtn--gold evaBtn--lg" onClick={openConsult}>Book a private consultation</button>
            <button className="evaBtn evaBtn--ghost evaBtn--lg" onClick={() => go("visit")}>Directions &amp; hours →</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// =================== TESTIMONIALS ===================
function PageTestimonials({ go, openConsult }) {
  const reviews = window.EVA_REVIEWS;
  const facts = window.EVA_FACTS;
  return (
    <main className="evaPage evaTestPage">
      <section className="evaSection evaTestPage__head">
        <SectionEyebrow>What clients say</SectionEyebrow>
        <h1 className="evaH1">Thirty perfect reviews on Tripadvisor.<br/><em>None of them written by us.</em></h1>
        <div className="evaTaBadge">
          <div className="evaTaBadge__num">{facts.rating}<span>/5</span></div>
          <div className="evaTaBadge__meta">
            <span className="evaStars">★★★★★</span>
            <em>{facts.reviewCount} reviews · {facts.ranking}</em>
            <a href={facts.tripadvisorUrl} target="_blank" rel="noreferrer">View on Tripadvisor →</a>
          </div>
        </div>
      </section>

      <section className="evaSection evaSection--tight">
        <div className="evaTestGrid">
          {reviews.map((r, i) => (
            <figure key={i} className={"evaTestCard " + (i % 5 === 0 ? "evaTestCard--gold" : i % 5 === 2 ? "evaTestCard--dark" : "")}>
              <div className="evaTestCard__theme">{r.theme}</div>
              <blockquote>"{r.quote}"</blockquote>
              <figcaption>
                <strong>{r.name}</strong>
                <span>{r.date}</span>
              </figcaption>
              <span className="evaTestCard__source">Tripadvisor · 5★</span>
            </figure>
          ))}
        </div>
      </section>

      <section className="evaSection evaSection--champagne">
        <SectionEyebrow>Recurring themes</SectionEyebrow>
        <h2 className="evaH2">What our clients keep saying.</h2>
        <div className="evaThemes">
          <div className="evaTheme"><strong>Bespoke understood</strong><span>"Created exactly what we wanted."</span></div>
          <div className="evaTheme"><strong>Honest guidance</strong><span>"Patient, transparent, no pressure."</span></div>
          <div className="evaTheme"><strong>Fast turnaround</strong><span>"Quick", "fast", "amazing service."</span></div>
          <div className="evaTheme"><strong>Long-term trust</strong><span>"A lovely relationship over years."</span></div>
        </div>
      </section>

      <section className="evaSection evaSection--dark">
        <div className="evaAboutCta">
          <h2 className="evaH2 evaH2--light">Add the thirty-first review.</h2>
          <p className="evaLede evaLede--light">Visit us in the boutique. We'd love to earn it.</p>
          <div className="evaAboutCta__btns">
            <button className="evaBtn evaBtn--gold evaBtn--lg" onClick={openConsult}>Book a consultation</button>
            <a className="evaBtn evaBtn--ghost evaBtn--lg" href={facts.tripadvisorUrl} target="_blank" rel="noreferrer">Read all reviews →</a>
          </div>
        </div>
      </section>
    </main>
  );
}

// =================== VISIT ===================
function PageVisit({ go, openConsult }) {
  const facts = window.EVA_FACTS;
  return (
    <main className="evaPage evaVisitPage">
      <section className="evaSection evaVisitPage__head">
        <SectionEyebrow>Visit</SectionEyebrow>
        <h1 className="evaH1">Shop 5, Building 1.<br/>Gold &amp; Diamond Park.</h1>
        <p className="evaLede">Off Sheikh Zayed Road, Al Quoz Industrial Third. Forty paces from the main entrance, ground floor, look for the bay-window of black velvet and gold.</p>
      </section>

      <section className="evaSection evaSection--tight">
        <div className="evaVisitMain">
          <div className="evaVisitMain__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="evaVisitMain__panel">
            <h3>The boutique</h3>
            <dl>
              <div><dt>Address</dt><dd>Shop 5, Building 1<br/>Gold &amp; Diamond Park<br/>Sheikh Zayed Road, Al Quoz<br/>Dubai, UAE · P.O. Box 2378</dd></div>
              <div><dt>Hours</dt><dd>Monday – Sunday<br/>10:00 – 21:00</dd></div>
              <div><dt>Call</dt><dd><a href={"tel:" + facts.phone.replace(/\s/g,"")}>{facts.phone}</a></dd></div>
              <div><dt>WhatsApp</dt><dd><a href={"https://wa.me/" + facts.whatsapp} target="_blank" rel="noreferrer">{facts.whatsappDisplay}</a></dd></div>
              <div><dt>Email</dt><dd><a href={"mailto:" + facts.email}>{facts.email}</a></dd></div>
            </dl>
            <div className="evaVisitMain__btns">
              <button className="evaBtn evaBtn--gold" onClick={openConsult}>Book a consultation</button>
              <a className="evaBtn evaBtn--ghost" target="_blank" rel="noreferrer" href="https://www.google.com/maps/search/?api=1&query=Eva+Jewellers+Gold+and+Diamond+Park+Dubai">Open in Google Maps →</a>
            </div>
          </div>
        </div>
      </section>

      <section className="evaSection evaSection--champagne evaSection--tight">
        <SectionEyebrow>Getting there</SectionEyebrow>
        <h2 className="evaH2">By car, metro, or taxi.</h2>
        <div className="evaGetting">
          <div className="evaGetting__col">
            <h4>By car</h4>
            <p>Exit Sheikh Zayed Road at Umm Suqeim Road (Exit 39). Free parking at Gold &amp; Diamond Park; the bays nearest Building 1 are signposted from the main entrance.</p>
          </div>
          <div className="evaGetting__col">
            <h4>By metro</h4>
            <p>Sharaf DG station (Red line) is the closest stop — about 6 minutes by taxi from there.</p>
          </div>
          <div className="evaGetting__col">
            <h4>By taxi / rideshare</h4>
            <p>Set your drop-off as <em>Gold &amp; Diamond Park, Building 1</em>. We can also collect you from your hotel — ask about our complimentary pickup &amp; drop-off within Dubai.</p>
          </div>
        </div>
      </section>

      <section className="evaSection">
        <SectionEyebrow>FAQ</SectionEyebrow>
        <h2 className="evaH2">Before you come.</h2>
        <div className="evaFaq">
          <details>
            <summary>Do I need an appointment?</summary>
            <p>No — walk in any day, 10:00 to 21:00. But for engagement-ring or bespoke consultations, a booked slot gives you a master jeweller's undivided attention for 45 minutes, the velvet tray laid out properly, and an Arabic coffee waiting.</p>
          </details>
          <details>
            <summary>Can I see lab-grown and natural side by side?</summary>
            <p>Yes. We deliberately stock both. We will lay one of each on the velvet at your carat and colour preference so you can see — and price — the trade-off honestly.</p>
          </details>
          <details>
            <summary>Is the 24-hour bespoke promise real?</summary>
            <p>For most setting changes, ring resizings, and CAD-to-finish on simple solitaires — yes. Complex high-jewellery commissions take longer; we'll tell you the truth at consult.</p>
          </details>
          <details>
            <summary>Do you ship internationally?</summary>
            <p>Yes — free, insured, signed-for worldwide shipping through Eva Gems (evagems.com). Most destinations 3–5 working days.</p>
          </details>
          <details>
            <summary>What about repairs and resizing?</summary>
            <p>Free, forever, on any piece bought from us. Drop in or use our complimentary pickup &amp; drop-off within Dubai.</p>
          </details>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PageEducation, PageAbout, PageTestimonials, PageVisit });