// ============================================================
// pages.jsx — All page components
// ============================================================

const { useState: useStateP, useEffect: useEffectP, useMemo } = React;

// ============================================================
// Home
// ============================================================
function HomePage({ go }) {
  const { TREATMENTS, DENTISTS, REVIEWS } = window.__VDC_DATA__;

  return (
    <div data-screen-label="01 Home">
      <section className="hero">
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <div className="eyebrow">Bonjour — welcome to Versailles</div>
              <h1 className="hero-h1" style={{ marginTop: 22 }}>
                French-heritage<br />
                dentistry, in<br />
                <em>Dubai Healthcare City.</em>
              </h1>
              <p className="hero-sub">
                A founder-led practice in DHCC since 2007 — gentle, precise and ethical care for adults, families and patients travelling for treatment. Consultations are unhurried; plans are written before any treatment is agreed.
              </p>
              <div className="hero-ctas">
                <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); go("book"); }}>
                  Book a Consultation <ArrowRight />
                </a>
                <a className="btn btn-ghost" href="tel:+97144298288">+971 4 429 8288</a>
              </div>
            </div>

            <div style={{ position: "relative" }}>
              <div className="hero-media">
                <img src="media/home-hero-1.webp" alt="Versailles Dental Clinic — clinical environment" />
                <div className="caption-card">
                  <div className="num">2007</div>
                  <div className="lbl">Founded in DHCC<br />by Dr. Dominique Caron</div>
                </div>
              </div>
              <div className="hero-marginalia">
                <span className="dot">●</span> Al Razi Complex 64<br />
                Block A · Suite 1006<br />
                Mon–Sat · 09:00–18:00<br />
                <span style={{ color: "var(--gold)" }}>Multilingual team</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <TrustStrip />

      {/* TREATMENTS */}
      <section className="section-pad" data-screen-label="Home — Treatments">
        <div className="wrap">
          <SectionHead
            num="01"
            title={<span>Treatments, planned around <em style={{ fontStyle: "italic", color: "var(--gold)" }}>your bite</em> — not a template.</span>}
            meta={<span>Nine treatment areas<br />Candidacy &amp; process for each</span>}
          />

          <div className="treatments-grid">
            {TREATMENTS.map((t, i) => (
              <button
                key={t.slug}
                className="treatment-card"
                onClick={() => go("treatment", { slug: t.slug })}
                aria-label={`Open ${t.name}`}
              >
                {t.flagship && <div className="flag">Flagship</div>}
                <div className="num">{t.num} —</div>
                <div className="name">{t.name}</div>
                <div className="desc">{t.short}</div>
                <div className="arrow">
                  <ArrowRight />
                </div>
              </button>
            ))}
          </div>

          <div style={{ marginTop: 40, display: "flex", justifyContent: "flex-end" }}>
            <a className="btn-text" href="#" onClick={(e) => { e.preventDefault(); go("treatments"); }}>
              All treatments &amp; care pathways <ArrowRight />
            </a>
          </div>
        </div>
      </section>

      {/* THE CLINIC */}
      <section className="clinic-strip" data-screen-label="Home — The Clinic">
        <div className="wrap">
          <div className="clinic-grid">
            <figure className="clinic-interior">
              <img src="media/home-section-4.webp" alt="Reception of Versailles Dental Clinic — fleur-de-lys panelling, Al Razi Complex, Dubai Healthcare City." />
              <figcaption>
                <span className="meta">FIG. 02 — Reception</span>
                <span className="loc">Al Razi Complex 64 · Block A · Suite 1006</span>
              </figcaption>
            </figure>
            <div className="clinic-copy">
              <div className="sun-mark">
                <img src="media/home-section-6.webp" alt="Gilded sun motif — Versailles iconography" />
              </div>
              <div className="eyebrow" style={{ color: "var(--gold)" }}>02 — The room you'll sit in</div>
              <h2>
                A small, <em>French</em> practice<br />
                in the heart of DHCC.
              </h2>
              <p>
                Four operatories. A reception room patterned in fleur-de-lys. No volume targets and no chairs to fill — every consultation is booked unhurried, and the schedule is built around the work, not the calendar.
              </p>
              <dl className="clinic-facts">
                <div><dt>Footprint</dt><dd>Suite 1006 · 4 operatories</dd></div>
                <div><dt>Hours</dt><dd>Mon–Sat · 09:00–18:00</dd></div>
                <div><dt>Languages</dt><dd>EN · FR · AR · RU</dd></div>
                <div><dt>Parking</dt><dd>Basement, validated</dd></div>
              </dl>
            </div>
          </div>
        </div>
      </section>

      {/* FOUNDER */}
      <section className="founder" data-screen-label="Home — Founder">
        <div className="wrap">
          <div className="founder-grid">
            <div>
              <figure className="portrait-slot portrait-filled">
                <img src="media/home-section-1.webp" alt="Dr. Dominique Caron, founder and medical director, Versailles Dental Clinic." />
                <figcaption>
                  <span className="lbl">Founder portrait</span>
                  <span className="name">Dr. Dominique Caron</span>
                </figcaption>
              </figure>
              <div style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-soft)", opacity: 0.7 }}>
                Founder · Medical Director · Since 2007
              </div>
            </div>

            <div>
              <div className="eyebrow" style={{ color: "var(--gold-soft)" }}>02 — The founder</div>
              <h2 style={{ marginTop: 24 }}>
                A <em>French</em> dentist.<br />
                A practice rooted in restraint.
              </h2>
              <p style={{ marginTop: 28 }}>
                Dr. Dominique Caron opened Versailles Dental Clinic in Dubai Healthcare City in 2007. A graduate of Paris V and a member of the French National Academy of Dental and Oral Surgery, his clinical focus is implantology and complex restorative work — the slow, surgical disciplines that reward unhurried planning.
              </p>
              <p>
                The practice he leads remains small by design: four named dentists, a multilingual front-of-house, and a published process for every treatment we offer.
              </p>

              <div className="creds">
                <div className="cred"><span className="k">Education</span><div className="v">Université René Descartes, Paris V</div></div>
                <div className="cred"><span className="k">Academy</span><div className="v">French Nat'l Oral Surgery Academy</div></div>
                <div className="cred"><span className="k">Chair</span><div className="v">Pierre Fauchard Academy — ME chapter</div></div>
                <div className="cred"><span className="k">Honour</span><div className="v">Medal of Paris — ethical research</div></div>
              </div>

              <div style={{ marginTop: 36 }}>
                <a className="btn btn-gold" href="#" onClick={(e) => { e.preventDefault(); go("dentist", { slug: "dr-dominique-caron" }); }}>
                  Read Dr. Caron's profile <ArrowRight />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DENTISTS PREVIEW */}
      <section className="section-pad" data-screen-label="Home — Dentists">
        <div className="wrap">
          <SectionHead
            num="03"
            title={<span>The team you'll meet at the chair.</span>}
            meta={<span>Four clinicians<br />All DHA-licensed</span>}
          />

          <figure className="team-banner">
            <img src="media/home-section-3.webp" alt="Versailles Dental Clinic team — four clinicians in navy scrubs at the operatory entrance." />
            <figcaption>FIG. 03 — Versailles clinical team, Dubai Healthcare City.</figcaption>
          </figure>

          <div className="dentists-grid">
            {DENTISTS.map((d) => (
              <button key={d.slug} className="dentist-card" onClick={() => go("dentist", { slug: d.slug })}>
                <div className="portrait">
                  <div className="placeholder">
                    <span className="initial">{d.initial}</span>
                    Portrait<br />consent-cleared
                  </div>
                </div>
                <div className="body">
                  <div className="role">{d.role}</div>
                  <div className="name">{d.name}</div>
                  <div className="focus">{d.focus}</div>
                  <div className="licence">DHA <b>[client to supply]</b></div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      <section className="section-pad" style={{ background: "var(--porcelain)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }} data-screen-label="Home — Reviews">
        <div className="wrap">
          <SectionHead
            num="04"
            title={<span>In our patients' words.</span>}
            meta={<span>Google ~4.9★<br />300+ reviews · re-verify on launch</span>}
          />
          <div className="reviews-grid">
            {REVIEWS.map((r, i) => (
              <div className="review" key={i}>
                <div className="stars">★★★★★</div>
                <div className="quote">"{r.quote}"</div>
                <div className="who"><b>{r.who}</b> · via {r.source}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* GALLERY teaser */}
      <section className="section-pad" data-screen-label="Home — Gallery">
        <div className="wrap">
          <SectionHead
            num="05"
            title={<span>The Smile Gallery — published <em>with consent</em>, only.</span>}
            meta={<span>DHA-compliant<br />Architecture in place</span>}
          />
          <div className="gallery-locked">
            {Array.from({ length: 8 }).map((_, i) => (
              <div className="gallery-tile" key={i}>
                <div className="icon">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <rect x="3" y="6" width="8" height="6" rx="1" stroke="currentColor" strokeWidth="1" />
                    <path d="M5 6V4.5C5 3.5 5.8 2.5 7 2.5C8.2 2.5 9 3.5 9 4.5V6" stroke="currentColor" strokeWidth="1" />
                  </svg>
                </div>
                <div className="lock">Consent-gated</div>
              </div>
            ))}
          </div>
          <p className="caption" style={{ textAlign: "center", marginTop: 24, color: "var(--slate)" }}>
            Before-and-after imagery is only published after written patient consent and DHA advertising review. Architecture is ready; awaiting cleared assets from the clinic.
          </p>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// Treatments Hub
// ============================================================
function TreatmentsHub({ go }) {
  const { TREATMENTS } = window.__VDC_DATA__;
  const flagships = TREATMENTS.filter((t) => t.flagship);
  const rest = TREATMENTS.filter((t) => !t.flagship);

  return (
    <div data-screen-label="02 Treatments">
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">Versailles / Treatments</div>
              <h1>Treatments &amp; <em>care pathways.</em></h1>
            </div>
            <p className="intro">
              Nine treatment areas, each with a published process — what it is, who it's for, the steps, recovery, and the questions patients ask most.
            </p>
          </div>
        </div>
      </section>

      {/* Flagship features */}
      <section className="section-pad">
        <div className="wrap">
          <SectionHead
            num="A"
            title={<span>Flagship care.</span>}
            meta={<span>The clinic's longest<br />and most refined disciplines</span>}
          />

          {flagships.map((t, i) => (
            <div key={t.slug} className={`treatment-feature ${i % 2 ? "flip" : ""}`}>
              <div className="img-wrap">
                <img src={t.header || t.image} alt={t.name} />
              </div>
              <div>
                <div className="caption" style={{ color: "var(--gold)" }}>{t.num} — {t.headline}</div>
                <h2 style={{ marginTop: 14, fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 400, color: "var(--royal)" }}>{t.name}</h2>
                <p style={{ marginTop: 20, color: "var(--slate)", fontSize: 17, lineHeight: 1.65 }}>{t.short}</p>
                <p style={{ color: "var(--slate)", fontSize: 15 }}>
                  Suitability is decided after a clinical examination and, where indicated, three-dimensional imaging. A written plan with options and timing is provided before any treatment begins.
                </p>
                <div style={{ marginTop: 28 }}>
                  <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); go("treatment", { slug: t.slug }); }}>
                    Open {t.name} <ArrowRight />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Rest grid */}
      <section className="section-pad" style={{ background: "var(--porcelain)", borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead
            num="B"
            title={<span>All other treatments.</span>}
            meta={<span>Routine, restorative<br />paediatric &amp; surgical care</span>}
          />

          <div className="treatments-grid">
            {rest.map((t) => (
              <button key={t.slug} className="treatment-card" onClick={() => go("treatment", { slug: t.slug })}>
                <div className="num">{t.num} —</div>
                <div className="name">{t.name}</div>
                <div className="desc">{t.short}</div>
                <div className="arrow"><ArrowRight /></div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// Treatment Detail
// ============================================================
function TreatmentDetail({ slug, go }) {
  const { TREATMENTS } = window.__VDC_DATA__;
  const t = TREATMENTS.find((x) => x.slug === slug);
  const [openFaq, setOpenFaq] = useStateP(0);

  if (!t) return (
    <div className="section-pad wrap"><h1>Treatment not found.</h1></div>
  );

  const sections = [
    { id: "overview", label: "Overview" },
    { id: "candidacy", label: "Who it's for" },
    { id: "process", label: "The process" },
    { id: "recovery", label: "Recovery" },
    { id: "faq", label: "FAQ" }
  ];

  return (
    <div data-screen-label={`Treatment — ${t.name}`}>
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">
                <a href="#" onClick={(e) => { e.preventDefault(); go("treatments"); }}>Treatments</a> / {t.name}
              </div>
              <h1>{t.name}</h1>
              <div style={{ marginTop: 18, fontSize: 19, color: "var(--slate)", maxWidth: 560 }}>{t.headline}</div>
            </div>
            <div>
              <p className="intro">{t.short}</p>
              <div style={{ marginTop: 28 }}>
                <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); go("book", { treatment: t.slug }); }}>
                  Book a {t.name} consultation <ArrowRight />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="wrap">
        <div className="tx-layout">
          <aside className="tx-side">
            <span className="label">On this page</span>
            {sections.map((s) => (
              <a key={s.id} href={`#${s.id}`}>{s.label}</a>
            ))}

            <div style={{ marginTop: 28 }}>
              <span className="label">Book directly</span>
              <a className="btn btn-ghost btn-sm" style={{ marginTop: 8 }} href="#" onClick={(e) => { e.preventDefault(); go("book", { treatment: t.slug }); }}>
                Consultation
              </a>
            </div>
          </aside>

          <div>
            <div id="overview" className="tx-block">
              <h2>What it is</h2>
              <p style={{ fontSize: 17, color: "var(--slate)" }}>
                {t.short} Suitability is decided only after a clinical examination and, where indicated, three-dimensional imaging. We provide a written plan with options, timing and indicative costs before any treatment is agreed.
              </p>
              {(t.header || t.detail) && (
                <div style={{ marginTop: 32, aspectRatio: "16/9", overflow: "hidden" }}>
                  <img src={t.header || t.detail} alt={t.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              )}
            </div>

            <div id="candidacy" className="tx-block">
              <h2>Who it's for</h2>
              <p>This treatment is most often suitable for:</p>
              <ul>{t.candidacy.map((c, i) => <li key={i}>{c}</li>)}</ul>
              <p style={{ marginTop: 24, fontSize: 14, color: "var(--slate-soft)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em", textTransform: "uppercase" }}>
                Final candidacy is confirmed only after clinical examination.
              </p>
            </div>

            <div id="process" className="tx-block">
              <h2>The process</h2>
              <div className="tx-steps">
                {t.process.map((s, i) => (
                  <div className="tx-step" key={i}>
                    <div className="n">0{i + 1}</div>
                    <div className="t">{s.t}</div>
                    <div className="d">{s.d}</div>
                  </div>
                ))}
              </div>
            </div>

            <div id="recovery" className="tx-block">
              <h2>Recovery &amp; aftercare</h2>
              <p>{t.recovery}</p>
            </div>

            <div id="faq" className="tx-block">
              <h2>Frequently asked</h2>
              {t.faq.map((f, i) => (
                <div className="faq-item" key={i}>
                  <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <span>{f.q}</span>
                    <span className="plus">{openFaq === i ? "–" : "+"}</span>
                  </button>
                  {openFaq === i && <div className="faq-a">{f.a}</div>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// Dentists index
// ============================================================
function DentistsIndex({ go }) {
  const { DENTISTS } = window.__VDC_DATA__;
  return (
    <div data-screen-label="03 Dentists">
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">Versailles / Our Dentists</div>
              <h1>Our <em>dentists.</em></h1>
            </div>
            <p className="intro">
              Four clinicians, each with a defined practice. We publish only verified credentials and DHA licence numbers — any item awaiting clinic confirmation is labelled.
            </p>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap">
          <div className="dentists-grid">
            {DENTISTS.map((d) => (
              <button key={d.slug} className="dentist-card" onClick={() => go("dentist", { slug: d.slug })}>
                <div className="portrait">
                  <div className="placeholder">
                    <span className="initial">{d.initial}</span>
                    Portrait<br />consent-cleared
                  </div>
                </div>
                <div className="body">
                  <div className="role">{d.role}</div>
                  <div className="name">{d.name}</div>
                  <div className="focus">{d.focus}</div>
                  <div className="licence">DHA <b>[client to supply]</b></div>
                </div>
              </button>
            ))}
          </div>

          <div style={{ marginTop: 48, padding: 28, background: "var(--porcelain)", border: "1px solid var(--line)", borderLeft: "2px solid var(--gold)" }}>
            <div className="caption" style={{ color: "var(--gold)", marginBottom: 8 }}>Roster note · to confirm with client</div>
            <p style={{ fontSize: 14.5, color: "var(--slate)", margin: 0 }}>
              Dr. Ammar Alyousef is listed at our practice on Doctify but is not currently named on the official team page. We will only publish a clinician here once the clinic confirms the current roster and supplies a DHA licence number.
            </p>
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// Dentist Profile
// ============================================================
function DentistProfile({ slug, go }) {
  const { DENTISTS, TREATMENTS } = window.__VDC_DATA__;
  const d = DENTISTS.find((x) => x.slug === slug);
  if (!d) return <div className="section-pad wrap"><h1>Dentist not found.</h1></div>;
  const treatments = (d.treatments || []).map((s) => TREATMENTS.find((t) => t.slug === s)).filter(Boolean);

  return (
    <div data-screen-label={`Dentist — ${d.name}`}>
      <section className="page-hero">
        <div className="wrap">
          <div className="crumb">
            <a href="#" onClick={(e) => { e.preventDefault(); go("dentists"); }}>Our Dentists</a> / {d.name}
          </div>
        </div>
      </section>

      <div className="wrap">
        <div className="dentist-profile">
          <div className="portrait-big">
            <div className="placeholder">
              <span className="initial">{d.initial}</span>
              Portrait — consent cleared<br />
              <span style={{ color: "var(--warn)" }}>[client to supply]</span>
            </div>
          </div>

          <div>
            <div className="profile-role">{d.role}</div>
            <h1 className="profile-h1">{d.name}</h1>

            <div className="profile-section">
              <h3>Practice focus</h3>
              <p style={{ fontSize: 18, color: "var(--slate)", lineHeight: 1.65 }}>{d.focus}</p>
              <p style={{ fontSize: 16, color: "var(--ink)", lineHeight: 1.7, marginTop: 16 }}>{d.bio}</p>
            </div>

            <div className="profile-section">
              <h3>Credentials</h3>
              <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: "12px 24px", borderTop: "1px solid var(--line)", paddingTop: 16 }}>
                {d.credentials.map((c, i) => (
                  <React.Fragment key={i}>
                    <div className="caption" style={{ color: "var(--slate)", padding: "8px 0", borderBottom: "1px solid var(--line)" }}>{c.k}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: c.v.includes("client") ? "var(--warn)" : "var(--ink)", padding: "8px 0", borderBottom: "1px solid var(--line)" }}>{c.v}</div>
                  </React.Fragment>
                ))}
              </div>
            </div>

            {treatments.length > 0 && (
              <div className="profile-section">
                <h3>Treatments led by {d.name.split(" ")[0]} {d.name.split(" ")[1]}</h3>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 4 }}>
                  {treatments.map((t) => (
                    <button key={t.slug} className="btn btn-ghost btn-sm" onClick={() => go("treatment", { slug: t.slug })}>
                      {t.name}
                    </button>
                  ))}
                </div>
              </div>
            )}

            <div className="profile-section" style={{ marginTop: 48 }}>
              <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); go("book", { dentist: d.slug }); }}>
                Book a consultation with {d.name.split(" ").slice(0, 2).join(" ")} <ArrowRight />
              </a>
            </div>
          </div>
        </div>
      </div>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// About
// ============================================================
function AboutPage({ go }) {
  const timeline = [
    { yr: "2007", label: "Founded", desc: "Dr. Dominique Caron opens Versailles Dental Clinic in Dubai Healthcare City." },
    { yr: "2011", label: "Implant practice", desc: "Full-arch reconstruction and bone-graft surgery added to the founder's practice." },
    { yr: "2016", label: "CAD / CAM", desc: "In-clinic CEREC workflow introduced for same-day ceramic restoration." },
    { yr: "2019", label: "Specialist team", desc: "Orthodontic specialist and multilingual restorative dentists join the team." },
    { yr: "2026", label: "Today", desc: "Four clinicians, multilingual care, in our original DHCC home." }
  ];
  return (
    <div data-screen-label="04 About">
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">Versailles / About the practice</div>
              <h1>A small practice,<br /><em>by design.</em></h1>
            </div>
            <p className="intro">
              We have been in our Dubai Healthcare City rooms since 2007. We do not aspire to grow — we aspire to do a defined list of treatments well, for a small list of patients, for a long time.
            </p>
          </div>
        </div>
      </section>

      <section className="section-pad-lg">
        <div className="wrap-text">
          <div className="about-quote">
            "Restraint is not the absence of skill. It is the discipline to stop when the work is done — and to never start something the case does not need."
            <span className="who">Dr. Dominique Caron · Founder &amp; Medical Director</span>
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ background: "var(--porcelain)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <SectionHead num="01" title="The practice in time." meta={<span>Founded 2007<br />in Dubai Healthcare City</span>} />
          <div className="timeline">
            {timeline.map((t, i) => (
              <div className="timeline-item" key={i}>
                <div className="yr">{t.yr}</div>
                <span className="label">{t.label}</span>
                <div className="desc">{t.desc}</div>
              </div>
            ))}
          </div>
          <p className="caption" style={{ marginTop: 24, color: "var(--slate)" }}>
            Note: the clinic was founded in 2007. Dr. Caron's professional career, by contrast, spans more than three decades and predates the clinic.
          </p>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap">
          <SectionHead num="02" title={<span>How we work.</span>} meta={<span>Four principles<br />held across treatments</span>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {[
              { n: "I", t: "Unhurried", d: "First visits are an hour, not fifteen minutes. We examine, photograph, plan and explain." },
              { n: "II", t: "Written plans", d: "Every plan is written down — options, sequencing, indicative costs — before treatment is agreed." },
              { n: "III", t: "Compliant", d: "We follow DHA/MOH advertising and consent guidance. No quantified outcome claims, no superlatives." },
              { n: "IV", t: "Multilingual", d: "Care delivered in English, French, Arabic and Mandarin Chinese with clinicians on the team." }
            ].map((p, i) => (
              <div key={i} style={{ padding: "32px 24px", background: "var(--porcelain)", border: "1px solid var(--line)" }}>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 28, color: "var(--gold)" }}>{p.n}.</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--royal)", marginTop: 10 }}>{p.t}</div>
                <p style={{ marginTop: 12, color: "var(--slate)", fontSize: 14.5, lineHeight: 1.6 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// Contact
// ============================================================
function ContactPage({ go }) {
  return (
    <div data-screen-label="05 Contact">
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">Versailles / Contact &amp; visit</div>
              <h1>Visit us in <em>DHCC.</em></h1>
            </div>
            <p className="intro">
              Al Razi Medical Complex 64, Dubai Healthcare City — accessible from Dubai Healthcare City Metro (Green Line), with parking in the Al Razi complex.
            </p>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap">
          <div className="contact-grid">
            <div className="info-block">
              <h3>Practice details</h3>
              <div className="info-row">
                <div className="k">Address</div>
                <div className="v">
                  Al Razi Medical Complex 64,<br />
                  Block A, 1st Floor, Suite 1006,<br />
                  Dubai Healthcare City, Dubai, UAE
                </div>
              </div>
              <div className="info-row">
                <div className="k">Telephone</div>
                <div className="v tel"><a href="tel:+97144298288">+971 4 429 8288</a></div>
              </div>
              <div className="info-row">
                <div className="k">WhatsApp</div>
                <div className="v">[client to confirm]<span className="flag-pill">Unverified</span></div>
              </div>
              <div className="info-row">
                <div className="k">Email</div>
                <div className="v"><a href="mailto:info@versaillesdentalclinic.com">info@versaillesdentalclinic.com</a></div>
              </div>
              <div className="info-row">
                <div className="k">Hours</div>
                <div className="v">
                  Mon – Sat · 09:00 – 18:00<br />
                  Sunday · closed<br />
                  <span className="caption" style={{ color: "var(--warn)" }}>Friday hours — client to confirm</span>
                </div>
              </div>
              <div className="info-row">
                <div className="k">Metro</div>
                <div className="v">Dubai Healthcare City — Green Line</div>
              </div>
              <div className="info-row">
                <div className="k">Parking</div>
                <div className="v">Al Razi paid parking on site</div>
              </div>
              <div className="info-row">
                <div className="k">DHA licence</div>
                <div className="v">[client to supply]<span className="flag-pill">Unverified</span></div>
              </div>
            </div>

            <div>
              <div className="map-pin">
                <div className="badge">Map · pin to be re-geocoded<br /><span style={{ color: "var(--gold-soft)", fontSize: 9.5 }}>schema coords look wrong — flag</span></div>
              </div>
              <div style={{ marginTop: 24, padding: 24, background: "var(--porcelain)", border: "1px solid var(--line)" }}>
                <div className="caption" style={{ color: "var(--gold)" }}>Booking</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--royal)", fontWeight: 500, marginTop: 8 }}>Quick consultation booking</h3>
                <p style={{ color: "var(--slate)", marginTop: 8 }}>The fastest way to a first visit — share four details and we will follow up by phone within one working day.</p>
                <a className="btn btn-primary" href="#" onClick={(e) => { e.preventDefault(); go("book"); }} style={{ marginTop: 16 }}>
                  Book a Consultation <ArrowRight />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// Book
// ============================================================
function BookPage({ go, route }) {
  const { TREATMENTS, DENTISTS } = window.__VDC_DATA__;
  const [submitted, setSubmitted] = useStateP(false);
  const [form, setForm] = useStateP({
    name: "",
    phone: "",
    email: "",
    treatment: route.params?.treatment || "",
    dentist: route.params?.dentist || "any",
    when: "any",
    notes: ""
  });

  function handleSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
  }

  function field(name, val) {
    setForm({ ...form, [name]: val });
  }

  return (
    <div data-screen-label="06 Book">
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">Versailles / Book a Consultation</div>
              <h1>Book a <em>consultation.</em></h1>
            </div>
            <p className="intro">
              A first visit is an hour. We examine, photograph and write a plan — there is no obligation to start treatment after a consultation.
            </p>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap">
          <div className="contact-grid">
            <div className="form-block">
              {submitted ? (
                <div className="success-state">
                  <div className="check">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                      <path d="M5 11.5L9.5 16L17 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                  <h3>Merci — your request has reached us.</h3>
                  <p>Our front-of-house team will call you back within one working day to confirm a consultation slot. <br />For anything urgent, please call <a href="tel:+97144298288" style={{ color: "var(--royal)", borderBottom: "1px solid var(--gold)" }}>+971 4 429 8288</a>.</p>
                  <div style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 12 }}>
                    <a className="btn btn-ghost btn-sm" href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>Back to home</a>
                    <a className="btn btn-primary btn-sm" href="#" onClick={(e) => { e.preventDefault(); setSubmitted(false); setForm({ name: "", phone: "", email: "", treatment: "", dentist: "any", when: "any", notes: "" }); }}>Submit another</a>
                  </div>
                </div>
              ) : (
                <form onSubmit={handleSubmit}>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500, color: "var(--royal)", marginBottom: 22 }}>
                    Tell us a little — we'll do the rest.
                  </h3>

                  <div className="form-row split">
                    <div>
                      <label>Your name</label>
                      <input type="text" required value={form.name} onChange={(e) => field("name", e.target.value)} placeholder="First and last name" />
                    </div>
                    <div>
                      <label>Phone</label>
                      <input type="tel" required value={form.phone} onChange={(e) => field("phone", e.target.value)} placeholder="+971 ..." />
                    </div>
                  </div>

                  <div className="form-row">
                    <label>Email</label>
                    <input type="email" required value={form.email} onChange={(e) => field("email", e.target.value)} placeholder="you@example.com" />
                  </div>

                  <div className="form-row split">
                    <div>
                      <label>Treatment of interest</label>
                      <select value={form.treatment} onChange={(e) => field("treatment", e.target.value)}>
                        <option value="">Select</option>
                        {TREATMENTS.map((t) => (
                          <option key={t.slug} value={t.slug}>{t.name}</option>
                        ))}
                        <option value="unsure">Not sure — please advise</option>
                      </select>
                    </div>
                    <div>
                      <label>Dentist preference</label>
                      <select value={form.dentist} onChange={(e) => field("dentist", e.target.value)}>
                        <option value="any">Any of our team</option>
                        {DENTISTS.map((d) => (
                          <option key={d.slug} value={d.slug}>{d.name}</option>
                        ))}
                      </select>
                    </div>
                  </div>

                  <div className="form-row">
                    <label>Preferred timing</label>
                    <select value={form.when} onChange={(e) => field("when", e.target.value)}>
                      <option value="any">Any working day</option>
                      <option value="weekday-am">Weekday mornings</option>
                      <option value="weekday-pm">Weekday afternoons</option>
                      <option value="saturday">Saturday</option>
                      <option value="urgent">Urgent — same day if possible</option>
                    </select>
                  </div>

                  <div className="form-row">
                    <label>Anything we should know? (optional)</label>
                    <textarea value={form.notes} onChange={(e) => field("notes", e.target.value)} placeholder="Dental anxiety, prior treatment, travelling for treatment..." />
                  </div>

                  <div className="submit-row">
                    <p className="legal">
                      Submitting shares your name, contact details and treatment interest with our front-of-house team only. No clinical information is collected here.
                    </p>
                    <button type="submit" className="btn btn-primary">
                      Send request <ArrowRight />
                    </button>
                  </div>
                </form>
              )}
            </div>

            <div>
              <div className="info-block">
                <h3>What happens next</h3>
                {[
                  { n: "01", t: "We call you back", d: "Within one working day, to confirm a slot that works for you." },
                  { n: "02", t: "First visit, one hour", d: "Examination, photographs, written plan — no obligation to start treatment." },
                  { n: "03", t: "Written plan", d: "Options, sequencing and indicative costs sent to your email within 48 hours." }
                ].map((s, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 16, padding: "16px 0", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
                    <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, color: "var(--gold)", lineHeight: 1 }}>{s.n}</div>
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 19, color: "var(--royal)", fontWeight: 500 }}>{s.t}</div>
                      <div style={{ fontSize: 14, color: "var(--slate)", marginTop: 4, lineHeight: 1.55 }}>{s.d}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 24, padding: 24, background: "var(--royal)", color: "var(--cream)", borderLeft: "2px solid var(--gold)" }}>
                <div className="caption" style={{ color: "var(--gold-soft)" }}>Urgent</div>
                <p style={{ color: "var(--cream)", marginTop: 8, fontSize: 14.5 }}>
                  Acute pain, swelling or dental trauma — please call us rather than wait for a form callback.
                </p>
                <a href="tel:+97144298288" style={{ display: "inline-block", marginTop: 8, color: "var(--gold-soft)", fontFamily: "var(--font-display)", fontSize: 22, borderBottom: "1px solid var(--gold)" }}>
                  +971 4 429 8288
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// Smile Gallery (consent-gated)
// ============================================================
function GalleryPage({ go }) {
  return (
    <div data-screen-label="07 Gallery">
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">Versailles / Smile Gallery</div>
              <h1>The Smile <em>Gallery.</em></h1>
            </div>
            <p className="intro">
              The architecture is here. The images will arrive only when each patient has given written consent and the case has been reviewed against DHA advertising guidance.
            </p>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap">
          <div style={{ padding: 32, background: "var(--porcelain)", border: "1px solid var(--line)", borderLeft: "2px solid var(--gold)", marginBottom: 48 }}>
            <div className="caption" style={{ color: "var(--gold)", marginBottom: 10 }}>Why this page is locked</div>
            <p style={{ fontSize: 15.5, color: "var(--ink)", margin: 0, lineHeight: 1.7, maxWidth: 760 }}>
              UAE Dubai Health Authority (DHA) and MOH advertising guidance is clear: before-and-after dental imagery may only be published with documented patient consent and after compliance review. Until those records are in place, this gallery ships as a structured placeholder — never a guess.
            </p>
          </div>

          <div className="gallery-locked">
            {Array.from({ length: 12 }).map((_, i) => (
              <div className="gallery-tile" key={i}>
                <div className="icon">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <rect x="3" y="6" width="8" height="6" rx="1" stroke="currentColor" strokeWidth="1" />
                    <path d="M5 6V4.5C5 3.5 5.8 2.5 7 2.5C8.2 2.5 9 3.5 9 4.5V6" stroke="currentColor" strokeWidth="1" />
                  </svg>
                </div>
                <div className="lock">{["Veneers", "Implant", "Full arch", "Whitening", "Smile design", "Crown", "Bridge", "Aligners", "Smile design", "Veneers", "Implant", "Whitening"][i]}</div>
                <div className="lock" style={{ color: "var(--gold)" }}>Consent-gated</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

// ============================================================
// Dental Tourism
// ============================================================
function TourismPage({ go }) {
  return (
    <div data-screen-label="08 Tourism">
      <section className="page-hero">
        <div className="wrap">
          <div className="page-hero-grid">
            <div>
              <div className="crumb">Versailles / Dental Tourism</div>
              <h1>Travelling for <em>treatment.</em></h1>
            </div>
            <p className="intro">
              Patients fly to us from Europe, the Gulf, China and beyond. We plan around your flight — consultation by video, imaging on arrival, treatment in a defined window, and recovery before you fly home.
            </p>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="wrap">
          <SectionHead num="01" title={<span>A planned trip, not a rushed one.</span>} meta={<span>Pre-arrival video consult<br />Imaging on arrival</span>} />

          <div className="tx-steps" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
            {[
              { t: "Enquire", d: "Share intended treatment and travel window. We respond with an outline plan." },
              { t: "Video consult", d: "30-minute pre-arrival call with your named dentist; documents shared securely." },
              { t: "Imaging & plan", d: "Imaging on the day of arrival; final treatment plan and timing agreed in clinic." },
              { t: "Treatment & follow-up", d: "Treatment performed during your stay; written follow-up plan and remote check-ins after travel." }
            ].map((s, i) => (
              <div className="tx-step" key={i}>
                <div className="n">0{i + 1}</div>
                <div className="t">{s.t}</div>
                <div className="d">{s.d}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            <div className="info-block">
              <h3>We will help with</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                <li style={{ paddingLeft: 24, position: "relative" }}><span style={{ position: "absolute", left: 0, top: 11, width: 14, height: 1, background: "var(--gold)" }}></span>Estimated treatment window and number of visits</li>
                <li style={{ paddingLeft: 24, position: "relative" }}><span style={{ position: "absolute", left: 0, top: 11, width: 14, height: 1, background: "var(--gold)" }}></span>Travel-window planning around recovery</li>
                <li style={{ paddingLeft: 24, position: "relative" }}><span style={{ position: "absolute", left: 0, top: 11, width: 14, height: 1, background: "var(--gold)" }}></span>Hotel suggestions near DHCC (no commission relationships)</li>
                <li style={{ paddingLeft: 24, position: "relative" }}><span style={{ position: "absolute", left: 0, top: 11, width: 14, height: 1, background: "var(--gold)" }}></span>Documentation for visa and medical-travel records</li>
                <li style={{ paddingLeft: 24, position: "relative" }}><span style={{ position: "absolute", left: 0, top: 11, width: 14, height: 1, background: "var(--gold)" }}></span>Follow-up by video with your home dentist where helpful</li>
              </ul>
            </div>
            <div className="info-block">
              <h3>Languages spoken in clinic</h3>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px 20px", marginTop: 8 }}>
                {[
                  { l: "English", who: "All clinicians" },
                  { l: "French", who: "Dr. Caron" },
                  { l: "Mandarin Chinese", who: "Dr. Su" },
                  { l: "Arabic", who: "Reception" }
                ].map((x, i) => (
                  <div key={i} style={{ paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--royal)" }}>{x.l}</div>
                    <div className="caption" style={{ color: "var(--slate)" }}>{x.who}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTABand go={go} />
    </div>
  );
}

Object.assign(window, {
  HomePage, TreatmentsHub, TreatmentDetail, DentistsIndex, DentistProfile,
  AboutPage, ContactPage, BookPage, GalleryPage, TourismPage
});