/* global React, PhotoSlot, EditorialPhoto, Marquee, FadeIn, SwapFriendlyMedia, PullQuote, Field, RadioGroup, useFormState, validate, postEnquiry, AudienceIcon, MastheadJump, FrcProcess */

// ─── HOME ────────────────────────────────────────────────────────────
function HomePage({ navigate, motion }) {
  return (
    <div className="bm-page">
      {/* MASTHEAD */}
      <section className="bm-mast" data-screen-label="Home · Masthead">
        <div className="bm-mast-mission">
          <div className="bm-mast-pillars" aria-label="Four pillars of practice">
            <span>Heal</span>
            <span className="bm-mast-pillars-sep" aria-hidden="true">|</span>
            <span>Control</span>
            <span className="bm-mast-pillars-sep" aria-hidden="true">|</span>
            <span>Strength</span>
            <span className="bm-mast-pillars-sep" aria-hidden="true">|</span>
            <span><em>Freedom</em></span>
          </div>
          <div className="bm-mast-imperative">
            Build range. Strengthen it. Use it.
          </div>
          <div className="bm-mast-services-line">
            <span className="bm-mast-services-name">
              <strong>Functional&nbsp;Range&nbsp;Conditioning&nbsp;(FRC)</strong> <em>&amp;</em> <strong>Assisted&nbsp;Stretching</strong>
            </span>
            <span className="bm-mast-services-dot" aria-hidden="true">·</span>
            <span className="bm-mast-services-loc">Cambridge, UK · Est. 2020</span>
          </div>
        </div>
        <div className="bm-mast-grid">
          <FadeIn className="bm-mast-text">
            <h1 className="bm-mast-h1">
              Passive stretching <em>seals</em> your space.<br/>
              Active mobility <em>populates</em> it with function.
            </h1>
            <p className="bm-mast-sub">
              One-to-one FRC sessions in Cambridge for desk workers, athletes, and anyone managing chronic restriction. A one-day masterclass for therapists who want to add assisted stretching to their practice.
            </p>
            <div className="bm-mast-cta-row">
              <a className="bm-btn bm-btn-primary" onClick={(e) => { e.preventDefault(); navigate("contact"); }} href="#/contact">
                Tell me about your situation
              </a>
              <a className="bm-btn bm-btn-ghost" onClick={(e) => { e.preventDefault(); navigate("masterclass"); }} href="#/masterclass">
                Masterclass for therapists
              </a>
            </div>
          </FadeIn>
          <FadeIn delay={120} className="bm-mast-photo-wrap">
            <EditorialPhoto
              aspect="4 / 5"
              frame="01"
              tags={["CAR · SHOULDER", "f/2.0 · 1/250"]}
              coords="CAMBRIDGE · UK"
              label="Hero · hands-on stretch · body in motion"
            />
          </FadeIn>
        </div>
        <MastheadJump
          navigate={navigate}
          items={[
            { id: "sessions", label: "One-to-one FRC sessions", sub: "Cambridge locals" },
            { id: "masterclass", label: "Practitioner masterclass", sub: "Cambridge HQ · £350" },
            { id: "about", label: "About Adam", sub: "Teacher · BJJ black belt" },
            { id: "contact", label: "Enquire", sub: "Reply within 48h" },
          ]}
        />
      </section>

      {/* MARQUEE */}
      <Marquee
        motion={motion}
        items={[
          "Functional Range Conditioning",
          "Controlled Articular Rotations",
          "PNF Stretch Therapy",
          "Assisted Mobility",
          "Cambridge · UK",
          "By enquiry only",
        ]}
      />

      {/* REFRAME */}
      <section className="bm-section" data-screen-label="Home · Reframe">
        <div className="bm-container">
          <FadeIn>
            <PullQuote>
              Your gym work should be <em>mobility</em> work. Mobility is strength-building. Loss of <em>control</em> is what causes pain and loss of range.
            </PullQuote>
          </FadeIn>
          <FadeIn delay={120}>
            <p className="bm-body" style={{ maxWidth: 840, margin: "40px auto 0", textAlign: "center", color: "var(--fg-muted)" }}>
              Passive stretching tells your nervous system to tolerate a position; active mobility builds the strength to own it. Every session begins with assessment, not a generic flow — what your joints can do, what they can't yet, and the protocol that closes&nbsp;the&nbsp;gap.
            </p>
          </FadeIn>
        </div>
      </section>

      {/* TWO PATHS — hairline rows */}
      <section className="bm-section bm-section-tight" data-screen-label="Home · Two paths">
        <div className="bm-container">
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Two ways to work with Adam</span>
            <h2 className="bm-h2">Pick the <em>doorway</em> that fits.</h2>
          </div></FadeIn>
          <div className="bm-pathrows">
            <FadeIn as="a" className="bm-pathrow"
              onClick={(e) => { e.preventDefault(); navigate("sessions"); }}
              href="#/sessions"
            >
              <span className="num">N° 01</span>
              <div className="label">
                <span className="eyebrow">Cambridge locals</span>
                <h3>One-to-one FRC sessions <em>&amp;</em> assisted stretching</h3>
              </div>
              <p>
                Assessment-first, protocol-led work for desk workers, athletes, and anyone managing chronic restriction. Cambridge-based, by enquiry.
              </p>
              <span className="arrow">↗</span>
            </FadeIn>
            <FadeIn as="a" className="bm-pathrow" delay={80}
              onClick={(e) => { e.preventDefault(); navigate("masterclass"); }}
              href="#/masterclass"
            >
              <span className="num">N° 02</span>
              <div className="label">
                <span className="eyebrow">Therapists &amp; PTs</span>
                <h3>One-day stretch therapy <em>masterclass</em> for practitioners</h3>
              </div>
              <p>
                Hands-on, full-body flow with theory, analytics, and a video library of every technique. £350, one-to-one at Adam's Cambridge HQ.
              </p>
              <span className="arrow">↗</span>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* SOCIAL PROOF — section removed pending real client quotes with consent.
          Single CEO testimonial archived in dm_playbook context; reinstate when
          we have 3+ verifiable quotes from actual clients. */}

      {/* ABOUT TEASER */}
      <section className="bm-section" data-screen-label="Home · About teaser">
        <div className="bm-container bm-grid-2" style={{ alignItems: "center", gap: 64 }}>
          <FadeIn>
            <EditorialPhoto
              aspect="4 / 5"
              frame="07"
              tags={["PORTRAIT · ADAM", "STUDIO LIGHT"]}
              coords="ST' GILES HALL · CAMBRIDGE"
              label="Editorial portrait · Adam, candid"
            />
          </FadeIn>
          <FadeIn delay={120} className="bm-row" style={{ gap: 24 }}>
            <span className="bm-eyebrow">About Adam</span>
            <h2 className="bm-h2">A practitioner who teaches from the <em>body outward</em>.</h2>
            <p className="bm-body">
              BJJ black belt under Tom Barlow and Chelsea Lee. The protocol was developed across years of his own left-hip rehab, BJJ training, and client work — not learned from a seminar. Ex-professional photographer with a further-education teaching qualification: a teacher first, who specialises in stretch therapy.
            </p>
            <div className="bm-placeholder-audio">
              <span className="bm-eyebrow">Listen · Adam (placeholder)</span>
              <audio controls preload="metadata">
                <source src="/assets/placeholder_brand.mp3" type="audio/mpeg" />
                Your browser does not support audio.
              </audio>
              <p className="bm-caption">v2 brand-intro VSL in Adam's cloned voice — short version locating the work and naming the two audiences.</p>
            </div>
            <a
              className="bm-inline-link"
              onClick={(e) => { e.preventDefault(); navigate("about"); }}
              href="#/about"
              style={{ alignSelf: "flex-start" }}
            >Read Adam's story →</a>
          </FadeIn>
        </div>
      </section>
    </div>
  );
}

// ─── SESSIONS ────────────────────────────────────────────────────────
function SessionsPage({ navigate }) {
  const required = ["name", "email", "location", "focus", "phone", "media"];
  const f = useFormState({
    name: "", email: "", location: "", injuries: "", joints: "", medical: "",
    focus: "", media: "", phone: "", notes: ""
  });
  const submit = async (e) => {
    e.preventDefault();
    const errs = validate(f.values, required);
    f.setErrors(errs);
    if (Object.keys(errs).length > 0) {
      const first = document.querySelector(".bm-input.has-error, .bm-textarea.has-error");
      first && first.scrollIntoView({ behavior: "smooth", block: "center" });
      return;
    }
    f.setSubmitting(true);
    f.setSubmitError(null);
    try {
      await postEnquiry("sessions", f.values);
      f.setSubmitted(true);
    } catch (err) {
      f.setSubmitError("Couldn't send your enquiry. Try again, or email Adam directly at bomostretch@gmail.com.");
      f.setSubmitting(false);
    }
  };
  const cls = (k) => `bm-input ${f.errors[k] ? "has-error" : ""}`.trim();
  const tcls = (k) => `bm-textarea ${f.errors[k] ? "has-error" : ""}`.trim();

  return (
    <div className="bm-page">
      <section className="bm-hero" data-screen-label="Sessions · Hero" style={{ paddingBottom: 64 }}>
        <FadeIn className="bm-hero-text">
          <span className="bm-eyebrow">One-to-one · By enquiry</span>
          <h1 className="bm-h1">FRC sessions <em>&amp;</em> assisted stretching, Cambridge.</h1>
          <p className="bm-body" style={{ maxWidth: 560 }}>
            Assessment-first, protocol-led, one-to-one. Every session opens with where your body actually is — and ends with a plan that gets it where you need it to be.
          </p>
          <div className="bm-placeholder-audio">
            <span className="bm-eyebrow">Listen · Adam (placeholder)</span>
            <audio controls preload="metadata">
              <source src="/assets/placeholder_sessions.mp3" type="audio/mpeg" />
              Your browser does not support audio.
            </audio>
            <p className="bm-caption">v2 sessions VSL script in Adam's cloned voice. Adam records the real take in his iPhone session.</p>
          </div>
        </FadeIn>
        <FadeIn delay={120} className="bm-hero-photo">
          <EditorialPhoto
            aspect="4 / 5"
            frame="03"
            tags={["HANDS-ON STRETCH", "GYM SETTING"]}
            coords="ST' GILES HALL · CAMBRIDGE"
            label="Hands-on stretch · gym setting"
          />
        </FadeIn>
      </section>

      {/* PULL-QUOTE — large editorial italic, sets the philosophy
          before the dark FRC process band */}
      <section className="bm-section bm-section-tight" data-screen-label="Sessions · Pull-quote">
        <div className="bm-container" style={{ textAlign: "center", maxWidth: 920 }}>
          <FadeIn>
            <p style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontStyle: "italic",
              fontSize: "clamp(28px, 4.4vw, 48px)",
              fontWeight: 400,
              lineHeight: 1.18,
              letterSpacing: "-0.01em",
              color: "var(--accent)",
              margin: 0,
            }}>
              "Range of motion is earned under tension."
            </p>
          </FadeIn>
        </div>
      </section>

      {/* FRC DEFINITION — explains what FRC is BEFORE the process scroller.
          (This block was previously below the Protocol section; moved up so
          first-time readers understand FRC before the technical process.) */}
      <section className="bm-section bm-band-muted" data-screen-label="Sessions · FRC definition">
        <div className="bm-container">
          <FadeIn>
            <div className="bm-sec-head">
              <span className="bm-eyebrow">Functional Range Conditioning</span>
              <h2 className="bm-h2">FRC, <em>plainly</em>.</h2>
            </div>
          </FadeIn>
          <div className="bm-grid-2" style={{ alignItems: "start", gap: 64 }}>
            <FadeIn className="bm-row" style={{ gap: 24 }}>
              <p className="bm-body">
                Stretching creates passive range. Functional Range Conditioning is the active half — end-range strength work that turns that range into something your body can actually use under load.
              </p>
              <p className="bm-body" style={{ color: "var(--fg-muted)" }}>
                By engaging the muscles where they would normally switch off, you develop usable flexibility, improve joint health, and expand the range you can access without help. The four lines on the right are what we build, in that order.
              </p>
            </FadeIn>
            <FadeIn delay={100}>
              <div className="bm-pillars">
                <div>Own your <em>end ranges</em>.</div>
                <div>Build resilient strength.</div>
                <div>Move <em>pain-free</em>.</div>
                <div>Perform with control.</div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* FRC PROCESS — circular scroller (kept from current site).
          Now contextualised by the FRC definition above. */}
      <FrcProcess steps={[
        {
          title: "Assessment",
          tag: "FR. 01 · CAR",
          duration: "20 MIN",
          body: "We begin with a detailed medical history discussion, followed by an assessment of both your passive and active range of motion. This establishes a clear baseline of your body's current capacity. From there, we build a personalised plan of action based on your goals and the prerequisites your body needs.",
        },
        {
          title: "Creating joint workspace",
          tag: "FR. 02 · CARs",
          duration: "15 MIN",
          body: "Next, we focus on restoring usable space at the joint level. Through Controlled Articular Rotations (CARs), we rebuild and maintain healthy working space within the joint capsule.",
        },
        {
          title: "Tissue adaptation & neural reconnection",
          tag: "FR. 03 · PAILs/RAILs",
          duration: "15 MIN",
          body: "We then introduce controlled isometric work to adapt the tissue and re-establish active neurological input. This phase is slow, intentional, and precise, ensuring the body feels safe while regaining control.",
        },
        {
          title: "End-range strength & control",
          tag: "FR. 04 · LOADED",
          duration: "10 MIN",
          body: "With newly available range, we apply specific loading patterns — building tension under length, strengthening the joint capsule, and teaching the nervous system that the new range is yours to keep.",
        },
        {
          title: "Functional integration",
          tag: "FR. 05 · INTEGRATE",
          duration: "10 MIN",
          body: "Finally, we translate the work into movements you actually use — sport, daily life, training. The new range gets practiced in context so it survives Tuesday morning.",
        },
        {
          title: "Reassess weekly",
          tag: "FR. 06 · REVIEW",
          duration: "ONGOING",
          body: "Every session opens with a re-measurement. Packages run five consecutive weeks because that is the rhythm at which the nervous system actually adapts — not because it sounds nice on a price sheet.",
        },
      ]} />

      {/* PROTOCOL */}
      <section className="bm-section" data-screen-label="Sessions · Protocol">
        <div className="bm-container bm-grid-2" style={{ alignItems: "start", gap: 64 }}>
          <FadeIn className="bm-row" style={{ gap: 32 }}>
            <div className="bm-sec-head" style={{ marginBottom: 0 }}>
              <span className="bm-eyebrow">The work</span>
              <h2 className="bm-h2">The protocol, <em>in order</em>. Every time.</h2>
            </div>
            <ol className="bm-numlist">
              <li className="bm-numitem">
                <span className="num">01</span>
                <div>
                  <span className="num-label">CARs first.</span>
                  Controlled articular rotations for every joint we're working — the assessment that maps usable range.
                </div>
              </li>
              <li className="bm-numitem">
                <span className="num">02</span>
                <div>
                  <span className="num-label">PAILs and RAILs.</span>
                  Isometric end-range work that tells your nervous system the new position is safe and load-bearing.
                </div>
              </li>
              <li className="bm-numitem">
                <span className="num">03</span>
                <div>
                  <span className="num-label">Functional exercises.</span>
                  Loaded patterns that translate the new range into movement you actually use.
                </div>
              </li>
              <li className="bm-numitem">
                <span className="num">04</span>
                <div>
                  <span className="num-label">Progress, weekly.</span>
                  Reassess, adjust load, and book the next slot — packages run five consecutive weeks.
                </div>
              </li>
            </ol>
            <p className="bm-body" style={{ color: "var(--fg-muted)" }}>
              The outcome is active control, not temporary looseness. You leave each session with measurable range you can hold under load — not a feeling that fades by Tuesday.
            </p>
          </FadeIn>
          <FadeIn delay={120}>
            <EditorialPhoto
              aspect="4 / 5"
              frame="11"
              tags={["CAR · SHOULDER", "GUIDED"]}
              coords="ST' GILES HALL · CAMBRIDGE"
              label="Coach guiding CAR · shoulder"
            />
          </FadeIn>
        </div>
      </section>

      {/* ASSISTED STRETCHING */}
      <section style={{ position: "relative", padding: 0, color: "var(--bg-primary)", overflow: "hidden" }} data-screen-label="Sessions · Assisted stretching">
        <PhotoSlot label="Assisted stretch · supported pose" style={{ position: "absolute", inset: 0, borderRadius: 0 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(28,22,18,0.45), rgba(28,22,18,0.78))" }} />
        <div style={{ position: "relative", padding: "96px 64px", maxWidth: 1280, margin: "0 auto" }} className="bm-section-inner">
          <FadeIn className="bm-row" style={{ gap: 28, maxWidth: 720 }}>
            <span className="bm-eyebrow" style={{ color: "var(--sand)" }}>Assisted stretching</span>
            <h2 className="bm-h2">Lie back. Let your body be guided into positions you cannot reach on your own.</h2>
            <p className="bm-body" style={{ color: "rgba(250,247,242,0.86)" }}>
              A deeply restorative practice. Being fully passive lets the muscles release more completely, unlocking greater flexibility and lowering resting tone. It helps reset the nervous system, supporting better movement, faster recovery, and reduced tension.
            </p>
            <div className="bm-bullets" style={{ color: "var(--sand)", fontSize: 18 }}>
              <span>Release tension</span>
              <span>Expand range</span>
              <span>Calm the nervous system</span>
              <span>Move better</span>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* LOCATION */}
      <section className="bm-section bm-section-tight" data-screen-label="Sessions · Location">
        <div className="bm-container bm-grid-2" style={{ alignItems: "center" }}>
          <FadeIn>
            <div className="bm-loc-card">
              <span className="bm-eyebrow">Where to find Adam</span>
              <span className="addr">St' Giles Hall, Pound Hill</span>
              <span className="addr">Cambridge CB3 0AE</span>
              <span style={{ color: "var(--fg-muted)", fontSize: 15, marginTop: 8 }}>Monday to Saturday, 8am–3pm</span>
            </div>
          </FadeIn>
          <FadeIn delay={100}><PhotoSlot label="Approach to St' Giles Hall" style={{ aspectRatio: "16 / 9" }} /></FadeIn>
        </div>
      </section>

      {/* WHO THIS IS FOR — hairline grid */}
      <section className="bm-section bm-section-tight" data-screen-label="Sessions · Who for">
        <div className="bm-container">
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Who this is for</span>
            <h2 className="bm-h2">Three kinds of body this work is <em>built&nbsp;for</em>.</h2>
          </div></FadeIn>
          <div className="bm-aud-grid">
            <FadeIn className="bm-aud-row">
              <span className="num">N° 01</span>
              <AudienceIcon kind="desk" />
              <h3 className="bm-h3" style={{ fontSize: 22 }}>Desk workers &amp; commuters</h3>
              <p className="bm-body" style={{ fontSize: 15, color: "var(--fg-muted)" }}>You can't get into a deep squat any more. Your neck "catches" when you check the blind spot. We rebuild the range you've lost, then load it so it stays.</p>
            </FadeIn>
            <FadeIn className="bm-aud-row" delay={100}>
              <span className="num">N° 02</span>
              <AudienceIcon kind="athlete" />
              <h3 className="bm-h3" style={{ fontSize: 22 }}>Athletes — BJJ, runners, triathletes</h3>
              <p className="bm-body" style={{ fontSize: 15, color: "var(--fg-muted)" }}>The shoulder that goes the same week you push to roll harder. The hip that locks at 90% effort. End-range strength is what's missing — CARs and PAILs build it.</p>
            </FadeIn>
            <FadeIn className="bm-aud-row" delay={200}>
              <span className="num">N° 03</span>
              <AudienceIcon kind="rehab" />
              <h3 className="bm-h3" style={{ fontSize: 22 }}>Post-injury &amp; chronic restriction</h3>
              <p className="bm-body" style={{ fontSize: 15, color: "var(--fg-muted)" }}>Pain that flickers back two months after you "recovered". Referred or self-referred — we work alongside your physio's plan, only where it's appropriate.</p>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* PRICING — hairline rows */}
      <section className="bm-section bm-section-tight" data-screen-label="Sessions · Pricing">
        <div className="bm-container" style={{ maxWidth: 880 }}>
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Investment</span>
            <h2 className="bm-h2">Sessions <em>&amp;</em> packages.</h2>
          </div></FadeIn>
          <FadeIn delay={100}>
            <div className="bm-pricing-rows">
              <div className="bm-pricing-row-v15"><span className="num">N° 01</span><span className="label">1-hour mobility assessment · FRC baseline &amp; plan</span><span className="price">£75</span></div>
              <div className="bm-pricing-row-v15"><span className="num">N° 02</span><span className="label">1-hour assisted stretch session · full body</span><span className="price">£75</span></div>
              <div className="bm-pricing-row-v15"><span className="num">N° 03</span><span className="label">40-minute assisted stretch session</span><span className="price">£50</span></div>
              <div className="bm-pricing-row-v15"><span className="num">N° 04</span><span className="label">5-session package · 5 weeks booked upfront</span><span className="price">£225</span></div>
              <div className="bm-pricing-row-v15"><span className="num">N° 05</span><span className="label">10-session package · 10 weeks booked upfront</span><span className="price">£450</span></div>
            </div>
            <p className="bm-caption" style={{ marginTop: 20, fontStyle: "italic" }}>
              Packages must be booked as consecutive weeks. That rhythm is how the nervous system actually adapts — it isn't a marketing line.
            </p>
          </FadeIn>
        </div>
      </section>

      {/* FAQ — editorial accordion */}
      <section className="bm-section bm-section-tight bm-band-muted" data-screen-label="Sessions · FAQ">
        <div className="bm-container" style={{ maxWidth: 880 }}>
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Frequently asked</span>
            <h2 className="bm-h2">Before you enquire.</h2>
          </div></FadeIn>
          <FadeIn delay={80}>
            <ul className="bm-faq-list">
              {[
                {
                  q: "What's the difference between FRC and assisted stretching?",
                  a: "Stretching is the entry point — it creates passive range. FRC is the active half: we then reinforce that range with strength and end-range control so it becomes functional, controlled, and resilient. Most clients use both."
                },
                {
                  q: "How often should I have a session?",
                  a: "That depends on your goals and current condition. For real change, weekly is the rhythm — which is why packages run as five or ten consecutive weeks. The aim is to guide you toward greater freedom of movement and restored control within your body."
                },
                {
                  q: "How long until pain or stiffness goes away?",
                  a: "There's no fixed timeline — pain and stiffness come from many different factors. What we focus on is rebuilding control and strength through isometrics and end-range protocols, so your body functions better. That improved function is what reduces pain and stiffness."
                },
                {
                  q: "What should I expect from my first session?",
                  a: "We assess your active and passive range of motion, review your medical history, and build a clear plan of action. Treatment and training begin from day one — there's no fluff intake call."
                },
                {
                  q: "Do you require a deposit?",
                  a: "Yes — a 50% deposit secures every booking, and appointments are not confirmed until it's received. Deposits are non-refundable but can be credited towards a future session if you cancel more than 48 hours in advance. Within 48 hours, the deposit is retained."
                },
                {
                  q: "Cancellation and reschedule policy?",
                  a: "You can reschedule once with 48 hours' notice. Further changes count as cancellations. Within 48 hours, the deposit is retained. No-shows result in the full session fee. Late arrivals may shorten the session — the full fee still applies."
                },
                {
                  q: "What makes you different?",
                  a: "A thoughtful, human-centered approach combined with clear communication and reliable results. The work is action-based and requires your active involvement. Adam is a teacher first — you'll leave understanding why each thing is being done."
                },
                {
                  q: "How do I get started?",
                  a: "Send the enquiry below. Adam reviews every one personally and replies within 48 hours, Monday–Saturday. He'll propose specific times and a deposit link once he's read your details."
                },
              ].map((item, i) => (
                <li className="bm-faq-item" key={i}>
                  <details>
                    <summary>
                      <span className="bm-faq-num">{`Q. ${String(i + 1).padStart(2, "0")}`}</span>
                      <span className="bm-faq-q">{item.q}</span>
                      <span className="bm-faq-mark" aria-hidden="true">+</span>
                    </summary>
                    <p className="bm-faq-a">{item.a}</p>
                  </details>
                </li>
              ))}
            </ul>
          </FadeIn>
        </div>
      </section>

      {/* ENQUIRY FORM */}
      <section className="bm-section" data-screen-label="Sessions · Enquiry form">
        <div className="bm-container" style={{ maxWidth: 720 }}>
          <FadeIn className="bm-form-head">
            <span className="bm-eyebrow">Enquire about a session</span>
            <h2 className="bm-h2">Tell me about your situation.</h2>
            <p className="bm-body" style={{ color: "var(--fg-muted)" }}>
              The questions below are how Adam screens before agreeing a slot. There is no calendar — Adam reviews and replies personally.
            </p>
          </FadeIn>

          {f.submitted ? (
            <FadeIn className="bm-callout" style={{ background: "var(--accent)", color: "var(--bg-primary)", padding: "32px" }}>
              <strong style={{ fontFamily: "Fraunces, serif", fontSize: 28, display: "block", marginBottom: 8 }}>Enquiry sent.</strong>
              Adam replies personally within 48 hours, Monday to Saturday. He'll propose specific times and a deposit link once he has reviewed your details.
            </FadeIn>
          ) : (
            <FadeIn delay={80}><form onSubmit={submit} noValidate>
              <Field label="Your name" error={f.errors.name}>
                <input className={cls("name")} value={f.values.name} onChange={(e) => f.set("name", e.target.value)} />
              </Field>
              <Field label="Email" error={f.errors.email}>
                <input type="email" className={cls("email")} value={f.values.email} onChange={(e) => f.set("email", e.target.value)} />
              </Field>
              <Field label="Are you Cambridge-based or travelling in?" error={f.errors.location}>
                <RadioGroup name="loc" value={f.values.location} onChange={(v) => f.set("location", v)} options={["Cambridge-based", "Travelling"]} />
              </Field>
              <Field label="Any chronic injuries you are currently managing?">
                <textarea className={tcls("injuries")} value={f.values.injuries} onChange={(e) => f.set("injuries", e.target.value)} placeholder="Optional, but helpful." />
              </Field>
              <Field label="Joint issues — hypermobility, arthritis, anything that might be aggravated?">
                <textarea className={tcls("joints")} value={f.values.joints} onChange={(e) => f.set("joints", e.target.value)} />
              </Field>
              <Field label="Medical conditions relevant to your session?">
                <textarea className={tcls("medical")} value={f.values.medical} onChange={(e) => f.set("medical", e.target.value)} />
              </Field>
              <Field label="Which area would you like to focus on?" error={f.errors.focus}>
                <input className={cls("focus")} value={f.values.focus} onChange={(e) => f.set("focus", e.target.value)} placeholder="E.g. hips, shoulders, full-body assessment" />
              </Field>
              <Field label="Comfortable with photos or video being taken for marketing?" error={f.errors.media}>
                <RadioGroup name="media" value={f.values.media} onChange={(v) => f.set("media", v)} options={["Yes", "No", "Ask me first"]} />
              </Field>
              <Field label="Telephone number" error={f.errors.phone}>
                <input type="tel" className={cls("phone")} value={f.values.phone} onChange={(e) => f.set("phone", e.target.value)} />
              </Field>
              <Field label="Anything else Adam should know before he replies?">
                <textarea className={tcls("notes")} value={f.values.notes} onChange={(e) => f.set("notes", e.target.value)} />
              </Field>
              <button type="submit" disabled={f.submitting} className="bm-btn bm-btn-primary bm-btn-block" style={{ height: 56, fontSize: 16, marginTop: 8 }}>
                {f.submitting ? "Sending…" : "Send my enquiry"}
              </button>
              {f.submitError && <p className="bm-form-error" role="alert">{f.submitError}</p>}
              <p className="bm-caption" style={{ marginTop: 16 }}>
                Adam replies personally within 48 hours, Monday to Saturday, 8am–3pm. He will propose specific times and a deposit link once he has reviewed your details.
              </p>
            </form></FadeIn>
          )}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, SessionsPage });