// ---------------------------------------------------------------------------
// Pages — Home / Treatments / Doctors / About / Contact
// ---------------------------------------------------------------------------

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

// ===== HOME ================================================================
function HomePage({ onNavigate, onBook }) {
  const scrollY = useScrollY();

  return (
    <div className="page-enter">
      {/* HERO */}
      <section style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `linear-gradient(90deg, rgba(20,20,22,0.6) 0%, rgba(20,20,22,0.25) 55%, rgba(20,20,22,0) 100%), linear-gradient(180deg, rgba(20,20,22,0.45) 0%, rgba(20,20,22,0.3) 35%, rgba(20,20,22,0.82) 100%), url('media/clinic-cover.webp')`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          transform: `translate3d(0, ${scrollY * 0.18}px, 0) scale(${1 + scrollY * 0.0002})`,
          transition: 'transform 100ms linear',
        }} />
        <div className="container" style={{
          position: 'relative', zIndex: 2, minHeight: '100vh',
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          paddingTop: 200, paddingBottom: 80, color: 'white',
        }}>
          <div style={{ maxWidth: 720, animation: 'pageFade 800ms cubic-bezier(0.2,0.7,0.2,1)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32 }}>
              <span style={{ width: 36, height: 1, background: 'var(--gold)' }} />
              <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.95)' }}>Aesthetic & dermatology · Jumeirah, since {CLINIC.since}</span>
            </div>
            <h1 className="serif" style={{ color: 'white', fontWeight: 300, textShadow: '0 2px 40px rgba(0,0,0,0.4)' }}>
              The quiet authority<br />
              <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>of doctor-led skin.</span>
            </h1>
            <p style={{
              marginTop: 32, fontSize: 18, lineHeight: 1.6, maxWidth: 540,
              color: 'rgba(255,255,255,0.95)', fontWeight: 300, textShadow: '0 1px 30px rgba(0,0,0,0.35)',
            }}>
              For thirteen years, founder Dr Radmila Lukian and her clinical team have practised dermatology, aesthetics and plastic surgery from a single villa on Jumeirah Beach Road — without hype, without guarantees, without shortcuts.
            </p>
            <div style={{ marginTop: 44, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <button className="btn" onClick={onBook} style={{ background: 'white', color: 'var(--ink)', borderColor: 'white' }}>
                Book a consultation <ArrowRight size={10} />
              </button>
              <button className="btn btn-outline" onClick={() => onNavigate('treatments')} style={{ color: 'white', borderColor: 'white' }}>
                Treatment menu
              </button>
            </div>
          </div>

          {/* Hero stats strip */}
          <div style={{
            marginTop: 96, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.18)',
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
          }}>
            {[
              { kpi: '2012', label: 'Founded' },
              { kpi: '11', label: 'In-house doctors' },
              { kpi: '4', label: 'Treatment areas' },
              { kpi: 'EADV · AAD', label: 'Memberships' },
            ].map((s, i) => (
              <div key={i}>
                <div className="serif" style={{ fontSize: 42, color: 'white', fontWeight: 300 }}>{s.kpi}</div>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.8)', marginTop: 6 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)', zIndex: 3,
          color: 'rgba(255,255,255,0.7)', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        }}>
          Scroll
          <span style={{ width: 1, height: 32, background: 'rgba(255,255,255,0.4)' }} />
        </div>
      </section>

      {/* INTRO / Doctor-led ribbon */}
      <section style={{ padding: '120px 0', background: 'var(--porcelain)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <SectionEyebrow label="Our practice" />
            <h2 className="serif" style={{ marginTop: 24, fontSize: 'clamp(40px, 4.4vw, 64px)', fontWeight: 300 }}>
              A clinic built around{' '}
              <span style={{ fontStyle: 'italic', color: 'var(--gold-deep)' }}>one principle</span>:
              the doctor sees you first.
            </h2>
            <p style={{ marginTop: 32, fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)', maxWidth: 580 }}>
              Every patient at Lucia is seen by a licensed dermatologist or specialist physician before any treatment is recommended.
              That single rule — quiet, almost old-fashioned — is the reason patients return, refer their families, and trust us with their longest-term skin work.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 28, flexWrap: 'wrap' }}>
              {[
                'European Board-Certified founder',
                'Resident specialist doctors',
                'MOH-approved facility',
                'Compliant with DHA advertising rules',
              ].map(t => (
                <div key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, maxWidth: 240 }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ marginTop: 4, flexShrink: 0 }}>
                    <circle cx="7" cy="7" r="6.5" stroke="var(--gold)" fill="none" />
                    <path d="M4 7.2 6.2 9.2 10 5.2" stroke="var(--gold-deep)" strokeWidth="1" strokeLinecap="round" />
                  </svg>
                  <span style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <img src="media/doctor-radmila-section.webp" alt="Dr Radmila Lukian at Lucia Clinic" style={{ width: '100%', height: 580, objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', bottom: -24, left: -24,
              background: 'var(--ink)', color: 'white', padding: '24px 28px', maxWidth: 280,
            }}>
              <div className="eyebrow" style={{ color: 'var(--gold)' }}>Founder</div>
              <div className="serif" style={{ fontSize: 24, marginTop: 6, fontWeight: 300 }}>Dr Radmila Lukian</div>
              <div style={{ fontSize: 12, marginTop: 4, color: 'rgba(255,255,255,0.7)' }}>European Board-Certified Dermatologist</div>
            </div>
          </div>
        </div>
      </section>

      {/* TREATMENT AREAS */}
      <section style={{ padding: '120px 0 0', background: 'var(--mist)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 64 }}>
            <div>
              <SectionEyebrow label="Treatments" />
              <h2 className="serif" style={{ marginTop: 18, fontWeight: 300, maxWidth: 720 }}>
                Four practices,{' '}
                <span style={{ fontStyle: 'italic' }}>one philosophy.</span>
              </h2>
            </div>
            <button className="arrow-link" onClick={() => onNavigate('treatments')}>
              Full treatment menu <ArrowRight />
            </button>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
            {TREATMENT_AREAS.map((area, i) => (
              <button
                key={area.id}
                onClick={() => onNavigate('treatments', { area: area.id })}
                style={{
                  position: 'relative', overflow: 'hidden', background: 'var(--ink)',
                  height: 480, padding: 0, border: 'none', cursor: 'pointer',
                  textAlign: 'left', color: 'white',
                }}
                className="area-card"
              >
                <img
                  src={area.image}
                  alt={area.label}
                  style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%',
                    objectFit: 'cover', transition: 'transform 800ms cubic-bezier(0.2,0.7,0.2,1), filter 600ms ease',
                    filter: 'brightness(0.62)',
                  }}
                />
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(27,27,30,0.15) 0%, rgba(27,27,30,0.7) 100%)',
                }} />
                <div style={{
                  position: 'absolute', inset: 0, padding: 40,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                }}>
                  <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.9)' }}>
                    {String(i + 1).padStart(2, '0')} · {area.sub}
                  </div>
                  <div>
                    <h3 className="serif" style={{ color: 'white', fontSize: 52, fontWeight: 300, lineHeight: 1 }}>{area.label}</h3>
                    <p style={{ marginTop: 18, fontSize: 15, color: 'rgba(255,255,255,0.85)', maxWidth: 420, lineHeight: 1.6 }}>{area.blurb}</p>
                    <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                      Explore {area.treatments.length} treatments <ArrowRight size={10} />
                    </div>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* By concern */}
        <div className="container" style={{ marginTop: 88, paddingBottom: 120 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16, marginBottom: 32 }}>
            <div>
              <SectionEyebrow label="Treat by concern" />
              <h3 className="serif" style={{ marginTop: 14, fontSize: 32, fontWeight: 300 }}>Or start from what brought you here.</h3>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {CONCERNS.map(c => (
              <button
                key={c.id}
                className="chip"
                style={{ padding: '12px 20px', fontSize: 13 }}
                onClick={() => onNavigate('treatments', { concern: c.id })}
              >
                {c.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* DOCTORS TEASER */}
      <section style={{ padding: '120px 0', background: 'var(--porcelain)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
            <div>
              <SectionEyebrow label="Our doctors" />
              <h2 className="serif" style={{ marginTop: 18, fontWeight: 300, maxWidth: 720 }}>
                Eleven licensed clinicians.<br />
                <span style={{ fontStyle: 'italic' }}>All resident or known to us.</span>
              </h2>
            </div>
            <button className="arrow-link" onClick={() => onNavigate('doctors')}>Meet the full team <ArrowRight /></button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {DOCTORS.slice(0, 4).map(d => (
              <button
                key={d.slug}
                onClick={() => onNavigate('doctors', { doctor: d.slug })}
                style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}
              >
                <div style={{ position: 'relative', aspectRatio: '3/4', overflow: 'hidden', background: 'var(--mist)' }}>
                  <img src={d.portrait} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', transition: 'transform 600ms ease' }} />
                </div>
                <div style={{ marginTop: 16 }}>
                  <div className="eyebrow eyebrow-muted">{d.specialty}</div>
                  <div className="serif" style={{ marginTop: 6, fontSize: 22, fontWeight: 400 }}>{d.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>{d.role}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* DEVICES + ACCREDITATIONS */}
      <section style={{ padding: '120px 0', background: 'white', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
            <div>
              <SectionEyebrow label="Devices & technology" />
              <h2 className="serif" style={{ marginTop: 18, fontWeight: 300, maxWidth: 360 }}>
                Named devices,<br />operated by licensed clinicians.
              </h2>
              <p style={{ marginTop: 24, color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 400 }}>
                Energy-based and laser platforms are powerful when prescribed appropriately and used by trained operators. We name the device and the clinician — never one without the other.
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 4 }}>
              {DEVICES.map((d, i) => (
                <div
                  key={d.name}
                  style={{
                    padding: '28px 28px', borderTop: i < 2 ? 'none' : '1px solid var(--line)',
                    borderLeft: i % 2 ? '1px solid var(--line)' : 'none',
                  }}
                >
                  <div className="serif" style={{ fontSize: 22, fontWeight: 400 }}>{d.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6 }}>{d.blurb}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 96, paddingTop: 56, borderTop: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 48, flexWrap: 'wrap' }}>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted)', flexShrink: 0 }}>
                Memberships <span style={{ color: 'var(--gold-deep)' }}>(verified)</span>
              </div>
              <div style={{ display: 'flex', gap: 48, alignItems: 'center', flexWrap: 'wrap', flex: 1 }}>
                {ACCREDITATIONS.map(a => (
                  <div key={a.id} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <img src={a.logo} alt={a.full} style={{ height: 44, width: 'auto', objectFit: 'contain', filter: 'grayscale(0.4)' }} />
                    <div style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', maxWidth: 220 }}>{a.full}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY / quote section */}
      <section style={{ padding: '160px 0', background: 'var(--ink)', color: 'white', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'url("media/brand-cover-2.webp")',
          backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: 0.18, filter: 'grayscale(0.5)',
        }} />
        <div className="container-narrow" style={{ position: 'relative', textAlign: 'center' }}>
          <div style={{ width: 1, height: 56, background: 'var(--gold)', margin: '0 auto 32px' }} />
          <p className="serif" style={{
            fontSize: 'clamp(28px, 3.4vw, 48px)',
            fontWeight: 300, lineHeight: 1.35, color: 'white', fontStyle: 'italic',
            letterSpacing: '-0.005em',
          }}>
            “The brand name comes from the Italian <span style={{ color: 'var(--gold)' }}>luce</span> — light.<br />
            Our work is to bring out the light already in our patients&apos; skin,<br />
            not to write a new face on top of it.”
          </p>
          <div style={{ marginTop: 40, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>
            Dr Radmila Lukian &middot; Founder & Medical Director
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section style={{ padding: '120px 0', background: 'var(--porcelain)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <SectionEyebrow label="Begin" />
            <h2 className="serif" style={{ marginTop: 24, fontWeight: 300 }}>
              A consultation is the<br />
              <span style={{ fontStyle: 'italic' }}>only first step.</span>
            </h2>
            <p style={{ marginTop: 28, color: 'var(--ink-soft)', fontSize: 17, lineHeight: 1.7, maxWidth: 480 }}>
              We don&apos;t offer prices online. Aesthetic and dermatology decisions deserve a private, in-person conversation — we&apos;d rather take the time, even if it&apos;s a treatment we won&apos;t recommend.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn" onClick={onBook}>Book a consultation <ArrowRight size={10} /></button>
              <a className="btn btn-outline" href={CLINIC.whatsappLink}>Ask on WhatsApp</a>
            </div>
          </div>
          <div style={{ background: 'white', padding: 40, border: '1px solid var(--line)' }}>
            <div className="eyebrow">Visit us</div>
            <div className="serif" style={{ fontSize: 26, marginTop: 12, lineHeight: 1.3 }}>Villa 323, Jumeirah Beach Road</div>
            <div style={{ marginTop: 6, fontSize: 13, color: 'var(--muted)' }}>{CLINIC.landmark}</div>

            <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <div>
                <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8 }}>Phone</div>
                <a href={CLINIC.phoneTel} style={{ fontSize: 15 }}>{CLINIC.phone}</a>
              </div>
              <div>
                <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8 }}>WhatsApp</div>
                <a href={CLINIC.whatsappLink} style={{ fontSize: 15 }}>{CLINIC.whatsapp}</a>
              </div>
              <div>
                <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8 }}>Hours</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>Mon – Sun<br />9 am – 8 pm</div>
              </div>
              <div>
                <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8 }}>Email</div>
                <a href={'mailto:' + CLINIC.email} style={{ fontSize: 13 }}>{CLINIC.email}</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ===== Scroll helper hook =================================================
function useScrollY() {
  const [y, setY] = useStateP(0);
  useEffectP(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
}

// ===== TREATMENTS PAGE ====================================================
function TreatmentsPage({ params, onNavigate, onBook }) {
  const [areaId, setAreaId] = useStateP(params?.area || 'face');
  const [concernId, setConcernId] = useStateP(params?.concern || null);
  const [activeTreatment, setActiveTreatment] = useStateP(params?.treatment || null);

  useEffectP(() => {
    if (params?.area) setAreaId(params.area);
    if (params?.concern) setConcernId(params.concern);
    if (params?.treatment) setActiveTreatment(params.treatment);
  }, [params]);

  const area = TREATMENT_AREAS.find(a => a.id === areaId) || TREATMENT_AREAS[0];
  const filteredTreatments = useMemoP(() => {
    if (concernId) {
      const concern = CONCERNS.find(c => c.id === concernId);
      if (!concern) return area.treatments;
      const targetArea = TREATMENT_AREAS.find(a => a.id === concern.area) || area;
      return targetArea.treatments;
    }
    return area.treatments;
  }, [areaId, concernId, area]);

  const treatmentObj = activeTreatment ? area.treatments.find(t => t.slug === activeTreatment) : null;

  return (
    <div className="page-enter" style={{ paddingTop: 120 }}>
      {/* Header */}
      <section style={{ background: 'var(--mist)', padding: '88px 0 56px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <SectionEyebrow label="Treatments menu" />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap', marginTop: 18 }}>
            <h1 className="serif" style={{ fontSize: 'clamp(48px, 5.4vw, 80px)', fontWeight: 300, maxWidth: 720 }}>
              Treatments by{' '}
              <span style={{ fontStyle: 'italic' }}>area</span>{' '}
              or by{' '}
              <span style={{ fontStyle: 'italic', color: 'var(--gold-deep)' }}>concern</span>.
            </h1>
            <div style={{ fontSize: 14, color: 'var(--muted)', maxWidth: 360, lineHeight: 1.6 }}>
              All treatments are by consultation. No prices are published online — your plan is built with the doctor in person.
            </div>
          </div>
        </div>
      </section>

      {/* Tabs + concerns */}
      <section style={{ background: 'var(--porcelain)', padding: '40px 0 0', position: 'sticky', top: 78, zIndex: 10, borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--line)', overflowX: 'auto' }}>
            {TREATMENT_AREAS.map(a => (
              <button
                key={a.id}
                onClick={() => { setAreaId(a.id); setConcernId(null); setActiveTreatment(null); }}
                style={{
                  background: 'none', border: 'none', padding: '20px 28px 16px 0',
                  marginRight: 32, cursor: 'pointer',
                  fontSize: 14, color: areaId === a.id && !concernId ? 'var(--ink)' : 'var(--muted)',
                  fontWeight: areaId === a.id && !concernId ? 500 : 400,
                  borderBottom: areaId === a.id && !concernId ? '2px solid var(--gold)' : '2px solid transparent',
                  marginBottom: -1, letterSpacing: '0.04em', whiteSpace: 'nowrap',
                }}
              >
                {a.label} <span style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 4 }}>{a.treatments.length}</span>
              </button>
            ))}
          </div>

          <div style={{ padding: '20px 0', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <div className="eyebrow eyebrow-muted" style={{ flexShrink: 0 }}>By concern</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <button
                className={'chip' + (!concernId ? ' active' : '')}
                onClick={() => setConcernId(null)}
              >
                All
              </button>
              {CONCERNS.map(c => (
                <button
                  key={c.id}
                  className={'chip' + (concernId === c.id ? ' active' : '')}
                  onClick={() => { setConcernId(c.id); setAreaId(c.area); setActiveTreatment(null); }}
                >
                  {c.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Area hero strip */}
      <section style={{ padding: '80px 0', background: 'var(--porcelain)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center', marginBottom: 64 }}>
            <div>
              <div className="eyebrow">{area.sub}</div>
              <h2 className="serif" style={{ marginTop: 16, fontWeight: 300 }}>{area.label}</h2>
              <p style={{ marginTop: 24, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.75, maxWidth: 520 }}>
                {area.blurb}
              </p>
              <div style={{ marginTop: 32, display: 'flex', gap: 24 }}>
                <div>
                  <div className="serif" style={{ fontSize: 36, fontWeight: 300 }}>{area.treatments.length}</div>
                  <div className="eyebrow eyebrow-muted">Treatments</div>
                </div>
                <div style={{ width: 1, background: 'var(--line-strong)' }} />
                <div>
                  <div className="serif" style={{ fontSize: 36, fontWeight: 300 }}>{DOCTORS.filter(d => d.specialty.toLowerCase().includes(area.id) || area.id === 'face' && d.specialty === 'Dermatology' || area.id === 'plastic-surgery' && d.specialty === 'Plastic Surgery' || area.id === 'body' && d.specialty === 'Aesthetics' || area.id === 'men').length}</div>
                  <div className="eyebrow eyebrow-muted">Specialists</div>
                </div>
              </div>
            </div>
            <div style={{ height: 380, overflow: 'hidden' }}>
              <img src={area.image} alt={area.label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>

          {/* Treatments list */}
          <div className="card-frame" style={{ overflow: 'hidden' }}>
            {filteredTreatments.map((t, i) => (
              <button
                key={t.slug}
                onClick={() => setActiveTreatment(t.slug)}
                style={{
                  width: '100%', background: activeTreatment === t.slug ? 'var(--mist)' : 'white',
                  border: 'none', borderBottom: i < filteredTreatments.length - 1 ? '1px solid var(--line)' : 'none',
                  padding: '24px 32px', cursor: 'pointer', textAlign: 'left',
                  display: 'grid', gridTemplateColumns: '40px 1fr 120px 100px 24px', gap: 24, alignItems: 'center',
                  transition: 'background 200ms ease',
                }}
                onMouseEnter={e => { if (activeTreatment !== t.slug) e.currentTarget.style.background = 'var(--mist)'; }}
                onMouseLeave={e => { if (activeTreatment !== t.slug) e.currentTarget.style.background = 'white'; }}
              >
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <div className="serif" style={{ fontSize: 22, fontWeight: 400 }}>{t.name}</div>
                </div>
                <div style={{ fontSize: 12, letterSpacing: '0.1em', color: 'var(--gold-deep)', textTransform: 'uppercase' }}>{t.type}</div>
                <div style={{ fontSize: 13, color: 'var(--muted)' }}>{t.time}</div>
                <div style={{ color: 'var(--ink)' }}>→</div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Treatment detail drawer */}
      {treatmentObj && (
        <div className="modal-backdrop" onClick={() => setActiveTreatment(null)} style={{ alignItems: 'stretch', justifyContent: 'flex-end' }}>
          <div className="drawer-panel" onClick={(e) => e.stopPropagation()}>
            <TreatmentDetail
              area={area}
              treatment={treatmentObj}
              onClose={() => setActiveTreatment(null)}
              onBook={() => onBook({ area: area.id, treatment: treatmentObj.slug })}
            />
          </div>
        </div>
      )}

      {/* Compliance / CTA strip */}
      <section style={{ padding: '88px 0', background: 'var(--ink)', color: 'white' }}>
        <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 580 }}>
            <div className="eyebrow" style={{ color: 'var(--gold)' }}>What you won&apos;t find here</div>
            <h3 className="serif" style={{ marginTop: 16, fontSize: 32, fontWeight: 300, color: 'white' }}>
              No prices online. No guaranteed results. No before / after without consent.
            </h3>
            <p style={{ marginTop: 20, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, fontSize: 14 }}>
              UAE medical advertising rules don&apos;t allow guaranteed results or non-compliant superlatives — and we don&apos;t want to. We publish what we can stand behind, no more.
            </p>
          </div>
          <button className="btn" onClick={() => onBook({})} style={{ background: 'white', color: 'var(--ink)', borderColor: 'white' }}>
            Speak to a doctor <ArrowRight size={10} />
          </button>
        </div>
      </section>
    </div>
  );
}

function TreatmentDetail({ area, treatment, onClose, onBook }) {
  const sections = [
    {
      title: 'What it is',
      body: `${treatment.name} is part of our ${area.label.toLowerCase()} practice. Approach, suitability and dosing are individualised at consultation — generic protocols don\u2019t live well in aesthetic medicine.`
    },
    {
      title: 'Candidacy',
      body: `Suitable candidacy is assessed in person by a licensed doctor — including medical history, current medication, prior aesthetic treatments and your goals. Some patients will be advised that this is not the right treatment for them; we say so clearly.`
    },
    {
      title: 'Process',
      body: `Consultation \u2192 personalised plan \u2192 treatment scheduled with the appropriate clinician. Typical chair time: ${treatment.time}. Topical anaesthetic or cooling used where appropriate.`
    },
    {
      title: 'Recovery',
      body: `Recovery is procedure-specific and reviewed with you before booking. Most non-surgical treatments allow same-day return to normal activity; surgical procedures have documented multi-week recovery plans and follow-up reviews.`
    },
  ];
  const faqs = [
    {
      q: 'How many sessions will I need?',
      a: 'Sessions are individualised \u2014 single, course or maintenance. Your doctor will recommend a number at consultation, and we don\u2019t pre-pack sessions you may not need.'
    },
    {
      q: 'Will you publish my results?',
      a: 'Only with written, DHA-compliant consent. We never reuse patient images without permission.'
    },
    {
      q: 'How much does it cost?',
      a: 'Aesthetic and dermatology pricing is given at consultation. We don\u2019t publish prices online \u2014 a clear written quote is provided before any treatment begins.'
    },
  ];

  return (
    <div>
      <div style={{ position: 'sticky', top: 0, background: 'var(--porcelain)', padding: '20px 40px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 2 }}>
        <div>
          <div className="eyebrow">{area.label} &middot; {treatment.type}</div>
          <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>{treatment.name}</div>
        </div>
        <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 18, color: 'var(--muted)', cursor: 'pointer' }}>✕</button>
      </div>

      <div style={{ padding: '32px 40px' }}>
        <div style={{ display: 'flex', gap: 24, marginBottom: 32, fontSize: 12, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          <span>Time · {treatment.time}</span>
          <span>·</span>
          <span>By consultation</span>
        </div>

        {sections.map(s => (
          <div key={s.title} style={{ marginBottom: 28, paddingBottom: 28, borderBottom: '1px solid var(--line)' }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>{s.title}</div>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-soft)' }}>{s.body}</p>
          </div>
        ))}

        <div className="eyebrow" style={{ marginBottom: 16 }}>Frequently asked</div>
        <div>
          {faqs.map((f, i) => (
            <FAQItem key={i} q={f.q} a={f.a} />
          ))}
        </div>

        <div style={{ marginTop: 36, padding: '20px 24px', background: 'var(--mist)', fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
          <strong>Compliance note.</strong> Treatment claims are descriptive, not promises. Individual outcomes vary; this page is not medical advice. Treatments are provided under MOH approval No. ZTLTLKYZ-161121; per-clinician DHA licensing displayed in person.
        </div>

        <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button className="btn" onClick={onBook}>Book this treatment <ArrowRight size={10} /></button>
          <a className="btn btn-outline" href={CLINIC.whatsappLink}>Ask a question</a>
        </div>
      </div>
    </div>
  );
}

function FAQItem({ q, a }) {
  const [open, setOpen] = useStateP(false);
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      <button
        onClick={() => setOpen(!open)}
        style={{ background: 'none', border: 'none', padding: '20px 0', width: '100%', textAlign: 'left', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', fontSize: 15, color: 'var(--ink)' }}
      >
        <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 500 }}>{q}</span>
        <span style={{ color: 'var(--gold-deep)', fontSize: 18, fontWeight: 300 }}>{open ? '–' : '+'}</span>
      </button>
      {open && (
        <p style={{ paddingBottom: 20, fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.7, animation: 'fadeIn 200ms ease' }}>{a}</p>
      )}
    </div>
  );
}

// ===== DOCTORS PAGE =======================================================
function DoctorsPage({ params, onNavigate, onBook }) {
  const [filter, setFilter] = useStateP('all');
  const [activeDoctor, setActiveDoctor] = useStateP(params?.doctor || null);

  useEffectP(() => {
    if (params?.doctor) setActiveDoctor(params.doctor);
  }, [params]);

  const filtered = useMemoP(() => {
    if (filter === 'all') return DOCTORS;
    if (filter === 'resident') return DOCTORS.filter(d => d.type === 'resident');
    if (filter === 'guest') return DOCTORS.filter(d => d.type === 'guest');
    return DOCTORS.filter(d => d.specialty === filter);
  }, [filter]);

  const doctorObj = activeDoctor ? DOCTORS.find(d => d.slug === activeDoctor) : null;

  const founder = DOCTORS[0];
  const rest = filtered.filter(d => d.slug !== founder.slug);

  return (
    <div className="page-enter" style={{ paddingTop: 120 }}>
      {/* Header */}
      <section style={{ padding: '88px 0 56px', background: 'var(--mist)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <SectionEyebrow label="Our doctors" />
          <h1 className="serif" style={{ marginTop: 18, fontWeight: 300, maxWidth: 880 }}>
            Eleven licensed clinicians. <span style={{ fontStyle: 'italic' }}>One philosophy of care.</span>
          </h1>
          <p style={{ marginTop: 28, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 660 }}>
            Resident dermatologists, aesthetic doctors and visiting plastic surgeons — each licensed under the Dubai Health Authority (DHA), each named on the patient&apos;s consultation record.
          </p>
        </div>
      </section>

      {/* Founder hero */}
      {filter === 'all' && (
        <section style={{ padding: '88px 0', background: 'var(--porcelain)' }}>
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
              <div style={{ height: 620, overflow: 'hidden' }}>
                <img src={founder.editorial || founder.portrait} alt={founder.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div>
                <div className="eyebrow">Founder &middot; Medical Director</div>
                <h2 className="serif" style={{ marginTop: 18, fontWeight: 300, fontSize: 'clamp(40px, 4.8vw, 64px)' }}>
                  Dr Radmila Lukian
                </h2>
                <p style={{ marginTop: 8, fontSize: 17, color: 'var(--muted)' }}>{founder.credentials}</p>
                <p style={{ marginTop: 28, fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)', maxWidth: 540 }}>
                  Dr Radmila founded Lucia Clinic in 2012 as a single-villa, doctor-led practice on Jumeirah Beach Road. Trained in Europe and lectured internationally on aesthetic dermatology, she is the longest-tenured clinician on every patient&apos;s file.
                </p>
                <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
                  <Stat label="Practising since" value="2012" />
                  <Stat label="Memberships" value="EADV · AAD · ESAAM" />
                  <Stat label="Specialty" value="Dermatology" />
                  <Stat label="Languages" value={founder.languages.join(' · ')} />
                </div>
                <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <button className="btn" onClick={() => onBook({ doctor: founder.slug })}>Book with Dr Radmila <ArrowRight size={10} /></button>
                  <button className="btn btn-outline" onClick={() => setActiveDoctor(founder.slug)}>Full profile</button>
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Filter + grid */}
      <section style={{ padding: '64px 0 120px', background: 'var(--porcelain)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 18, marginBottom: 40, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[
                { id: 'all', label: 'All clinicians' },
                { id: 'Dermatology', label: 'Dermatology' },
                { id: 'Aesthetics', label: 'Aesthetics' },
                { id: 'Plastic Surgery', label: 'Plastic Surgery' },
                { id: 'resident', label: 'Resident' },
                { id: 'guest', label: 'Visiting' },
              ].map(f => (
                <button key={f.id} className={'chip' + (filter === f.id ? ' active' : '')} onClick={() => setFilter(f.id)}>
                  {f.label}
                </button>
              ))}
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)' }}>{filtered.length} shown</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {(filter === 'all' ? rest : filtered).map(d => (
              <button
                key={d.slug}
                onClick={() => setActiveDoctor(d.slug)}
                style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left' }}
                className="doctor-card"
              >
                <div style={{ position: 'relative', aspectRatio: '3/4', overflow: 'hidden', background: 'var(--mist)' }}>
                  <img src={d.portrait} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', transition: 'transform 600ms ease' }} />
                  {d.type === 'guest' && (
                    <div style={{ position: 'absolute', top: 16, left: 16, background: 'rgba(27,27,30,0.85)', color: 'white', padding: '6px 10px', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                      Visiting
                    </div>
                  )}
                  {d.verifyState === 'pending' && (
                    <div style={{ position: 'absolute', top: 16, right: 16, background: 'rgba(184,153,90,0.95)', color: 'white', padding: '6px 10px', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                      Pending verify
                    </div>
                  )}
                </div>
                <div style={{ paddingTop: 20, paddingBottom: 8, borderBottom: '1px solid var(--line)' }}>
                  <div className="eyebrow eyebrow-muted">{d.specialty}</div>
                  <div className="serif" style={{ marginTop: 8, fontSize: 24, fontWeight: 400 }}>{d.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{d.role}</div>
                  <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-soft)', textTransform: 'uppercase' }}>
                    <span>Profile</span><span>→</span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <DoctorDrawer
        doctor={doctorObj}
        onClose={() => setActiveDoctor(null)}
        onBook={(p) => { setActiveDoctor(null); onBook(p); }}
      />
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div>
      <div className="eyebrow eyebrow-muted" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 15, fontWeight: 500 }}>{value}</div>
    </div>
  );
}

// ===== ABOUT PAGE =========================================================
function AboutPage({ onNavigate, onBook }) {
  return (
    <div className="page-enter" style={{ paddingTop: 120 }}>
      {/* Hero */}
      <section style={{ position: 'relative', minHeight: 540, padding: '120px 0 80px', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(90deg, rgba(250,248,245,0.96) 0%, rgba(250,248,245,0.72) 50%, rgba(250,248,245,0.3) 100%), url("media/clinic-about-interior.webp")',
          backgroundSize: 'cover', backgroundPosition: 'center',
        }} />
        <div className="container" style={{ position: 'relative', maxWidth: 880 }}>
          <SectionEyebrow label="About Lucia" />
          <h1 className="serif" style={{ marginTop: 24, fontWeight: 300, fontSize: 'clamp(48px, 6vw, 88px)' }}>
            Founded in <span style={{ fontStyle: 'italic' }}>{CLINIC.since}</span>,<br />
            built on the Italian word for <span style={{ color: 'var(--gold-deep)', fontStyle: 'italic' }}>light</span>.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 640 }}>
            Lucia Aesthetic & Dermatology Center is a private, single-location villa clinic on Jumeirah Beach Road — founded by Dr Radmila Lukian and run by an in-house team of resident dermatologists, aesthetic doctors and visiting plastic surgeons.
          </p>
        </div>
      </section>

      {/* Brand idea */}
      <section style={{ padding: '120px 0', background: 'var(--porcelain)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
            <div>
              <SectionEyebrow label="Our name" />
              <h2 className="serif" style={{ marginTop: 24, fontWeight: 300 }}>
                Lucia <span style={{ fontStyle: 'italic' }}>— from</span> luce.
              </h2>
              <p style={{ marginTop: 28, fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)' }}>
                The clinic takes its name from the Italian <em>luce</em> — light, brightness. For us it&apos;s less a marketing slogan and more a daily reminder: the most flattering thing we can do for our patients&apos; skin is to let what&apos;s already there come forward.
              </p>
              <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)' }}>
                That bias shapes our judgement at the consultation table — we&apos;re slower to add and quicker to refine. Some patients are advised against treatment we offer. We say so plainly.
              </p>
            </div>
            <div>
              <img src="media/lucia-symbol-270.webp" alt="Lucia Clinic symbol" style={{ width: 220, margin: '0 auto', display: 'block', opacity: 0.85 }} />
              <div style={{ textAlign: 'center', marginTop: 24, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>The Lucia mark</div>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline / story */}
      <section style={{ padding: '120px 0', background: 'var(--ink)', color: 'white' }}>
        <div className="container">
          <SectionEyebrow label="Story" />
          <h2 className="serif" style={{ marginTop: 24, fontWeight: 300, color: 'white' }}>
            Thirteen years <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>in one villa.</span>
          </h2>
          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {[
              { y: '2012', t: 'Founded', d: 'Dr Radmila Lukian opens Lucia Clinic as a doctor-led dermatology and aesthetic practice in Jumeirah.' },
              { y: '2015', t: 'Surgical wing', d: 'Plastic-surgery referrals begin under visiting consultants — strict candidacy criteria.' },
              { y: '2019', t: 'Device platform', d: 'Major investment in named energy-based platforms — CoolSculpting, EmSculpt NEO, Morpheus8.' },
              { y: '2024', t: 'Today', d: 'Eleven licensed clinicians across dermatology, aesthetics and plastic surgery; ~37-person team total.' },
            ].map((s, i) => (
              <div key={i} style={{ borderTop: '1px solid rgba(255,255,255,0.18)', paddingTop: 24 }}>
                <div className="serif" style={{ fontSize: 48, color: 'var(--gold)', fontWeight: 300 }}>{s.y}</div>
                <div className="eyebrow" style={{ color: 'white', marginTop: 8 }}>{s.t}</div>
                <p style={{ marginTop: 14, fontSize: 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)' }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Founder editorial */}
      <section style={{ padding: '120px 0', background: 'var(--porcelain)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <SectionEyebrow label="Founder" />
              <h2 className="serif" style={{ marginTop: 24, fontWeight: 300, maxWidth: 580 }}>
                A European-board dermatologist <span style={{ fontStyle: 'italic' }}>at the centre</span> of every plan.
              </h2>
              <p style={{ marginTop: 28, fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)', maxWidth: 580 }}>
                Dr Radmila Lukian remains medically responsible for every clinical decision at Lucia. New treatments, new devices and new clinicians pass through her review before they reach the patient.
              </p>
              <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)', maxWidth: 580 }}>
                Editorial mentions of the founder have appeared in Grazia ME and across regional aesthetic press — we attribute these as press, not awards, in keeping with DHA/MOH advertising rules.
              </p>
              <div style={{ marginTop: 32 }}>
                <button className="arrow-link" onClick={() => onNavigate('doctors', { doctor: 'radmila-lukian' })}>
                  Read Dr Radmila&apos;s full profile <ArrowRight />
                </button>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <img src="media/doctor-radmila-editorial-1.webp" alt="" style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover' }} />
              <img src="media/doctor-radmila-editorial-2.webp" alt="" style={{ width: '100%', aspectRatio: '3/4', objectFit: 'cover', marginTop: 32 }} />
            </div>
          </div>
        </div>
      </section>

      {/* Accreditations + licensing */}
      <section id="compliance" style={{ padding: '120px 0', background: 'white', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <SectionEyebrow label="Accreditation & licensing" />
          <h2 className="serif" style={{ marginTop: 18, fontWeight: 300, maxWidth: 880 }}>
            Verified memberships. <span style={{ fontStyle: 'italic' }}>Visible licensing.</span>
          </h2>

          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
            {ACCREDITATIONS.map(a => (
              <div key={a.id} style={{ padding: 32, border: '1px solid var(--line)' }}>
                <img src={a.logo} alt={a.full} style={{ height: 60, width: 'auto', objectFit: 'contain', filter: 'grayscale(0.3)' }} />
                <div className="serif" style={{ marginTop: 20, fontSize: 24, fontWeight: 400 }}>{a.name}</div>
                <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6, lineHeight: 1.5 }}>{a.full}</div>
                <div className="compliance-mark" style={{ marginTop: 16 }}>
                  <span className="dot" /> Verified by clinic
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 64, padding: 32, background: 'var(--mist)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
              <div>
                <div className="eyebrow">Ministry of Health approval</div>
                <div className="serif" style={{ fontSize: 22, marginTop: 10, fontWeight: 400 }}>{CLINIC.moh}</div>
                <p style={{ marginTop: 12, fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
                  Printed in the clinic footer and verifiable with the UAE Ministry of Health.
                </p>
              </div>
              <div>
                <div className="eyebrow">Dubai Health Authority licence</div>
                <div className="serif" style={{ fontSize: 22, marginTop: 10, fontWeight: 400, color: 'var(--gold-deep)' }}>To be published</div>
                <p style={{ marginTop: 12, fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
                  We&apos;ll publish the DHA establishment licence and per-clinician licence numbers once the launch verification pack is complete.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Before/after compliance card */}
      <section style={{ padding: '120px 0', background: 'var(--porcelain)' }}>
        <div className="container-narrow">
          <SectionEyebrow label="Before & After" align="center" />
          <h2 className="serif" style={{ marginTop: 24, fontWeight: 300, textAlign: 'center' }}>
            Patient results, <span style={{ fontStyle: 'italic' }}>by consent only.</span>
          </h2>
          <p style={{ marginTop: 28, fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)', textAlign: 'center', maxWidth: 640, margin: '28px auto 0' }}>
            We don&apos;t publish before-and-after images without written patient consent and a DHA/MOH-compliant disclosure. A consented gallery is in preparation — until then, real cases are reviewed in-clinic during consultation.
          </p>
          <div style={{ marginTop: 48, padding: 40, border: '1px dashed var(--line-strong)', textAlign: 'center', background: 'white' }}>
            <div className="eyebrow eyebrow-muted">Consent-gated gallery</div>
            <div className="serif" style={{ fontSize: 28, marginTop: 12 }}>Available at consultation</div>
            <p style={{ marginTop: 12, fontSize: 13, color: 'var(--muted)' }}>Ask your doctor to share documented examples relevant to your case.</p>
            <button className="btn btn-outline" style={{ marginTop: 24 }} onClick={onBook}>Book to view <ArrowRight size={10} /></button>
          </div>
        </div>
      </section>
    </div>
  );
}

// ===== CONTACT PAGE =======================================================
function ContactPage({ onBook }) {
  return (
    <div className="page-enter" style={{ paddingTop: 120 }}>
      <section style={{ position: 'relative', minHeight: 520, padding: '120px 0 80px' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(180deg, rgba(27,27,30,0.4) 0%, rgba(27,27,30,0.55) 100%), url("media/clinic-entrance.webp")',
          backgroundSize: 'cover', backgroundPosition: 'center',
        }} />
        <div className="container" style={{ position: 'relative', color: 'white' }}>
          <SectionEyebrow label="Contact & visit" />
          <h1 className="serif" style={{ marginTop: 24, fontWeight: 300, color: 'white', fontSize: 'clamp(48px, 6vw, 88px)' }}>
            Villa 323,<br />
            <span style={{ fontStyle: 'italic' }}>Jumeirah Beach Road.</span>
          </h1>
          <p style={{ marginTop: 28, fontSize: 18, color: 'rgba(255,255,255,0.85)', maxWidth: 560, lineHeight: 1.7 }}>
            Park on the property. Walk through the garden entrance. Most consultations finish within the hour.
          </p>
        </div>
      </section>

      <section style={{ padding: '88px 0', background: 'var(--porcelain)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64 }}>
          <div>
            <SectionEyebrow label="Request an appointment" />
            <h2 className="serif" style={{ marginTop: 18, fontWeight: 300 }}>
              Tell us a little. <span style={{ fontStyle: 'italic' }}>We&apos;ll be in touch.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 480 }}>
              We don&apos;t collect medical history in this form — only what we need to schedule your consultation. Clinical detail is shared in person under DHA-compliant confidentiality.
            </p>
            <div style={{ marginTop: 32 }}>
              <button className="btn" onClick={onBook}>Open booking form <ArrowRight size={10} /></button>
            </div>

            <div style={{ marginTop: 64, paddingTop: 40, borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
              <ContactBlock label="Phone" lines={[<a href={CLINIC.phoneTel} key="1">{CLINIC.phone}</a>]} />
              <ContactBlock label="WhatsApp" lines={[<a href={CLINIC.whatsappLink} key="1">{CLINIC.whatsapp}</a>]} />
              <ContactBlock label="Email" lines={[<a href={'mailto:' + CLINIC.email} key="1">{CLINIC.email}</a>, <span key="2" style={{ fontSize: 11, color: 'var(--muted)' }}>Please confirm this is current</span>]} />
              <ContactBlock label="Hours" lines={['Monday – Sunday', '9:00 am – 8:00 pm']} />
            </div>
          </div>
          <div>
            <div style={{ position: 'relative', height: 440, overflow: 'hidden', border: '1px solid var(--line)' }}>
              <img src="media/clinic-contact-interior.webp" alt="Lucia Clinic interior" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ marginTop: 24, padding: 24, background: 'white', border: '1px solid var(--line)' }}>
              <div className="eyebrow">Address</div>
              <div className="serif" style={{ marginTop: 8, fontSize: 22, lineHeight: 1.3 }}>Villa 323, Jumeirah Beach Road</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>Jumeirah 2, Dubai, UAE</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{CLINIC.landmark}</div>
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line)', display: 'flex', gap: 16, fontSize: 12 }}>
                <a href="https://www.google.com/maps/search/?api=1&query=Lucia+Clinic+Jumeirah+Beach+Road" target="_blank" rel="noreferrer" style={{ borderBottom: '1px solid currentColor', paddingBottom: 2 }}>Open in Google Maps</a>
                <a href="https://www.google.com/maps/dir/?api=1&destination=Lucia+Clinic+Jumeirah+Beach+Road" target="_blank" rel="noreferrer" style={{ borderBottom: '1px solid currentColor', paddingBottom: 2 }}>Get directions</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Map placeholder strip */}
      <section style={{ height: 380, position: 'relative', background: 'var(--mist)', overflow: 'hidden', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: `
            linear-gradient(135deg, rgba(184,153,90,0.08) 0%, rgba(110,120,96,0.06) 100%),
            repeating-linear-gradient(45deg, transparent 0 19px, rgba(27,27,30,0.04) 19px 20px),
            repeating-linear-gradient(-45deg, transparent 0 19px, rgba(27,27,30,0.04) 19px 20px)
          `,
        }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12 }}>
          <div style={{ width: 46, height: 46, background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50% 50% 50% 0', transform: 'rotate(-45deg)' }}>
            <div style={{ transform: 'rotate(45deg)', color: 'var(--gold)' }}>
              <LogoMark size={20} color="var(--gold)" />
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', textAlign: 'center', maxWidth: 360 }}>
            Live map embed once coordinates are confirmed<br />
            <span style={{ fontSize: 11, color: 'var(--gold-deep)' }}>(Google Maps · output=embed)</span>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactBlock({ label, lines }) {
  return (
    <div>
      <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8 }}>{label}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {lines.map((l, i) => <div key={i} style={{ fontSize: 15 }}>{l}</div>)}
      </div>
    </div>
  );
}

Object.assign(window, {
  HomePage, TreatmentsPage, DoctorsPage, AboutPage, ContactPage,
});
