/* eslint-disable */
const { useState, useEffect, useRef, useMemo } = React;

/* ─────────────────────────────────────────────────────────── Icons */
const Icon = {
  Star: (p) => <svg viewBox="0 0 24 24" className={p.className||"star"} aria-hidden="true"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7.1L12 17.6 5.7 21.3l1.7-7.1L2 9.5l7.1-.6z"/></svg>,
  Phone: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  WhatsApp: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.5-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5 0-.1-.6-1.5-.9-2.1-.2-.5-.5-.4-.6-.5h-.5c-.2 0-.5.1-.7.3-.9.9-1.1 2-.7 3.2.7 2 2.2 4 4.1 5.3 2.6 1.8 4.4 1.5 5.1 1.4.5-.1 1.6-.6 1.8-1.3.2-.7.2-1.2.1-1.3-.1-.2-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>,
  Calendar: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>,
  Pin: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Arrow: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  ArrowDown: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>,
  Close: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>,
  Check: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>,
  Menu: (p) => <svg width={p.size||20} height={p.size||20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>,
  Plus: (p) => <svg width={p.size||16} height={p.size||16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>,
};

/* ─────────────────────────────────────────────────────────── Brand mark */
const RozeMark = ({ size = 32, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-label="ROZE">
    <circle cx="32" cy="32" r="30" stroke={color} strokeWidth="1.2" />
    <path d="M32 14 C 40 14, 46 22, 46 32 C 46 42, 40 50, 32 50 C 24 50, 18 42, 18 32 C 18 22, 24 14, 32 14 Z" stroke={color} strokeWidth="1.2" fill="none"/>
    <path d="M32 14 L 32 50 M 18 32 L 46 32" stroke={color} strokeWidth="1.2" opacity="0.4"/>
  </svg>
);

const RozeWordmark = ({ color = "currentColor" }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 12, color }}>
    <RozeMark size={28} color={color} />
    <div style={{ lineHeight: 1 }}>
      <div className="serif" style={{ fontSize: 22, letterSpacing: "0.04em", fontWeight: 500 }}>ROZE</div>
      <div className="mono" style={{ fontSize: 8.5, letterSpacing: "0.28em", opacity: 0.7, marginTop: 2 }}>BIOHEALTH · BIODENTAL</div>
    </div>
  </div>
);

/* ─────────────────────────────────────────────────────────── Stars */
const Stars = ({ value = 4.9, size = 12 }) => (
  <div style={{ display: "inline-flex", gap: 2 }}>
    {[0,1,2,3,4].map(i => <Icon.Star key={i} className="star" />)}
  </div>
);

/* ─────────────────────────────────────────────────────────── Navbar */
function Navbar({ onBook, activeClinic, tweaks }) {
  const [scrolled, setScrolled] = useState(false);
  const [openMenu, setOpenMenu] = useState(null);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navStyle = {
    position: "sticky", top: 0, zIndex: 30,
    background: scrolled ? "rgba(245,242,236,0.92)" : "transparent",
    backdropFilter: scrolled ? "saturate(140%) blur(10px)" : "none",
    borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
    transition: "200ms ease",
  };

  return (
    <nav style={navStyle}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 32px" }}>
        <a href="#top" aria-label="ROZE BioHealth home"><RozeWordmark /></a>

        <div style={{ display: "flex", alignItems: "center", gap: 32 }} className="nav-links">
          <NavItem label="Treatments" onMouseEnter={() => setOpenMenu("treatments")} onMouseLeave={() => setOpenMenu(null)}>
            {openMenu === "treatments" && <TreatmentsMenu onClose={() => setOpenMenu(null)} />}
          </NavItem>
          <NavItem label="Clinics" onMouseEnter={() => setOpenMenu("clinics")} onMouseLeave={() => setOpenMenu(null)}>
            {openMenu === "clinics" && <ClinicsMenu onClose={() => setOpenMenu(null)} />}
          </NavItem>
          <a href="#team" className="nav-link">Team</a>
          <a href="#about" className="nav-link">About</a>
          <a href="#faircare" className="nav-link">Faircare<sup style={{fontSize:9}}>®</sup></a>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href={`https://wa.me/${activeClinic.whatsapp}`} className="btn btn-ghost btn-sm" target="_blank" rel="noopener">
            <Icon.WhatsApp size={14} /> WhatsApp
          </a>
          <button className="btn btn-primary btn-sm" onClick={onBook}>
            <Icon.Calendar size={14} /> Book an appointment
          </button>
        </div>
      </div>

      <style>{`
        .nav-link { font-size: 14px; color: var(--ink); position: relative; padding: 6px 0; transition: 140ms; }
        .nav-link:hover { color: var(--moss); }
        .nav-link::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--moss); transform:scaleX(0); transform-origin:left; transition: 240ms ease; }
        .nav-link:hover::after { transform:scaleX(1); }
        @media (max-width: 980px) {
          .nav-links { display: none; }
        }
      `}</style>
    </nav>
  );
}

function NavItem({ label, children, onMouseEnter, onMouseLeave }) {
  return (
    <div style={{ position: "relative" }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <button className="nav-link" style={{ background: "transparent", border: 0, padding: "6px 0", color: "inherit", display: "inline-flex", alignItems: "center", gap: 6 }}>
        {label}
        <Icon.ArrowDown size={12} />
      </button>
      {children}
    </div>
  );
}

function TreatmentsMenu({ onClose }) {
  return (
    <div className="card" style={{ position: "absolute", top: "calc(100% + 12px)", left: -24, width: 720, padding: 24, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, boxShadow: "var(--shadow-lift)" }}>
      {window.PILLARS.map(p => (
        <a href={`#${p.id}`} key={p.id} onClick={onClose} style={{ display: "block", padding: 12, borderRadius: 4, transition: "140ms" }} className="menu-card">
          <div className="eyebrow" style={{ marginBottom: 8 }}>{p.number} · {p.label}</div>
          <div className="serif" style={{ fontSize: 20, lineHeight: 1.15, marginBottom: 12, color: "var(--ink)" }}>{p.headline.split('.')[0]}.</div>
          <div style={{ fontSize: 12, color: "var(--slate)" }}>{p.treatments.slice(0,3).join(" · ")}</div>
        </a>
      ))}
      <style>{`.menu-card:hover { background: var(--paper-warm); }`}</style>
    </div>
  );
}

function ClinicsMenu({ onClose }) {
  return (
    <div className="card" style={{ position: "absolute", top: "calc(100% + 12px)", left: -24, width: 540, padding: 16, boxShadow: "var(--shadow-lift)" }}>
      {window.CLINICS.map(c => (
        <a href={`#clinics`} onClick={onClose} key={c.id} style={{ display: "grid", gridTemplateColumns: "64px 1fr auto", gap: 14, padding: 12, borderRadius: 4, alignItems: "center" }} className="menu-card">
          <div className="img-frame" style={{ width: 64, height: 64, borderRadius: 3 }}>
            <img src={c.image} alt="" />
          </div>
          <div>
            <div className="serif" style={{ fontSize: 18, lineHeight: 1.1 }}>{c.name}</div>
            <div style={{ fontSize: 12, color: "var(--slate)" }}>{c.short}</div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 12, color: "var(--moss)" }}>
            <Icon.Star className="star" /> {c.rating} · {c.reviews}
          </div>
        </a>
      ))}
    </div>
  );
}

/* ─────────────────────────────────────────────────────────── Hero */
function Hero({ activeClinic, setActiveClinic, onBook, tweaks }) {
  return (
    <header style={{ position: "relative", paddingTop: 24, paddingBottom: 80, overflow: "hidden" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 80, alignItems: "center", minHeight: 640 }}>
        <div className="hero-text fade-up">
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            ◆ Led by science · driven by experience · inspired by people
          </div>
          <h1 className="display" style={{ margin: 0 }}>
            Biological dentistry<br/>
            <span style={{ fontStyle: "italic", color: "var(--moss)" }}>&amp; integrative health</span>,<br/>
            across three Dubai clinics.
          </h1>

          <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--slate)", maxWidth: 540, marginTop: 32 }}>
            Founder-led by <span style={{ color: "var(--ink)" }}>Dr David Roze</span>, IAOMT ambassador and pioneer of biological dentistry in the Middle East. Rated <span style={{ color: "var(--ink)" }}>4.9★ by hundreds of patients</span>. MOH-licensed.
          </p>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 36 }}>
            <button className="btn btn-primary btn-lg" onClick={onBook}>
              <Icon.Calendar size={16} />
              Book at {activeClinic.name}
            </button>
            <a className="btn btn-ghost btn-lg" href={`https://wa.me/${activeClinic.whatsapp}`} target="_blank" rel="noopener">
              <Icon.WhatsApp size={16} />
              WhatsApp {activeClinic.name}
            </a>
          </div>

          <ClinicSelector active={activeClinic.id} onChange={(id) => setActiveClinic(window.CLINICS.find(c => c.id === id))} />
        </div>

        <div className="hero-art">
          <HeroArt clinic={activeClinic} />
        </div>
      </div>

      {/* Botanical decoration */}
      <div aria-hidden="true" style={{
        position: "absolute", top: 80, right: -40, width: 240, height: 240,
        opacity: 0.06, pointerEvents: "none",
        background: "radial-gradient(circle, var(--moss), transparent 70%)",
      }} />

      <style>{`
        @media (max-width: 980px) {
          .hero-text + .hero-art { display: none; }
          header .container { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </header>
  );
}

function HeroArt({ clinic }) {
  return (
    <div style={{ position: "relative", height: 620 }}>
      {/* Main clinic photograph */}
      <div className="img-frame" style={{
        position: "absolute", inset: 0, borderRadius: 4, overflow: "hidden",
        boxShadow: "var(--shadow-lift)",
      }}>
        <img src={clinic.hero} alt={`Inside the ${clinic.name} clinic`} key={clinic.id} style={{ animation: "fadeUp 600ms ease both" }}/>
      </div>

      {/* Floating trust card */}
      <div className="card" style={{
        position: "absolute", left: -28, bottom: 32, padding: 20, width: 260,
        background: "var(--porcelain)",
      }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>{clinic.name} clinic</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <Stars /> <span className="serif" style={{ fontSize: 22 }}>{clinic.rating}</span>
          <span style={{ fontSize: 12, color: "var(--slate)" }}>· {clinic.reviews} reviews</span>
        </div>
        <div style={{ fontSize: 12, color: "var(--slate)" }}>{clinic.short}</div>
        <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--slate)", letterSpacing: "0.1em" }}>MOH · IAOMT</div>
          <Icon.Arrow size={14} />
        </div>
      </div>

      {/* Stat chip */}
      <div className="card" style={{
        position: "absolute", right: -16, top: 36, padding: "14px 18px",
        background: "var(--ink)", color: "var(--paper)",
        borderColor: "transparent",
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", opacity: 0.7 }}>SINCE 2013</div>
        <div className="serif" style={{ fontSize: 28, lineHeight: 1, marginTop: 4 }}>3 clinics</div>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────── Clinic selector */
function ClinicSelector({ active, onChange }) {
  return (
    <div style={{ marginTop: 48 }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>Choose a clinic</div>
      <div style={{ display: "flex", gap: 0, border: "1px solid var(--rule-strong)", borderRadius: 3, padding: 4, background: "var(--porcelain)", maxWidth: 540 }}>
        {window.CLINICS.map(c => (
          <button
            key={c.id}
            onClick={() => onChange(c.id)}
            style={{
              flex: 1, padding: "12px 14px", borderRadius: 2,
              background: active === c.id ? "var(--moss)" : "transparent",
              color: active === c.id ? "var(--paper)" : "var(--ink)",
              border: 0, transition: "180ms ease",
              fontSize: 13, fontWeight: 500,
              display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2,
            }}
          >
            <span>{c.name}</span>
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", opacity: active === c.id ? 0.8 : 0.5 }}>
              {c.short.toUpperCase()}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────── Trust strip */
function TrustStrip() {
  const items = [
    { num: "4.9★", label: "Across 988+ Google reviews", mono: "VERIFIED" },
    { num: "3", label: "Dubai clinics · Jumeirah · DIFC · Greens", mono: "SINCE 2013" },
    { num: "IAOMT", label: "Ambassador, founder-led", mono: "BIOLOGICAL" },
    { num: "MOH", label: "Licensed · DHA-compliant", mono: "REGULATED" },
    { num: "Faircare®", label: "Access to care programme", mono: "INITIATIVE" },
  ];

  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "32px 0", borderTop: "1px solid var(--rule)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 24, alignItems: "center" }}>
        {items.map((it, i) => (
          <div key={i} style={{ borderLeft: i === 0 ? "none" : "1px solid rgba(245,242,236,0.15)", paddingLeft: i === 0 ? 0 : 24 }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", opacity: 0.5, marginBottom: 6 }}>{it.mono}</div>
            <div className="serif" style={{ fontSize: 22, lineHeight: 1, marginBottom: 4 }}>{it.num}</div>
            <div style={{ fontSize: 11.5, opacity: 0.7, lineHeight: 1.4 }}>{it.label}</div>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 980px) {
          section .container { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Pillars */
function Pillars({ onBook }) {
  const [active, setActive] = useState("biodental");
  const pillar = window.PILLARS.find(p => p.id === active);

  return (
    <section className="section" id="treatments" style={{ background: "var(--paper)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>◆ Three pillars · one approach</div>
            <h2 className="display">
              The same biological philosophy,<br/>
              <span style={{ fontStyle: "italic", color: "var(--moss)" }}>from the mouth outward.</span>
            </h2>
          </div>
          <a href="#" className="btn btn-ghost">All treatments <Icon.Arrow size={14}/></a>
        </div>

        {/* Pillar tabs */}
        <div style={{ display: "flex", gap: 0, borderBottom: "1px solid var(--rule-strong)", marginBottom: 0 }}>
          {window.PILLARS.map(p => (
            <button
              key={p.id}
              onClick={() => setActive(p.id)}
              style={{
                background: "transparent", border: 0, padding: "20px 24px 20px 0",
                marginRight: 36,
                position: "relative",
                display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-start",
                color: active === p.id ? "var(--ink)" : "var(--slate)",
                transition: "200ms",
              }}
            >
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", opacity: active === p.id ? 1 : 0.6 }}>{p.number}</span>
              <span className="serif" style={{ fontSize: 32, lineHeight: 1 }}>{p.label}</span>
              {active === p.id && (
                <span style={{ position: "absolute", left: 0, right: 36, bottom: -1, height: 2, background: "var(--moss)" }}/>
              )}
            </button>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, marginTop: 64, alignItems: "center" }} className="pillar-body">
          <div className="img-frame" style={{ aspectRatio: "4/5", borderRadius: 4 }}>
            <img src={pillar.image} alt={pillar.label} key={pillar.id} style={{ animation: "fadeUp 500ms ease both" }} />
          </div>
          <div key={pillar.id} className="fade-up">
            <h3 className="display" style={{ marginTop: 0, marginBottom: 24, fontSize: "clamp(28px, 3vw, 40px)" }}>{pillar.headline}</h3>
            <p style={{ fontSize: 17, color: "var(--slate)", lineHeight: 1.6, maxWidth: 520 }}>{pillar.body}</p>

            <div style={{ marginTop: 36 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Treatments include</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
                {pillar.treatments.map((t, i) => (
                  <li key={i} style={{ padding: "12px 0", borderBottom: "1px solid var(--rule)", display: "flex", alignItems: "center", gap: 10, fontSize: 14 }}>
                    <Icon.Plus size={12} />
                    {t}
                  </li>
                ))}
              </ul>
            </div>

            <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
              <button className="btn btn-primary" onClick={onBook}>Book a consultation <Icon.Arrow size={14}/></button>
              <a href="#" className="btn btn-ghost">Explore {pillar.label}</a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .pillar-body { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Why ROZE */
function WhyRoze() {
  const items = [
    { eyebrow: "01 · Biological", title: "Biocompatible by default", body: "Ceramic implants, metal-free restorations, SMART safe amalgam removal. We treat your mouth like it's connected to the rest of you — because it is." },
    { eyebrow: "02 · Integrative", title: "Dentistry & medicine, one roof", body: "Three pillars under one philosophy. Your dentist and your integrative GP work from the same chart at the same address." },
    { eyebrow: "03 · Founder-led", title: "Two decades of biological practice", body: "Founded by Dr David Roze — IAOMT ambassador, French-trained implantologist, in Dubai since 2003. The clinic is run, not delegated." },
    { eyebrow: "04 · Convenient", title: "Three clinics across Dubai", body: "Jumeirah, DIFC and The Greens. Open six to seven days a week, with branch-direct WhatsApp and tap-to-call." },
  ];

  return (
    <section className="section" style={{ background: "var(--paper-warm)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, marginBottom: 64 }} className="why-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>◆ Why ROZE</div>
            <h2 className="display">Why patients <span style={{fontStyle:"italic", color:"var(--moss)"}}>fly in</span> from across the region.</h2>
          </div>
          <div style={{ maxWidth: 520, alignSelf: "end" }}>
            <p style={{ fontSize: 17, color: "var(--slate)", lineHeight: 1.6 }}>
              We pioneered biological dentistry in the Middle East. The science is rigorous; the room feels like a living room. Patients come back, and bring their families.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule-strong)" }} className="why-grid">
          {items.map((it, i) => (
            <div key={i} style={{
              padding: "32px 28px 32px 0",
              borderRight: i < items.length - 1 ? "1px solid var(--rule-strong)" : "none",
              paddingLeft: i === 0 ? 0 : 28,
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--gold)", marginBottom: 16 }}>{it.eyebrow}</div>
              <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.15, marginTop: 0, marginBottom: 12 }}>{it.title}</h3>
              <p style={{ fontSize: 14, color: "var(--slate)", lineHeight: 1.6, margin: 0 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .why-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .why-grid { grid-template-columns: 1fr 1fr !important; }
          .why-grid > div { padding-left: 24px !important; border-bottom: 1px solid var(--rule-strong); }
          .why-grid > div:nth-child(2n) { border-right: none !important; }
        }
        @media (max-width: 600px) {
          .why-grid { grid-template-columns: 1fr !important; }
          .why-grid > div { border-right: none !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Founders */
function Founders() {
  return (
    <section className="section" id="about" style={{ background: "var(--paper)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="founders-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>◆ Meet the founders</div>
            <h2 className="display" style={{ marginBottom: 32 }}>
              A family practice,<br/>
              <span style={{ fontStyle: "italic", color: "var(--moss)" }}>built over two decades.</span>
            </h2>
            <p style={{ fontSize: 17, color: "var(--slate)", lineHeight: 1.65, maxWidth: 520 }}>
              <span style={{color:"var(--ink)"}}>Dr David Roze</span> trained in Rennes, Lille and Paris VI, then specialised in implantology and biological dentistry in Switzerland. He has practised in Dubai since 2003 and serves as an IAOMT ambassador — the only one in the region.
            </p>
            <p style={{ fontSize: 17, color: "var(--slate)", lineHeight: 1.65, maxWidth: 520, marginTop: 16 }}>
              <span style={{color:"var(--ink)"}}>Dr Agnès Roze</span>, specialist paediatric dentist, leads non-invasive children's care across all three clinics.
            </p>

            <div style={{ marginTop: 36, display: "flex", gap: 12 }}>
              <a href="#team" className="btn btn-secondary">Meet the full team <Icon.Arrow size={14}/></a>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {window.DOCTORS_HIGHLIGHT.map((d, i) => (
              <article key={d.name} className="card" style={{ overflow: "hidden", marginTop: i === 1 ? 48 : 0 }}>
                <div className="img-frame" style={{ aspectRatio: "1", background: "var(--paper-warm)" }}>
                  <img src={d.image} alt={d.name} style={{ objectFit: "cover", objectPosition: "center top" }} />
                </div>
                <div style={{ padding: 18 }}>
                  <div className="serif" style={{ fontSize: 22, lineHeight: 1.1 }}>{d.name}</div>
                  <div style={{ fontSize: 12, color: "var(--slate)", marginTop: 4, lineHeight: 1.45 }}>{d.role}</div>
                  <div style={{ marginTop: 12, display: "flex", flexWrap: "wrap", gap: 4 }}>
                    {d.creds.map(c => (
                      <span key={c} className="mono" style={{ fontSize: 9, letterSpacing: "0.1em", padding: "3px 7px", border: "1px solid var(--rule-strong)", borderRadius: 999, color: "var(--moss)" }}>{c}</span>
                    ))}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .founders-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Clinics */
function ClinicsSection({ activeClinic, setActiveClinic, onBook }) {
  const clinic = activeClinic;
  return (
    <section className="section" id="clinics" style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 48, gap: 24, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: "var(--gold-soft)" }}>◆ Our clinics</div>
            <h2 className="display" style={{ color: "var(--paper)" }}>
              Three clinics,<br/>
              <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>one philosophy.</span>
            </h2>
          </div>
          <p style={{ maxWidth: 380, color: "rgba(245,242,236,0.7)", fontSize: 15, lineHeight: 1.6 }}>
            All licensed by MOH. Each clinic carries its own character — the Jumeirah flagship, the DIFC professional address, the Greens family clinic.
          </p>
        </div>

        {/* Clinic cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 56 }} className="clinic-cards">
          {window.CLINICS.map(c => (
            <button
              key={c.id}
              onClick={() => setActiveClinic(c)}
              style={{
                textAlign: "left", padding: 0,
                background: clinic.id === c.id ? "rgba(245,242,236,0.08)" : "transparent",
                border: clinic.id === c.id ? "1px solid var(--gold-soft)" : "1px solid rgba(245,242,236,0.12)",
                borderRadius: 4, color: "inherit",
                transition: "200ms ease",
                cursor: "pointer",
                overflow: "hidden",
              }}
            >
              <div className="img-frame" style={{ aspectRatio: "16/10", background: "rgba(245,242,236,0.04)" }}>
                <img src={c.image} alt={c.name} style={{ opacity: clinic.id === c.id ? 1 : 0.7, transition: "200ms" }} />
              </div>
              <div style={{ padding: 20 }}>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--gold-soft)", marginBottom: 8 }}>{c.tagline.toUpperCase()}</div>
                <div className="serif" style={{ fontSize: 26, lineHeight: 1.1, marginBottom: 8 }}>{c.name}</div>
                <div style={{ fontSize: 12, color: "rgba(245,242,236,0.65)", display: "flex", alignItems: "center", gap: 6 }}>
                  <Icon.Pin size={12} /> {c.short}
                </div>
                <div style={{ fontSize: 12, color: "rgba(245,242,236,0.65)", display: "flex", alignItems: "center", gap: 6, marginTop: 6 }}>
                  <Icon.Star className="star" /> {c.rating} · {c.reviews} reviews
                </div>
              </div>
            </button>
          ))}
        </div>

        {/* Selected clinic details */}
        <div className="card" style={{
          background: "rgba(245,242,236,0.04)", border: "1px solid rgba(245,242,236,0.15)",
          padding: 0, color: "inherit",
          display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "hidden",
        }} key={clinic.id}>
          <div className="img-frame" style={{ minHeight: 460, background: "rgba(245,242,236,0.04)" }}>
            <img src={clinic.inside} alt={`${clinic.name} interior`} />
          </div>
          <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--gold-soft)", marginBottom: 12 }}>
              {clinic.tagline.toUpperCase()} · {clinic.type.toUpperCase()}
            </div>
            <h3 className="serif" style={{ fontSize: 40, lineHeight: 1.05, margin: 0 }}>{clinic.name} clinic</h3>
            <p style={{ color: "rgba(245,242,236,0.75)", marginTop: 16, lineHeight: 1.6 }}>{clinic.address}</p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginTop: 32, borderTop: "1px solid rgba(245,242,236,0.15)" }}>
              <div style={{ padding: "20px 24px 20px 0", borderRight: "1px solid rgba(245,242,236,0.15)" }}>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--gold-soft)", marginBottom: 8 }}>OPENING HOURS</div>
                {clinic.hours.map(([day, time]) => (
                  <div key={day} style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "3px 0", color: "rgba(245,242,236,0.85)" }}>
                    <span>{day}</span><span className="mono" style={{ fontSize: 12 }}>{time}</span>
                  </div>
                ))}
              </div>
              <div style={{ padding: "20px 0 20px 24px" }}>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--gold-soft)", marginBottom: 8 }}>CONTACT</div>
                <a href={`tel:${clinic.phoneRaw}`} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, padding: "3px 0", color: "rgba(245,242,236,0.85)" }}>
                  <Icon.Phone size={12} /> {clinic.phone}
                </a>
                <a href={`https://wa.me/${clinic.whatsapp}`} target="_blank" rel="noopener" style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, padding: "3px 0", color: "rgba(245,242,236,0.85)" }}>
                  <Icon.WhatsApp size={12} /> +{clinic.whatsapp.replace(/(\d{3})(\d{2})(\d{3})(\d{4})/, '$1 $2 $3 $4')}
                </a>
              </div>
            </div>

            <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
              <button className="btn btn-gold" onClick={onBook}>
                <Icon.Calendar size={14} /> Book at {clinic.name}
              </button>
              <a href={`https://wa.me/${clinic.whatsapp}`} className="btn" style={{ background: "transparent", color: "var(--paper)", border: "1px solid rgba(245,242,236,0.3)" }} target="_blank" rel="noopener">
                <Icon.WhatsApp size={14} /> WhatsApp
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .clinic-cards { grid-template-columns: 1fr !important; }
          #clinics .card { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Faircare */
function Faircare() {
  return (
    <section className="section" id="faircare" style={{ background: "var(--paper)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div className="img-frame" style={{ aspectRatio: "5/4", borderRadius: 4 }}>
          <img src="media/faircare-initiative.webp" alt="Faircare initiative" />
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>◆ Faircare<sup>®</sup> initiative</div>
          <h2 className="display" style={{ marginBottom: 24 }}>
            Premium care,<br/><span style={{ fontStyle: "italic", color: "var(--moss)" }}>fairly accessible.</span>
          </h2>
          <p style={{ fontSize: 17, color: "var(--slate)", lineHeight: 1.6, maxWidth: 480 }}>
            Faircare® covers up to 90% of treatment costs for qualifying UAE residents earning under AED 3,500 / month. It's our long-running commitment to the people who keep Dubai running.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 36, paddingTop: 32, borderTop: "1px solid var(--rule)" }}>
            <div>
              <div className="serif" style={{ fontSize: 48, color: "var(--moss)", lineHeight: 1 }}>90%</div>
              <div style={{ fontSize: 13, color: "var(--slate)", marginTop: 8 }}>of treatment costs covered, for qualifying patients</div>
            </div>
            <div>
              <div className="serif" style={{ fontSize: 48, color: "var(--moss)", lineHeight: 1 }}>3,500</div>
              <div style={{ fontSize: 13, color: "var(--slate)", marginTop: 8 }}>AED / month — eligibility threshold</div>
            </div>
          </div>

          <a href="#" className="btn btn-secondary" style={{ marginTop: 36 }}>About Faircare<sup>®</sup> <Icon.Arrow size={14}/></a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          #faircare .container { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Reviews */
function Reviews() {
  const [i, setI] = useState(0);
  return (
    <section className="section" style={{ background: "var(--moss-deep)", color: "var(--paper)", overflow: "hidden", position: "relative" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: "var(--gold-soft)" }}>◆ Verified reviews</div>
            <h2 className="display">
              Rated <span style={{ fontStyle: "italic", color: "var(--gold-soft)" }}>4.9★</span><br/>
              by hundreds of patients.
            </h2>
          </div>
          <div style={{ maxWidth: 360 }}>
            <p style={{ color: "rgba(245,242,236,0.7)", fontSize: 14, lineHeight: 1.6 }}>
              Combined 988+ Google reviews across Jumeirah, DIFC and The Greens. Counts verified on launch — DHA-compliant; no superlatives, no claims of "best".
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="review-grid">
          {window.REVIEW_QUOTES.map((q, idx) => (
            <article key={idx} style={{
              padding: 32, background: "rgba(245,242,236,0.05)",
              border: "1px solid rgba(245,242,236,0.12)", borderRadius: 4,
            }}>
              <Stars />
              <p className="serif" style={{ fontSize: 22, lineHeight: 1.35, marginTop: 18, marginBottom: 32, fontStyle: "italic" }}>
                "{q.text}"
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 18, borderTop: "1px solid rgba(245,242,236,0.12)" }}>
                <div style={{ width: 36, height: 36, borderRadius: 999, background: "var(--gold-soft)", color: "var(--moss-deep)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 500, fontSize: 13 }}>
                  {q.initials}
                </div>
                <div>
                  <div style={{ fontSize: 13 }}>{q.name}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--gold-soft)", marginTop: 2 }}>{q.clinic.toUpperCase()} · {q.source.toUpperCase()}</div>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div style={{ marginTop: 40, fontSize: 11, color: "rgba(245,242,236,0.4)", textAlign: "center" }} className="mono">
          ⚠ Excerpts are placeholders — to be replaced with cited, dated verified pulls before publish.
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .review-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Book CTA band */
function BookBand({ onBook, activeClinic }) {
  return (
    <section style={{ background: "var(--paper-warm)", padding: "80px 0", borderTop: "1px solid var(--rule)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 600 }}>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 56px)", margin: 0 }}>
            Ready to begin? <span style={{ fontStyle: "italic", color: "var(--moss)" }}>Book in 60 seconds.</span>
          </h2>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <button className="btn btn-primary btn-lg" onClick={onBook}>
            <Icon.Calendar size={16} /> Book an appointment
          </button>
          <a className="btn btn-secondary btn-lg" href={`tel:${activeClinic.phoneRaw}`}>
            <Icon.Phone size={16} /> Call {activeClinic.name}
          </a>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────── Footer */
function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "var(--paper)", padding: "80px 0 32px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 48, marginBottom: 64 }} className="footer-grid">
          <div>
            <RozeWordmark color="var(--paper)" />
            <p style={{ fontSize: 13, color: "rgba(245,242,236,0.6)", marginTop: 24, lineHeight: 1.6, maxWidth: 280 }}>
              Biological dentistry & integrative health, across three Dubai clinics. MOH-licensed.
            </p>
            <div style={{ marginTop: 24 }} className="mono">
              <div style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--gold-soft)" }}>BRAND</div>
              <div className="serif" style={{ fontSize: 13, marginTop: 8, color: "rgba(245,242,236,0.8)", letterSpacing: "0.04em" }}>
                LED BY SCIENCE · DRIVEN BY EXPERIENCE · INSPIRED BY PEOPLE
              </div>
            </div>
          </div>

          <FooterCol title="Treatments" links={["BioDental", "BioHealth", "BioAesthetics", "Ceramic implants", "SMART Protocol", "Invisalign®"]} />
          <FooterCol title="Clinics" links={["Jumeirah", "DIFC", "The Greens", "Map & directions"]} />
          <FooterCol title="About" links={["Our story", "Founders", "Our team", "Faircare® initiative", "Podcast", "Resources"]} />
          <FooterCol title="Patients" links={["Book an appointment", "New patient forms", "WhatsApp", "Contact", "Before & after", "Press"]} />
        </div>

        <hr className="rule" style={{ background: "rgba(245,242,236,0.12)" }} />

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, flexWrap: "wrap", gap: 16 }}>
          <div className="mono" style={{ fontSize: 11, color: "rgba(245,242,236,0.5)", letterSpacing: "0.08em" }}>
            © 2026 ROZE BIOHEALTH & BIODENTAL CLINICS · MOH 1OE3WVGN-130226
          </div>
          <div style={{ display: "flex", gap: 24, fontSize: 12, color: "rgba(245,242,236,0.6)" }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Cookies</a>
            <a href="#">DHA compliance</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </footer>
  );
}
function FooterCol({ title, links }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--gold-soft)", marginBottom: 16 }}>{title.toUpperCase()}</div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        {links.map(l => (
          <li key={l}><a href="#" style={{ display: "block", padding: "4px 0", fontSize: 13, color: "rgba(245,242,236,0.8)", transition: "140ms" }} onMouseEnter={e => e.currentTarget.style.color = "var(--gold-soft)"} onMouseLeave={e => e.currentTarget.style.color = "rgba(245,242,236,0.8)"}>{l}</a></li>
        ))}
      </ul>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────── Booking modal */
function BookingModal({ activeClinic, onClose }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ clinic: activeClinic.id, pillar: "biodental", treatment: "", name: "", phone: "", email: "", date: "", notes: "" });
  const total = 3;

  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);

  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const clinic = window.CLINICS.find(c => c.id === form.clinic);
  const pillarTreatments = window.TREATMENTS_INDEX.filter(t => t.pillar.toLowerCase() === form.pillar.toLowerCase());

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "20px 28px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--gold-soft)" }}>STEP {step} OF {total}</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>
              {step === 1 && "Choose your clinic"}
              {step === 2 && "What brings you in?"}
              {step === 3 && "Your details"}
              {step === 4 && "Request sent"}
            </div>
          </div>
          <button onClick={onClose} style={{ background: "transparent", border: 0, color: "var(--paper)", padding: 8 }}><Icon.Close size={20} /></button>
        </div>

        {/* Progress */}
        {step <= total && (
          <div style={{ height: 3, background: "var(--rule)", position: "relative" }}>
            <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${(step/total)*100}%`, background: "var(--moss)", transition: "300ms ease" }} />
          </div>
        )}

        <div style={{ padding: 32 }}>
          {step === 1 && (
            <div className="fade-up">
              <p style={{ color: "var(--slate)", marginTop: 0, fontSize: 14 }}>All three clinics share the same standard of care. Pick the most convenient.</p>
              <div style={{ display: "grid", gap: 12, marginTop: 20 }}>
                {window.CLINICS.map(c => (
                  <button key={c.id} onClick={() => upd("clinic", c.id)} style={{
                    display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16, padding: 16, alignItems: "center",
                    background: form.clinic === c.id ? "var(--paper-warm)" : "var(--porcelain)",
                    border: `1px solid ${form.clinic === c.id ? "var(--moss)" : "var(--rule-strong)"}`,
                    borderRadius: 3, cursor: "pointer", textAlign: "left",
                    transition: "140ms",
                  }}>
                    <div className="img-frame" style={{ width: 56, height: 56, borderRadius: 3 }}>
                      <img src={c.image} alt="" />
                    </div>
                    <div>
                      <div className="serif" style={{ fontSize: 20, lineHeight: 1.1 }}>{c.name}</div>
                      <div style={{ fontSize: 12, color: "var(--slate)", marginTop: 4 }}>{c.short} · {c.hours[0][1]}</div>
                    </div>
                    <div style={{ width: 22, height: 22, borderRadius: 999, border: `2px solid ${form.clinic === c.id ? "var(--moss)" : "var(--rule-strong)"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                      {form.clinic === c.id && <div style={{ width: 10, height: 10, borderRadius: 999, background: "var(--moss)" }}/>}
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="fade-up">
              <label className="label">Care area</label>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 24 }}>
                {window.PILLARS.map(p => (
                  <button key={p.id} onClick={() => upd("pillar", p.id)} style={{
                    padding: "12px 16px", textAlign: "center",
                    background: form.pillar === p.id ? "var(--moss)" : "var(--porcelain)",
                    color: form.pillar === p.id ? "var(--paper)" : "var(--ink)",
                    border: `1px solid ${form.pillar === p.id ? "var(--moss)" : "var(--rule-strong)"}`,
                    borderRadius: 3, cursor: "pointer", fontSize: 13,
                  }}>{p.label}</button>
                ))}
              </div>
              <label className="label">Treatment of interest (optional)</label>
              <select className="select" value={form.treatment} onChange={e => upd("treatment", e.target.value)}>
                <option value="">— Not sure / general consultation —</option>
                {pillarTreatments.map(t => <option key={t.name} value={t.name}>{t.name}</option>)}
              </select>
              <label className="label" style={{ marginTop: 20 }}>Anything we should know?</label>
              <textarea className="textarea" rows={3} value={form.notes} onChange={e => upd("notes", e.target.value)} placeholder="Symptoms, prior treatment, preferred language…" />
            </div>
          )}

          {step === 3 && (
            <div className="fade-up">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div>
                  <label className="label">Full name</label>
                  <input className="input" value={form.name} onChange={e => upd("name", e.target.value)} placeholder="Jane Doe" />
                </div>
                <div>
                  <label className="label">Phone</label>
                  <input className="input" value={form.phone} onChange={e => upd("phone", e.target.value)} placeholder="+971 …" />
                </div>
                <div style={{ gridColumn: "1 / -1" }}>
                  <label className="label">Email</label>
                  <input className="input" value={form.email} onChange={e => upd("email", e.target.value)} placeholder="you@example.com" />
                </div>
                <div style={{ gridColumn: "1 / -1" }}>
                  <label className="label">Preferred date</label>
                  <input className="input" type="date" value={form.date} onChange={e => upd("date", e.target.value)} />
                </div>
              </div>
              <div className="mono" style={{ fontSize: 10, color: "var(--slate)", marginTop: 20, letterSpacing: "0.08em", lineHeight: 1.5 }}>
                ⓘ We collect the minimum information needed to confirm. No health detail beyond what you've shared above. Compliant with DHA / MOH guidance.
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="fade-up" style={{ textAlign: "center", padding: "20px 0" }}>
              <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--moss)", color: "var(--paper)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
                <Icon.Check size={28}/>
              </div>
              <h3 className="serif" style={{ fontSize: 28, margin: 0 }}>Thank you, {form.name || "we'll be in touch"}.</h3>
              <p style={{ color: "var(--slate)", marginTop: 12 }}>
                Our {clinic.name} reception will confirm your appointment shortly via WhatsApp.
              </p>
              <div style={{ marginTop: 24, display: "flex", justifyContent: "center", gap: 12 }}>
                <a className="btn btn-primary" href={`https://wa.me/${clinic.whatsapp}`} target="_blank" rel="noopener">
                  <Icon.WhatsApp size={14}/> Open WhatsApp
                </a>
                <button className="btn btn-ghost" onClick={onClose}>Close</button>
              </div>
            </div>
          )}
        </div>

        {step <= total && (
          <div style={{ padding: "20px 32px", borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--paper-warm)" }}>
            <button className="btn btn-ghost btn-sm" onClick={() => step > 1 ? setStep(s => s - 1) : onClose()}>
              {step === 1 ? "Cancel" : "Back"}
            </button>
            <button className="btn btn-primary btn-sm" onClick={() => setStep(s => s + 1)} disabled={step === 3 && (!form.name || !form.phone)}>
              {step === total ? "Confirm request" : "Continue"} <Icon.Arrow size={14}/>
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────── Mobile bottom bar */
function BottomBar({ activeClinic, onBook }) {
  return (
    <div className="bottom-bar">
      <a href={`tel:${activeClinic.phoneRaw}`} style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "10px 0", gap: 2 }}>
        <Icon.Phone size={18} />
        <span style={{ fontSize: 10, letterSpacing: "0.06em" }}>Call</span>
      </a>
      <a href={`https://wa.me/${activeClinic.whatsapp}`} style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "10px 0", gap: 2 }}>
        <Icon.WhatsApp size={18} />
        <span style={{ fontSize: 10, letterSpacing: "0.06em" }}>WhatsApp</span>
      </a>
      <button onClick={onBook} style={{ background: "var(--moss)", color: "var(--paper)", border: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "10px 0", gap: 2 }}>
        <Icon.Calendar size={18}/>
        <span style={{ fontSize: 10, letterSpacing: "0.06em" }}>Book</span>
      </button>
    </div>
  );
}

Object.assign(window, {
  Icon, RozeMark, RozeWordmark, Stars,
  Navbar, Hero, TrustStrip, Pillars, WhyRoze, Founders,
  ClinicsSection, Faircare, Reviews, BookBand, Footer,
  BookingModal, BottomBar,
});
