/* global React, PILLARS, DOCTORS, CONTACT, LogoMark, SectionHead, ComplianceBadge */
// Remaining pages — Doctors, Doctor profile, About, Location, Before/After, Contact

const { useState: useStateAux } = React;

// =====================
// DOCTORS LIST
// =====================
const DoctorsPage = ({ go }) => {
  const [filter, setFilter] = useStateAux("all");
  const filtered = filter === "all" ? DOCTORS : DOCTORS.filter(d => d.pillar === filter);

  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="container">
          <div style={{ maxWidth: 820 }}>
            <div className="eyebrow">Our Doctors · DHA-licensed · European-trained</div>
            <h1 className="display-xl" style={{ marginTop: 20 }}>The team behind every protocol.</h1>
            <p className="body-lg" style={{ marginTop: 28, maxWidth: 640 }}>
              We publish only verified physicians — credentials, board certifications and DHA licence on file. The complete Dubai roster is being verified for publication.
            </p>
            <ComplianceBadge>DHA · licence verification in progress</ComplianceBadge>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0 8px" }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", paddingBottom: 24, borderBottom: "1px solid var(--line)" }}>
            <span className="eyebrow eyebrow-ink">Filter by pillar</span>
            <div className="chips">
              <div className={"chip " + (filter === "all" ? "active" : "")} onClick={() => setFilter("all")}>All physicians</div>
              {PILLARS.filter(p => p.id !== "le-salon").map(p => (
                <div key={p.id} className={"chip " + (filter === p.id ? "active" : "")} onClick={() => setFilter(p.id)}>{p.title.split(" — ")[0]}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 48 }}>
        <div className="container">
          <div className="doctor-grid">
            {filtered.map(d => (
              <div key={d.slug} className="doctor-card" onClick={() => go("doctor", d.slug)}>
                <div className="doctor-photo">
                  <img src={d.photo} alt={d.name} />
                  <div style={{ position: "absolute", top: 12, right: 12, padding: "4px 10px", background: "rgba(250,248,244,0.9)", fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink)", fontWeight: 500 }}>{d.status}</div>
                </div>
                <div>
                  <div className="doctor-name">{d.name}</div>
                  <div className="doctor-role">{d.role}</div>
                  <div className="doctor-lic">{d.licence}</div>
                  <div style={{ fontSize: 11, color: "var(--ink-soft)", marginTop: 8 }}>
                    {d.languages.join(" · ")} · {d.years} yrs
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// =====================
// DOCTOR PROFILE
// =====================
const DoctorProfilePage = ({ slug, go, openBooking }) => {
  const d = DOCTORS.find(x => x.slug === slug);
  if (!d) return <div className="page" style={{ padding: 80 }}>Not found.</div>;
  const pillar = PILLARS.find(p => p.id === d.pillar);

  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 56 }}>
        <div className="container">
          <button onClick={() => go("doctors")} style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 32, textAlign: "left", display: "block" }}>← All Doctors</button>
          <div className="doctor-profile">
            <div>
              <div className="doctor-photo" style={{ aspectRatio: "4/5" }}><img src={d.photo} alt={d.name} /></div>
              <div style={{ marginTop: 24, padding: 20, background: "var(--mist)", border: "1px solid var(--line)" }}>
                <div className="eyebrow eyebrow-ink" style={{ marginBottom: 12 }}>Status</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>{d.status} physician</div>
                <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 8, lineHeight: 1.55 }}>
                  {d.status === "Resident" ? "Practising regularly at the Dubai Festival City clinic." : "On visiting clinics at the Dubai Festival City flagship — please request availability."}
                </div>
              </div>
            </div>
            <div>
              <div className="eyebrow">{pillar && pillar.title}</div>
              <h1 className="display-lg" style={{ marginTop: 12 }}>{d.name}</h1>
              <p className="display-sm" style={{ color: "var(--ink-soft)", fontWeight: 300, marginTop: 8 }}>{d.role}</p>
              <p className="body-lg" style={{ marginTop: 28 }}>{d.bio}</p>

              <div style={{ marginTop: 40 }}>
                <div className="cred-row">
                  <div className="cred-lbl">DHA Licence</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--champagne-deep)" }}>{d.licence}</div>
                </div>
                <div className="cred-row">
                  <div className="cred-lbl">Specialty</div>
                  <div>{d.role}</div>
                </div>
                <div className="cred-row">
                  <div className="cred-lbl">Years in practice</div>
                  <div>{d.years} years</div>
                </div>
                <div className="cred-row">
                  <div className="cred-lbl">Languages</div>
                  <div>{d.languages.join(" · ")}</div>
                </div>
                <div className="cred-row">
                  <div className="cred-lbl">Pillar</div>
                  <div><a onClick={() => go("pillar", d.pillar)} style={{ cursor: "pointer", borderBottom: "1px solid var(--champagne)", paddingBottom: 2 }}>{pillar && pillar.title}</a></div>
                </div>
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
                <button className="btn btn-primary" onClick={openBooking}>Book with {d.name.split(" ")[0]} {d.name.split(" ")[1] || ""}</button>
                <button className="btn btn-outline" onClick={() => go("pillar", d.pillar)}>Treatments offered</button>
              </div>

              <p style={{ marginTop: 32, fontSize: 11, color: "var(--ink-soft)", lineHeight: 1.6 }}>
                <ComplianceBadge>DHA · pending</ComplianceBadge>{" "}
                Each physician's credentials, board certification and DHA licence will be confirmed prior to public listing.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// =====================
// ABOUT
// =====================
const AboutPage = ({ go }) => (
  <div className="page">
    <section className="section" style={{ paddingTop: 80 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow">About · Paris lineage, Dubai flagship</div>
            <h1 className="display-xl" style={{ marginTop: 20 }}>From the Plaine Monceau to Dubai Festival City.</h1>
          </div>
          <div>
            <p className="body-lg">
              Maison Lutétia was founded in Paris in a late-nineteenth-century Haussmann mansion on rue Ampère, in the 17th arrondissement. Its philosophy — <em className="serif" style={{ color: "var(--ink)" }}>sublimer, jamais changer</em> — has shaped a quiet, natural, doctor-led tradition of aesthetic medicine.
            </p>
            <p className="body-md" style={{ marginTop: 20 }}>
              In 2018, that tradition opened a flagship in Dubai, in partnership with Al-Futtaim — and brought, with it, the DHI hair-transplant method the Paris Maison has practised exclusively in France since 2013.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section style={{ padding: "0 0 64px" }}>
      <div style={{ maxWidth: "100%" }}>
        <img src="media/clinic-entrance.webp" alt="Dubai flagship — gold and Arabic signage" style={{ width: "100%", aspectRatio: "21/9", objectFit: "cover" }} />
      </div>
    </section>

    {/* Timeline */}
    <section className="section">
      <div className="container">
        <SectionHead num="01" title="A Parisian lineage" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {[
            { yr: "1890s", title: "The mansion", body: "A Haussmann townhouse, Plaine Monceau — the future Paris Maison." },
            { yr: "2013", title: "DHI in France", body: "Maison Lutétia begins offering Direct Hair Implantation exclusively in France." },
            { yr: "2018", title: "Dubai flagship", body: "A 2,000 m² clinic opens in Dubai Festival City, operated by Al-Futtaim." },
            { yr: "Today", title: "Five pillars", body: "Aesthetic Medicine, Dermatology, Plastic Surgery, DHI, Longevity — under one roof." }
          ].map((m, i) => (
            <div key={i} style={{ padding: 28, borderTop: "1px solid var(--ink)", borderRight: i < 3 ? "1px solid var(--line)" : "none" }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--champagne)" }}>—— {m.yr}</div>
              <div className="display-sm" style={{ marginTop: 16 }}>{m.title}</div>
              <p className="body-sm" style={{ marginTop: 12 }}>{m.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Philosophy spreads */}
    <section className="section" style={{ background: "var(--mist)" }}>
      <div className="container">
        <div className="editorial">
          <div>
            <div className="eyebrow">02 · Philosophy</div>
            <h2 className="display-lg" style={{ marginTop: 20 }}>Sublimer,<br /><em style={{ fontStyle: "italic", color: "var(--champagne-deep)" }}>jamais changer.</em></h2>
            <p className="body-lg" style={{ marginTop: 28 }}>
              Enhance, never change. We treat faces, not features. We design pathways, not menus. We sit with you — not at you — and we build protocols that honour the person looking back at you in the mirror tomorrow morning.
            </p>
            <p className="body-md" style={{ marginTop: 20 }}>
              That is the French difference. Not a price point, not a marble desk: a way of practising.
            </p>
          </div>
          <div className="bleed-image"><img src="media/lifestyle-portrait.webp" alt="" /></div>
        </div>
      </div>
    </section>

    {/* Operator & compliance */}
    <section className="section">
      <div className="container">
        <SectionHead num="03" title="Operator & accreditation" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <div>
            <div className="display-sm">Operator</div>
            <p className="body-md" style={{ marginTop: 12 }}>
              Maison Lutétia Dubai is operated by <strong style={{ color: "var(--ink)" }}>Lutetia Br Of Al Futtaim Aesthetics Clinics Single Person Company</strong> — the Al-Futtaim Health division of the Al-Futtaim Group.
            </p>
            <div style={{ marginTop: 28, padding: 20, background: "var(--mist)", borderLeft: "2px solid var(--champagne)" }}>
              <div className="eyebrow eyebrow-ink">Note · Paris ≠ Dubai</div>
              <p className="body-sm" style={{ marginTop: 8 }}>
                The Paris Maison (<em>maisonlutetia.com</em>) and the Dubai clinic (<em>lutetiaclinics.com</em>) are operationally distinct. Dubai contacts, doctors and bookings are listed only on this site.
              </p>
            </div>
          </div>
          <div>
            <div className="display-sm">Regulator</div>
            <p className="body-md" style={{ marginTop: 12 }}>
              The clinic is regulated by the <strong style={{ color: "var(--ink)" }}>Dubai Health Authority (DHA)</strong>. The establishment licence is available on request and will be published once verified.
            </p>
            <ul style={{ listStyle: "none", marginTop: 24, fontSize: 13, color: "var(--ink-soft)" }}>
              <li style={{ padding: "10px 0", borderBottom: "1px solid var(--line-soft)" }}>· DHA establishment licence (on request)</li>
              <li style={{ padding: "10px 0", borderBottom: "1px solid var(--line-soft)" }}>· Individual physician DHA licences verified per profile</li>
              <li style={{ padding: "10px 0", borderBottom: "1px solid var(--line-soft)" }}>· DHA-compliant advertising</li>
              <li style={{ padding: "10px 0", borderBottom: "1px solid var(--line-soft)" }}>· Patient consent for before/after publication</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
);

// =====================
// LOCATION
// =====================
const LocationPage = ({ openBooking }) => (
  <div className="page">
    <section className="section" style={{ paddingTop: 80, paddingBottom: 40 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "end" }}>
          <div>
            <div className="eyebrow">Dubai Location</div>
            <h1 className="display-xl" style={{ marginTop: 20 }}>Dubai Festival City Mall.<br />Ground floor.</h1>
          </div>
          <div>
            <p className="body-lg">A 2,000 m² flagship on the ground floor of Dubai Festival City Mall — opposite the VIP valet parking, with 14 treatment rooms, a VIP suite with a private entrance, and the attached Le Salon.</p>
          </div>
        </div>
      </div>
    </section>

    {/* Map placeholder — stylised */}
    <section style={{ padding: "0 32px" }}>
      <div className="map-frame">
        <svg viewBox="0 0 1200 500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1" fill="#D6CFC0" />
            </pattern>
          </defs>
          <rect width="1200" height="500" fill="#EFEAE2" />
          <rect width="1200" height="500" fill="url(#dots)" opacity="0.5" />
          {/* Roads */}
          <path d="M0 240 Q 400 200 800 280 T 1200 220" stroke="#D6CFC0" strokeWidth="22" fill="none" />
          <path d="M0 240 Q 400 200 800 280 T 1200 220" stroke="#FAF8F4" strokeWidth="14" fill="none" />
          <path d="M600 0 L 580 500" stroke="#D6CFC0" strokeWidth="14" fill="none" />
          <path d="M600 0 L 580 500" stroke="#FAF8F4" strokeWidth="8" fill="none" />
          <path d="M200 100 Q 500 250 900 380" stroke="#E5DFD5" strokeWidth="10" fill="none" />
          <path d="M200 100 Q 500 250 900 380" stroke="#FAF8F4" strokeWidth="5" fill="none" />
          {/* Water — Festival Bay */}
          <path d="M850 100 Q 950 160 1100 130 L 1200 160 L 1200 0 L 850 0 Z" fill="#DDE4E8" opacity="0.8" />
          {/* Mall block */}
          <rect x="450" y="220" width="280" height="120" fill="#FAF8F4" stroke="#B8995A" strokeWidth="1.5" />
          <text x="590" y="280" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="14" fill="#8E7138" letterSpacing="0.15em">DUBAI FESTIVAL CITY MALL</text>
          <text x="590" y="305" textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="10" fill="#3A3A3C" letterSpacing="0.1em">GROUND FLOOR</text>
          {/* Pin */}
          <g transform="translate(590, 215)">
            <circle r="22" fill="#1A1A1C" />
            <circle r="22" fill="none" stroke="#B8995A" strokeWidth="1" />
            <circle r="6" fill="#B8995A" />
          </g>
          <text x="620" y="190" fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontSize="16" fill="#1A1A1C">Maison Lutétia</text>
          {/* Compass */}
          <g transform="translate(1100, 420)">
            <circle r="30" fill="none" stroke="#3A3A3C" strokeWidth="0.5" />
            <path d="M 0 -28 L 4 0 L 0 28 L -4 0 Z" fill="#1A1A1C" />
            <text y="-38" textAnchor="middle" fontSize="10" fill="#3A3A3C">N</text>
          </g>
        </svg>
      </div>
    </section>

    {/* Visit details */}
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 64 }}>
          <div>
            <div className="eyebrow eyebrow-ink">Address</div>
            <p className="display-sm" style={{ marginTop: 12, lineHeight: 1.35 }}>
              Dubai Festival City Mall<br />
              Ground floor<br />
              Crescent Drive / Festival Blvd<br />
              Ras Al Khor (Al Kheeran 1)<br />
              Dubai, UAE
            </p>
            <div style={{ fontSize: 11, color: "var(--ink-soft)", marginTop: 16, letterSpacing: "0.08em" }}>Plus Code · 69F3+8G8</div>
          </div>
          <div>
            <div className="eyebrow eyebrow-ink">Hours</div>
            <div style={{ marginTop: 12 }}>
              {CONTACT.hours.map((h, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--line-soft)", fontSize: 14 }}>
                  <span>{h.d}</span>
                  <span style={{ color: "var(--ink-soft)", fontVariantNumeric: "tabular-nums" }}>{h.h}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="eyebrow eyebrow-ink">Contact</div>
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 16 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Clinic</div>
                <a href={"tel:" + CONTACT.phoneClinic.replace(/\s/g, "")} className="display-sm" style={{ display: "block", marginTop: 4 }}>{CONTACT.phoneClinic}</a>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Le Salon</div>
                <a href={"tel:" + CONTACT.phoneSalon.replace(/\s/g, "")} className="display-sm" style={{ display: "block", marginTop: 4 }}>{CONTACT.phoneSalon}</a>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Email</div>
                <a href={"mailto:" + CONTACT.email} style={{ fontSize: 14, marginTop: 4, display: "block", borderBottom: "1px solid var(--line)" }}>{CONTACT.email}</a>
                <div style={{ fontSize: 10, color: "var(--ink-soft)", marginTop: 6, letterSpacing: "0.08em", fontStyle: "italic" }}>to be confirmed</div>
              </div>
            </div>
            <button className="btn btn-primary" style={{ marginTop: 32 }} onClick={openBooking}>Book a Consultation</button>
          </div>
        </div>
      </div>
    </section>

    {/* Getting there */}
    <section className="section" style={{ background: "var(--mist)" }}>
      <div className="container">
        <SectionHead num="02" title="The flagship" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {[
            { img: "media/interior-2-dpa.webp", lbl: "Majlis lounge" },
            { img: "media/interior-4-dpa.webp", lbl: "Consultation rooms" },
            { img: "media/interior-7-dpa.webp", lbl: "Treatment corridor" },
            { img: "media/interior-5-dpa.webp", lbl: "Le Salon area" },
            { img: "media/interior-8-dpa.webp", lbl: "Reception detail" },
            { img: "media/interior-3-dpa.webp", lbl: "Private spaces" }
          ].map((g, i) => (
            <div key={i}>
              <div className="bleed-image" style={{ aspectRatio: "4/3" }}>
                <img src={g.img} alt={g.lbl} />
              </div>
              <div className="eyebrow eyebrow-ink" style={{ marginTop: 12 }}>{g.lbl}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
          {[
            { lbl: "Parking", body: "Opposite Mall VIP valet parking. Mall parking available throughout." },
            { lbl: "Metro", body: "Dubai Festival City is served by RTA bus links. Metro by taxi connection." },
            { lbl: "Private entrance", body: "A VIP suite with a discreet private entrance for those who prefer." },
            { lbl: "Languages", body: "Reception in English, Arabic, French. Russian on request." }
          ].map((it, i) => (
            <div key={i} style={{ padding: 24, background: "var(--porcelain)" }}>
              <div className="eyebrow">{it.lbl}</div>
              <p className="body-sm" style={{ marginTop: 12 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

// =====================
// BEFORE & AFTER (consent-gated placeholder)
// =====================
const BeforeAfterPage = ({ openBooking }) => (
  <div className="page">
    <section className="section" style={{ paddingTop: 80 }}>
      <div className="container">
        <div style={{ maxWidth: 820 }}>
          <div className="eyebrow">Before & After</div>
          <h1 className="display-xl" style={{ marginTop: 20 }}>A gallery, held in reserve.</h1>
          <p className="body-lg" style={{ marginTop: 28, maxWidth: 640 }}>
            We will publish before-and-after imagery only with explicit patient consent and in full compliance with the DHA's advertising rules. Until those clearances are in place, this gallery remains intentionally closed.
          </p>
        </div>
      </div>
    </section>

    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="locked">
          <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "8px 14px", border: "1px solid var(--line)", marginBottom: 24, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="4" y="11" width="16" height="11" rx="1" /><path d="M8 11V7a4 4 0 1 1 8 0v4" /></svg>
            Consent-gated · DHA-compliant
          </div>
          <h3 className="display-md" style={{ marginBottom: 16, color: "var(--ink)" }}>This area is intentionally empty.</h3>
          <p className="body-md" style={{ maxWidth: 540, margin: "0 auto" }}>
            Real cases will be published with patient consent, anonymised where requested, and labelled with treatment, sessions, and follow-up window. Until then, your doctor can show you cases in a private consultation.
          </p>
          <button className="btn btn-outline" style={{ marginTop: 28 }} onClick={openBooking}>
            Request a private consultation
          </button>
        </div>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <SectionHead num="01" title="What you'll see, when it's ready" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {[
            { t: "Standardised photography", d: "Same angle, same light, same lens — clinical-grade documentation." },
            { t: "Treatment & sessions", d: "Procedure, number of sessions, and the interval between baseline and follow-up." },
            { t: "Realistic expectations", d: "No retouching, no idealised hero shots. Outcome ranges, not promises." }
          ].map((s, i) => (
            <div key={i} style={{ padding: "32px 0", borderTop: "1px solid var(--ink)" }}>
              <div className="pillar-num" style={{ fontStyle: "italic" }}>0{i + 1}</div>
              <div className="display-sm" style={{ marginTop: 16 }}>{s.t}</div>
              <p className="body-sm" style={{ marginTop: 12 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

// =====================
// CONTACT
// =====================
const ContactPage = ({ openBooking }) => (
  <div className="page">
    <section className="section" style={{ paddingTop: 80 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          <div>
            <div className="eyebrow">Contact · Book a Consultation</div>
            <h1 className="display-xl" style={{ marginTop: 20 }}>Begin with a conversation.</h1>
            <p className="body-lg" style={{ marginTop: 28 }}>
              Speak to our patient coordinators, or send a short note. We respond within one business day. We keep contact forms light — please don't include medical history.
            </p>

            <div style={{ marginTop: 56 }}>
              <div className="cred-row">
                <div className="cred-lbl">Clinic</div>
                <div><a href={"tel:" + CONTACT.phoneClinic.replace(/\s/g, "")} style={{ fontFamily: "var(--font-display)", fontSize: 22 }}>{CONTACT.phoneClinic}</a></div>
              </div>
              <div className="cred-row">
                <div className="cred-lbl">Le Salon</div>
                <div><a href={"tel:" + CONTACT.phoneSalon.replace(/\s/g, "")} style={{ fontFamily: "var(--font-display)", fontSize: 22 }}>{CONTACT.phoneSalon}</a></div>
              </div>
              <div className="cred-row">
                <div className="cred-lbl">Email</div>
                <div>
                  <a href={"mailto:" + CONTACT.email} style={{ fontSize: 15, borderBottom: "1px solid var(--line)" }}>{CONTACT.email}</a>
                  <div style={{ fontSize: 10, color: "var(--ink-soft)", marginTop: 6, fontStyle: "italic", letterSpacing: "0.08em" }}>to be confirmed</div>
                </div>
              </div>
              <div className="cred-row">
                <div className="cred-lbl">WhatsApp</div>
                <div style={{ fontSize: 14, color: "var(--ink-soft)" }}>
                  Pending the verification of the Dubai WhatsApp number.<br />
                  <span style={{ fontSize: 11, fontStyle: "italic" }}>The +33 Paris WhatsApp will not be wired here — Paris and Dubai are separate operations.</span>
                </div>
              </div>
              <div className="cred-row">
                <div className="cred-lbl">Address</div>
                <div style={{ whiteSpace: "pre-line" }}>{CONTACT.address}</div>
              </div>
            </div>
          </div>

          {/* Form */}
          <div style={{ padding: 40, background: "var(--mist)", border: "1px solid var(--line)" }}>
            <div className="eyebrow">Send a note</div>
            <h3 className="display-md" style={{ marginTop: 12, marginBottom: 32 }}>Or — request a consultation.</h3>
            <ContactForm openBooking={openBooking} />
          </div>
        </div>
      </div>
    </section>
  </div>
);

const ContactForm = ({ openBooking }) => {
  const [form, setForm] = useStateAux({ name: "", phone: "", email: "", interest: "", notes: "", consent: false });
  const [sent, setSent] = useStateAux(false);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  if (sent) {
    return (
      <div>
        <div style={{ width: 56, height: 56, borderRadius: "50%", border: "1px solid var(--champagne)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--champagne)", fontSize: 22, marginBottom: 20 }}>✓</div>
        <h3 className="display-md">Merci.</h3>
        <p className="body-md" style={{ marginTop: 16 }}>We've received your note. A patient coordinator will be in touch within one business day.</p>
        <button className="btn btn-outline" style={{ marginTop: 24 }} onClick={() => setSent(false)}>Send another</button>
      </div>
    );
  }

  return (
    <form onSubmit={e => { e.preventDefault(); if (form.consent && form.name && (form.phone || form.email)) setSent(true); }}>
      <div className="form-field">
        <label className="form-label">Full name</label>
        <input className="form-input" value={form.name} onChange={e => upd("name", e.target.value)} placeholder="Mme / M." />
      </div>
      <div className="form-grid">
        <div className="form-field">
          <label className="form-label">Phone</label>
          <input className="form-input" value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="+971" />
        </div>
        <div className="form-field">
          <label className="form-label">Email</label>
          <input className="form-input" value={form.email} onChange={e => upd("email", e.target.value)} placeholder="you@example.com" />
        </div>
      </div>
      <div className="form-field">
        <label className="form-label">Treatment of interest</label>
        <select className="form-input" value={form.interest} onChange={e => upd("interest", e.target.value)}>
          <option value="">— Select —</option>
          {PILLARS.map(p => <option key={p.id} value={p.id}>{p.title}</option>)}
        </select>
      </div>
      <div className="form-field">
        <label className="form-label">Anything else?</label>
        <textarea className="form-input" rows={3} value={form.notes} onChange={e => upd("notes", e.target.value)} placeholder="(Optional) please do not include medical history." style={{ resize: "vertical", borderBottom: "1px solid var(--line)" }} />
      </div>
      <label style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 12, color: "var(--ink-soft)", lineHeight: 1.55, cursor: "pointer", marginBottom: 24 }}>
        <input type="checkbox" checked={form.consent} onChange={e => upd("consent", e.target.checked)} style={{ marginTop: 3, accentColor: "var(--ink)" }} />
        <span>I consent to be contacted by Maison Lutétia Dubai regarding this enquiry. DHA compliance applies.</span>
      </label>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <button type="submit" className="btn btn-primary" disabled={!form.consent || !form.name} style={{ opacity: form.consent && form.name ? 1 : 0.4 }}>Send note</button>
        <button type="button" className="btn btn-outline" onClick={openBooking}>Or — book now →</button>
      </div>
    </form>
  );
};

Object.assign(window, { DoctorsPage, DoctorProfilePage, AboutPage, LocationPage, BeforeAfterPage, ContactPage });