/* ============================================================
   DNA Health & Wellness — UI components
   ============================================================ */

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

/* -------------------- Icons (inline SVGs) -------------------- */
const Icon = {
  arrow: () => <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  arrowSmall: () => <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  whatsapp: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.4 3.6A11.8 11.8 0 0012 0C5.4 0 .1 5.4.1 12c0 2.1.6 4.1 1.6 5.9L0 24l6.3-1.7A12 12 0 0012 24c6.6 0 12-5.4 12-12 0-3.2-1.3-6.2-3.6-8.4zM12 22a10 10 0 01-5.1-1.4l-.4-.2-3.7 1 1-3.6-.3-.4A10 10 0 1112 22zm5.5-7.5l-1.3-.7c-.5-.2-.8-.3-1.1.3-.3.5-1.3 1.6-1.6 2-.3.3-.5.4-1 .1-.5-.2-2.2-.8-4.2-2.6-1.5-1.4-2.6-3-2.9-3.5-.3-.5 0-.7.3-1 .2-.2.5-.6.7-.9.2-.3.3-.5.5-.8.2-.3.1-.6-.1-.8-.1-.2-1.1-2.6-1.5-3.6-.4-.9-.8-.8-1.1-.8h-1c-.3 0-.8.1-1.2.6-.4.5-1.6 1.6-1.6 3.9 0 2.3 1.7 4.5 1.9 4.8.2.3 3.3 5 8 7 2.8 1.2 3.9 1.3 5.3 1.1.8-.1 2.6-1 3-2.1.4-1 .4-1.9.3-2.1-.1-.2-.4-.3-.9-.5z"/></svg>,
  phone: () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>,
  check: () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  close: () => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  pin: () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  calendar: () => <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
};

/* -------------------- Nav -------------------- */
function Nav({ openBook, openMenu, setOpenMenu }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#top" className="logo" aria-label="DNA Health & Wellness">
          <img src="media/dna-logo.svg" alt="DNA Health & Wellness" />
        </a>
        <nav className="nav-links" onMouseLeave={() => setOpenMenu(null)}>
          <a className="nav-link has-menu" onMouseEnter={() => setOpenMenu('pillars')}>Programs</a>
          <a className="nav-link" href="#team">Doctors</a>
          <a className="nav-link" href="#locations">Locations</a>
          <a className="nav-link" href="#about">About</a>
          <a className="nav-link" href="#rate-card">Rate card</a>
        </nav>
        <div className="nav-actions">
          <button className="locale" title="Languages">EN · AR · RU · 中文</button>
          <a className="btn btn-ghost" href={`tel:+97145736500`}><Icon.phone/> 24/7</a>
          <button className="btn btn-primary" onClick={openBook}>Book a consultation <Icon.arrow/></button>
        </div>
      </div>
      {openMenu === 'pillars' && (
        <div className="wrap" style={{ position: 'relative' }} onMouseEnter={() => setOpenMenu('pillars')} onMouseLeave={() => setOpenMenu(null)}>
          <div className="mega">
            <div className="mega-intro">
              <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot"></span>Four pillars</div>
              <h4 className="serif">Programs, organised around <em style={{ color: 'var(--leaf-deep)' }}>where you are</em> in your health journey.</h4>
              <p>Every pillar lands with the same promise: practitioner-led, factual, and supervised by licensed clinicians under DHA/MOH/DOH rules.</p>
            </div>
            <div className="mega-cols">
              {PILLARS.map(p => (
                <div className="mega-col" key={p.id}>
                  <h5>{p.num} · {p.name}</h5>
                  {p.programs.slice(0, 5).map(pr => <a key={pr.name}>{pr.name}</a>)}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

/* -------------------- Hero -------------------- */
function Hero({ openBook }) {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-copy">
            <div>
              <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>Founded Dubai · 2018 · DHA Polyclinic 0481574</div>
              <h1 className="h-display">
                Live <em>better</em>,<br/>longer — and<br/>on the data.
              </h1>
              <p className="hero-sub" style={{ marginTop: 28 }}>
                A functional-medicine clinic group built around four pillars: <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>Prevention · Optimisation · Rejuvenation · Longevity</strong>. Six clinics across Dubai and Abu Dhabi, one founder-led medical team, and a quiet preference for evidence over hype.
              </p>
              <div className="hero-cta-row" style={{ marginTop: 32 }}>
                <button className="btn btn-primary" onClick={openBook}>Book a consultation <Icon.arrow/></button>
                <a className="btn btn-ghost" href="#pillars">Browse programs</a>
                <a className="btn btn-ghost" href={`https://wa.me/971585974663?text=${encodeURIComponent("Hello, I'd like to book an appointment.")}`} target="_blank" rel="noreferrer">
                  <Icon.whatsapp/> WhatsApp
                </a>
              </div>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="k">Pillars</div>
                <div className="v">04 <small>Prevention · Optimisation · Rejuvenation · Longevity</small></div>
              </div>
              <div className="hero-meta-item">
                <div className="k">Clinics</div>
                <div className="v">06 <small>Dubai · Abu Dhabi · home service</small></div>
              </div>
              <div className="hero-meta-item">
                <div className="k">Client line</div>
                <div className="v">24 / 7 <small>+971 4 573 6500</small></div>
              </div>
            </div>
          </div>
          <div className="hero-media">
            <img src="media/garden.webp" alt="Longevity Garden at the Al Wasl clinic"/>
            <div className="overlay-card">
              <div style={{ flex: 1 }}>
                <div className="quote">"We're focused on helping you live healthier and longer — by putting you on a continuous pathway to optimal health."</div>
                <div className="attrib">Dr Nasr Al Jafari · Co-Founder, Medical Director</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- Press strip -------------------- */
function PressStrip() {
  return (
    <div className="press">
      <div className="wrap">
        <div className="press-inner">
          <span className="label">As referenced in</span>
          <div className="press-logos">
            <span className="serif">Gulf Time</span>
            <span className="serif">PR Newswire</span>
            <span className="serif">Spear's 500</span>
            <span className="serif">AHG</span>
            <span className="serif">Gulf News</span>
            <span className="serif">TruDiagnostic</span>
          </div>
          <span className="label" style={{ opacity: 0.6 }}>Press logos pending re-use clearance</span>
        </div>
      </div>
    </div>
  );
}

/* -------------------- Philosophy band -------------------- */
function Philosophy() {
  return (
    <section data-screen-label="02 Philosophy">
      <div className="wrap">
        <div className="philosophy">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}><span className="dot"></span>Our operating philosophy</div>
            <h2 className="h-1">Science. Mindfulness.<br/><em>Longevity.</em></h2>
            <p className="lede" style={{ marginTop: 22 }}>
              A game-changing approach for you to live better and longer — practised by a team that reads the journals, runs the labs, and won't sell what it can't substantiate.
            </p>
            <div style={{ marginTop: 28 }}>
              <span className="chip" style={{ background: 'rgba(91,170,63,0.16)', color: 'var(--leaf)', borderColor: 'rgba(91,170,63,0.32)' }}>DHA · MOH · DOH compliant</span>
              <span className="chip" style={{ background: 'transparent', color: 'rgba(250,251,248,0.65)', borderColor: 'rgba(250,251,248,0.18)', marginLeft: 8 }}>EN · AR · RU · 中文</span>
            </div>
          </div>
          <div className="philo-three">
            <div className="philo-row">
              <div className="label">i.</div>
              <div>
                <div className="title">Science</div>
                <div className="desc">Functional and integrative medicine — read the labs first, build the protocol second. No guesswork, no theatre.</div>
              </div>
            </div>
            <div className="philo-row">
              <div className="label">ii.</div>
              <div>
                <div className="title">Mindfulness</div>
                <div className="desc">Acupuncture, sound healing and meditation alongside the clinical side. Body and nervous system, addressed together.</div>
              </div>
            </div>
            <div className="philo-row">
              <div className="label">iii.</div>
              <div>
                <div className="title">Longevity</div>
                <div className="desc">Investigational therapies — biological-age testing, Inuspheresis®, exosomes — presented factually. Outcomes vary; all therapies are supervised by licensed practitioners.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- Pillars Navigator (interactive) -------------------- */
function Pillars({ openBook, setBookPillar }) {
  const [active, setActive] = useState(0);
  const pillar = PILLARS[active];

  return (
    <section id="pillars" data-screen-label="03 Pillars">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>The four pillars</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>Where you are determines what you need.</h2>
          </div>
          <div>
            <p className="lede">
              Each pillar holds a clear set of programs and treatments. Move between them — they are designed to share a clinical record, a single team, and one continuous health plan.
            </p>
          </div>
        </div>

        <div className="pillars-shell">
          <div className="pillars-tabs">
            {PILLARS.map((p, i) => (
              <button key={p.id} className={`pillar-tab ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
                <span className="num">{p.num} · Pillar</span>
                <span className="name">{p.name}</span>
                <span className="tagline">{p.tagline}</span>
              </button>
            ))}
          </div>
          <div className="pillar-body">
            <div className="pillar-left">
              <div className="eyebrow" style={{ marginBottom: 18 }}>
                <span className="dot"></span>Pillar {pillar.num} · {pillar.name}
              </div>
              <h3 className="h-2">{pillar.tagline}.</h3>
              <p className="lede">{pillar.lede}</p>
              <div className="pillar-programs">
                {pillar.programs.map((pr, i) => (
                  <div key={pr.name} className="program-row" onClick={() => { setBookPillar(pillar.name); openBook(); }}>
                    <span className="idx">{String(i + 1).padStart(2, '0')}</span>
                    <span className="pname">{pr.name}</span>
                    <span className="pprice">{pr.price}</span>
                    <span className="pgo"><Icon.arrowSmall/></span>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn btn-leaf" onClick={() => { setBookPillar(pillar.name); openBook(); }}>Discuss {pillar.name.toLowerCase()} programs <Icon.arrow/></button>
                <a className="btn btn-ghost" href="#rate-card">View rate card</a>
              </div>
            </div>
            <div className="pillar-right">
              <img src={pillar.image} alt={`${pillar.name} pillar`} key={pillar.id}/>
              <div className="stats">
                {pillar.stats.map(s => (
                  <div className="pillar-stat" key={s.k}>
                    <div className="k">{s.k}</div>
                    <div className="v">{s.v}</div>
                    {s.src && <div className="src">{s.src}</div>}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- Approach (4 steps) -------------------- */
function Approach() {
  return (
    <section style={{ background: 'var(--mist)' }} data-screen-label="04 Approach">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>How a client journey unfolds</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>Analyse. Optimise.<br/>Maintain. <em style={{ color: 'var(--leaf-deep)', fontStyle: 'italic', fontFamily: 'var(--serif)' }}>Reverse-ageing.</em></h2>
          </div>
          <div>
            <p className="lede">
              The clinic's framework, drawn straight from the Al Wasl flagship's longevity wall. Four phases — start with one, stay with us across all four.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 16, flexWrap: 'wrap' }}>
              <span className="chip">Avg. consult · 60 min</span>
              <span className="chip">Care plan in 7 days</span>
              <span className="chip">Quarterly follow-ups</span>
            </div>
          </div>
        </div>

        <div className="approach-grid">
          {APPROACH.map(a => (
            <div className="approach-card" key={a.num}>
              <div className="approach-num">{a.num} · phase</div>
              <h4 className="serif">{a.title}</h4>
              <p>{a.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------------------- Founder + Team -------------------- */
function Team({ openDoctor }) {
  const founder = DOCTORS[0];
  const team = DOCTORS.slice(1);

  return (
    <section id="team" data-screen-label="05 Team">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>The clinical team</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>Founder-led. Functional medicine first.</h2>
          </div>
          <div>
            <p className="lede">
              The team that reads your labs, runs your protocol and follows you up. We publish a doctor only when their licence and portrait release are on file with us — the rest are listed as pending until verification clears.
            </p>
          </div>
        </div>

        <div className="founder-feature">
          <div className="founder-photo">
            <img src={founder.photo} alt={founder.name}/>
            <div className="badge-stack">
              <span className="verified">DHA verified</span>
              <span className="chip" style={{ background: 'rgba(250,251,248,0.92)', borderColor: 'transparent' }}>Co-Founder · Medical Director</span>
            </div>
          </div>
          <div className="founder-body">
            <div className="eyebrow"><span className="dot"></span>Meet the founder</div>
            <h3 className="h-2" style={{ marginTop: 8 }}>{founder.name}</h3>
            <p className="lede" style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.3 }}>
              "The point of functional medicine isn't to find a single thing wrong with you. It's to keep finding nothing wrong with you, for as long as possible."
            </p>
            <div className="cred-grid">
              <div className="cred"><div className="k">Licence</div><div className="v">DHA Consultant — active to 1 Jul 2026</div></div>
              <div className="cred"><div className="k">Medical school</div><div className="v">University of Nottingham</div></div>
              <div className="cred"><div className="k">Postgraduate</div><div className="v">Oxford Radcliffe Hospitals</div></div>
              <div className="cred"><div className="k">Business</div><div className="v">MBA · Alliance Manchester</div></div>
              <div className="cred"><div className="k">Memberships</div><div className="v">Institute for Functional Medicine</div></div>
              <div className="cred"><div className="k">In UAE since</div><div className="v">2015</div></div>
            </div>
            <div>
              <button className="btn btn-primary" onClick={() => openDoctor(founder)}>Read full profile <Icon.arrow/></button>
            </div>
          </div>
        </div>

        <div className="divider-eyebrow">
          <div className="eyebrow"><span className="dot"></span>Specialist team · 7 of 12 published</div>
        </div>

        <div className="doctors-grid">
          {team.map(d => (
            <div className="doctor-card" key={d.slug} onClick={() => openDoctor(d)}>
              <div className="doctor-photo"><img src={d.photo} alt={d.name}/></div>
              <div className="doctor-body">
                <div className="doctor-name">{d.name}</div>
                <div className="doctor-role">{d.role}</div>
                {d.verified
                  ? <span className="verified">DHA verified</span>
                  : <span className="pending">Verification pending</span>}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, fontSize: 13, color: 'var(--muted)', maxWidth: '64ch' }}>
          Note: only Dr Al Jafari's DHA licence has been independently verified for this prototype. Other practitioners are listed on the clinic's official team page; their DHA licences and portrait-use consents are marked <em>verification pending</em> until the clinic supplies the underlying paperwork.
        </div>
      </div>
    </section>
  );
}

/* -------------------- Locations -------------------- */
function Locations({ openBook, setBookLocation }) {
  const [active, setActive] = useState(0);
  const loc = LOCATIONS[active];

  return (
    <section id="locations" style={{ background: 'var(--mist)' }} data-screen-label="06 Locations">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Six clinics · Dubai + Abu Dhabi</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>Find your nearest branch.</h2>
          </div>
          <div>
            <p className="lede">
              All clinics share one medical record, one client service line (24/7) and one rate card. Per-branch opening hours are confirmed at booking — the central line is always open.
            </p>
          </div>
        </div>

        <div className="locations-shell">
          <div className="location-list">
            {LOCATIONS.map((l, i) => (
              <div key={l.id} className={`location-item ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
                <span className="l-num">{l.num}</span>
                <div>
                  <div className="l-name">{l.name}</div>
                  <div className="l-muted">{l.address}</div>
                  {l.note && <div className="l-muted" style={{ marginTop: 4, fontStyle: 'italic' }}>— {l.note}</div>}
                </div>
                <span className="l-pill">{l.flagship ? 'Flagship' : 'Open'}</span>
              </div>
            ))}
          </div>
          <div className="location-visual">
            <img src={loc.image} alt={loc.name} key={loc.id}/>
            <div className="v-overlay">
              <div className="item"><div className="k">Branch</div><div className="v">{loc.name}</div></div>
              <div className="item"><div className="k">Strength</div><div className="v">{loc.feature}</div></div>
              <div className="item"><div className="k">Parking</div><div className="v">{loc.parking}</div></div>
              <button className="btn btn-primary" onClick={() => { setBookLocation(loc.name); openBook(); }}>Book here <Icon.arrow/></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- Reviews (qualitative; no aggregateRating) -------------------- */
function Reviews() {
  return (
    <section data-screen-label="07 Reviews">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Client experience · qualitative</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>What we hear, often.</h2>
          </div>
          <div>
            <p className="lede">
              Selected client comments — no aggregate star count is published here because the live Google figures conflict across branches. The team is happy to share verified Google links per branch on request.
            </p>
          </div>
        </div>
        <div className="reviews-grid">
          {REVIEWS.map((r, i) => (
            <div className="review-card" key={i}>
              <div className="stars">{'★ '.repeat(r.stars).trim()}</div>
              <div className="body">"{r.body}"</div>
              <div className="meta">
                <span className="who">{r.who}</span>
                <span>{r.where}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------------------- CTA band + Footer -------------------- */
function CTABand({ openBook }) {
  return (
    <section data-screen-label="08 CTA">
      <div className="wrap">
        <div style={{ background: 'var(--leaf-soft)', border: '1px solid #C9E5BB', borderRadius: 'var(--r-xl)', padding: '64px 56px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 40, alignItems: 'center' }}>
          <div>
            <div className="eyebrow"><span className="dot"></span>Two ways in</div>
            <h2 className="h-1" style={{ marginTop: 14, marginBottom: 12 }}>Start with a screening,<br/>or with a question.</h2>
            <p className="lede" style={{ color: 'var(--ink-2)' }}>
              Most clients begin with an annual health screening or a 30-minute discovery call. Either way, the next conversation is with a doctor — not a salesperson.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button className="btn btn-primary" onClick={openBook}>Book a consultation <Icon.arrow/></button>
            <a className="btn btn-light" href="https://wa.me/971585974663" target="_blank" rel="noreferrer"><Icon.whatsapp/> Chat on WhatsApp</a>
            <a className="btn btn-ghost" href="tel:+97145736500"><Icon.phone/> Call 24/7 · +971 4 573 6500</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="brand-block">
            <div className="logo"><img src="media/dna-logo.svg" alt="DNA Health & Wellness"/></div>
            <p>Health-optimisation and longevity clinics. Dubai-founded, 2018. DHA Polyclinic 0481574. Legal: DNA Health Medical Center LLC.</p>
            <div style={{ display: 'flex', gap: 10 }}>
              <span className="chip" style={{ background: 'rgba(250,251,248,0.08)', borderColor: 'rgba(250,251,248,0.18)', color: 'var(--paper)' }}>DHA / MOH compliant</span>
              <span className="chip" style={{ background: 'rgba(250,251,248,0.08)', borderColor: 'rgba(250,251,248,0.18)', color: 'var(--paper)' }}>EN · AR · RU · 中文</span>
            </div>
          </div>
          <div>
            <h5>Pillars</h5>
            <ul>
              {PILLARS.map(p => <li key={p.id}><a>{p.name}</a></li>)}
              <li><a>Rate card</a></li>
            </ul>
          </div>
          <div>
            <h5>Clinics</h5>
            <ul>
              {LOCATIONS.map(l => <li key={l.id}><a>{l.name}</a></li>)}
              <li><a>Home service</a></li>
            </ul>
          </div>
          <div>
            <h5>Practice</h5>
            <ul>
              <li><a>Our team</a></li>
              <li><a>Scientific board</a></li>
              <li><a>Research</a></li>
              <li><a>Careers</a></li>
              <li><a>Press</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="tel:+97145736500">+971 4 573 6500 · 24/7</a></li>
              <li><a href="https://wa.me/971585974663" target="_blank" rel="noreferrer">WhatsApp +971 58 597 4663</a></li>
              <li><a href="mailto:enquiries@dnahealthcorp.com">enquiries@dnahealthcorp.com</a></li>
              <li><a>Find on Instagram</a></li>
              <li><a>LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 DNA Health Medical Center LLC · All rights reserved</div>
          <div>Compliant medical advertising · No guaranteed outcomes · Longevity therapies attributed</div>
          <div>v1.0 prototype · Claude × BytesGlue</div>
        </div>
      </div>
    </footer>
  );
}

/* -------------------- Mobile bottom bar -------------------- */
function MobileBar({ openBook }) {
  return (
    <div className="mobile-bar">
      <span className="label">Book a consultation</span>
      <div className="actions">
        <a className="pill ghost" href="tel:+97145736500"><Icon.phone/></a>
        <a className="pill ghost" href="https://wa.me/971585974663" target="_blank" rel="noreferrer"><Icon.whatsapp/></a>
        <button className="pill" onClick={openBook}><Icon.calendar/> Book</button>
      </div>
    </div>
  );
}

/* -------------------- Doctor drawer -------------------- */
function DoctorDrawer({ doctor, onClose }) {
  if (!doctor) return null;
  return (
    <>
      <div className="scrim" style={{ opacity: 1, pointerEvents: 'all' }} onClick={onClose}/>
      <aside className={`drawer open`}>
        <div className="drawer-hero">
          <img src={doctor.photo} alt={doctor.name}/>
          <button className="close" onClick={onClose}><Icon.close/></button>
        </div>
        <div className="drawer-body">
          <div style={{ marginBottom: 14 }}>
            {doctor.verified ? <span className="verified">DHA verified</span> : <span className="pending">Verification pending</span>}
          </div>
          <h3 className="serif">{doctor.name}</h3>
          <div className="drawer-role">{doctor.role}</div>

          <div className="drawer-section">
            <h5>Licence</h5>
            <div className="row">{doctor.licence}</div>
          </div>

          <div className="drawer-section">
            <h5>Specialty</h5>
            {doctor.specialty.map(s => <div className="row" key={s}>{s}</div>)}
          </div>

          <div className="drawer-section">
            <h5>Education & training</h5>
            {doctor.education.map(s => <div className="row" key={s}>{s}</div>)}
          </div>

          <div className="drawer-section">
            <h5>Memberships</h5>
            {doctor.memberships.map(s => <div className="row" key={s}>{s}</div>)}
          </div>

          <div className="drawer-section">
            <h5>Practising in</h5>
            <div className="row">{doctor.pillars.join(' · ')}</div>
          </div>

          <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
            <button className="btn btn-primary">Book with {doctor.name.split(' ')[1] || doctor.name} <Icon.arrow/></button>
          </div>
        </div>
      </aside>
    </>
  );
}

Object.assign(window, { Nav, Hero, PressStrip, Philosophy, Pillars, Approach, Team, Locations, Reviews, CTABand, Footer, MobileBar, DoctorDrawer, Icon });