/* eslint-disable */
/* Kaya UAE — main app */

const { useState, useEffect, useRef, useMemo } = React;

/* ─────────── helpers ─────────── */
function Icon({ name, size = 16 }) {
  const s = size;
  const stroke = "currentColor";
  if (name === "arrow") return (
    <svg className="arrow" width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  if (name === "phone") return (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M3 3l2-1 2 3-1.5 1c.5 1.5 2 3 3.5 3.5L10 8l3 2-1 2c-4 1-9-4-9-9z" stroke={stroke} strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
  if (name === "close") return (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M4 4l8 8M12 4l-8 8" stroke={stroke} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
  if (name === "lock") return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <rect x="5" y="11" width="14" height="9" rx="2" stroke={stroke} strokeWidth="1.5"/>
      <path d="M8 11V8a4 4 0 018 0v3" stroke={stroke} strokeWidth="1.5"/>
    </svg>
  );
  if (name === "check") return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5 12l5 5L20 7" stroke={stroke} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  if (name === "pin") return (
    <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
      <path d="M8 14s5-4.5 5-9a5 5 0 10-10 0c0 4.5 5 9 5 9z" stroke={stroke} strokeWidth="1.5"/>
      <circle cx="8" cy="5.5" r="1.8" stroke={stroke} strokeWidth="1.5"/>
    </svg>
  );
  if (name === "whats") return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5 19l1.5-4A8 8 0 1112 20a8 8 0 01-3.5-.8L5 19z" stroke={stroke} strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
  return null;
}

function Brand() {
  return (
    <a href="#" className="brand" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
      <span className="mark">kaya</span>
      <small>Skin Clinic · UAE</small>
    </a>
  );
}

/* ─────────── Topbar + Nav ─────────── */
function TopBar({ openBooking }) {
  return (
    <div className="topbar">
      <div className="topbar-inner">
        <div className="links">
          <span>15 clinics across the UAE — Dubai · Abu Dhabi · Sharjah · Al Ain · Fujairah · RAK</span>
        </div>
        <div className="links">
          <a href="#"><Icon name="whats" size={12}/>&nbsp; WhatsApp · pending</a>
          <a href="tel:+9718005292"><Icon name="phone" size={12}/>&nbsp; 800 SKIN · 800 5292</a>
          <a href="#" onClick={(e) => { e.preventDefault(); }}>EN · العربية</a>
        </div>
      </div>
    </div>
  );
}

function Nav({ openBooking, scrollTo }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Brand/>
        <div className="nav-links">
          <a href="#treatments" onClick={(e) => { e.preventDefault(); scrollTo('treatments'); }}>Treatments</a>
          <a href="#solutions" onClick={(e) => { e.preventDefault(); scrollTo('solutions'); }}>Solutions</a>
          <a href="#concerns" onClick={(e) => { e.preventDefault(); scrollTo('concerns'); }}>Concerns</a>
          <a href="#doctors" onClick={(e) => { e.preventDefault(); scrollTo('doctors'); }}>Doctors</a>
          <a href="#clinics" onClick={(e) => { e.preventDefault(); scrollTo('clinics'); }}>Clinics</a>
          <a href="#about" onClick={(e) => { e.preventDefault(); scrollTo('about'); }}>About</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn--ghost btn--sm" href="tel:+9718005292">
            <Icon name="phone" size={14}/> 800&nbsp;SKIN
          </a>
          <button className="btn btn--rose btn--sm" onClick={openBooking}>
            Book consultation <Icon name="arrow"/>
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ─────────── Hero ─────────── */
function Hero({ openBooking, scrollTo, tweaks }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="hero-eyebrow-row">
              <span className="eyebrow"><span className="dot"></span>DHA-licensed dermatology</span>
              <span className="kicker">UAE · since 2003*</span>
            </div>
            <h1 className="display h1 hero-title">
              The first<br/>
              <span className="accent italic">consultation</span><br/>
              is the treatment.
            </h1>
            <p className="lede hero-lede">
              A dermatologist looks at your skin and your history before anything else is suggested.
              Fifteen clinics across the Emirates, one shared standard of care.
            </p>
            <div className="hero-ctas">
              <button className="btn btn--primary" onClick={openBooking}>
                Book a consultation <Icon name="arrow"/>
              </button>
              <button className="btn btn--ghost" onClick={() => scrollTo('clinics')}>
                Find your clinic <Icon name="pin" size={14}/>
              </button>
            </div>
            <div className="hero-meta">
              <div>
                <div className="num">350,000<sup>+</sup></div>
                <div className="lbl">Customers trusted with their skin</div>
                <div className="src">Attributed — Kaya UAE</div>
              </div>
              <div>
                <div className="num">15</div>
                <div className="lbl">UAE clinics, six emirates</div>
                <div className="src">Verified — clinic finder</div>
              </div>
              <div>
                <div className="num">23<sup>+</sup></div>
                <div className="lbl">Years dermatologist-led care</div>
                <div className="src">*founding 2003 — to verify</div>
              </div>
            </div>
          </div>

          <div className="hero-media">
            <img src={tweaks.heroImage} alt="Skin treatment in clinic"/>
            <div className="hero-tag">Advertisement Licence · RLEZ0E7S-070526</div>
          </div>
        </div>
      </div>

      <ConcernsBar/>
    </section>
  );
}

function ConcernsBar() {
  const [active, setActive] = useState(null);
  return (
    <div className="concerns-bar" id="concerns">
      <div className="concerns-inner">
        <div className="concerns-label">Start with a concern →</div>
        <div className="concerns-scroll">
          {CONCERNS.map((c) => (
            <button key={c.id}
              className={"chip rose " + (active === c.id ? "active" : "")}
              onClick={() => setActive(c.id === active ? null : c.id)}>
              {c.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ─────────── Treatments ─────────── */
function Treatments({ openDrawer }) {
  const cats = ["All", "Skin", "Hair", "Body", "Surgical", "Programme"];
  const [filter, setFilter] = useState("All");
  const list = filter === "All" ? TREATMENTS : TREATMENTS.filter(t => t.category === filter);
  return (
    <section className="section" id="treatments">
      <div className="container">
        <div className="sec-head">
          <div className="title">
            <span className="eyebrow"><span className="dot"></span>Treatments — 02</span>
            <h2 className="display h2">Outcome-led, <em className="italic">not list-led.</em></h2>
            <p>Every Kaya treatment page sets out who it's for, how it works and what to expect — accurate, compliant, and never with a guaranteed result.</p>
          </div>
          <div className="actions" style={{flexWrap: "wrap"}}>
            {cats.map(c => (
              <button key={c} className={"chip " + (filter === c ? "active" : "")} onClick={() => setFilter(c)}>{c}</button>
            ))}
          </div>
        </div>
        <div className="treatment-grid">
          {list.map(t => (
            <article key={t.id} className="t-card" onClick={() => openDrawer(t.id)}>
              <div className="t-card-media">
                <img className="t-card-img" src={t.image} alt={t.title}/>
              </div>
              <div className="t-card-body">
                <span className="num">{t.num} · {t.category}</span>
                <h3>{t.title}</h3>
                <p>{t.blurb}</p>
                <div className="t-card-link">Read full protocol <Icon name="arrow" size={14}/></div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Solutions ─────────── */
function Solutions() {
  return (
    <section className="section-tight" id="solutions" style={{background: 'var(--paper-2)'}}>
      <div className="container">
        <div className="sec-head">
          <div className="title">
            <span className="eyebrow"><span className="dot"></span>Solutions — 03</span>
            <h2 className="display h2">Named devices.<br/><em className="italic">Named protocols.</em></h2>
            <p>The "how" behind each treatment — third-party devices and clinical protocols, presented with their proper names and not as proprietary magic.</p>
          </div>
          <div className="actions">
            <a className="btn btn--text" href="#">All solutions <Icon name="arrow"/></a>
          </div>
        </div>
        <div className="solutions-row">
          {SOLUTIONS.map(s => (
            <div key={s.id} className="sol-cell">
              <div className="kind">{s.kind}</div>
              <div className="name">{s.name}</div>
              <p className="desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Editorial split — About ─────────── */
function About() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="split">
          <div className="split-media">
            <img src="media/about-history-science.webp" alt="Kaya UAE — history"/>
          </div>
          <div className="split-body">
            <span className="eyebrow"><span className="dot"></span>About — 04</span>
            <h2 className="display h2">A clinic chain that grew up with the country.</h2>
            <p className="lede">
              Kaya Middle East FZE opened its first UAE clinic in the early 2000s. Today the network spans fifteen
              locations across six emirates — one team, one standard of care, one number to call.
            </p>
            <div className="split-list">
              <div className="row">
                <div className="num">01</div>
                <div>
                  <h4>Dermatologist-led, not influencer-led</h4>
                  <p>Every plan begins with a licensed dermatologist or aesthetic physician — not a sales counter.</p>
                </div>
              </div>
              <div className="row">
                <div className="num">02</div>
                <div>
                  <h4>DHA-compliant by default</h4>
                  <p>Our copy, our consent forms and our before-and-after policy are written to the standard the regulator expects.</p>
                </div>
              </div>
              <div className="row">
                <div className="num">03</div>
                <div>
                  <h4>One chain, one record</h4>
                  <p>Move between branches without restarting your history — your file follows you.</p>
                </div>
              </div>
              <div className="row">
                <div className="num">04</div>
                <div>
                  <h4>Superbrand — attributed</h4>
                  <p>Recognised as a Superbrand UAE's Choice. A marketing recognition, not a clinical claim.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Doctors ─────────── */
function Doctors() {
  return (
    <section className="section-tight" id="doctors">
      <div className="container">
        <div className="sec-head">
          <div className="title">
            <span className="eyebrow"><span className="dot"></span>Doctors — 05</span>
            <h2 className="display h2">Meet the practitioners.</h2>
            <p>Every clinician below will be published with name, photograph, DHA licence number and specialty — once each profile has been individually verified. Until then the roster sits behind a verification gate, not a stock photo.</p>
          </div>
          <div className="actions">
            <a className="btn btn--text" href="#">Full medical team <Icon name="arrow"/></a>
          </div>
        </div>
        <div className="doctors-grid">
          {DOCTORS.map(d => (
            <article key={d.id} className="doctor">
              <div className="doctor-portrait">
                <div className="placeholder">
                  Doctor portrait — pending verification
                </div>
              </div>
              <div className="doctor-meta">
                <div className="name">Dr. — pending</div>
                <div className="title">{d.specialty} · {d.branches}</div>
                <div className="lic">
                  <span className="badge"></span> DHA licence to verify
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── Clinic finder ─────────── */
function ClinicFinder() {
  const [emirate, setEmirate] = useState("All");
  const [active, setActive] = useState(CLINICS[0].id);
  const list = emirate === "All" ? CLINICS : CLINICS.filter(c => c.city === emirate);
  const activeClinic = CLINICS.find(c => c.id === active);
  return (
    <section className="section" id="clinics">
      <div className="container">
        <div className="finder">
          <div className="finder-head">
            <div>
              <span className="eyebrow" style={{color: 'var(--rose-soft)'}}><span className="dot"></span>Clinics — 06</span>
              <h2 className="display h2">Fifteen clinics.<br/><em className="italic">Six emirates.</em></h2>
              <p>Server-rendered branch data — addresses verified from the live clinic finder. Hours, per-branch phones and coordinates flagged for client confirmation.</p>
            </div>
            <div className="finder-filters">
              {EMIRATES.map(e => (
                <button key={e} className={"chip " + (emirate === e ? "active" : "")} onClick={() => setEmirate(e)}>{e}</button>
              ))}
            </div>
          </div>

          <div className="finder-body">
            <div className="clinic-list">
              {list.map((c, i) => (
                <div key={c.id}
                  className={"clinic-row " + (active === c.id ? "active" : "")}
                  onClick={() => setActive(c.id)}>
                  <div className="idx">{String(CLINICS.indexOf(c) + 1).padStart(2, '0')}</div>
                  <div>
                    <div className="name">{c.name}</div>
                    <div className="city">{c.city}</div>
                    <div className="addr">{c.addr}</div>
                  </div>
                  <div className="go"><Icon name="arrow" size={14}/></div>
                </div>
              ))}
            </div>
            <ClinicMap clinics={list} active={active} setActive={setActive}/>
          </div>

          <div className="finder-foot">
            <span>{list.length} clinic{list.length === 1 ? '' : 's'} · {emirate}</span>
            <span>Per-branch hours, phones & map coordinates → client confirmation</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClinicMap({ clinics, active, setActive }) {
  return (
    <div className="clinic-map">
      <div className="map-label" style={{ top: '14%', left: '60%' }}>RAS AL KHAIMAH</div>
      <div className="map-label" style={{ top: '34%', left: '44%' }}>SHARJAH</div>
      <div className="map-label" style={{ top: '32%', left: '70%' }}>FUJAIRAH</div>
      <div className="map-label" style={{ top: '50%', left: '32%' }}>DUBAI</div>
      <div className="map-label" style={{ top: '60%', left: '14%' }}>ABU DHABI</div>
      <div className="map-label" style={{ top: '78%', left: '40%' }}>AL AIN</div>

      {/* faux Gulf coastline */}
      <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:.18,pointerEvents:'none'}} viewBox="0 0 100 100" preserveAspectRatio="none">
        <path d="M 0 84 Q 8 72 14 70 T 24 58 T 32 50 T 40 38 T 48 30 T 60 18 T 78 14 T 100 8" stroke="#FAF6F2" strokeWidth="0.4" fill="none"/>
      </svg>

      {clinics.map(c => (
        <div key={c.id}
          className={"map-pin " + (active === c.id ? "active" : "")}
          style={{ left: `${c.x * 100}%`, top: `${c.y * 100}%` }}
          onClick={() => setActive(c.id)}>
          <span className="label">{c.name}</span>
        </div>
      ))}
    </div>
  );
}

/* ─────────── Trust band ─────────── */
function Trust() {
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-row">
          <div>
            <span className="eyebrow"><span className="dot"></span>Built on attributable trust — 07</span>
            <h2 className="display h2" style={{marginTop: 14}}>Numbers we'll <em className="italic">stand behind.</em></h2>
            <p style={{color: 'var(--muted)', maxWidth: 380, marginTop: 16}}>
              Every figure on this page is sourced. We won't publish a brand-wide rating, because there isn't one — Kaya operates fifteen Google listings, not one. We'll show verified per-branch ratings as they are confirmed.
            </p>
          </div>
          <div className="trust-claims">
            <div className="claim">
              <h4>350K<span className="plus">+</span></h4>
              <p>Customers cared for across the UAE network.</p>
              <div className="attr">Source — Kaya UAE about page</div>
            </div>
            <div className="claim">
              <h4>15</h4>
              <p>Clinics, listed individually in the clinic finder.</p>
              <div className="attr">Source — clinic-finder (live)</div>
            </div>
            <div className="claim">
              <h4>DHA</h4>
              <p>Licensed dermatology and aesthetic medicine in the UAE.</p>
              <div className="attr">Establishment licence — to verify</div>
            </div>
            <div className="claim">
              <h4>—</h4>
              <p>Brand-wide review rating. Doesn't exist. We won't invent one.</p>
              <div className="attr">Per-branch ratings only, once verified</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Before / After gate ─────────── */
function BeforeAfterGate() {
  return (
    <section className="section">
      <div className="container">
        <div className="gate">
          <div>
            <div className="lock">
              <Icon name="lock" size={22}/>
            </div>
            <span className="eyebrow"><span className="dot"></span>Before & After — 08</span>
            <h3 style={{marginTop: 12}}>Consent-gated, by design.</h3>
            <p>
              We don't show before-and-after photography without explicit, written patient consent and DHA advertising-compliance review. This space is reserved — when a patient agrees and the imagery is approved, it appears here.
            </p>
            <div style={{display:'flex', gap: 12, marginTop: 24}}>
              <button className="btn btn--primary btn--sm">Read our consent policy <Icon name="arrow"/></button>
            </div>
          </div>
          <div className="gate-right">
            <div className="gate-tile">Pending consent</div>
            <div className="gate-tile">Pending consent</div>
            <div className="gate-tile">Pending consent</div>
            <div className="gate-tile">Pending consent</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Footer ─────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="ftr-brand">
            <div className="display h3" style={{marginBottom: 14}}>kaya<span className="italic"> UAE</span></div>
            <p>Kaya Middle East FZE — a dermatology and aesthetic clinic chain operating across the United Arab Emirates since the early 2000s. Distinct from Kaya Limited (India).</p>
            <div style={{display:'flex', gap: 10}}>
              <a className="btn btn--ghost btn--sm" href="tel:+9718005292" style={{borderColor:'rgba(250,246,242,0.25)', color:'var(--paper)'}}>
                <Icon name="phone" size={14}/> 800&nbsp;SKIN
              </a>
            </div>
          </div>
          <div>
            <h5>Treatments</h5>
            <ul>
              <li><a href="#">Acne & scar</a></li>
              <li><a href="#">Pigmentation</a></li>
              <li><a href="#">Age control</a></li>
              <li><a href="#">Hair strength</a></li>
              <li><a href="#">Aesthetic surgery</a></li>
            </ul>
          </div>
          <div>
            <h5>Solutions</h5>
            <ul>
              <li><a href="#">CoolSculpting</a></li>
              <li><a href="#">Profhilo</a></li>
              <li><a href="#">Venus Legacy</a></li>
              <li><a href="#">PRP-HC</a></li>
              <li><a href="#">GCell</a></li>
            </ul>
          </div>
          <div>
            <h5>Clinic</h5>
            <ul>
              <li><a href="#">Find a clinic</a></li>
              <li><a href="#">Meet the doctors</a></li>
              <li><a href="#">Book a consultation</a></li>
              <li><a href="#">Kaya Men</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h5>Connect</h5>
            <ul>
              <li><a href="#">Instagram · @kayaclinicarabia</a></li>
              <li><a href="#">Facebook · KayaClinicArabia</a></li>
              <li><a href="#">YouTube · @KayaskinclinicMe</a></li>
              <li><a href="#">Locale switcher</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Kaya Middle East FZE · All rights reserved</span>
          <span className="lic">Advertisement Licence · RLEZ0E7S-070526</span>
        </div>
      </div>
    </footer>
  );
}

/* ─────────── Treatment drawer ─────────── */
function Drawer({ open, treatmentId, onClose, openBooking }) {
  const t = TREATMENTS.find(x => x.id === treatmentId);
  return (
    <React.Fragment>
      <div className={"scrim " + (open ? "open" : "")} onClick={onClose}/>
      <aside className={"drawer " + (open ? "open" : "")} aria-hidden={!open}>
        <div className="drawer-head">
          <span className="kicker">Treatment · {t ? t.num : '—'}</span>
          <button className="drawer-close" onClick={onClose}><Icon name="close"/></button>
        </div>
        {t && (
          <div className="drawer-body">
            <div className="drawer-media">
              <img src={t.image} alt={t.title}/>
            </div>
            <span className="eyebrow"><span className="dot"></span>{t.category}</span>
            <h2 style={{marginTop: 14}}>{t.title}</h2>
            <p className="lede">{t.blurb}</p>

            <div className="drawer-block">
              <div className="lbl">Who it's for</div>
              <div className="body"><p>{t.candidacy}</p></div>
            </div>
            <div className="drawer-block">
              <div className="lbl">How it works</div>
              <div className="body">
                <ul>{t.how.map((h, i) => <li key={i}>{h}</li>)}</ul>
              </div>
            </div>
            <div className="drawer-block">
              <div className="lbl">What to expect</div>
              <div className="body"><p>{t.expect}</p></div>
            </div>
            <div className="drawer-block">
              <div className="lbl">Recovery</div>
              <div className="body"><p>{t.recovery}</p></div>
            </div>

            <div className="drawer-compliance">
              <strong>Compliance note —</strong> {t.compliance}
            </div>

            <div className="drawer-cta">
              <button className="btn btn--rose" style={{flex: 1, justifyContent: 'center'}} onClick={() => { onClose(); openBooking(t.id); }}>
                Book a consultation for {t.title} <Icon name="arrow"/>
              </button>
              <a className="btn btn--ghost" href="tel:+9718005292"><Icon name="phone" size={14}/> Call</a>
            </div>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

/* ─────────── Booking modal ─────────── */
function Booking({ open, onClose, preselect }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    treatment: "",
    clinic: "",
    name: "",
    phone: "",
    email: "",
    when: "morning",
    notes: "",
  });

  useEffect(() => {
    if (open) {
      setStep(0);
      setData(d => ({ ...d, treatment: preselect || "" }));
    }
  }, [open, preselect]);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const next = () => setStep(s => Math.min(s + 1, 3));
  const back = () => setStep(s => Math.max(s - 1, 0));

  const canNext = () => {
    if (step === 0) return !!data.treatment;
    if (step === 1) return !!data.clinic;
    if (step === 2) return data.name.trim().length > 1 && data.phone.trim().length > 5;
    return true;
  };

  if (!open) return null;

  return (
    <div className="modal open" onClick={(e) => { if (e.target.classList.contains('modal')) onClose(); }}>
      <div className="modal-card">
        <button className="modal-close" onClick={onClose}><Icon name="close"/></button>

        <aside className="modal-aside">
          <div>
            <span className="kicker" style={{color: 'rgba(250,246,242,0.6)'}}>Book a consultation</span>
            <h2>A dermatologist, not a counter assistant.</h2>
            <p>You'll meet with a licensed clinician for a thirty-minute assessment. No prices are quoted before that conversation — by policy.</p>
          </div>
          <div className="phone">
            <div className="lbl">Or call us</div>
            <div className="num">800&nbsp;SKIN <small>800 5292</small></div>
          </div>
        </aside>

        <div className="modal-form">
          <div className="steps">
            {[0, 1, 2, 3].map(i => <div key={i} className={"step-dot " + (i <= step ? "active" : "")}/>)}
          </div>

          {step === 0 && (
            <React.Fragment>
              <h3>What brings you in?</h3>
              <p className="step-desc">You can change this with the dermatologist — we just need a starting point.</p>
              <div className="choice-grid">
                {TREATMENTS.map(t => (
                  <button key={t.id}
                    className={"choice " + (data.treatment === t.id ? "active" : "")}
                    onClick={() => update('treatment', t.id)}>
                    <span style={{display:'block', fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.12em', color:'var(--muted)', marginBottom: 6}}>{t.category}</span>
                    {t.title}
                  </button>
                ))}
              </div>
            </React.Fragment>
          )}

          {step === 1 && (
            <React.Fragment>
              <h3>Which clinic suits you?</h3>
              <p className="step-desc">Fifteen across the country — pick the one nearest to home or work.</p>
              <div className="field full">
                <label>Clinic</label>
                <select value={data.clinic} onChange={(e) => update('clinic', e.target.value)}>
                  <option value="">Select a clinic…</option>
                  {EMIRATES.filter(e => e !== "All").map(em => (
                    <optgroup key={em} label={em}>
                      {CLINICS.filter(c => c.city === em).map(c => (
                        <option key={c.id} value={c.id}>{c.name}</option>
                      ))}
                    </optgroup>
                  ))}
                </select>
              </div>
              <div className="field full" style={{marginTop: 16}}>
                <label>Preferred time</label>
                <div className="choice-grid" style={{gridTemplateColumns:'1fr 1fr 1fr'}}>
                  {[['morning','Morning'],['afternoon','Afternoon'],['evening','Evening']].map(([k, l]) => (
                    <button key={k} className={"choice " + (data.when === k ? "active" : "")} onClick={() => update('when', k)}>{l}</button>
                  ))}
                </div>
              </div>
            </React.Fragment>
          )}

          {step === 2 && (
            <React.Fragment>
              <h3>How can we reach you?</h3>
              <p className="step-desc">We collect the minimum — no medical history at this stage. Your dermatologist will take that in person.</p>
              <div className="field-grid">
                <div className="field full">
                  <label>Full name</label>
                  <input value={data.name} onChange={(e) => update('name', e.target.value)} placeholder="Your name"/>
                </div>
                <div className="field">
                  <label>Mobile</label>
                  <input value={data.phone} onChange={(e) => update('phone', e.target.value)} placeholder="+971…"/>
                </div>
                <div className="field">
                  <label>Email (optional)</label>
                  <input value={data.email} onChange={(e) => update('email', e.target.value)} placeholder="you@…"/>
                </div>
                <div className="field full">
                  <label>Anything we should know? (optional)</label>
                  <textarea rows="3" value={data.notes} onChange={(e) => update('notes', e.target.value)} placeholder="Allergies, current medications, scheduling preferences…"/>
                </div>
              </div>
              <p style={{fontSize: 11, color: 'var(--muted)', marginTop: 16, lineHeight: 1.5}}>
                By continuing you agree to be contacted regarding your consultation. We don't collect medical history online — that happens in clinic, with a doctor.
              </p>
            </React.Fragment>
          )}

          {step === 3 && (
            <div className="modal-success">
              <div className="ok"><Icon name="check" size={28}/></div>
              <h3>Request received.</h3>
              <p style={{color:'var(--muted)', maxWidth: 360, margin: '12px auto 0'}}>
                A Kaya coordinator will call you on <strong>{data.phone || '— your number —'}</strong> within one working day to confirm your appointment at <strong>{(CLINICS.find(c => c.id === data.clinic) || {}).name || '— clinic —'}</strong>.
              </p>
              <div style={{marginTop: 28}}>
                <button className="btn btn--ghost" onClick={onClose}>Close</button>
              </div>
            </div>
          )}

          {step < 3 && (
            <div className="modal-foot">
              <button className="btn btn--text" onClick={back} disabled={step === 0} style={{visibility: step === 0 ? 'hidden' : 'visible'}}>← Back</button>
              <button className="btn btn--rose" onClick={next} disabled={!canNext()} style={{opacity: canNext() ? 1 : 0.5}}>
                {step === 2 ? 'Confirm request' : 'Continue'} <Icon name="arrow"/>
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ─────────── Mobile bottom bar ─────────── */
function Mobar({ openBooking }) {
  return (
    <div className="mobar">
      <a className="btn btn--ghost" style={{justifyContent:'center'}} href="tel:+9718005292"><Icon name="phone" size={14}/> 800 SKIN</a>
      <button className="btn btn--rose" style={{justifyContent:'center'}} onClick={openBooking}>Book consultation</button>
    </div>
  );
}

/* ─────────── Tweaks ─────────── */
function KayaTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Kaya · Tweaks">
      <TweakSection label="Aesthetic">
        <TweakColor label="Accent"
          value={tweaks.accent}
          onChange={v => setTweak('accent', v)}
          options={['#B8526A','#8E3650','#2C4A52','#7A4E2E','#2F4F3A']}/>
        <TweakRadio label="Serif"
          value={tweaks.serif}
          onChange={v => setTweak('serif', v)}
          options={[
            {label:'Cormorant', value:'cormorant'},
            {label:'Tenor', value:'tenor'},
            {label:'Marcellus', value:'marcellus'},
          ]}/>
        <TweakRadio label="Surface"
          value={tweaks.paper}
          onChange={v => setTweak('paper', v)}
          options={[
            {label:'Warm paper', value:'paper'},
            {label:'Cool grey', value:'grey'},
            {label:'Soft blush', value:'blush'},
          ]}/>
      </TweakSection>
      <TweakSection label="Hero">
        <TweakSelect label="Hero image"
          value={tweaks.heroImage}
          onChange={v => setTweak('heroImage', v)}
          options={[
            {label:'Treatment', value:'media/hero-band-b.webp'},
            {label:'Beauty', value:'media/hero-band-a.webp'},
            {label:'Home hero', value:'media/home-hero-desktop.webp'},
            {label:'Solutions', value:'media/solutions-listing-hero.webp'},
          ]}/>
      </TweakSection>
    </TweaksPanel>
  );
}

/* ─────────── Root ─────────── */
function App() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent": "#B8526A",
    "serif": "cormorant",
    "paper": "paper",
    "heroImage": "media/hero-band-b.webp"
  }/*EDITMODE-END*/);

  const [bookingOpen, setBookingOpen] = useState(false);
  const [bookingPreselect, setBookingPreselect] = useState(null);
  const [drawer, setDrawer] = useState({open: false, id: null});

  const openBooking = (preselectId) => {
    setBookingPreselect(typeof preselectId === 'string' ? preselectId : null);
    setBookingOpen(true);
  };
  const closeBooking = () => setBookingOpen(false);

  const openDrawer = (id) => setDrawer({ open: true, id });
  const closeDrawer = () => setDrawer(d => ({ ...d, open: false }));

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' });
  };

  // Apply tweaks to CSS vars
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--rose', tweaks.accent);
    // derive deep + soft
    const map = {
      '#B8526A': ['#8E3650', '#F2DCDF'],
      '#8E3650': ['#5C1F33', '#EFD6DC'],
      '#2C4A52': ['#1B3038', '#D6E4E2'],
      '#7A4E2E': ['#4E2F19', '#EFE0D0'],
      '#2F4F3A': ['#1C3424', '#D9E7DC'],
    };
    const [deep, soft] = map[tweaks.accent] || map['#B8526A'];
    r.style.setProperty('--rose-deep', deep);
    r.style.setProperty('--rose-soft', soft);
    r.style.setProperty('--blush', soft);

    if (tweaks.paper === 'grey') {
      r.style.setProperty('--paper', '#F4F4F5');
      r.style.setProperty('--paper-2', '#EAEAEC');
      r.style.setProperty('--line', '#E0E0E3');
    } else if (tweaks.paper === 'blush') {
      r.style.setProperty('--paper', '#FBF3F1');
      r.style.setProperty('--paper-2', '#F5E6E2');
      r.style.setProperty('--line', '#EBD9D4');
    } else {
      r.style.setProperty('--paper', '#FAF6F2');
      r.style.setProperty('--paper-2', '#F3ECE5');
      r.style.setProperty('--line', '#E6DBD2');
    }

    const serifMap = {
      cormorant: '"Cormorant Garamond", Georgia, serif',
      tenor: '"Tenor Sans", Georgia, serif',
      marcellus: '"Marcellus", Georgia, serif',
    };
    r.style.setProperty('--serif', serifMap[tweaks.serif] || serifMap.cormorant);
  }, [tweaks]);

  return (
    <React.Fragment>
      <TopBar openBooking={openBooking}/>
      <Nav openBooking={openBooking} scrollTo={scrollTo}/>
      <Hero openBooking={openBooking} scrollTo={scrollTo} tweaks={tweaks}/>
      <Treatments openDrawer={openDrawer}/>
      <Solutions/>
      <About/>
      <Doctors/>
      <ClinicFinder/>
      <Trust/>
      <BeforeAfterGate/>
      <Footer/>
      <Mobar openBooking={openBooking}/>
      <Drawer open={drawer.open} treatmentId={drawer.id} onClose={closeDrawer} openBooking={openBooking}/>
      <Booking open={bookingOpen} onClose={closeBooking} preselect={bookingPreselect}/>
      <KayaTweaks tweaks={tweaks} setTweak={setTweak}/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);