// ============================================================
// Enfield Royal Clinic — page components
// ============================================================
// Hooks (useState, useEffect, etc.) are declared in components.jsx
// and shared via Babel's flat script scope.

// ===================== HOME =====================

// -------- Hero (centered editorial typography, no image) --------
const HeroSection = () => {
  const D = window.ERC_DATA;

  return (
    <section className="hero-root" style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--border)' }}>
      {/* Decorative corner serifs — subtle, like an old certificate */}
      <CornerMark position="tl"/>
      <CornerMark position="tr"/>

      <div className="container" style={{
        paddingTop: 'clamp(80px, 12vh, 140px)',
        paddingBottom: 'clamp(64px, 9vh, 112px)',
        minHeight: '88vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        textAlign: 'center',
        position: 'relative',
        zIndex: 1,
      }}>
        {/* Eyebrow */}
        <div className="hero-fadeup" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, animationDelay: '0ms' }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase', color: 'var(--primary)' }}>
            Enfield&nbsp;&nbsp;Royal&nbsp;&nbsp;Clinic
          </span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--muted)' }}>
            Dubai &nbsp;·&nbsp; Abu Dhabi &nbsp;·&nbsp; Est. <span style={{ letterSpacing: '0.15em' }}>MMXI</span>
          </span>
        </div>

        {/* Ornament */}
        <Ornament className="hero-fadeup" style={{ marginBlock: 'clamp(36px, 5vh, 56px)', animationDelay: '120ms' }}/>

        {/* HEADLINE */}
        <h1 className="hero-fadeup hero-headline" style={{
          fontFamily: 'var(--serif)',
          fontWeight: 400,
          fontSize: 'clamp(40px, 9vw, 148px)',
          lineHeight: 0.94,
          letterSpacing: '-0.022em',
          color: 'var(--primary)',
          margin: 0,
          maxWidth: '14ch',
          textWrap: 'balance',
          animationDelay: '220ms',
        }}>
          Doctor-led<br/>
          cosmetic surgery<br/>
          <span style={{ fontStyle: 'italic', color: 'var(--accent)', display: 'inline-block', transform: 'translateY(2px)' }}>&amp;</span>{' '}
          aesthetic medicine<br/>
          <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>in Dubai.</span>
        </h1>

        {/* Italic byline */}
        <p className="hero-fadeup" style={{
          fontFamily: 'var(--serif)',
          fontStyle: 'italic',
          color: 'var(--muted)',
          fontSize: 'clamp(20px, 1.8vw, 28px)',
          margin: 'clamp(28px, 4vh, 48px) 0 0',
          letterSpacing: '0.01em',
          animationDelay: '340ms',
        }}>
          — A clinic group, since 2011 —
        </p>

        {/* Second ornament */}
        <Ornament className="hero-fadeup" style={{ marginBlock: 'clamp(40px, 6vh, 64px)', animationDelay: '420ms' }} subtle/>

        {/* Lede */}
        <p className="hero-fadeup" style={{
          maxWidth: '52ch',
          color: 'var(--text)',
          fontSize: 'clamp(15px, 1.15vw, 18px)',
          lineHeight: 1.6,
          fontWeight: 300,
          margin: 0,
          animationDelay: '520ms',
        }}>
          A multi-specialty clinic group, regulated by the Dubai Health Authority. Every plan begins with a consultation — built by the specialist who'll perform it. No price lists, no guarantees, no promises we can't keep.
        </p>

        {/* CTAs */}
        <div className="hero-fadeup" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 'clamp(32px, 5vh, 48px)', animationDelay: '620ms' }}>
          <Link to="/book" className="btn btn-primary">Book a Consultation <Icon name="arrow-right" size={14}/></Link>
          <a href={'https://wa.me/' + D.brand.whatsappRaw} target="_blank" rel="noreferrer" className="btn btn-ghost">
            <Icon name="whatsapp" size={14}/> WhatsApp the clinic
          </a>
        </div>
      </div>

      {/* MARQUEE — slow scrolling treatments band, closes the hero */}
      <TreatmentMarquee/>

      {/* Stagger fade-up animation */}
      <style>{`
        .hero-fadeup {
          opacity: 0;
          transform: translateY(14px);
          animation: hero-fade-up 880ms cubic-bezier(.2, .7, .2, 1) forwards;
        }
        @keyframes hero-fade-up {
          to { opacity: 1; transform: none; }
        }
      `}</style>
    </section>
  );
};

// -------- Ornament: thin gold rules + diamond center --------
const Ornament = ({ className = '', style = {}, subtle = false }) => (
  <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, ...style }}>
    <span style={{
      width: subtle ? 'clamp(40px, 8vw, 80px)' : 'clamp(70px, 14vw, 160px)',
      height: 1,
      background: subtle ? 'var(--border)' : 'var(--accent)',
      opacity: subtle ? 1 : 0.85,
    }}/>
    <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
      <path d="M5 0 L8 5 L5 10 L2 5 Z" fill={subtle ? 'var(--muted)' : 'var(--accent)'}/>
    </svg>
    <span style={{
      width: subtle ? 'clamp(40px, 8vw, 80px)' : 'clamp(70px, 14vw, 160px)',
      height: 1,
      background: subtle ? 'var(--border)' : 'var(--accent)',
      opacity: subtle ? 1 : 0.85,
    }}/>
  </div>
);

// -------- Decorative corner serif marks (like a certificate) --------
const CornerMark = ({ position }) => {
  const pos = {
    tl: { top: 24, left: 24, transform: 'rotate(0deg)' },
    tr: { top: 24, right: 24, transform: 'rotate(90deg)' },
    bl: { bottom: 24, left: 24, transform: 'rotate(270deg)' },
    br: { bottom: 24, right: 24, transform: 'rotate(180deg)' },
  }[position];
  return (
    <svg width="38" height="38" viewBox="0 0 38 38" aria-hidden="true" style={{ position: 'absolute', zIndex: 0, opacity: 0.4, ...pos }}>
      <path d="M2 2 L2 18 M2 2 L18 2" stroke="var(--accent)" strokeWidth="1" fill="none"/>
    </svg>
  );
};

// -------- Treatment marquee (slow horizontal scroll, gold dot dividers) --------
const TreatmentMarquee = () => {
  const D = window.ERC_DATA;
  const items = D.areas.map(a => a.name);
  const doubled = [...items, ...items, ...items]; // ensure seamless loop
  return (
    <div style={{ background: 'var(--primary)', color: '#fff', overflow: 'hidden', position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 80, background: 'linear-gradient(90deg, var(--primary), rgba(30,58,95,0))', zIndex: 2, pointerEvents: 'none' }}/>
      <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 80, background: 'linear-gradient(270deg, var(--primary), rgba(30,58,95,0))', zIndex: 2, pointerEvents: 'none' }}/>
      <div className="erc-marquee" style={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', padding: '22px 0', gap: 0, animation: 'erc-marquee 48s linear infinite', willChange: 'transform' }}>
        {doubled.map((name, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 32, paddingInline: 32 }}>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(22px, 2.4vw, 32px)', lineHeight: 1, color: '#fff', letterSpacing: '-0.005em' }}>
              {name}
            </span>
            <span style={{ width: 6, height: 6, borderRadius: 100, background: 'var(--accent)', flexShrink: 0 }}/>
          </span>
        ))}
      </div>
      <style>{`
        @keyframes erc-marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-33.333%); }
        }
        .erc-marquee:hover { animation-play-state: paused; }
      `}</style>
    </div>
  );
};

const HomePage = () => {
  const D = window.ERC_DATA;

  return (
    <div className="page page-enter">
      {/* HERO — editorial masthead + tall portrait + treatment marquee */}
      <HeroSection />


      {/* TREATMENT AREAS — editorial showcase */}
      <TreatmentsShowcase />

      {/* DOCTORS BAND */}
      <section style={{ background: 'var(--secondary)' }} className="section-pad">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'end', marginBottom: 56 }}>
            <SectionHead
              eyebrow="02 — Meet the doctors"
              title={<>The people who actually <em>perform the care.</em></>}
            />
            <p className="body-sm" style={{ maxWidth: '52ch' }}>
              Our roster is built on the 17 official doctor profiles currently published by Enfield Royal. Each profile is shown only with verified credentials, DHA licence and portrait consent — anything pending is clearly labelled.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {D.doctors.slice(0, 4).map((d) => <DoctorCard key={d.slug} doctor={d} />)}
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
            <Link to="/doctors" className="btn btn-ghost">View all doctors <Icon name="arrow-right" size={14}/></Link>
          </div>
        </div>
      </section>

      {/* WHY ENFIELD / VALUES */}
      <section className="section-pad">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' }}>
            <SectionHead
              eyebrow="03 — Why Enfield Royal"
              title={<>Compliant. Specialist-led. <em>Calm.</em></>}
            />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid var(--border)' }}>
              {[
                { n: '01', t: 'DHA-regulated practice', b: 'All services are regulated by the Dubai Health Authority. Per-clinic and per-doctor licences shown on profiles once confirmed.' },
                { n: '02', t: 'Doctor-led, not sales-led', b: 'Plans are made by the specialist who will perform the procedure. No upsells from a sales desk.' },
                { n: '03', t: 'Compliant communication', b: 'We do not publish guaranteed results, banned superlatives or unverified ratings — and we attribute every brand stat clearly.' },
                { n: '04', t: 'Consent-gated content', b: 'Before/after material requires written patient consent and DHA-compliant disclosure before it appears anywhere on this site.' },
              ].map((v) => (
                <div key={v.n} style={{ padding: '32px 0 32px 28px', borderBottom: '1px solid var(--border)', borderRight: '1px solid var(--border)', position: 'relative' }}>
                  <span className="eyebrow" style={{ position: 'absolute', top: 32, left: 0 }}>{v.n}</span>
                  <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--primary)', margin: '0 0 10px' }}>{v.t}</h3>
                  <p className="body-sm">{v.b}</p>
                </div>
              ))}
              <style>{`
                @media (max-width: 820px) {
                  section .why-grid { grid-template-columns: 1fr !important; }
                }
              `}</style>
            </div>
          </div>
        </div>
      </section>

      {/* BIG QUOTE / CANONICAL LINE */}
      <section style={{ background: 'var(--primary)', color: '#fff' }}>
        <div className="container" style={{ paddingBlock: 'clamp(96px, 12vw, 160px)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32, maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,.55)', alignSelf: 'center' }}>The canonical line</span>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(34px, 4.8vw, 64px)', lineHeight: 1.1, margin: 0, textWrap: 'balance' }}>
              <em style={{ color: 'var(--accent)' }}>"</em>Doctor-led cosmetic surgery &amp; aesthetic medicine in Dubai — trusted, DHA-regulated care since 2011.<em style={{ color: 'var(--accent)' }}>"</em>
            </p>
            <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap', marginTop: 16 }}>
              <Link to="/book" className="btn btn-accent">Book a Consultation <Icon name="arrow-right" size={14}/></Link>
              <a href={'https://wa.me/' + D.brand.whatsappRaw} target="_blank" rel="noreferrer" className="btn btn-ghost" style={{ borderColor: 'rgba(255,255,255,.25)', color: '#fff' }}>
                <Icon name="whatsapp" size={14}/> WhatsApp
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* BEFORE / AFTER teaser — locked */}
      <section className="section-pad">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div className="ratio ratio-4-5" style={{ position: 'relative' }}>
              <Img src="media/clinic-treatment-room.webp" alt="" label="Treatment room" />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(20,40,63,.92), rgba(20,40,63,.45))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', textAlign: 'center', padding: 32 }}>
                <div>
                  <Icon name="lock" size={36}/>
                  <p style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 16 }}>Gallery — consent-gated</p>
                  <p style={{ fontFamily: 'var(--serif)', fontSize: 30, lineHeight: 1.1, marginTop: 12 }}>Available <em style={{ color: 'var(--accent)' }}>only with written patient consent + DHA-compliant disclosure.</em></p>
                </div>
              </div>
            </div>
            <div>
              <SectionHead
                eyebrow="04 — Before &amp; After"
                title={<>A gallery <em>architecture</em>, not a marketing gallery.</>}
                lede="The Before & After section ships as a complete content architecture — slider, candidacy notes, treatment context — but stays locked until the clinic supplies consent-cleared, DHA-compliant case material."
              />
              <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  'Written, treatment-specific patient consent',
                  'DHA medical-advertising disclosure on every case',
                  'Same lighting, angle, lens — no retouching',
                  'No claims, no guarantees, no comparisons',
                ].map((t) => (
                  <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <span style={{ width: 22, height: 22, borderRadius: 100, background: 'var(--accent-soft)', color: 'var(--primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="check" size={12}/>
                    </span>
                    <span className="body-sm" style={{ color: 'var(--text)' }}>{t}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 32 }}>
                <Link to="/before-after" className="btn-link">See the gallery architecture <Icon name="arrow-right" size={14}/></Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* LOCATIONS strip */}
      <section style={{ background: 'var(--secondary)' }} className="section-pad">
        <div className="container">
          <SectionHead
            eyebrow="05 — Locations"
            title={<>Two locations. <em>One standard of care.</em></>}
          />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 56 }}>
            {D.locations.map((loc) => (
              <Link key={loc.id} to={'/locations#' + loc.id} style={{ display: 'block', background: 'var(--surface)', border: '1px solid var(--border)' }}>
                <div className="ratio ratio-16-10"><Img src={loc.hero} alt={loc.name} label={loc.name}/></div>
                <div style={{ padding: 28 }}>
                  <h3 className="card">{loc.name}</h3>
                  <p className="body-sm" style={{ marginTop: 10, color: 'var(--muted)' }}>{loc.address}</p>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 20 }}>
                    <span className="body-sm" style={{ color: 'var(--primary)', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em' }}>{loc.phone}</span>
                    <span className="btn-link">View location <Icon name="arrow-up-right" size={14}/></span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// -------- Treatment tile (Home / Hub) --------
const TreatmentTile = ({ area, span = 4 }) => (
  <Link to={'/treatments/' + area.slug} style={{ gridColumn: 'span ' + span, display: 'block', position: 'relative', background: 'var(--surface)', border: '1px solid var(--border)' }}>
    <div className="ratio" style={{ aspectRatio: span >= 8 ? '21 / 9' : span === 6 ? '4 / 3' : '4 / 5' }}>
      <Img src={area.img} alt={area.name} label={area.name}/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,40,63,0) 30%, rgba(20,40,63,.85))' }}/>
    </div>
    <div style={{ position: 'absolute', inset: 0, padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', color: '#fff' }}>
      <span className="eyebrow" style={{ color: 'rgba(255,255,255,.85)' }}>{area.eyebrow}</span>
      <div>
        <h3 style={{ fontFamily: 'var(--serif)', fontSize: span >= 8 ? 38 : 26, lineHeight: 1.05, margin: 0, color: '#fff' }}>{area.name}</h3>
        <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,.7)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{area.procedures.length} procedures</span>
          <span style={{ width: 36, height: 36, border: '1px solid rgba(255,255,255,.4)', borderRadius: 100, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
            <Icon name="arrow-right" size={14}/>
          </span>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 820px) {
        a[style*='grid-column: span'] { grid-column: span 12 !important; }
      }
    `}</style>
  </Link>
);

// -------- Treatments Showcase (Home) — editorial mosaic with featured + filter --------
const TreatmentsShowcase = () => {
  const D = window.ERC_DATA;
  const [filter, setFilter] = useState('all');

  const all = D.areas;
  const counts = useMemo(() => ({
    all: all.length,
    surgical: all.filter(a => a.category === 'surgical').length,
    aesthetic: all.filter(a => a.category === 'aesthetic').length,
    specialist: all.filter(a => a.category === 'specialist').length,
  }), [all]);
  const filtered = filter === 'all' ? all : all.filter(a => a.category === filter);
  const featured = filtered[0];
  const rest = filtered.slice(1);
  const totalProcedures = all.reduce((n, a) => n + a.procedures.length, 0);

  // Asymmetric span pattern for the mosaic (designed for ~9 items; loops if more)
  const spanCycle = [
    { col: 7, ratio: '16 / 11' },
    { col: 5, ratio: '4 / 5' },
    { col: 4, ratio: '1 / 1' },
    { col: 4, ratio: '1 / 1' },
    { col: 4, ratio: '1 / 1' },
    { col: 8, ratio: '16 / 9' },
    { col: 4, ratio: '4 / 5' },
    { col: 6, ratio: '4 / 3' },
    { col: 6, ratio: '4 / 3' },
  ];

  return (
    <section style={{ background: 'var(--bg)', position: 'relative' }} className="section-pad">
      <div className="container">
        {/* HEADER */}
        <div className="ts-header" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'end', marginBottom: 56 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 36 }}>
              <span className="eyebrow">01 — Treatments by area</span>
              <span style={{ flex: 1, height: 1, background: 'var(--border)' }}/>
            </div>
            <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(46px, 6vw, 88px)', lineHeight: 0.98, letterSpacing: '-0.018em', color: 'var(--primary)', margin: 0, textWrap: 'balance' }}>
              Ten areas of <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>specialist care</em> — planned by the doctor who'll perform it.
            </h2>
          </div>
          <div className="ts-sub" style={{ borderLeft: '1px solid var(--border)', paddingLeft: 32 }}>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3, color: 'var(--text)', margin: 0, fontStyle: 'italic' }}>
              No price lists. Every treatment begins with a doctor-led consultation — candidacy, plan, fees and follow-up.
            </p>
            <div className="ts-stats" style={{ display: 'flex', gap: 36, marginTop: 32 }}>
              <Stat n={String(all.length)} l="Treatment areas"/>
              <Stat n={totalProcedures + '+'} l="Procedures"/>
              <Stat n="17" l="Doctors"/>
            </div>
          </div>
        </div>

        {/* FILTER ROW */}
        <div className="ts-filter" style={{ display: 'flex', gap: 8, padding: '22px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', flexWrap: 'wrap', alignItems: 'center', marginBottom: 32 }}>
          {[
            { k: 'all', l: 'All areas' },
            { k: 'surgical', l: 'Surgical' },
            { k: 'aesthetic', l: 'Aesthetic' },
            { k: 'specialist', l: 'Specialist' },
          ].map(f => {
            const active = filter === f.k;
            return (
              <button key={f.k} onClick={() => setFilter(f.k)} style={{
                padding: '9px 16px',
                border: '1px solid',
                borderColor: active ? 'var(--primary)' : 'var(--border)',
                background: active ? 'var(--primary)' : 'transparent',
                color: active ? '#fff' : 'var(--primary)',
                borderRadius: 100,
                fontFamily: 'var(--mono)',
                fontSize: 11,
                letterSpacing: '0.08em',
                textTransform: 'uppercase',
                transition: 'all 160ms ease',
                display: 'inline-flex',
                alignItems: 'center',
                gap: 8,
              }}>
                {f.l}
                <span style={{ opacity: active ? 0.7 : 0.45, fontVariantNumeric: 'tabular-nums', fontSize: 10 }}>{counts[f.k]}</span>
              </button>
            );
          })}
          <div style={{ flex: 1 }}/>
          <Link to="/treatments" className="btn-link">
            View all <Icon name="arrow-right" size={14}/>
          </Link>
        </div>

        {/* FEATURED */}
        {featured && <FeaturedTreatment area={featured} key={featured.slug}/>}

        {/* MOSAIC */}
        {rest.length > 0 && (
          <div className="ts-mosaic" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 16, marginTop: 16 }}>
            {rest.map((a, i) => (
              <ShowcaseCard key={a.slug} area={a} span={spanCycle[i % spanCycle.length]} index={i + 2}/>
            ))}
          </div>
        )}
      </div>

      {/* responsive collapses */}
      <style>{`
        @media (max-width: 980px) {
          .ts-header { grid-template-columns: 1fr !important; gap: 40px !important; }
          .ts-sub { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--border); padding-top: 32px !important; }
          .ts-mosaic .ts-card { grid-column: span 6 !important; }
          .ts-featured { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 640px) {
          .ts-mosaic .ts-card { grid-column: span 12 !important; }
          .ts-stats { gap: 20px !important; }
        }
      `}</style>
    </section>
  );
};

const Stat = ({ n, l }) => (
  <div>
    <div style={{ fontFamily: 'var(--serif)', fontSize: 40, lineHeight: 1, color: 'var(--primary)', letterSpacing: '-0.01em' }}>{n}</div>
    <div style={{ fontSize: 10, color: 'var(--muted)', fontFamily: 'var(--mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 8 }}>{l}</div>
  </div>
);

// -------- Featured treatment (large editorial card) --------
const FeaturedTreatment = ({ area }) => (
  <Link to={'/treatments/' + area.slug} style={{ display: 'block', textDecoration: 'none' }}>
    <div className="ts-featured" style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', background: 'var(--primary)', color: '#fff', overflow: 'hidden' }}>
      <div style={{ position: 'relative', aspectRatio: '4 / 3', overflow: 'hidden' }}>
        <Img src={area.stock || area.img} alt={area.name} label={area.name}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.85) contrast(1.02)' }}/>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(20,40,63,0.35), rgba(20,40,63,0))' }}/>
        <div style={{ position: 'absolute', top: 24, left: 24, display: 'flex', gap: 8 }}>
          <span className="chip" style={{ background: 'rgba(255,255,255,0.96)', color: 'var(--primary)' }}>
            <span style={{ width: 6, height: 6, borderRadius: 100, background: 'var(--accent)' }}/>
            Featured · {area.eyebrow}
          </span>
        </div>
      </div>
      <div style={{ padding: 'clamp(28px, 4vw, 48px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32 }}>
        <div>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 24 }}>The flagship</div>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(34px, 3.8vw, 56px)', lineHeight: 1.02, margin: 0, color: '#fff', letterSpacing: '-0.012em' }}>
            {area.name}
          </h3>
          <p style={{ marginTop: 22, color: 'rgba(255,255,255,0.82)', fontSize: 16, lineHeight: 1.55, fontWeight: 300, maxWidth: '42ch' }}>
            {area.blurb}
          </p>
        </div>
        <div>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 14 }}>Procedures in this area</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 24, rowGap: 8 }}>
            {area.procedures.slice(0, 8).map(p => (
              <div key={p} style={{ fontSize: 14, color: 'rgba(255,255,255,0.94)', display: 'flex', gap: 10, alignItems: 'center' }}>
                <span style={{ width: 4, height: 4, borderRadius: 100, background: 'var(--accent)', flexShrink: 0 }}/>
                {p}
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.18)' }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase' }}>
            {area.procedures.length} procedures · {area.doctorCount} doctors
          </span>
          <span style={{ width: 52, height: 52, border: '1px solid rgba(255,255,255,0.4)', borderRadius: 100, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', transition: 'all 200ms ease' }}>
            <Icon name="arrow-right" size={16}/>
          </span>
        </div>
      </div>
    </div>
  </Link>
);

// -------- Mosaic card with hover-reveal procedures --------
const ShowcaseCard = ({ area, span, index }) => {
  const [hover, setHover] = useState(false);
  const big = span.col >= 7;
  return (
    <Link
      to={'/treatments/' + area.slug}
      className="ts-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onFocus={() => setHover(true)}
      onBlur={() => setHover(false)}
      style={{
        gridColumn: 'span ' + span.col,
        position: 'relative',
        background: 'var(--primary)',
        overflow: 'hidden',
        textDecoration: 'none',
        display: 'block',
      }}
    >
      <div style={{ position: 'relative', aspectRatio: span.ratio }}>
        <Img src={area.stock || area.img} alt={area.name} label={area.name}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
            filter: hover ? 'saturate(0.55) brightness(0.5)' : 'saturate(0.85) brightness(0.82)',
            transform: hover ? 'scale(1.04)' : 'scale(1.0)',
            transition: 'transform 700ms cubic-bezier(.2,.7,.2,1), filter 320ms ease',
          }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(20,40,63,0.0) 35%, rgba(20,40,63,0.85) 95%)',
          pointerEvents: 'none',
        }}/>

        {/* Top row — index + category */}
        <div style={{ position: 'absolute', top: 18, left: 18, right: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', color: '#fff', pointerEvents: 'none' }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.85)' }}>
            {String(index).padStart(2, '0')}
          </span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', border: '1px solid rgba(255,255,255,0.25)', padding: '4px 10px', borderRadius: 100 }}>
            {area.category}
          </span>
        </div>

        {/* Bottom — name + meta */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: big ? 28 : 22, color: '#fff', pointerEvents: 'none' }}>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: big ? 34 : span.col >= 5 ? 26 : 22, lineHeight: 1.04, margin: 0, letterSpacing: '-0.008em', textWrap: 'balance' }}>
            {area.name}
          </h3>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase' }}>
              {area.procedures.length} procedures · {area.doctorCount} doctor{area.doctorCount === 1 ? '' : 's'}
            </span>
            <span style={{ width: 34, height: 34, border: '1px solid rgba(255,255,255,0.4)', borderRadius: 100, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="arrow-up-right" size={12}/>
            </span>
          </div>
        </div>

        {/* Hover overlay — procedures list */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'rgba(20,40,63,0.93)',
          color: '#fff',
          padding: big ? 32 : 22,
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
          opacity: hover ? 1 : 0,
          transform: hover ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 240ms ease, transform 320ms cubic-bezier(.2,.7,.2,1)',
          pointerEvents: hover ? 'auto' : 'none',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)' }}>{area.eyebrow}</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.14em' }}>
              {String(index).padStart(2, '0')} / {window.ERC_DATA.areas.length}
            </span>
          </div>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: big ? 28 : 22, lineHeight: 1.1, margin: 0, color: '#fff' }}>{area.name}</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7, flex: 1, overflow: 'hidden' }}>
            {area.procedures.slice(0, big ? 8 : 5).map(p => (
              <div key={p} style={{ fontSize: big ? 14 : 13, color: 'rgba(255,255,255,0.92)', display: 'flex', gap: 10, alignItems: 'center' }}>
                <span style={{ width: 4, height: 4, borderRadius: 100, background: 'var(--accent)', flexShrink: 0 }}/>
                {p}
              </div>
            ))}
            {area.procedures.length > (big ? 8 : 5) && (
              <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>+{area.procedures.length - (big ? 8 : 5)} more</span>
            )}
          </div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: 'var(--accent)', borderBottom: '1px solid var(--accent)',
            paddingBottom: 2, alignSelf: 'flex-start', fontSize: 12, letterSpacing: '0.04em', fontFamily: 'var(--mono)', textTransform: 'uppercase',
          }}>
            Explore <Icon name="arrow-right" size={12}/>
          </span>
        </div>
      </div>
    </Link>
  );
};

// -------- Doctor card --------
const DoctorCard = ({ doctor, dense = false }) => {
  const area = window.ERC_DATA.areas.find(a => a.slug === doctor.area);
  return (
    <Link to={'/doctors#' + doctor.slug} style={{ display: 'block', background: 'var(--surface)', border: '1px solid var(--border)' }}>
      <div className="ratio" style={{ aspectRatio: dense ? '1/1' : '4/5' }}>
        <Img src={doctor.img} alt={doctor.name} label={doctor.name}/>
      </div>
      <div style={{ padding: dense ? 16 : 22 }}>
        <span className="eyebrow" style={{ fontSize: 10 }}>{area ? area.name : 'Specialty'}</span>
        <h3 style={{ fontFamily: 'var(--serif)', fontSize: dense ? 18 : 22, color: 'var(--primary)', margin: '6px 0 8px', lineHeight: 1.15 }}>{doctor.name}</h3>
        <p className="body-sm" style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 14 }}>{doctor.specialty}</p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <ComplianceTag kind="warn" style={{ fontSize: 9 }}>Credentials — to verify</ComplianceTag>
          <Icon name="arrow-up-right" size={14}/>
        </div>
      </div>
    </Link>
  );
};

// ===================== TREATMENTS HUB =====================
const TreatmentsHubPage = () => {
  const D = window.ERC_DATA;
  return (
    <div className="page page-enter">
      <PageHead
        eyebrow="Treatments"
        title={<>The full <em>treatment architecture</em>.</>}
        lede="Ten treatment areas across surgery, aesthetics, dental, regenerative and general medicine — every page follows the same compliant outline: what it is, candidacy, the process, recovery & aftercare, FAQ."
      />
      <section className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          {D.areas.map((a, i) => (
            <TreatmentTile key={a.slug} area={a} span={i % 5 === 0 ? 8 : i % 5 === 1 ? 4 : i % 5 === 2 ? 4 : i % 5 === 3 ? 4 : 4} />
          ))}
        </div>
      </section>
    </div>
  );
};

// ===================== TREATMENT DETAIL =====================
const TreatmentDetailPage = ({ slug }) => {
  const D = window.ERC_DATA;
  const a = D.areas.find(x => x.slug === slug);
  const [tab, setTab] = useState('what');
  if (!a) return <NotFoundPage />;
  const sectionsCopy = {
    what: a.blurb,
    who: 'Candidacy is assessed during your consultation. Patient history, medical fitness, lifestyle, and the realistic outcomes for your case are all considered before a plan is offered.',
    process: 'Your treating doctor walks you through the steps, theatre/clinic time, anaesthesia (where applicable), and what to expect on the day. No two plans are identical — the order, sessions and protocols are tailored.',
    recovery: 'Aftercare instructions, recovery time, follow-up checks and red-flag symptoms are documented and provided in writing. We do not promise outcomes; we work to a realistic plan.',
    faq: 'Common questions on safety, downtime, fees, anaesthesia and follow-up are covered by your treating doctor at consultation. We do not publish prices online — every quote is individual.',
  };
  return (
    <div className="page page-enter">
      <section style={{ background: 'var(--primary)', color: '#fff' }}>
        <div className="container" style={{ paddingBlock: 'clamp(64px, 8vw, 120px)', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <Link to="/treatments" style={{ color: 'rgba(255,255,255,.7)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>← Treatments</Link>
              <span style={{ color: 'rgba(255,255,255,.3)' }}>/</span>
              <span className="eyebrow" style={{ color: 'rgba(255,255,255,.55)' }}>{a.eyebrow}</span>
            </div>
            <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 5.8vw, 84px)', lineHeight: 1.02, margin: 0, color: '#fff', letterSpacing: '-0.01em' }}>
              {a.name}
            </h1>
            <p style={{ marginTop: 28, maxWidth: '52ch', color: 'rgba(255,255,255,.8)', fontSize: 18, lineHeight: 1.5, fontWeight: 300 }}>{a.blurb}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <Link to={'/book?treatment=' + a.slug} className="btn btn-accent">Book a Consultation <Icon name="arrow-right" size={14}/></Link>
              <a href={'https://wa.me/' + D.brand.whatsappRaw + '?text=Hi%20Enfield%20Royal%20Clinic%2C%20I%27d%20like%20to%20ask%20about%20' + encodeURIComponent(a.name)} className="btn btn-ghost" style={{ borderColor: 'rgba(255,255,255,.25)', color: '#fff' }}>
                <Icon name="whatsapp" size={14}/> Ask on WhatsApp
              </a>
            </div>
          </div>
          <div className="ratio ratio-4-5"><Img src={a.img} alt={a.name} label={a.name}/></div>
        </div>
      </section>

      <section className="section-pad">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 80, alignItems: 'start' }}>
          <aside style={{ position: 'sticky', top: 140, alignSelf: 'start' }}>
            <span className="eyebrow" style={{ marginBottom: 18, display: 'block' }}>On this page</span>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column' }}>
              {D.treatmentOutline.map((s) => (
                <li key={s.id}>
                  <button onClick={() => setTab(s.id)} style={{ width: '100%', textAlign: 'left', padding: '14px 0', borderTop: '1px solid var(--border)', fontSize: 16, fontFamily: 'var(--serif)', color: tab === s.id ? 'var(--accent)' : 'var(--primary)', display: 'flex', alignItems: 'center', gap: 12, transition: 'color 160ms ease' }}>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)' }}>{D.treatmentOutline.indexOf(s) + 1 < 10 ? '0' : ''}{D.treatmentOutline.indexOf(s) + 1}</span>
                    {s.label}
                  </button>
                </li>
              ))}
            </ul>
            <div style={{ borderTop: '1px solid var(--border)' }}/>
            <div style={{ marginTop: 32, padding: 18, background: 'var(--secondary)', border: '1px solid var(--border)' }}>
              <span className="eyebrow">Compliance</span>
              <p className="body-sm" style={{ marginTop: 10, fontSize: 12 }}>This page does not publish prices, guaranteed results, or banned superlatives. All quotes are individual and provided at consultation.</p>
            </div>
          </aside>

          <article style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {D.treatmentOutline.map((s) => (
              <div key={s.id} id={s.id}>
                <span className="eyebrow" style={{ marginBottom: 16, display: 'block' }}>{D.treatmentOutline.indexOf(s) + 1 < 10 ? '0' : ''}{D.treatmentOutline.indexOf(s) + 1} — {s.label}</span>
                <h2 style={{ fontFamily: 'var(--serif)', fontSize: 36, color: 'var(--primary)', margin: '0 0 16px', lineHeight: 1.1 }}>{s.label}</h2>
                <p style={{ maxWidth: '64ch', color: 'var(--text)', fontSize: 17, lineHeight: 1.6 }}>{sectionsCopy[s.id]}</p>
                {s.id === 'what' && (
                  <div style={{ marginTop: 32 }}>
                    <span className="eyebrow" style={{ marginBottom: 14, display: 'block' }}>Procedures in this area</span>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--border)' }}>
                      {a.procedures.map((p, i) => (
                        <div key={p} style={{ padding: '18px 22px', borderBottom: i < a.procedures.length - 2 ? '1px solid var(--border)' : 'none', borderRight: i % 2 === 0 ? '1px solid var(--border)' : 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--primary)' }}>
                          {p}
                          <Icon name="arrow-up-right" size={14}/>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}

            <div style={{ marginTop: 32, padding: 36, background: 'var(--secondary)' }}>
              <span className="eyebrow">Next step</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, color: 'var(--primary)', margin: '12px 0 18px' }}>Book a consultation with one of our doctors.</h3>
              <Link to={'/book?treatment=' + a.slug} className="btn btn-primary">Book a Consultation <Icon name="arrow-right" size={14}/></Link>
            </div>
          </article>
          <style>{`
            @media (max-width: 880px) {
              section.section-pad > .container[style*='grid-template-columns: 280px'] { grid-template-columns: 1fr !important; gap: 32px !important; }
              aside[style*='position: sticky'] { position: static !important; }
            }
          `}</style>
        </div>
      </section>
    </div>
  );
};

// ===================== DOCTORS =====================
const DoctorsPage = () => {
  const D = window.ERC_DATA;
  const [filter, setFilter] = useState('all');
  const filtered = filter === 'all' ? D.doctors : D.doctors.filter(d => d.area === filter);
  const dense = !!(window.__tweaks && window.__tweaks.denseDoctors);

  return (
    <div className="page page-enter">
      <PageHead
        eyebrow="Doctors"
        title={<>The clinic's <em>17 official profiles</em>.</>}
        lede="Names captured from the official roster. Every doctor card is shown with a 'credentials to verify' tag until DHA licence numbers, board certifications and portrait consent are confirmed for publication."
      />
      <section className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)' }}>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 40, paddingBottom: 24, borderBottom: '1px solid var(--border)' }}>
          <FilterChip active={filter === 'all'} onClick={() => setFilter('all')}>All doctors · {D.doctors.length}</FilterChip>
          {D.areas.filter(a => D.doctors.some(d => d.area === a.slug)).map(a => (
            <FilterChip key={a.slug} active={filter === a.slug} onClick={() => setFilter(a.slug)}>{a.name}</FilterChip>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: dense ? 'repeat(5, 1fr)' : 'repeat(4, 1fr)', gap: 24 }}>
          {filtered.map(d => <DoctorCard key={d.slug} doctor={d} dense={dense}/>)}
        </div>
        <style>{`
          @media (max-width: 1080px) { .page section > .container > div[style*='repeat(5'], .page section > .container > div[style*='repeat(4'] { grid-template-columns: repeat(3, 1fr) !important; }}
          @media (max-width: 760px) { .page section > .container > div[style*='repeat('] { grid-template-columns: repeat(2, 1fr) !important; }}
        `}</style>
      </section>
    </div>
  );
};

const FilterChip = ({ active, children, onClick }) => (
  <button onClick={onClick} style={{
    padding: '8px 16px',
    border: '1px solid',
    borderColor: active ? 'var(--primary)' : 'var(--border)',
    background: active ? 'var(--primary)' : 'transparent',
    color: active ? '#fff' : 'var(--primary)',
    borderRadius: 100,
    fontFamily: 'var(--mono)',
    fontSize: 11,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    transition: 'all 160ms ease',
  }}>{children}</button>
);

// ===================== BEFORE / AFTER =====================
const BeforeAfterPage = () => {
  const [slider, setSlider] = useState(50);
  return (
    <div className="page page-enter">
      <PageHead
        eyebrow="Before & After"
        title={<>The <em>architecture</em> — locked until consent is supplied.</>}
        lede="This page is built and ready. It will populate only with case material that comes with written patient consent and the DHA-compliant disclosure required for UAE medical advertising."
      />

      <section className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'start' }}>

          {/* The slider component, on a locked placeholder */}
          <div>
            <div style={{ position: 'relative', aspectRatio: '5 / 4', background: 'var(--secondary)', overflow: 'hidden', border: '1px solid var(--border)' }}>
              <div className="img-placeholder" style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, #E5EBEF 0 12px, #F0F4F7 12px 24px)' }}>BEFORE — case material to supply</div>
              <div style={{ position: 'absolute', inset: 0, width: slider + '%', overflow: 'hidden', borderRight: '2px solid var(--accent)' }}>
                <div className="img-placeholder" style={{ position: 'absolute', inset: 0, width: 'calc(100% / ' + (slider / 100) + ')', background: 'repeating-linear-gradient(135deg, #D9E2E8 0 12px, #E5EBEF 12px 24px)' }}>AFTER — case material to supply</div>
              </div>
              <div style={{ position: 'absolute', top: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between' }}>
                <span className="chip">BEFORE</span>
                <span className="chip chip-warn">AFTER · consent required</span>
              </div>
              <div style={{ position: 'absolute', left: 'calc(' + slider + '% - 18px)', top: '50%', transform: 'translateY(-50%)', width: 36, height: 36, borderRadius: 100, background: 'var(--accent)', color: 'var(--primary-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', boxShadow: '0 0 0 4px rgba(255,255,255,.4)' }}>
                ‹›
              </div>
              <input type="range" min="0" max="100" value={slider} onChange={(e) => setSlider(+e.target.value)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, cursor: 'ew-resize' }}/>
            </div>
            <div style={{ marginTop: 24, padding: 24, background: 'var(--surface)', border: '1px solid var(--border)' }}>
              <span className="eyebrow">Case context (template)</span>
              <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
                {[
                  { l: 'Treatment', v: '—' },
                  { l: 'Doctor', v: '—' },
                  { l: 'Sessions', v: '—' },
                  { l: 'Time-since', v: '—' },
                ].map((r) => (
                  <div key={r.l}>
                    <div className="body-sm" style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--mono)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{r.l}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--primary)', marginTop: 6 }}>{r.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div>
            <div style={{ padding: 28, background: 'var(--primary)', color: '#fff' }}>
              <Icon name="lock" size={22}/>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, margin: '14px 0 8px', lineHeight: 1.15 }}>This gallery ships locked.</h3>
              <p style={{ color: 'rgba(255,255,255,.8)', fontSize: 14, lineHeight: 1.55 }}>
                We do not publish, repurpose or reuse before/after material from the live site. Each case requires written, treatment-specific patient consent and the DHA's medical-advertising disclosure.
              </p>
            </div>
            <div style={{ padding: 28, background: 'var(--surface)', border: '1px solid var(--border)', borderTop: 0 }}>
              <span className="eyebrow">What unlocks this section</span>
              <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  'Patient consent form, signed and dated, per case',
                  'DHA medical-advertising disclosure attached',
                  'Same lighting / lens / angle, no edits, no claims',
                  'Treating doctor named on every case',
                  'No comparative or guaranteed-result language',
                ].map((t) => (
                  <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{ marginTop: 4, width: 18, height: 18, borderRadius: 100, background: 'var(--accent-soft)', color: 'var(--primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="check" size={10}/>
                    </span>
                    <span className="body-sm" style={{ color: 'var(--text)' }}>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        {/* The empty grid — placeholders */}
        <div style={{ marginTop: 80 }}>
          <span className="eyebrow" style={{ display: 'block', marginBottom: 18 }}>Cases — 0 / consent-cleared</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="ratio ratio-1" style={{ border: '1px dashed var(--border)' }}>
                <div className="img-placeholder">Case {String(i + 1).padStart(2, '0')} · pending consent</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ===================== ABOUT =====================
const AboutPage = () => {
  const D = window.ERC_DATA;
  return (
    <div className="page page-enter">
      <PageHead
        eyebrow="About"
        title={<>A doctor-led clinic group, <em>since 2011.</em></>}
        lede="Enfield Royal is a multi-specialty cosmetic surgery and aesthetic medical clinic group operating in Dubai (Al Manara) and Abu Dhabi — with all services regulated by the Dubai Health Authority."
      />

      <section className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div style={{ gridColumn: 'span 5' }}>
            <div className="ratio ratio-3-4"><Img src="media/clinic-lobby.webp" alt="Lobby" label="Clinic lobby"/></div>
          </div>
          <div style={{ gridColumn: 'span 7', display: 'flex', flexDirection: 'column', gap: 36 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              <div className="ratio ratio-1"><Img src="media/clinic-treatment-room.webp" alt="Treatment room"/></div>
              <div className="ratio ratio-1"><Img src="media/clinic-lounge.webp" alt="Lounge"/></div>
            </div>
            <div>
              <p style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.3, color: 'var(--primary)', margin: 0, fontStyle: 'italic' }}>
                Master pitch: "A premium clinic group should look more authoritative online — before/after content architecture, doctor-led trust pages, and higher-conversion consultation funnels."
              </p>
              <p style={{ marginTop: 28, color: 'var(--text)', fontSize: 16, lineHeight: 1.6, maxWidth: '60ch' }}>
                This site is an elevation of the existing WordPress build — same clinic, same doctors, but a faster, clearer, more compliant interface for the people who use it: patients planning a procedure and the doctors who'll perform it.
              </p>
            </div>
          </div>
        </div>

        {/* Stats */}
        <div style={{ marginTop: 96, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
            {D.statedClaims.map((s, i) => (
              <div key={i} style={{ padding: '40px 32px', borderRight: i < 3 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 64, lineHeight: 1, color: 'var(--primary)' }}>{s.num}</div>
                <div className="body-sm" style={{ marginTop: 12 }}>{s.label}</div>
                <div style={{ marginTop: 16 }}>
                  {s.verified
                    ? <ComplianceTag>Verified</ComplianceTag>
                    : <ComplianceTag kind="warn">Clinic's claim · to confirm</ComplianceTag>}
                </div>
              </div>
            ))}
          </div>
          <p className="body-sm" style={{ padding: '18px 32px', borderTop: '1px solid var(--border)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>
            * Stated by the clinic in its own marketing materials — published here only with attribution and DHA-compliant phrasing.
          </p>
        </div>

        {/* Timeline */}
        <div style={{ marginTop: 96 }}>
          <SectionHead eyebrow="The group" title={<>Dubai &amp; Abu Dhabi — <em>group reach to confirm.</em></>} />
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--border)' }}>
            {[
              { y: '2011', t: 'Founded', b: 'Enfield Royal Clinic opens in Dubai (verified).' },
              { y: '—', t: 'Dubai · Al Manara', b: 'Villa 1089, Al Wasl Road, Al Manara Area (verified).' },
              { y: '—', t: 'Abu Dhabi', b: 'Enfield Royal Abu Dhabi (group reach — full address to confirm).' },
              { y: '—', t: 'Wider group', b: 'The clinic also references Sharjah / international branches in its own materials — to confirm.' },
            ].map((s, i) => (
              <div key={i} style={{ padding: '32px 24px', borderRight: i < 3 ? '1px solid var(--border)' : 'none', borderBottom: '1px solid var(--border)' }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--accent)' }}>{s.y}</div>
                <h3 className="card" style={{ marginTop: 18, fontSize: 22 }}>{s.t}</h3>
                <p className="body-sm" style={{ marginTop: 10 }}>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ===================== LOCATIONS =====================
const LocationsPage = () => {
  const D = window.ERC_DATA;
  return (
    <div className="page page-enter">
      <PageHead
        eyebrow="Locations"
        title={<>Two locations. <em>One standard of care.</em></>}
        lede="Hours, the exact Dubai map pin, and the full Abu Dhabi address are shown only once confirmed in writing by the clinic. Until then we publish 'open 7 days — call to confirm timings'."
      />
      <section className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)' }}>
        {D.locations.map((loc, i) => (
          <div key={loc.id} id={loc.id} style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, paddingBlock: 64, borderTop: i === 0 ? '1px solid var(--border)' : 'none', borderBottom: '1px solid var(--border)' }}>
            <div style={{ gridColumn: 'span 7' }}>
              <div className="ratio ratio-16-10"><Img src={loc.hero} alt={loc.name} label={loc.name}/></div>
            </div>
            <div style={{ gridColumn: 'span 5', display: 'flex', flexDirection: 'column', gap: 18 }}>
              <span className="eyebrow">{i === 0 ? '01 — Dubai' : '02 — Abu Dhabi'}</span>
              <h2 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(34px, 4vw, 48px)', margin: 0, color: 'var(--primary)', lineHeight: 1.05 }}>{loc.name}</h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 12 }}>
                <Row icon="pin" label="Address" value={loc.address} />
                <Row icon="phone" label="Phone" value={loc.phone} href={'tel:' + loc.phone.replace(/\s/g,'')} />
                <Row icon="mail" label="Email" value={D.brand.email} href={'mailto:' + D.brand.email} />
                <Row icon="whatsapp" label="WhatsApp" value={D.brand.whatsapp} href={'https://wa.me/' + D.brand.whatsappRaw} />
                <Row icon="eye-off" label="Hours" value="Open 7 days — call to confirm timings" warn />
              </div>
              <p className="body-sm" style={{ marginTop: 16, fontSize: 12, color: 'var(--muted)' }}>{loc.note}</p>
              <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
                <Link to="/book" className="btn btn-primary">Book a consultation <Icon name="arrow-right" size={14}/></Link>
                <Link to="/contact" className="btn btn-ghost">Contact <Icon name="arrow-up-right" size={14}/></Link>
              </div>
            </div>
          </div>
        ))}
      </section>
    </div>
  );
};

const Row = ({ icon, label, value, href, warn }) => {
  const inner = (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '12px 0', borderBottom: '1px solid var(--border)' }}>
      <span style={{ width: 28, height: 28, borderRadius: 100, background: warn ? 'var(--accent-soft)' : 'var(--secondary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)', flexShrink: 0 }}>
        <Icon name={icon} size={14}/>
      </span>
      <div>
        <div className="eyebrow" style={{ fontSize: 10, marginBottom: 4 }}>{label}</div>
        <div style={{ fontSize: 15, color: 'var(--text)' }}>{value}</div>
      </div>
    </div>
  );
  return href ? <a href={href}>{inner}</a> : inner;
};

// ===================== CONTACT =====================
const ContactPage = () => {
  const D = window.ERC_DATA;
  return (
    <div className="page page-enter">
      <PageHead
        eyebrow="Contact"
        title={<>How to <em>reach the clinic.</em></>}
        lede="Verified phone, WhatsApp, email and address. For a full consultation booking, use the form on the Book page — it sends to both the clinic and your inbox."
      />
      <section className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32 }}>
          <div style={{ gridColumn: 'span 5' }}>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {[
                { icon: 'phone', label: 'Dubai', value: D.brand.phoneDubai, href: 'tel:' + D.brand.phoneDubai.replace(/\s/g,'') },
                { icon: 'phone', label: 'Abu Dhabi', value: D.brand.phoneAUH, href: 'tel:' + D.brand.phoneAUH.replace(/\s/g,'') },
                { icon: 'whatsapp', label: 'WhatsApp', value: D.brand.whatsapp, href: 'https://wa.me/' + D.brand.whatsappRaw },
                { icon: 'mail', label: 'Email', value: D.brand.email, href: 'mailto:' + D.brand.email },
                { icon: 'pin', label: 'Address (Dubai)', value: D.brand.addressDubai },
              ].map((r, i) => (
                <a key={i} href={r.href || undefined} style={{ display: 'flex', gap: 22, padding: '28px 0', borderTop: '1px solid var(--border)', alignItems: 'flex-start' }}>
                  <span style={{ width: 40, height: 40, borderRadius: 100, background: 'var(--secondary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)' }}>
                    <Icon name={r.icon} size={16}/>
                  </span>
                  <div style={{ flex: 1 }}>
                    <div className="eyebrow" style={{ fontSize: 10 }}>{r.label}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--primary)', marginTop: 6 }}>{r.value}</div>
                  </div>
                  {r.href && <Icon name="arrow-up-right" size={18}/>}
                </a>
              ))}
            </div>
          </div>

          <div style={{ gridColumn: 'span 7' }}>
            <div className="ratio ratio-16-10"><Img src="media/clinic-desk.webp" alt="Reception desk" label="Reception desk"/></div>
            <div style={{ marginTop: 32, padding: 32, background: 'var(--primary)', color: '#fff' }}>
              <span className="eyebrow" style={{ color: 'rgba(255,255,255,.6)' }}>For a consultation</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 32, margin: '14px 0 18px', lineHeight: 1.15 }}>Book via our consultation form — it routes to the clinic with a copy to your inbox.</h3>
              <Link to="/book" className="btn btn-accent">Book a Consultation <Icon name="arrow-right" size={14}/></Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// ===================== BOOK =====================
const BookPage = () => {
  const D = window.ERC_DATA;
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ name: '', phone: '', email: '', branch: 'dubai', treatment: '', date: '', notes: '' });
  const [submitted, setSubmitted] = useState(false);
  useEffect(() => {
    const m = window.location.hash.match(/treatment=([^&]+)/);
    if (m) setForm(f => ({ ...f, treatment: decodeURIComponent(m[1]) }));
  }, []);

  const update = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const next = () => setStep(s => Math.min(3, s + 1));
  const back = () => setStep(s => Math.max(1, s - 1));
  const canNext = step === 1 ? (form.name && form.phone) : step === 2 ? !!form.treatment : true;

  if (submitted) {
    return (
      <div className="page page-enter">
        <PageHead
          eyebrow="Consultation request received"
          title={<>Thank you, <em>{form.name.split(' ')[0] || 'we'}</em>.</>}
          lede="A clinic coordinator will reach out within 24 hours to confirm your preferred date and walk you through what to bring."
        />
        <section className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', padding: 32 }}>
            <span className="eyebrow">Your request</span>
            <dl style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 24px' }}>
              {Object.entries(form).filter(([k,v]) => v).map(([k, v]) => (
                <React.Fragment key={k}>
                  <dt className="body-sm" style={{ textTransform: 'uppercase', letterSpacing: '0.08em', fontSize: 10, color: 'var(--muted)', fontFamily: 'var(--mono)' }}>{k}</dt>
                  <dd style={{ margin: 0, color: 'var(--primary)', fontFamily: 'var(--serif)', fontSize: 18 }}>{v}</dd>
                </React.Fragment>
              ))}
            </dl>
          </div>
          <div style={{ background: 'var(--primary)', color: '#fff', padding: 32 }}>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,.6)' }}>While you wait</span>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, margin: '14px 0 18px', lineHeight: 1.15 }}>WhatsApp the clinic directly for anything urgent.</h3>
            <a href={'https://wa.me/' + D.brand.whatsappRaw} className="btn btn-accent">
              <Icon name="whatsapp" size={14}/> Open WhatsApp
            </a>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page page-enter">
      <section style={{ background: 'var(--primary)', color: '#fff' }}>
        <div className="container" style={{ paddingBlock: 'clamp(56px, 7vw, 96px)', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,.55)' }}>Book a Consultation</span>
            <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 5.4vw, 76px)', lineHeight: 1.05, margin: '20px 0 0', color: '#fff', letterSpacing: '-0.01em' }}>
              A doctor reviews <em style={{ color: 'var(--accent)' }}>every request</em> personally.
            </h1>
            <p style={{ marginTop: 24, maxWidth: '52ch', color: 'rgba(255,255,255,.8)', fontSize: 17, lineHeight: 1.55, fontWeight: 300 }}>
              We ask only for what's needed to schedule you — name, contact, treatment interest, branch and preferred date. We do not collect medical history through this form.
            </p>
          </div>
          <div style={{ background: 'rgba(255,255,255,.08)', padding: 28, border: '1px solid rgba(255,255,255,.15)' }}>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,.6)' }}>Privacy</span>
            <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13.5, color: 'rgba(255,255,255,.85)' }}>
              <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}><Icon name="shield" size={14}/><span>Minimal PHI — no medical history collected here.</span></li>
              <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}><Icon name="lock" size={14}/><span>Routed to the clinic + a confirmation to your inbox.</span></li>
              <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}><Icon name="check" size={14}/><span>You can WhatsApp us instead at any time.</span></li>
            </ul>
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', gap: 4, marginBottom: 36 }}>
              {[1, 2, 3].map((n) => (
                <button key={n} onClick={() => setStep(n)} style={{ flex: 1, borderTop: '3px solid ' + (n <= step ? 'var(--accent)' : 'var(--border)'), padding: '14px 0', textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em' }}>STEP 0{n}</span>
                  <span style={{ fontSize: 14, color: n <= step ? 'var(--primary)' : 'var(--muted)', fontWeight: 500 }}>{['You', 'Treatment', 'Preferences'][n - 1]}</span>
                </button>
              ))}
            </div>

            {step === 1 && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <Field label="Full name" value={form.name} onChange={v => update('name', v)} placeholder="First &amp; last name" />
                <Field label="Phone (UAE preferred)" value={form.phone} onChange={v => update('phone', v)} placeholder="+971 ..." />
                <Field label="Email" value={form.email} onChange={v => update('email', v)} placeholder="you@example.com" />
              </div>
            )}
            {step === 2 && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                <div>
                  <span className="eyebrow" style={{ marginBottom: 14, display: 'block' }}>Treatment area</span>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                    {D.areas.map(a => (
                      <button key={a.slug} onClick={() => update('treatment', a.name)} style={{ padding: '14px 16px', border: '1px solid ' + (form.treatment === a.name ? 'var(--primary)' : 'var(--border)'), background: form.treatment === a.name ? 'var(--primary)' : 'var(--surface)', color: form.treatment === a.name ? '#fff' : 'var(--primary)', textAlign: 'left', fontFamily: 'var(--serif)', fontSize: 17, transition: 'all 140ms ease' }}>
                        {a.name}
                      </button>
                    ))}
                  </div>
                </div>
                <Field label="Notes (optional)" value={form.notes} onChange={v => update('notes', v)} placeholder="Anything specific you'd like the doctor to know?" multiline />
              </div>
            )}
            {step === 3 && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                <div>
                  <span className="eyebrow" style={{ marginBottom: 14, display: 'block' }}>Branch</span>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    {[{ id: 'dubai', l: 'Dubai · Al Manara' }, { id: 'abu-dhabi', l: 'Abu Dhabi' }].map(b => (
                      <button key={b.id} onClick={() => update('branch', b.id)} style={{ padding: '20px 18px', border: '1px solid ' + (form.branch === b.id ? 'var(--primary)' : 'var(--border)'), background: form.branch === b.id ? 'var(--primary)' : 'var(--surface)', color: form.branch === b.id ? '#fff' : 'var(--primary)', textAlign: 'left', fontFamily: 'var(--serif)', fontSize: 20 }}>
                        {b.l}
                      </button>
                    ))}
                  </div>
                </div>
                <Field label="Preferred date" value={form.date} onChange={v => update('date', v)} placeholder="e.g. Sun 8 Jun 2026, mid-morning" />
              </div>
            )}

            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              {step > 1 && <button onClick={back} className="btn btn-ghost">Back</button>}
              {step < 3 && <button onClick={next} disabled={!canNext} className="btn btn-primary" style={{ opacity: canNext ? 1 : 0.4 }}>Continue <Icon name="arrow-right" size={14}/></button>}
              {step === 3 && <button onClick={() => setSubmitted(true)} className="btn btn-primary">Send request <Icon name="arrow-right" size={14}/></button>}
              <a href={'https://wa.me/' + D.brand.whatsappRaw} className="btn-link" style={{ alignSelf: 'center' }}>or WhatsApp instead</a>
            </div>
          </div>

          <aside style={{ background: 'var(--secondary)', padding: 32, position: 'sticky', top: 140 }}>
            <span className="eyebrow">Summary</span>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, color: 'var(--primary)', margin: '14px 0 24px', lineHeight: 1.1 }}>
              {form.name || 'Your consultation'} {form.treatment && <span style={{ color: 'var(--muted)', fontSize: 18 }}>· {form.treatment}</span>}
            </h3>
            <dl style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 14, margin: 0 }}>
              {[
                ['Branch', form.branch === 'dubai' ? 'Dubai · Al Manara' : 'Abu Dhabi'],
                ['Treatment', form.treatment || '—'],
                ['Phone', form.phone || '—'],
                ['Email', form.email || '—'],
                ['Preferred date', form.date || '—'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>
                  <dt className="eyebrow" style={{ fontSize: 10 }}>{k}</dt>
                  <dd style={{ margin: 0, color: 'var(--primary)', fontSize: 14, textAlign: 'right' }}>{v}</dd>
                </div>
              ))}
            </dl>
            <div style={{ marginTop: 32, padding: 16, background: 'var(--surface)', border: '1px solid var(--border)' }}>
              <span className="eyebrow" style={{ fontSize: 10 }}>Compliance</span>
              <p className="body-sm" style={{ marginTop: 8, fontSize: 12 }}>This form is intentionally minimal. We do not collect medical history here. A doctor will discuss specifics during your consultation.</p>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
};

const Field = ({ label, value, onChange, placeholder, multiline }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
    <span className="eyebrow">{label}</span>
    {multiline
      ? <textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} rows={4} style={inputStyle} />
      : <input type="text" value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} style={inputStyle} />}
  </label>
);
const inputStyle = {
  border: '1px solid var(--border)',
  background: 'var(--surface)',
  padding: '14px 16px',
  fontFamily: 'var(--sans)',
  fontSize: 16,
  color: 'var(--text)',
  outline: 'none',
  resize: 'vertical',
};

// ===================== shared PageHead =====================
const PageHead = ({ eyebrow, title, lede }) => (
  <section style={{ background: 'var(--bg)', borderBottom: '1px solid var(--border)' }}>
    <div className="container" style={{ paddingBlock: 'clamp(56px, 7vw, 112px)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
        <div>
          <span className="eyebrow">{eyebrow}</span>
          <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(46px, 6vw, 88px)', lineHeight: 1.02, margin: '20px 0 0', color: 'var(--primary)', letterSpacing: '-0.015em', textWrap: 'balance' }}>
            {title}
          </h1>
        </div>
        {lede && <p className="lede" style={{ maxWidth: '52ch' }}>{lede}</p>}
      </div>
    </div>
  </section>
);

// ===================== 404 =====================
const NotFoundPage = () => (
  <div className="page page-enter">
    <PageHead eyebrow="404" title={<>That page is <em>not where it should be.</em></>} lede="Try treatments, doctors, or the booking form below."/>
    <div className="container" style={{ paddingBottom: 'clamp(72px, 9vw, 128px)', display: 'flex', gap: 12 }}>
      <Link to="/treatments" className="btn btn-primary">Treatments</Link>
      <Link to="/doctors" className="btn btn-ghost">Doctors</Link>
      <Link to="/book" className="btn btn-ghost">Book a Consultation</Link>
    </div>
  </div>
);

// Export to window
Object.assign(window, {
  HomePage, TreatmentsHubPage, TreatmentDetailPage,
  DoctorsPage, BeforeAfterPage, AboutPage, LocationsPage, ContactPage, BookPage, NotFoundPage,
  PageHead, TreatmentTile, DoctorCard,
});
