// ---------------------------------------------------------------------------
// Shared components — Logo, Nav, Footer, WhatsApp FAB, Booking modal, etc.
// ---------------------------------------------------------------------------

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

// ===== Logo ================================================================
function LogoMark({ size = 30, color = 'currentColor' }) {
  // Custom L-mark inspired by the clinic's italic-L symbol — abstract, original.
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      <circle cx="20" cy="20" r="19.25" stroke={color} strokeWidth="1" />
      <path
        d="M14.6 9.5 L11 30.5 L26 30.5"
        stroke={color}
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
      <path
        d="M26 30.5 C 29 28, 30.5 25, 30 21.5"
        stroke={color}
        strokeWidth="1"
        strokeLinecap="round"
        fill="none"
      />
    </svg>
  );
}

function Wordmark({ color = 'currentColor', compact = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, color }}>
      <LogoMark size={compact ? 26 : 32} color={color} />
      <div style={{ lineHeight: 1 }}>
        <div className="serif" style={{ fontSize: compact ? 19 : 22, letterSpacing: '0.18em', fontWeight: 400 }}>
          LUCIA CLINIC
        </div>
        <div style={{ fontSize: 9, letterSpacing: '0.42em', textTransform: 'uppercase', marginTop: 3, opacity: 0.7 }}>
          Aesthetic &middot; Since 2012
        </div>
      </div>
    </div>
  );
}

// ===== Arrow icon ==========================================================
function ArrowRight({ size = 12 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
      <path d="M2 6h8M7 2.5 10.5 6 7 9.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ===== Nav =================================================================
function Nav({ current, onNavigate, onBook, locale, onLocale }) {
  const [scrolled, setScrolled] = useState(false);
  const [megaOpen, setMegaOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const closeTimerRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const openMega = () => {
    clearTimeout(closeTimerRef.current);
    setMegaOpen(true);
  };
  const closeMegaSoon = () => {
    closeTimerRef.current = setTimeout(() => setMegaOpen(false), 200);
  };

  const navItems = [
    { id: 'home',       label: 'Home' },
    { id: 'treatments', label: 'Treatments', hasMega: true },
    { id: 'doctors',    label: 'Our doctors' },
    { id: 'about',      label: 'About' },
    { id: 'contact',    label: 'Contact' },
  ];

  return (
    <>
      <header
        style={{
          position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
          background: scrolled || current !== 'home' ? 'rgba(250, 248, 245, 0.96)' : 'transparent',
          backdropFilter: scrolled || current !== 'home' ? 'blur(12px)' : 'none',
          WebkitBackdropFilter: scrolled || current !== 'home' ? 'blur(12px)' : 'none',
          borderBottom: scrolled || current !== 'home' ? '1px solid var(--line)' : '1px solid transparent',
          transition: 'all 280ms ease',
        }}
      >
        {/* Top utility bar */}
        <div style={{
          background: scrolled || current !== 'home' ? 'transparent' : 'rgba(27,27,30,0.4)',
          color: scrolled || current !== 'home' ? 'var(--muted)' : 'rgba(255,255,255,0.85)',
          borderBottom: '1px solid ' + (scrolled || current !== 'home' ? 'var(--line)' : 'rgba(255,255,255,0.1)'),
          fontSize: 11, letterSpacing: '0.08em',
          transition: 'all 280ms ease',
        }}>
          <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: 36, gap: 24, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#74C497', display: 'inline-block' }} />
                Open today &middot; 9 am – 8 pm
              </span>
              <span className="hide-sm" style={{ display: 'inline-flex', gap: 6 }}>Villa 323, Jumeirah Beach Road</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <a href={CLINIC.phoneTel} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                {CLINIC.phone}
              </a>
              <span className="hide-sm" style={{ opacity: 0.5 }}>|</span>
              <LocaleSwitcher value={locale} onChange={onLocale} dim={!(scrolled || current !== 'home')} />
            </div>
          </div>
        </div>

        <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: 78 }}>
          <a
            href="#home"
            onClick={(e) => { e.preventDefault(); onNavigate('home'); }}
            style={{ color: scrolled || current !== 'home' ? 'var(--ink)' : 'white', textShadow: scrolled || current !== 'home' ? 'none' : '0 1px 12px rgba(0,0,0,0.25)' }}
          >
            <Wordmark color="currentColor" />
          </a>

          <nav className="desktop-nav" style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
            {navItems.map(item => (
              <div
                key={item.id}
                onMouseEnter={item.hasMega ? openMega : undefined}
                onMouseLeave={item.hasMega ? closeMegaSoon : undefined}
                style={{ position: 'relative' }}
              >
                <a
                  href={'#' + item.id}
                  onClick={(e) => { e.preventDefault(); onNavigate(item.id); setMegaOpen(false); }}
                  style={{
                    fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 500,
                    color: scrolled || current !== 'home' ? 'var(--ink)' : 'white',
                    textShadow: scrolled || current !== 'home' ? 'none' : '0 1px 12px rgba(0,0,0,0.25)',
                    paddingBottom: 4,
                    borderBottom: current === item.id ? '1px solid currentColor' : '1px solid transparent',
                    transition: 'all 200ms ease',
                    display: 'inline-flex', alignItems: 'center', gap: 4,
                  }}
                >
                  {item.label}
                  {item.hasMega && (
                    <svg width="9" height="9" viewBox="0 0 9 9" fill="none" style={{ marginTop: 1 }}>
                      <path d="M1.5 3.2 4.5 6 7.5 3.2" stroke="currentColor" strokeWidth="1" strokeLinecap="round" fill="none" />
                    </svg>
                  )}
                </a>
              </div>
            ))}
          </nav>

          <div className="desktop-cta" style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button
              className="btn btn-sm"
              onClick={onBook}
              style={{
                background: scrolled || current !== 'home' ? 'var(--ink)' : 'white',
                color: scrolled || current !== 'home' ? 'var(--porcelain)' : 'var(--ink)',
                borderColor: scrolled || current !== 'home' ? 'var(--ink)' : 'white',
              }}
            >
              Book a consultation
              <ArrowRight size={10} />
            </button>
          </div>

          <button
            className="mobile-toggle"
            onClick={() => setMobileOpen(true)}
            style={{
              display: 'none', background: 'transparent', border: '1px solid currentColor',
              color: scrolled || current !== 'home' ? 'var(--ink)' : 'white',
              padding: '10px 14px', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
            }}
            aria-label="Open navigation"
          >
            Menu
          </button>
        </div>

        {/* Mega menu — Treatments */}
        {megaOpen && (
          <div
            onMouseEnter={openMega}
            onMouseLeave={closeMegaSoon}
            style={{
              background: 'var(--porcelain)',
              borderTop: '1px solid var(--line)',
              borderBottom: '1px solid var(--line)',
              animation: 'fadeIn 200ms ease',
            }}
          >
            <div className="container" style={{ padding: '40px 32px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 36 }}>
                {TREATMENT_AREAS.map(area => (
                  <div key={area.id}>
                    <button
                      onClick={() => { onNavigate('treatments', { area: area.id }); setMegaOpen(false); }}
                      style={{ background: 'none', border: 'none', padding: 0, textAlign: 'left', cursor: 'pointer', color: 'var(--ink)', width: '100%' }}
                    >
                      <div className="eyebrow" style={{ marginBottom: 8 }}>{area.label}</div>
                      <div className="serif" style={{ fontSize: 22, marginBottom: 8, lineHeight: 1.1 }}>{area.sub}</div>
                      <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.55 }}>
                        {area.treatments.length} treatments
                      </div>
                    </button>
                    <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 7 }}>
                      {area.treatments.slice(0, 5).map(t => (
                        <a
                          key={t.slug}
                          href="#"
                          onClick={(e) => { e.preventDefault(); onNavigate('treatments', { area: area.id, treatment: t.slug }); setMegaOpen(false); }}
                          style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.4 }}
                        >
                          {t.name}
                        </a>
                      ))}
                      {area.treatments.length > 5 && (
                        <a
                          href="#"
                          onClick={(e) => { e.preventDefault(); onNavigate('treatments', { area: area.id }); setMegaOpen(false); }}
                          style={{ fontSize: 12, color: 'var(--gold-deep)', letterSpacing: '0.08em', marginTop: 4 }}
                        >
                          See all {area.treatments.length} &rarr;
                        </a>
                      )}
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Treat by concern</div>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {CONCERNS.slice(0, 9).map(c => (
                      <button
                        key={c.id}
                        className="chip"
                        onClick={() => { onNavigate('treatments', { concern: c.id }); setMegaOpen(false); }}
                      >
                        {c.label}
                      </button>
                    ))}
                  </div>
                </div>
                <button className="btn btn-sm" onClick={() => { onNavigate('treatments'); setMegaOpen(false); }}>
                  All treatments <ArrowRight size={10} />
                </button>
              </div>
            </div>
          </div>
        )}
      </header>

      {mobileOpen && (
        <MobileMenu
          current={current}
          onClose={() => setMobileOpen(false)}
          onNavigate={(p, params) => { onNavigate(p, params); setMobileOpen(false); }}
          onBook={() => { onBook(); setMobileOpen(false); }}
          locale={locale} onLocale={onLocale}
        />
      )}

      <style>{`
        @media (max-width: 960px) {
          .desktop-nav, .desktop-cta { display: none !important; }
          .mobile-toggle { display: inline-flex !important; }
          .hide-sm { display: none !important; }
        }
      `}</style>
    </>
  );
}

function MobileMenu({ current, onClose, onNavigate, onBook, locale, onLocale }) {
  useEffect(() => {
    document.body.classList.add('scroll-lock');
    return () => document.body.classList.remove('scroll-lock');
  }, []);
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'var(--porcelain)', zIndex: 100,
      animation: 'fadeIn 200ms ease', overflowY: 'auto', padding: '24px 0',
    }}>
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 36 }}>
        <Wordmark color="var(--ink)" compact />
        <button onClick={onClose} style={{ background: 'none', border: '1px solid var(--line-strong)', padding: '10px 14px', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Close</button>
      </div>
      <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {[
          { id: 'home', label: 'Home' },
          { id: 'treatments', label: 'Treatments' },
          { id: 'doctors', label: 'Our doctors' },
          { id: 'about', label: 'About' },
          { id: 'contact', label: 'Contact' },
        ].map(i => (
          <button
            key={i.id}
            onClick={() => onNavigate(i.id)}
            style={{
              textAlign: 'left', background: 'none', border: 'none',
              padding: '20px 0', borderBottom: '1px solid var(--line)',
              fontFamily: "'Cormorant Garamond', serif", fontSize: 32,
              color: current === i.id ? 'var(--gold-deep)' : 'var(--ink)',
            }}
          >
            {i.label}
          </button>
        ))}
        <button className="btn" style={{ marginTop: 28 }} onClick={onBook}>
          Book a consultation <ArrowRight size={10} />
        </button>
        <div style={{ marginTop: 36, display: 'flex', gap: 16 }}>
          <a href={CLINIC.phoneTel} className="arrow-link">{CLINIC.phone}</a>
          <a href={CLINIC.whatsappLink} className="arrow-link">WhatsApp</a>
        </div>
      </div>
    </div>
  );
}

// ===== Locale switcher =====================================================
function LocaleSwitcher({ value, onChange, dim }) {
  const locales = ['EN', 'AR', 'RU', 'ZH'];
  return (
    <div style={{ display: 'inline-flex', gap: 0, fontSize: 11, letterSpacing: '0.14em', alignItems: 'center' }}>
      {locales.map((l, i) => (
        <React.Fragment key={l}>
          {i > 0 && <span style={{ opacity: 0.3, margin: '0 8px' }}>·</span>}
          <button
            onClick={() => onChange(l)}
            style={{
              background: 'none', border: 'none', padding: 0, cursor: 'pointer',
              color: 'inherit', opacity: value === l ? 1 : 0.55,
              fontWeight: value === l ? 600 : 400,
              fontFamily: 'inherit', letterSpacing: 'inherit', fontSize: 'inherit',
            }}
            aria-label={l}
          >
            {l}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

// ===== Footer ==============================================================
function Footer({ onNavigate, onBook }) {
  const cols = [
    {
      title: 'Treatments',
      links: TREATMENT_AREAS.map(a => ({ label: a.label, onClick: () => onNavigate('treatments', { area: a.id }) }))
    },
    {
      title: 'Clinic',
      links: [
        { label: 'About',         onClick: () => onNavigate('about') },
        { label: 'Our doctors',   onClick: () => onNavigate('doctors') },
        { label: 'Before & after',onClick: () => onNavigate('about', { section: 'compliance' }) },
        { label: 'Contact',       onClick: () => onNavigate('contact') },
      ]
    },
    {
      title: 'Visit',
      links: [
        { label: CLINIC.phone, href: CLINIC.phoneTel },
        { label: 'WhatsApp +971 56 115 9194', href: CLINIC.whatsappLink },
        { label: CLINIC.email, href: 'mailto:' + CLINIC.email },
      ]
    }
  ];
  return (
    <footer style={{ background: 'var(--ink)', color: 'rgba(255,255,255,0.78)', padding: '88px 0 32px', marginTop: 80 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, marginBottom: 80 }}>
          <div>
            <Wordmark color="white" compact />
            <p style={{ marginTop: 24, fontSize: 14, lineHeight: 1.7, maxWidth: 320, color: 'rgba(255,255,255,0.65)' }}>
              A doctor-led dermatology, aesthetic and plastic-surgery clinic in Jumeirah, Dubai. Founded in {CLINIC.since} by Dr Radmila Lukian.
            </p>
            <button className="btn btn-sm" style={{ marginTop: 28, background: 'white', color: 'var(--ink)', borderColor: 'white' }} onClick={onBook}>
              Book a consultation <ArrowRight size={10} />
            </button>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 20 }}>{col.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.links.map((l, i) => (
                  <li key={i}>
                    {l.href ? (
                      <a href={l.href} style={{ fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>{l.label}</a>
                    ) : (
                      <button onClick={l.onClick} style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.78)', padding: 0, fontSize: 14, fontFamily: 'inherit', cursor: 'pointer', textAlign: 'left' }}>
                        {l.label}
                      </button>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ padding: '32px 0', borderTop: '1px solid rgba(255,255,255,0.12)', borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            <div>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 10 }}>Address</div>
              <div style={{ fontSize: 14, lineHeight: 1.6 }}>{CLINIC.address}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>{CLINIC.landmark}</div>
            </div>
            <div>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 10 }}>Hours</div>
              <div style={{ fontSize: 14 }}>{CLINIC.hours}</div>
            </div>
            <div>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 10 }}>Licensing</div>
              <div style={{ fontSize: 13, lineHeight: 1.5 }}>{CLINIC.moh}</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', marginTop: 4 }}>DHA establishment licence — to be confirmed</div>
            </div>
          </div>
        </div>

        <div style={{ paddingTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 18 }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
            © {new Date().getFullYear()} Lucia Aesthetic & Dermatology Center. All rights reserved.
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            {CLINIC.socials.map(s => (
              <a key={s.id} href={s.href} style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)' }}>{s.label}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

// ===== WhatsApp FAB ========================================================
function WhatsAppFab() {
  return (
    <a
      href={CLINIC.whatsappLink}
      target="_blank"
      rel="noreferrer"
      style={{
        position: 'fixed', bottom: 28, right: 28, zIndex: 40,
        display: 'flex', alignItems: 'center', gap: 10,
        background: '#1B1B1E', color: 'white',
        padding: '14px 18px',
        boxShadow: '0 12px 36px rgba(27,27,30,0.28)',
        fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
        transition: 'transform 200ms ease',
      }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
      aria-label="WhatsApp"
    >
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12.04 2C6.58 2 2.15 6.43 2.15 11.89c0 1.95.51 3.84 1.49 5.52L2.05 22l4.71-1.23a9.86 9.86 0 0 0 5.28 1.51h.01c5.46 0 9.89-4.43 9.89-9.89S17.5 2 12.04 2zm5.78 13.93c-.24.69-1.43 1.34-1.98 1.42-.51.08-1.15.11-1.86-.12-.43-.14-.98-.32-1.69-.62-2.97-1.28-4.9-4.27-5.05-4.47-.15-.2-1.2-1.6-1.2-3.05s.76-2.17 1.03-2.46c.27-.3.59-.37.79-.37s.39 0 .56.01c.18.01.42-.07.66.5.24.58.83 2.02.9 2.17.07.15.12.32.02.52-.1.2-.15.32-.3.5-.15.18-.32.4-.45.54-.15.15-.31.31-.13.61.18.3.79 1.31 1.7 2.12 1.17 1.04 2.16 1.36 2.46 1.51.3.15.48.13.66-.08.18-.2.76-.89.96-1.19.2-.3.4-.25.67-.15.27.1 1.72.81 2.01.96.3.15.49.22.56.35.07.13.07.74-.17 1.43z"/>
      </svg>
      WhatsApp
    </a>
  );
}

// ===== Booking modal =======================================================
function BookingModal({ open, onClose, prefill }) {
  const [stage, setStage] = useState('form');
  const [form, setForm] = useState({
    name: '', email: '', phone: '',
    area: prefill?.area || 'face',
    treatment: prefill?.treatment || '',
    doctor: prefill?.doctor || 'any',
    date: '',
    time: '',
    notes: '',
    consent: false,
  });

  useEffect(() => {
    if (open) {
      setStage('form');
      setForm(f => ({
        ...f,
        area: prefill?.area || f.area,
        treatment: prefill?.treatment || '',
        doctor: prefill?.doctor || 'any',
      }));
      document.body.classList.add('scroll-lock');
    } else {
      document.body.classList.remove('scroll-lock');
    }
    return () => document.body.classList.remove('scroll-lock');
  }, [open, prefill]);

  if (!open) return null;

  const currentArea = TREATMENT_AREAS.find(a => a.id === form.area) || TREATMENT_AREAS[0];

  const submit = (e) => {
    e.preventDefault();
    if (!form.consent) return;
    setStage('done');
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-panel" onClick={(e) => e.stopPropagation()}>
        {stage === 'form' && (
          <div style={{ padding: '40px 40px 32px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8 }}>By appointment</div>
                <h3 className="serif" style={{ fontSize: 36 }}>Book a consultation</h3>
              </div>
              <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 14, color: 'var(--muted)' }} aria-label="Close">✕</button>
            </div>
            <p style={{ marginTop: 16, color: 'var(--muted)', fontSize: 14, lineHeight: 1.6, maxWidth: 480 }}>
              We&apos;ll respond within one working day to confirm. Our consultations are private and unhurried — your treatment plan is built around your goals, not a menu.
            </p>

            <form onSubmit={submit} style={{ marginTop: 32 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Full name</label>
                  <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Phone (WhatsApp preferred)</label>
                  <input required value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="+971 …" />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Email</label>
                  <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Preferred area</label>
                  <select value={form.area} onChange={(e) => setForm({ ...form, area: e.target.value, treatment: '' })}>
                    {TREATMENT_AREAS.map(a => <option key={a.id} value={a.id}>{a.label}</option>)}
                  </select>
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Treatment of interest</label>
                  <select value={form.treatment} onChange={(e) => setForm({ ...form, treatment: e.target.value })}>
                    <option value="">— Discuss with the team —</option>
                    {currentArea.treatments.map(t => <option key={t.slug} value={t.slug}>{t.name}</option>)}
                  </select>
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Preferred doctor</label>
                  <select value={form.doctor} onChange={(e) => setForm({ ...form, doctor: e.target.value })}>
                    <option value="any">No preference</option>
                    {DOCTORS.filter(d => d.verifyState !== 'guest-pending').map(d => <option key={d.slug} value={d.slug}>{d.name}</option>)}
                  </select>
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Preferred date</label>
                  <input type="date" value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />
                </div>
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Preferred time</label>
                  <select value={form.time} onChange={(e) => setForm({ ...form, time: e.target.value })}>
                    <option value="">Any time</option>
                    <option>Morning (9–12)</option>
                    <option>Afternoon (12–4)</option>
                    <option>Evening (4–8)</option>
                  </select>
                </div>
              </div>
              <div className="field" style={{ marginTop: 20, marginBottom: 0, gridColumn: '1 / -1' }}>
                <label>Anything else we should know?</label>
                <textarea value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} placeholder="Optional — concerns, prior treatments, mobility needs…" />
              </div>

              <label style={{ marginTop: 20, display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                <input
                  type="checkbox"
                  checked={form.consent}
                  onChange={(e) => setForm({ ...form, consent: e.target.checked })}
                  style={{ marginTop: 3 }}
                />
                <span>
                  I consent to Lucia Clinic contacting me regarding my consultation. I understand this form does not collect any medical history; clinical information is handled in person and stored under DHA-compliant patient confidentiality.
                </span>
              </label>

              <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
                <div style={{ fontSize: 12, color: 'var(--muted)' }}>
                  Prefer to talk? <a href={CLINIC.phoneTel} style={{ borderBottom: '1px solid currentColor' }}>{CLINIC.phone}</a> &middot;{' '}
                  <a href={CLINIC.whatsappLink} style={{ borderBottom: '1px solid currentColor' }}>WhatsApp</a>
                </div>
                <button type="submit" className="btn" disabled={!form.consent} style={{ opacity: form.consent ? 1 : 0.45 }}>
                  Request appointment <ArrowRight size={10} />
                </button>
              </div>
            </form>
          </div>
        )}

        {stage === 'done' && (
          <div style={{ padding: '64px 40px', textAlign: 'center' }}>
            <div style={{ width: 64, height: 64, margin: '0 auto', border: '1px solid var(--gold)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path d="M5 11.5 9 15.5 17 6.5" stroke="var(--gold-deep)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <h3 className="serif" style={{ fontSize: 36, marginTop: 24 }}>Request received</h3>
            <p style={{ marginTop: 16, color: 'var(--muted)', maxWidth: 420, marginLeft: 'auto', marginRight: 'auto' }}>
              Thank you, {form.name?.split(' ')[0] || 'we'}. A member of the clinic team will be in touch within one working day to confirm your appointment.
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-outline" onClick={onClose}>Continue browsing</button>
              <a className="btn" href={CLINIC.whatsappLink}>Message on WhatsApp <ArrowRight size={10} /></a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ===== Section eyebrow ====================================================
function SectionEyebrow({ label, align = 'left' }) {
  return (
    <div style={{ textAlign: align, display: 'flex', alignItems: 'center', gap: 12, justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
      <span className="gold-rule" />
      <span className="eyebrow">{label}</span>
    </div>
  );
}

// ===== Doctor drawer ======================================================
function DoctorDrawer({ doctor, onClose, onBook }) {
  useEffect(() => {
    if (doctor) document.body.classList.add('scroll-lock');
    else document.body.classList.remove('scroll-lock');
    return () => document.body.classList.remove('scroll-lock');
  }, [doctor]);
  if (!doctor) return null;
  return (
    <div className="modal-backdrop" onClick={onClose} style={{ alignItems: 'stretch', justifyContent: 'flex-end' }}>
      <div className="drawer-panel" onClick={(e) => e.stopPropagation()}>
        <div style={{ position: 'relative' }}>
          <img src={doctor.portrait} alt={doctor.name} style={{ width: '100%', height: 360, objectFit: 'cover', objectPosition: 'center top' }} />
          <button onClick={onClose} style={{ position: 'absolute', top: 20, right: 20, background: 'rgba(255,255,255,0.92)', border: 'none', width: 36, height: 36, borderRadius: '50%', cursor: 'pointer' }} aria-label="Close">✕</button>
          {doctor.type === 'guest' && (
            <div style={{ position: 'absolute', top: 20, left: 20, background: 'var(--ink)', color: 'white', padding: '6px 12px', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              Visiting consultant
            </div>
          )}
        </div>
        <div style={{ padding: '40px 40px 64px' }}>
          <div className="eyebrow">{doctor.role}</div>
          <h3 className="serif" style={{ fontSize: 36, marginTop: 10 }}>{doctor.name}</h3>
          <div style={{ marginTop: 8, fontSize: 14, color: 'var(--muted)' }}>{doctor.credentials}</div>

          <p style={{ marginTop: 24, lineHeight: 1.7, color: 'var(--ink-soft)' }}>{doctor.bio}</p>

          <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <div>
              <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8 }}>Focus areas</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 14 }}>
                {doctor.focus.map(f => <li key={f}>· {f}</li>)}
              </ul>
            </div>
            <div>
              <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8 }}>Languages</div>
              <div style={{ fontSize: 14 }}>{doctor.languages.join(', ')}</div>
            </div>
          </div>

          <div style={{ marginTop: 28, padding: '16px 20px', background: 'var(--mist)', fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
            <strong style={{ fontWeight: 600 }}>{doctor.licence}.</strong>{' '}
            {doctor.verifyState === 'verified' && 'Verified.'}
            {doctor.verifyState === 'pending' && 'Pending publication — credential pack to be confirmed with the clinic before launch.'}
            {doctor.verifyState === 'guest-pending' && 'Visiting clinician — DHA temporary licensing applies for scheduled visits only.'}
          </div>

          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => onBook({ doctor: doctor.slug })}>
              Book with {doctor.name.split(' ').slice(-1)[0]} <ArrowRight size={10} />
            </button>
            <a className="btn btn-outline" href={CLINIC.whatsappLink}>Ask a question</a>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  LogoMark, Wordmark, Nav, Footer, WhatsAppFab, BookingModal, SectionEyebrow, DoctorDrawer, ArrowRight,
});
