// ============================================================
// FORME AESTHETICS — Pages
// ============================================================
const { useState: useS, useEffect: useE, useRef: useR, useCallback: useC, useMemo: useM } = React;

// ════════════════════════════════════════════════════════════
// HOME
// ════════════════════════════════════════════════════════════
function Home() {
  return (
    <div className="page">

      {/* HERO — oversized type overlapping full-width image, very light warm overlay */}
      <section style={{ position: 'relative', paddingTop: 'clamp(40px, 6vw, 96px)', paddingBottom: 'clamp(40px, 6vw, 80px)' }}>
        <div className="shell" style={{ position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 36 }}>
            <Eyebrow gold num="01 / 06">Mayfair, London — est. MMXIX</Eyebrow>
            <span className="caption" style={{ display: 'none' }}>scroll</span>
          </div>
        </div>

        {/* image full bleed */}
        <div style={{ position: 'relative', paddingInline: 'clamp(16px, 3vw, 40px)' }}>
          <Placeholder tone="warm" style={{ aspectRatio: '21/10', width: '100%' }} label="Hero · editorial portrait, soft daylight" />

          {/* overlapping headline */}
          <div className="shell" style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            paddingBottom: 'clamp(40px, 6vw, 96px)',
            pointerEvents: 'none',
          }}>
            <h1 className="display" style={{
              fontSize: 'clamp(64px, 12vw, 200px)',
              maxWidth: '14ch',
              color: 'var(--ink)',
              lineHeight: 0.88,
            }}>
              A practice<br/>
              of <em className="italic" style={{ fontWeight: 400, color: 'var(--gold-deep)' }}>considered</em><br/>
              beauty.
            </h1>
          </div>
        </div>

        {/* below the image */}
        <div className="shell" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end' }}>
          <p className="lede" style={{ maxWidth: '36ch' }}>
            Forme is a Mayfair clinic for those who would rather look like themselves —
            only quieter, clearer, and a little better rested.
          </p>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <Link to="/services" className="btn btn-ghost">Treatments <span className="arrow" /></Link>
            <Link to="/book" className="btn btn-forest">Book a consultation <span className="arrow" /></Link>
          </div>
        </div>
      </section>

      {/* PRESS / CREDENTIALS BAND */}
      <section className="shell" style={{ paddingBlock: 'clamp(40px, 6vw, 80px)' }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <Eyebrow>Press &amp; credentials</Eyebrow>
        </div>
        <PressBand />
      </section>

      {/* FEATURED SERVICES STRIP */}
      <section className="shell section" style={{ paddingBlock: 'clamp(60px, 8vw, 120px)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow num="II">A small menu, made well</Eyebrow>
            <h2 className="h2" style={{ marginTop: 24, maxWidth: '14ch' }}>
              Three quiet beginnings, <em className="italic" style={{ color: 'var(--gold-deep)' }}>from our menu</em>.
            </h2>
          </div>
          <Link to="/services" className="link-underline">All treatments <span style={{ width: 16, height: 1, background: 'currentColor' }} /></Link>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {FEATURED_SERVICES.map((s, i) => <ServiceCard s={s} key={i} />)}
        </div>
        <p className="body" style={{ marginTop: 36, fontStyle: 'italic', color: 'var(--ink-tertiary)', fontSize: 13 }}>
          Hover any card to reveal investment. All treatments include consultation and aftercare.
        </p>
      </section>

      {/* SOCIAL PROOF STRIP */}
      <section style={{ background: 'var(--cream)', padding: 'clamp(60px, 9vw, 140px) 0', position: 'relative' }} className="grain">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
            <div>
              <Eyebrow gold num="III">From our patients</Eyebrow>
              <h2 className="h2" style={{ marginTop: 24, maxWidth: '12ch' }}>
                The first <em className="italic">word</em> is restraint.
              </h2>
              <hr className="rule-gold" style={{ marginTop: 36, width: 80 }} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
              {TESTIMONIALS.map((t, i) => (
                <figure key={i} style={{ paddingBottom: 32, borderBottom: i < TESTIMONIALS.length - 1 ? '1px solid var(--hairline)' : 'none' }}>
                  <blockquote className="serif italic" style={{
                    fontSize: 'clamp(22px, 2.4vw, 32px)',
                    lineHeight: 1.3,
                    fontWeight: 400,
                    letterSpacing: '-0.01em',
                    color: 'var(--ink)',
                    maxWidth: '34ch',
                  }}>
                    “{t.quote}”
                  </blockquote>
                  <figcaption className="caption" style={{ marginTop: 20, color: 'var(--ink-soft)' }}>
                    {t.author} · {t.role}
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY TEASER */}
      <section className="shell section">
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'center' }}>
          <Placeholder tone="ivory" style={{ aspectRatio: '4/5' }} label="Founder portrait · Dr. Helena Verre" />
          <div>
            <Eyebrow num="IV">On our philosophy</Eyebrow>
            <h2 className="h2" style={{ marginTop: 24, marginBottom: 32 }}>
              We believe the most elegant intervention<br/>
              <em className="italic" style={{ color: 'var(--gold-deep)' }}>is the one no one notices.</em>
            </h2>
            <p className="body-lg" style={{ marginBottom: 20 }}>
              Founded in 2019 by Dr. Helena Verre, Forme is a medical aesthetic practice that prizes anatomy, time,
              and a sense of proportion above the loud signatures of modern beauty work.
            </p>
            <p className="body-lg" style={{ marginBottom: 36 }}>
              Each patient is mapped, photographed, and reviewed quarterly. We treat the face as we would a quiet,
              expensive object — slowly, and with great care.
            </p>
            <Link to="/about" className="link-underline">Read our story <span style={{ width: 16, height: 1, background: 'currentColor' }} /></Link>
          </div>
        </div>
      </section>

      {/* BOOKING CTA BAND */}
      <section style={{ background: 'var(--forest)', color: 'var(--ivory)', padding: 'clamp(80px, 10vw, 160px) 0', position: 'relative', overflow: 'hidden' }}>
        <div className="shell" style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'end' }}>
            <div>
              <span className="eyebrow" style={{ color: 'rgba(253,250,246,0.6)' }}>By appointment only</span>
              <h2 className="display" style={{ color: 'var(--ivory)', fontSize: 'clamp(48px, 8vw, 112px)', marginTop: 24, lineHeight: 0.94, maxWidth: '15ch' }}>
                Begin with a<br/>
                <em className="italic" style={{ color: 'var(--gold-soft)', fontWeight: 400 }}>quiet conversation.</em>
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-end' }}>
              <p style={{ color: 'rgba(253,250,246,0.8)', maxWidth: '32ch', textAlign: 'right', fontSize: 16 }}>
                Forty-five minutes. £120, redeemable against treatment.
                Tuesday through Saturday.
              </p>
              <Link to="/book" className="btn" style={{
                background: 'var(--gold)', color: 'var(--ink)', border: '1px solid var(--gold)',
              }}>
                Reserve a consultation <span className="arrow" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// SERVICES
// ════════════════════════════════════════════════════════════
function Services() {
  return (
    <div className="page">
      <PageHero
        num="02 / 06"
        eyebrow="The full menu"
        title="Treatments,"
        italic="quietly assembled."
        lede="Each service below is performed by a medical practitioner, scheduled with at least thirty minutes of buffer, and reviewed at fourteen days. Pricing includes consultation, treatment, and aftercare."
      />

      {/* Categories */}
      <div className="shell" style={{ paddingBottom: 'var(--section-y)' }}>
        {SERVICE_CATEGORIES.map((cat, i) => (
          <section key={cat.id} id={cat.id} style={{ paddingBlock: 'clamp(64px, 9vw, 128px)', borderBottom: i < SERVICE_CATEGORIES.length - 1 ? '1px solid var(--hairline)' : 'none' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 'clamp(40px, 6vw, 96px)' }}>
              {/* Sticky header column */}
              <div>
                <div style={{ position: 'sticky', top: 120 }}>
                  <Placeholder tone={cat.image} style={{ aspectRatio: '4/5', marginBottom: 32 }} label={`${cat.name} · plate`} />
                  <Eyebrow gold num={`0${i + 1}`}>{cat.name}</Eyebrow>
                  <h2 className="h2" style={{ marginTop: 16, marginBottom: 20 }}>
                    <em className="italic">{cat.italic}</em>
                  </h2>
                  <p className="body-lg" style={{ marginBottom: 28 }}>{cat.blurb}</p>
                  <Link to="/book" className="btn btn-forest">Book {cat.name.toLowerCase()} <span className="arrow" /></Link>
                </div>
              </div>
              {/* Pricing table */}
              <div>
                <div style={{
                  display: 'grid', gridTemplateColumns: '1.4fr 0.6fr 0.5fr', gap: 32,
                  paddingBottom: 16, borderBottom: '1px solid var(--ink)',
                  marginBottom: 8,
                }} className="caption">
                  <span>Treatment</span><span>Duration</span><span style={{ textAlign: 'right' }}>Investment</span>
                </div>
                <PricingTable services={cat.services} />
              </div>
            </div>
          </section>
        ))}
      </div>

      {/* FAQ teaser */}
      <section style={{ background: 'var(--cream)' }} className="section">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <Eyebrow gold>Frequently asked</Eyebrow>
            <h2 className="h2" style={{ marginTop: 20, maxWidth: '14ch' }}>
              First time? <em className="italic" style={{ color: 'var(--gold-deep)' }}>Begin here.</em>
            </h2>
          </div>
          <div>
            <p className="body-lg" style={{ marginBottom: 28 }}>
              Recovery, pricing, our cancellation policy, and the questions our concierge hears most often.
              Read before booking — or simply call.
            </p>
            <div style={{ display: 'flex', gap: 16 }}>
              <Link to="/faq" className="btn btn-ghost">Read our FAQ <span className="arrow" /></Link>
              <Link to="/book" className="btn btn-forest">Book <span className="arrow" /></Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// ABOUT
// ════════════════════════════════════════════════════════════
function About() {
  return (
    <div className="page">
      <PageHero
        num="03 / 06"
        eyebrow="Our story"
        title="A clinic, not"
        italic="a counter."
        lede="Forme was founded in 2019, on Mount Street, by a doctor who had grown tired of the theatre of modern beauty work. The practice we built is small, deliberate, and almost entirely word of mouth."
      />

      {/* Cinematic story */}
      <section className="shell" style={{ paddingBottom: 'clamp(60px, 8vw, 128px)' }}>
        <Placeholder tone="warm" style={{ aspectRatio: '21/9' }} label="Mount Street · daylight, c. 2024" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 48, marginTop: 64 }}>
          <p className="body-lg">
            Forme began as a single treatment room, two days a week, above a tailor on Savile Row.
            Helena Verre had returned to London from a decade of teaching at a hospital in Lyon, and was looking
            for a way to practise medicine on a different rhythm.
          </p>
          <p className="body-lg">
            Patients arrived for one treatment and quietly returned for another. By 2022 the practice had taken
            its current home — five rooms, a courtyard, a library — in a Georgian townhouse on Mount Street,
            two minutes from the Connaught.
          </p>
          <p className="body-lg">
            Today, Forme treats roughly forty patients a week. We do not advertise. We do not run promotions.
            We do not sell skincare we have not personally tested for at least six months.
          </p>
        </div>
      </section>

      {/* Owner profile — large portrait */}
      <section style={{ background: 'var(--cream-soft)' }} className="section">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'center' }}>
          <Placeholder tone="ivory" style={{ aspectRatio: '4/5' }} label="Dr. Helena Verre · founder & medical director" />
          <div>
            <Eyebrow gold num="Founder">Dr. Helena Verre</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 88px)', marginTop: 24, lineHeight: 0.96 }}>
              I would<br/>rather <em className="italic" style={{ color: 'var(--gold-deep)' }}>say no</em>.
            </h2>
            <hr className="rule-gold" style={{ marginBlock: 36, width: 80 }} />
            <p className="body-lg" style={{ marginBottom: 20 }}>
              Helena trained at King's College London, completed a residency at Hôpitaux Universitaires
              de Strasbourg, and held a senior teaching post at Hospices Civils de Lyon for nine years
              before returning to private practice.
            </p>
            <p className="body-lg" style={{ marginBottom: 28 }}>
              She is a Fellow of the British College of Aesthetic Medicine, a JCCP-registered practitioner,
              and a quiet advocate for raising the regulatory standard of injectable medicine in the UK.
            </p>
            <Link to="/contact" className="link-underline">Press &amp; speaking <span style={{ width: 16, height: 1, background: 'currentColor' }} /></Link>
          </div>
        </div>
      </section>

      {/* Philosophy statement */}
      <section className="section">
        <div className="shell" style={{ textAlign: 'center', maxWidth: 980, margin: '0 auto' }}>
          <Eyebrow gold>Our philosophy</Eyebrow>
          <blockquote className="display italic" style={{
            fontSize: 'clamp(36px, 5vw, 72px)',
            lineHeight: 1.12,
            marginTop: 36,
            fontWeight: 400,
            color: 'var(--ink)',
            letterSpacing: '-0.02em',
          }}>
            “The best work in aesthetic medicine is the work that returns a face<br/>
            <em style={{ color: 'var(--gold-deep)' }}>to itself</em> — only slightly more rested, slightly more itself, slightly more <em style={{ color: 'var(--gold-deep)' }}>still</em>.”
          </blockquote>
          <hr className="rule-gold" style={{ marginTop: 48, width: 60, marginInline: 'auto' }} />
          <p className="caption" style={{ marginTop: 24, color: 'var(--ink-tertiary)' }}>
            From the Forme Practice Manual, page 3
          </p>
        </div>
      </section>

      {/* Certifications band */}
      <section style={{ background: 'var(--ivory)', borderBlock: '1px solid var(--hairline)' }}>
        <div className="shell" style={{ paddingBlock: 'clamp(40px, 6vw, 72px)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
            <Eyebrow>Regulated &amp; accredited</Eyebrow>
            <span className="caption">All practitioners GMC- and NMC-registered</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, borderTop: '1px solid var(--hairline)' }}>
            {CERTIFICATIONS.map((c, i) => (
              <div key={i} style={{
                padding: '32px 16px',
                textAlign: 'center',
                borderRight: i % 6 !== 5 ? '1px solid var(--hairline)' : 'none',
                borderBottom: i < 0 ? '1px solid var(--hairline)' : 'none',
                fontFamily: 'var(--serif)', fontSize: 15, color: 'var(--ink-soft)',
                lineHeight: 1.35,
              }}>
                {c}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team grid */}
      <section className="section">
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24, marginBottom: 64 }}>
            <div>
              <Eyebrow gold num="V">Behind the door</Eyebrow>
              <h2 className="h2" style={{ marginTop: 20, maxWidth: '16ch' }}>
                The hands you'll <em className="italic">come to know</em>.
              </h2>
            </div>
            <p className="body" style={{ maxWidth: '42ch' }}>
              A small, settled team. Every member has been with Forme for at least two years —
              and is selected as much for their temperament as their training.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {TEAM.map((m, i) => (
              <article key={i}>
                <Placeholder tone={m.image} style={{ aspectRatio: '4/5', marginBottom: 20 }} label={m.name} />
                <h3 className="serif" style={{ fontSize: 22, marginBottom: 4 }}>{m.name}</h3>
                <p className="caption" style={{ color: 'var(--gold-deep)' }}>{m.role}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// GALLERY
// ════════════════════════════════════════════════════════════
function Gallery() {
  const [filter, setFilter] = useS('All work');
  const [lightbox, setLightbox] = useS(-1);

  const filtered = useM(() => (
    filter === 'All work' ? GALLERY : GALLERY.filter(g => g.cat === filter)
  ), [filter]);

  // keyboard nav
  useE(() => {
    if (lightbox < 0) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLightbox(-1);
      else if (e.key === 'ArrowRight') setLightbox((lightbox + 1) % filtered.length);
      else if (e.key === 'ArrowLeft') setLightbox((lightbox - 1 + filtered.length) % filtered.length);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightbox, filtered.length]);

  return (
    <div className="page">
      <PageHero
        num="04 / 06"
        eyebrow="Gallery"
        title="A quiet"
        italic="record."
        lede="A selection of recent work, photographed in our consultation room with single-source daylight. All images shown with patient consent. No filters, no retouching."
      />

      {/* Filter bar */}
      <div className="shell" style={{ paddingBottom: 40 }}>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {GALLERY_FILTERS.map(f => (
            <button key={f}
              className={'filter-chip ' + (filter === f ? 'active' : '')}
              onClick={() => setFilter(f)}>
              {f}
            </button>
          ))}
          <span className="caption" style={{ marginLeft: 'auto', alignSelf: 'center' }}>
            {filtered.length} works
          </span>
        </div>
      </div>

      {/* Masonry */}
      <div className="shell" style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="masonry">
          {filtered.map((g, i) => (
            <div key={`${g.label}-${i}`} onClick={() => setLightbox(i)}>
              <Placeholder tone={g.tone} ratio={g.ratio} label={g.label} />
            </div>
          ))}
        </div>
      </div>

      {/* Lightbox */}
      {lightbox >= 0 && filtered[lightbox] && (
        <div className="lightbox" role="dialog" aria-modal="true" onClick={() => setLightbox(-1)}>
          <div className="lightbox-frame" onClick={(e) => e.stopPropagation()}>
            <button className="lightbox-close" onClick={() => setLightbox(-1)} aria-label="Close">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <line x1="4" y1="4" x2="20" y2="20" /><line x1="20" y1="4" x2="4" y2="20" />
              </svg>
            </button>
            <button className="lightbox-nav prev" onClick={() => setLightbox((lightbox - 1 + filtered.length) % filtered.length)} aria-label="Previous">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <polyline points="14,5 7,12 14,19" />
              </svg>
            </button>
            <button className="lightbox-nav next" onClick={() => setLightbox((lightbox + 1) % filtered.length)} aria-label="Next">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <polyline points="10,5 17,12 10,19" />
              </svg>
            </button>
            <div className="lightbox-image">
              <Placeholder tone={filtered[lightbox].tone} ratio={filtered[lightbox].ratio} style={{ width: '100%', height: '100%' }} />
            </div>
            <div className="lightbox-meta">
              <span className="count">{String(lightbox + 1).padStart(2, '0')} / {String(filtered.length).padStart(2, '0')}</span>
              <span>{filtered[lightbox].label}</span>
              <span style={{ marginLeft: 'auto', opacity: 0.6 }}>← → · Esc</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// CONTACT
// ════════════════════════════════════════════════════════════
function Contact() {
  const [sent, setSent] = useS(false);
  return (
    <div className="page">
      <PageHero
        num="05 / 06"
        eyebrow="Get in touch"
        title="On Mount Street,"
        italic="two minutes from Bond."
        lede="The clinic is open by appointment only. For first-time enquiries, the concierge form below is the quickest way to reach us; for press, please write directly."
      />

      <section className="shell" style={{ paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'clamp(40px, 6vw, 80px)' }}>
          {/* Left: details + map */}
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 48 }}>
              <div>
                <Eyebrow gold>The Clinic</Eyebrow>
                <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, marginTop: 16 }}>
                  14 Mount Street<br/>
                  Mayfair<br/>
                  London W1K 2RJ
                </p>
              </div>
              <div>
                <Eyebrow gold>Hours</Eyebrow>
                <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, marginTop: 16 }}>
                  Tue – Fri · 10 – 19<br/>
                  Saturday · 10 – 17<br/>
                  Sunday &amp; Monday · by request
                </p>
              </div>
              <div>
                <Eyebrow gold>Reach us</Eyebrow>
                <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, marginTop: 16 }}>
                  <a href="tel:+442079460421">+44 20 7946 0421</a><br/>
                  <a href="mailto:concierge@formeaesthetics.london" style={{ fontSize: 18 }}>concierge@<br/>formeaesthetics.london</a>
                </p>
              </div>
              <div>
                <Eyebrow gold>Follow</Eyebrow>
                <ul style={{ listStyle: 'none', marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {['Instagram · @formeaesthetics', 'TikTok · @formeaesthetics', 'Pinterest · /forme'].map(s => (
                    <li key={s} className="serif" style={{ fontSize: 18 }}><a href="#">{s}</a></li>
                  ))}
                </ul>
              </div>
            </div>

            {/* Map placeholder */}
            <div style={{ position: 'relative', border: '1px solid var(--hairline)' }}>
              <Placeholder tone="ivory" style={{ aspectRatio: '16/10' }} label="Map · 14 Mount Street, W1K 2RJ" />
              <div style={{
                position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
                pointerEvents: 'none',
              }}>
                <div style={{
                  width: 18, height: 18, borderRadius: '50%',
                  background: 'var(--forest)', border: '3px solid var(--ivory)',
                  boxShadow: '0 4px 14px rgba(28,28,26,0.25)',
                }} />
              </div>
              <div style={{
                position: 'absolute', bottom: 16, right: 16,
                padding: '10px 14px',
                background: 'var(--ivory)',
                border: '1px solid var(--hairline)',
                fontFamily: 'var(--grotesk)', fontSize: 11, letterSpacing: '0.2em',
                textTransform: 'uppercase', color: 'var(--ink)',
              }}>
                Open in Maps →
              </div>
            </div>
          </div>

          {/* Right: form (Formspree) */}
          <div style={{ background: 'var(--cream-soft)', padding: 'clamp(32px, 4vw, 56px)' }}>
            <Eyebrow gold>Concierge enquiry</Eyebrow>
            <h2 className="h3" style={{ marginTop: 16, marginBottom: 8 }}>Write to us.</h2>
            <p className="body" style={{ marginBottom: 36 }}>
              The concierge reads every note. We reply within one working day.
            </p>

            {sent ? (
              <div style={{
                padding: 32, border: '1px solid var(--gold)',
                background: 'var(--ivory)', textAlign: 'center',
              }}>
                <p className="serif italic" style={{ fontSize: 22, color: 'var(--gold-deep)' }}>Thank you.</p>
                <p className="body" style={{ marginTop: 12 }}>Your note is on its way. We shall reply within one working day.</p>
              </div>
            ) : (
              <form action="https://formspree.io/f/xexample"
                method="POST"
                onSubmit={(e) => { e.preventDefault(); setSent(true); }}
                style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
                <div className="form-field">
                  <label className="form-label" htmlFor="name">Your name</label>
                  <input className="form-input" name="name" id="name" required placeholder="First and surname" />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
                  <div className="form-field">
                    <label className="form-label" htmlFor="email">Email</label>
                    <input className="form-input" type="email" name="email" id="email" required placeholder="you@example.com" />
                  </div>
                  <div className="form-field">
                    <label className="form-label" htmlFor="phone">Phone</label>
                    <input className="form-input" type="tel" name="phone" id="phone" placeholder="Optional" />
                  </div>
                </div>
                <div className="form-field">
                  <label className="form-label" htmlFor="topic">Enquiry type</label>
                  <select className="form-select" name="topic" id="topic">
                    <option>First consultation</option>
                    <option>Treatment enquiry</option>
                    <option>Annual programme</option>
                    <option>Bridal &amp; event</option>
                    <option>Press</option>
                    <option>Other</option>
                  </select>
                </div>
                <div className="form-field">
                  <label className="form-label" htmlFor="message">Your message</label>
                  <textarea className="form-textarea" name="message" id="message" placeholder="Tell us a little about what brings you to Forme — there is no need to be brief." />
                </div>
                <button type="submit" className="btn btn-forest" style={{ alignSelf: 'flex-start', marginTop: 8 }}>
                  Send to concierge <span className="arrow" />
                </button>
                <p className="caption" style={{ color: 'var(--ink-tertiary)' }}>
                  We never share your details. Read our privacy notice.
                </p>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// FAQ
// ════════════════════════════════════════════════════════════
function FAQPage() {
  return (
    <div className="page">
      <PageHero
        num="06 / 06"
        eyebrow="Frequently asked"
        title="Questions,"
        italic="answered slowly."
        lede="The ten questions our concierge hears most often. If your question is not below, the simplest thing is to write to us — every note is read."
      />

      <section className="shell" style={{ paddingBottom: 'clamp(60px, 8vw, 128px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '4fr 8fr', gap: 'clamp(40px, 6vw, 96px)' }}>
          <div>
            <div style={{ position: 'sticky', top: 120 }}>
              <Eyebrow gold>10 of the most</Eyebrow>
              <h2 className="h2" style={{ marginTop: 20, maxWidth: '12ch' }}>
                Before you<br/><em className="italic">begin.</em>
              </h2>
              <hr className="rule-gold" style={{ marginBlock: 32, width: 60 }} />
              <p className="body" style={{ marginBottom: 28 }}>
                The questions we receive most. For anything bespoke — bridal timelines, post-surgical care,
                travel between cities — please write to the concierge.
              </p>
              <Link to="/contact" className="link-underline">Write to us <span style={{ width: 16, height: 1, background: 'currentColor' }} /></Link>
            </div>
          </div>
          <div>
            <Accordion items={FAQ} defaultOpen={0} />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: 'var(--forest)', color: 'var(--ivory)' }} className="section">
        <div className="shell" style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
          <span className="eyebrow" style={{ color: 'rgba(253,250,246,0.6)' }}>Ready to begin?</span>
          <h2 className="display" style={{ color: 'var(--ivory)', fontSize: 'clamp(40px, 5.5vw, 80px)', marginTop: 24, lineHeight: 1, marginBottom: 36 }}>
            Reserve a quiet hour<br/>
            <em className="italic" style={{ color: 'var(--gold-soft)', fontWeight: 400 }}>on Mount Street.</em>
          </h2>
          <Link to="/book" className="btn" style={{
            background: 'var(--gold)', color: 'var(--ink)', border: '1px solid var(--gold)',
          }}>
            Book a consultation <span className="arrow" />
          </Link>
        </div>
      </section>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// BOOK
// ════════════════════════════════════════════════════════════
function Book() {
  return (
    <div className="page">
      <PageHero
        num="07"
        eyebrow="Booking"
        title="Reserve a"
        italic="consultation."
        lede="Forty-five minutes with a medical practitioner. £120, redeemable in full against any treatment booked within sixty days. Tuesday through Saturday."
      />

      <section className="shell" style={{ paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 'clamp(40px, 6vw, 80px)', alignItems: 'start' }}>
          {/* Embedded widget placeholder */}
          <div>
            <Eyebrow gold>Live availability</Eyebrow>
            <h2 className="h3" style={{ marginTop: 16, marginBottom: 28 }}>Choose a moment.</h2>

            <div style={{
              background: 'var(--cream-soft)',
              border: '1px solid var(--hairline)',
              padding: 'clamp(28px, 4vw, 56px)',
              position: 'relative',
              minHeight: 540,
            }}>
              {/* widget chrome */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32, paddingBottom: 18, borderBottom: '1px solid var(--hairline)' }}>
                <span className="caption">Booking · Powered by Timely</span>
                <span className="caption" style={{ color: 'var(--gold-deep)' }}>Live</span>
              </div>

              {/* fake calendar */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, marginBottom: 32, borderTop: '1px solid var(--hairline)', borderLeft: '1px solid var(--hairline)' }}>
                {['Tue','Wed','Thu','Fri','Sat','Tue','Wed'].map((d, i) => (
                  <div key={i} style={{ padding: '16px 8px', borderRight: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', textAlign: 'center' }}>
                    <div className="caption" style={{ color: 'var(--ink-tertiary)', fontSize: 10 }}>{d}</div>
                    <div className="serif" style={{ fontSize: 22, marginTop: 4, color: i === 2 ? 'var(--gold-deep)' : 'var(--ink)' }}>{2 + i}</div>
                    <div className="caption" style={{ fontSize: 9, color: i === 0 || i === 3 ? 'var(--ink-tertiary)' : 'var(--gold-deep)', marginTop: 4 }}>
                      {i === 0 ? '—' : i === 3 ? 'full' : `${4 - Math.min(i,3)} slots`}
                    </div>
                  </div>
                ))}
              </div>

              <Eyebrow>Thursday, 4th June — slots</Eyebrow>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 16, marginBottom: 32 }}>
                {['10:00', '11:00', '12:00', '14:00', '15:00', '16:00', '17:30', '18:30'].map((t, i) => (
                  <button key={t} className={'filter-chip ' + (i === 3 ? 'active' : '')} style={{ padding: '14px 8px', fontSize: 12 }}>
                    {t}
                  </button>
                ))}
              </div>

              <hr className="rule" />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 24 }}>
                <div>
                  <div className="caption">Selected</div>
                  <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>Thursday 4 June · 14:00</div>
                  <div className="caption" style={{ color: 'var(--gold-deep)', marginTop: 6 }}>Consultation · 45 min · £120</div>
                </div>
                <button className="btn btn-forest">Continue <span className="arrow" /></button>
              </div>

              <p className="caption" style={{ color: 'var(--ink-tertiary)', marginTop: 28, textAlign: 'center' }}>
                Live widget will load here · Timely / Phorest embed
              </p>
            </div>

            <p className="body" style={{ marginTop: 28, fontSize: 13, color: 'var(--ink-tertiary)' }}>
              Booking software not loading?{' '}
              <a href="https://book.formeaesthetics.london" target="_blank" rel="noreferrer"
                style={{ borderBottom: '1px solid var(--gold)', paddingBottom: 2 }}>
                Open the full booking page →
              </a>
              {'  ·  '}
              Or call <a href="tel:+442079460421" style={{ borderBottom: '1px solid var(--gold)' }}>+44 20 7946 0421</a>.
            </p>
          </div>

          {/* Sidebar */}
          <aside>
            <div style={{ position: 'sticky', top: 120 }}>
              <Placeholder tone="warm" style={{ aspectRatio: '4/5', marginBottom: 32 }} label="Consultation room · daylight" />
              <Eyebrow gold>What to expect</Eyebrow>
              <ol style={{ listStyle: 'none', marginTop: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
                {[
                  ['I.',   'A quiet conversation about why you have come, and what you would (and would not) like.'],
                  ['II.',  'A skin and facial mapping — photographed on a calibrated, neutral-light system.'],
                  ['III.', 'A written plan, sent the same evening. No pressure to begin in the room.'],
                ].map(([n, t]) => (
                  <li key={n} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 16, paddingBottom: 18, borderBottom: '1px solid var(--hairline)' }}>
                    <span className="serif italic" style={{ color: 'var(--gold-deep)', fontSize: 22 }}>{n}</span>
                    <p className="body" style={{ fontSize: 14 }}>{t}</p>
                  </li>
                ))}
              </ol>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home, Services, About, Gallery, Contact, FAQPage, Book });
