/* global React, PhotoSlot, FadeIn, SwapFriendlyMedia, Field, RadioGroup, useFormState, validate, postEnquiry, AudienceIcon, PullQuote */

// ─── MASTERCLASS ─────────────────────────────────────────────────────
function MasterclassPage({ navigate }) {
  const required = ["name", "email", "location", "qualifications", "goals", "weeks", "phone"];
  const f = useFormState({
    name: "", email: "", location: "", qualifications: "", goals: "",
    weeks: "", phone: ""
  });
  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("masterclass", f.values);
      f.setSubmitted(true);
    } catch (err) {
      f.setSubmitError("Couldn't send your application. 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">
      {/* HERO */}
      <section className="bm-hero" data-screen-label="Masterclass · Hero" style={{ paddingBottom: 80 }}>
        <FadeIn className="bm-hero-text">
          <span className="bm-eyebrow">For therapists, massage practitioners &amp; PTs</span>
          <h1 className="bm-h1">Stretch therapy <em>masterclass</em>, one-to-one in Cambridge.</h1>
          <p className="bm-body" style={{ maxWidth: 560 }}>
            One day, just you and Adam. A full-body assisted-stretch flow you can run from Monday, the contract-relax science that makes it safe, and your own filmed library of every technique we cover.
          </p>
          <div className="bm-hero-cta-row">
            <a className="bm-btn bm-btn-primary" href="#application" onClick={(e) => {
              e.preventDefault();
              document.getElementById("application")?.scrollIntoView({ behavior: "smooth" });
            }}>Send my enquiry</a>
          </div>
          <p className="bm-caption" style={{ color: "var(--fg-muted)" }}>
            <strong style={{ color: "var(--fg-primary)", fontWeight: 600 }}>£350.</strong> Reduced to £300 if you book a date within 7 days of enquiring.
          </p>
        </FadeIn>
        <FadeIn delay={120}>
          <SwapFriendlyMedia
            audioSrc="/assets/placeholder_masterclass.mp3"
            caption="Adam's voice clone reading the v2 masterclass script. Replaced when Adam records his iPhone-shot take."
          />
        </FadeIn>
      </section>

      {/* CURRICULUM */}
      <section className="bm-section bm-band-muted" data-screen-label="Masterclass · Curriculum">
        <div className="bm-container">
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Curriculum</span>
            <h2 className="bm-h2">The full curriculum. No guessing.</h2>
          </div></FadeIn>
          <div className="bm-grid-2" style={{ gap: 32 }}>
            <FadeIn><div className="bm-card" style={{ background: "var(--bg-primary)" }}>
              <span className="bm-eyebrow" style={{ color: "var(--accent-clay)" }}>Practical · Full-body flow</span>
              <h3 className="bm-h3" style={{ fontSize: 22, marginTop: 12, marginBottom: 20 }}>Hands-on technique, region by region</h3>
              <ul style={{ paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontSize: 17, color: "var(--fg-primary)" }}>
                <li>— Short and long adductors</li>
                <li>— Glute max and minimus</li>
                <li>— Hamstrings (short and long)</li>
                <li>— TFL</li>
                <li>— Quads and hip flexors</li>
                <li>— Upper traps, scapular, shoulder, biceps, neck and head</li>
              </ul>
            </div></FadeIn>
            <FadeIn delay={100}><div className="bm-card" style={{ background: "var(--bg-primary)" }}>
              <span className="bm-eyebrow" style={{ color: "var(--accent-clay)" }}>Theory · Safety · Business</span>
              <h3 className="bm-h3" style={{ fontSize: 22, marginTop: 12, marginBottom: 20 }}>The frame around the technique</h3>
              <ul style={{ paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, fontSize: 17, color: "var(--fg-primary)" }}>
                <li>— The science behind assisted stretching and PNF (contract-relax)</li>
                <li>— Health and safety, body mechanics, client management</li>
                <li>— Bespoke stretch analytics to tailor sessions to each client</li>
                <li>— The business model Adam uses to market and grow a client base</li>
              </ul>
            </div></FadeIn>
          </div>
        </div>
      </section>

      {/* FORMAT */}
      <section className="bm-section bm-section-tight" data-screen-label="Masterclass · Format">
        <div className="bm-container">
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Format</span>
            <h2 className="bm-h2">How the day actually runs.</h2>
          </div></FadeIn>
          <div className="bm-grid-3">
            <FadeIn><div className="bm-aud-card">
              <AudienceIcon kind="1to1" />
              <h3 className="bm-h3" style={{ fontSize: 22 }}>One-to-one</h3>
              <p className="bm-body">Just you and Adam. No group dynamics, no downtime, every minute on you.</p>
            </div></FadeIn>
            <FadeIn delay={100}><div className="bm-aud-card">
              <AudienceIcon kind="loc" />
              <h3 className="bm-h3" style={{ fontSize: 22 }}>Location</h3>
              <p className="bm-body">Held at Adam's Cambridge HQ — St' Giles Hall, Pound Hill. The room, the table and the tools are already set up for you. Bespoke off-site arrangements considered for small groups, by enquiry only.</p>
            </div></FadeIn>
            <FadeIn delay={200}><div className="bm-aud-card">
              <AudienceIcon kind="vid" />
              <h3 className="bm-h3" style={{ fontSize: 22 }}>Video library</h3>
              <p className="bm-body">Every stretch we cover is filmed on the day, so you walk away with a permanent reference library.</p>
            </div></FadeIn>
          </div>
        </div>
      </section>

      {/* CREDIBILITY STRIP */}
      <section className="bm-section" data-screen-label="Masterclass · Credibility">
        <div className="bm-container bm-grid-2" style={{ alignItems: "center", gap: 64 }}>
          <FadeIn><PhotoSlot label="Adam · editorial portrait" zoomable style={{ aspectRatio: "4 / 5" }} /></FadeIn>
          <FadeIn delay={100} className="bm-row" style={{ gap: 24 }}>
            <span className="bm-eyebrow">Who is teaching you</span>
            <h2 className="bm-h2" style={{ fontSize: 36 }}>A teacher first, who specialises in stretch therapy.</h2>
            <p className="bm-body">
              BJJ black belt certified under Tom Barlow and Chelsea Lee (AOJ lineage, San Diego). FRC certified. PNF certified. Further-education teaching qualification — years teaching photography at college and university level. Teaching is what Adam does. Stretch therapy is what he teaches.
            </p>
            <blockquote style={{ margin: 0, paddingLeft: 20, borderLeft: "2px solid var(--accent)", fontFamily: "Fraunces, serif", fontSize: 22, fontStyle: "italic", lineHeight: 1.4 }}>
              "I've yet to see a massage course that comes even close to what we teach on assisted stretching."
            </blockquote>
          </FadeIn>
        </div>
      </section>

      {/* CERTIFICATE NOTE */}
      <section className="bm-section bm-section-tight" data-screen-label="Masterclass · Certificate note">
        <div className="bm-container" style={{ maxWidth: 880 }}>
          <FadeIn><div className="bm-callout">
            <strong style={{ color: "var(--fg-primary)" }}>A note on certification.</strong>{" "}
            The masterclass issues a certificate of participation. Practitioners requiring a certification for insurance purposes should verify their insurer's requirements. Most of Adam's students are working therapists who find the depth of practical training exceeds what certifying courses deliver.
          </div></FadeIn>
        </div>
      </section>

      {/* TESTIMONIALS — placeholder until Adam shares real graduate quotes */}
      <section className="bm-section bm-section-tight" data-screen-label="Masterclass · Testimonials">
        <div className="bm-container">
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Graduates</span>
            <h2 className="bm-h2">From practitioners who came through the day.</h2>
          </div></FadeIn>
          <FadeIn delay={80}>
            <div className="bm-callout" style={{ textAlign: "center", padding: 32, color: "var(--fg-muted)" }}>
              <span className="bm-eyebrow">Graduate testimonials in progress</span>
              <p className="bm-body" style={{ marginTop: 12, fontStyle: "italic" }}>
                Real graduate quotes coming — Adam is collecting consent from past masterclass students. Replace this with three quotes once received.
              </p>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* APPLICATION */}
      <section id="application" className="bm-section bm-band-muted" data-screen-label="Masterclass · Application">
        <div className="bm-container" style={{ maxWidth: 720 }}>
          <FadeIn className="bm-form-head">
            <span className="bm-eyebrow">Enquire</span>
            <h2 className="bm-h2">Send your enquiry.</h2>
            <p className="bm-body" style={{ color: "var(--fg-muted)" }}>
              Adam reviews every application personally. If your background or goals don't fit the day's structure he'll tell you and refer you elsewhere — no payment is requested until a date is agreed.
            </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 }}>Application received.</strong>
              Adam reviews every application personally. He'll propose specific dates and confirm logistics within a few working days.
            </FadeIn>
          ) : (
            <FadeIn delay={80}><form onSubmit={submit} noValidate style={{ background: "var(--bg-primary)", padding: 32, borderRadius: "var(--radius-card)" }}>
              <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="Where are you based?" error={f.errors.location}><input className={cls("location")} value={f.values.location} onChange={(e) => f.set("location", e.target.value)} placeholder="Town, county" /></Field>
              <Field label="Current qualifications or practice" error={f.errors.qualifications}><textarea className={tcls("qualifications")} value={f.values.qualifications} onChange={(e) => f.set("qualifications", e.target.value)} /></Field>
              <Field label="What do you want to be able to do after the masterclass?" error={f.errors.goals}><textarea className={tcls("goals")} value={f.values.goals} onChange={(e) => f.set("goals", e.target.value)} /></Field>
              <Field label="Which weeks work for you in the next 8 weeks?" error={f.errors.weeks}><textarea className={tcls("weeks")} value={f.values.weeks} onChange={(e) => f.set("weeks", e.target.value)} /></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>
              <button type="submit" disabled={f.submitting} className="bm-btn bm-btn-primary bm-btn-block" style={{ height: 56, 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 reviews every application personally. He will propose specific dates and confirm logistics once he has reviewed yours. No payment is requested until a date is agreed.
              </p>
            </form></FadeIn>
          )}
        </div>
      </section>
    </div>
  );
}

// ─── ABOUT ───────────────────────────────────────────────────────────
function AboutPage({ navigate }) {
  return (
    <div className="bm-page">
      <section className="bm-about-hero" data-screen-label="About · Hero">
        <PhotoSlot label="Editorial portrait · Adam, full bleed" />
        <div className="bm-about-hero-overlay" />
        <div className="bm-about-hero-text">
          <span className="bm-eyebrow">About Adam</span>
          <h1 className="bm-h1">A practitioner who teaches from the body outward.</h1>
          <p className="bm-body" style={{ color: "rgba(250,247,242,0.86)", maxWidth: 600 }}>
            Cambridge-based. FRC and PNF coach. BJJ black belt. The protocol, lived first.
          </p>
        </div>
      </section>

      {/* ORIGIN */}
      <section className="bm-section" data-screen-label="About · Origin">
        <div className="bm-container-narrow">
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">Origin story</span>
            <h2 className="bm-h2">How BoMovement started.</h2>
          </div></FadeIn>
          <FadeIn delay={80}><div className="bm-row" style={{ gap: 24, fontSize: 19 }}>
            <p className="bm-body">
              A left-hip injury drove me crazy for years. Nobody could fix it — physios, chiropractors, the lot. So I went into my own range of motion, found the weak spots, and started building strength back into them.
            </p>
            <p className="bm-body">
              Guys at the gym started asking what I was doing. From there I went deep: Kit Laughlin's stretch system, PNF certification, then FRC. Six years of protocol development across BJJ, photography clients with bad shoulders, and my own body.
            </p>
            <p className="bm-body">BoMovement is what came out of all of it.</p>
          </div></FadeIn>
          <FadeIn delay={160} style={{ marginTop: 64 }}><PullQuote>We bring control back to the human.</PullQuote></FadeIn>
        </div>
      </section>

      {/* TEACHING */}
      <section className="bm-section bm-band-muted" data-screen-label="About · Teaching">
        <div className="bm-container bm-grid-2" style={{ alignItems: "center", gap: 64 }}>
          <FadeIn><PhotoSlot label="Adam · teaching, candid" zoomable style={{ aspectRatio: "4 / 5" }} /></FadeIn>
          <FadeIn delay={100} className="bm-row" style={{ gap: 24 }}>
            <span className="bm-eyebrow">Teaching</span>
            <h2 className="bm-h2">Teaching is not a side note.</h2>
            <p className="bm-body">
              I have a further-education teaching qualification, and I taught photography at college and university level for years — mentoring photographers through the full business stack: portfolio, pricing, client management, repeat work.
            </p>
            <p className="bm-body">
              I am a teacher who specialises in stretch therapy. That is rare in this industry, and it shows up in how the masterclass is structured: you don't just learn the technique, you learn how to teach it back.
            </p>
          </FadeIn>
        </div>
      </section>

      {/* BJJ */}
      <section className="bm-section" data-screen-label="About · BJJ">
        <div className="bm-container bm-grid-2" style={{ alignItems: "center", gap: 64 }}>
          <FadeIn className="bm-row" style={{ gap: 24 }}>
            <span className="bm-eyebrow">Lineage</span>
            <h2 className="bm-h2">Six years of protocol, lived first.</h2>
            <p className="bm-body">
              BJJ black belt, certified under Tom Barlow and Chelsea Lee (AOJ lineage, San Diego). The protocol I teach was not learned in a seminar — it was developed across six years of self-experimentation, client work, and sport.
            </p>
            <p className="bm-body">
              That's the difference between knowing a system and living one.
            </p>
          </FadeIn>
          <FadeIn delay={100}><PhotoSlot label="BJJ mat · training context" zoomable style={{ aspectRatio: "4 / 5" }} /></FadeIn>
        </div>
      </section>

      {/* WORKING WITH */}
      <section className="bm-section bm-section-tight" data-screen-label="About · Working with Adam">
        <div className="bm-container-narrow">
          <FadeIn><div className="bm-sec-head">
            <span className="bm-eyebrow">In practice</span>
            <h2 className="bm-h2">What working with me actually looks like.</h2>
          </div></FadeIn>
          <FadeIn delay={80} className="bm-row" style={{ gap: 24 }}>
            <p className="bm-body">Assessment first, always. The first session is where we map what your joints can actually do, not where I run you through a default sequence.</p>
            <p className="bm-body">If you buy five sessions, that's five consecutive weeks booked. Consistency and accountability is how results happen — not ad-hoc drop-ins when you remember.</p>
            <p className="bm-body">I work Monday to Saturday, 8am to 3pm, out of St' Giles Hall on Pound Hill, Cambridge.</p>
          </FadeIn>
        </div>
      </section>

      {/* CTA CLOSE */}
      <section className="bm-section bm-band-muted" data-screen-label="About · CTA close">
        <div className="bm-container" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <FadeIn>
            <h2 className="bm-h2">Tell me about your situation.</h2>
            <p className="bm-body" style={{ marginTop: 16, color: "var(--fg-muted)" }}>
              Sessions for Cambridge locals. Masterclass for therapists and PTs.
            </p>
            <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <a className="bm-btn bm-btn-primary" onClick={(e) => { e.preventDefault(); navigate("contact"); }} href="#/contact">Enquire about sessions</a>
              <a className="bm-btn bm-btn-ghost" onClick={(e) => { e.preventDefault(); navigate("masterclass"); }} href="#/masterclass">Enquire about the masterclass</a>
            </div>
          </FadeIn>
        </div>
      </section>
    </div>
  );
}

// ─── CONTACT (catch-all enquiry — same as Sessions form, leaner) ──────
function ContactPage({ navigate }) {
  // Reuse sessions form by directing user to /sessions, but provide a quick form here
  const required = ["name", "email", "intent", "message"];
  const f = useFormState({ name: "", email: "", intent: "", message: "" });
  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("contact", f.values);
      f.setSubmitted(true);
    } catch (err) {
      f.setSubmitError("Couldn't send. Try again, or email Adam directly at bomostretch@gmail.com.");
      f.setSubmitting(false);
    }
  };
  const cls = (k) => `bm-input ${f.errors[k] ? "has-error" : ""}`.trim();

  return (
    <div className="bm-page">
      <section className="bm-section" data-screen-label="Contact · Enquiry">
        <div className="bm-container" style={{ maxWidth: 720 }}>
          <FadeIn className="bm-form-head">
            <span className="bm-eyebrow">Get in touch</span>
            <h1 className="bm-h1">Tell me about your situation.</h1>
            <p className="bm-body" style={{ color: "var(--fg-muted)" }}>
              For sessions, the full health-screen form lives on the{" "}
              <a className="bm-inline-link" href="#/sessions" onClick={(e) => { e.preventDefault(); navigate("sessions"); }}>Sessions page</a>.
              For the masterclass, the application is on the{" "}
              <a className="bm-inline-link" href="#/masterclass" onClick={(e) => { e.preventDefault(); navigate("masterclass"); }}>Masterclass page</a>.
              For anything else, this catch-all reaches Adam directly.
            </p>
          </FadeIn>
          {f.submitted ? (
            <FadeIn className="bm-callout" style={{ background: "var(--accent)", color: "var(--bg-primary)", padding: 32 }}>
              <strong style={{ fontFamily: "Fraunces, serif", fontSize: 28, display: "block", marginBottom: 8 }}>Message sent.</strong>
              Adam replies personally within 48 hours, Monday to Saturday.
            </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="What is this about?" error={f.errors.intent}>
                <RadioGroup name="intent" value={f.values.intent} onChange={(v) => f.set("intent", v)} options={["Sessions", "Masterclass", "Press / collaboration", "Other"]} />
              </Field>
              <Field label="Message" error={f.errors.message}>
                <textarea className={`bm-textarea ${f.errors.message ? "has-error" : ""}`} value={f.values.message} onChange={(e) => f.set("message", e.target.value)} style={{ minHeight: 160 }} />
              </Field>
              <button type="submit" disabled={f.submitting} className="bm-btn bm-btn-primary bm-btn-block" style={{ height: 56 }}>
                {f.submitting ? "Sending…" : "Send"}
              </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.</p>
            </form></FadeIn>
          )}
        </div>
      </section>
    </div>
  );
}

// ─── TERMS ───────────────────────────────────────────────────────────
function TermsPage() {
  const sections = [
    ["Booking and deposit", "A 50% deposit is required to secure all bookings. Appointments are not confirmed until the deposit is received. Deposits are non-refundable. A 50% deposit is required at the time of rebooking for future appointments."],
    ["Cancellation", "Cancellations made more than 48 hours before the appointment may have the deposit credited towards a future session. Cancellations made within 48 hours of the appointment will result in the deposit being retained, with no refund or credit."],
    ["Reschedule", "Clients may reschedule an appointment once, provided more than 48 hours' notice is given. Any further rescheduling will be treated as a cancellation."],
    ["No-show", "Failure to attend an appointment without notice will be classed as a no-show. The deposit will be retained and the full session fee will be payable. Future bookings may require full payment in advance."],
    ["Credits", "Any credited deposit must be used within 14 days of the original appointment date. Credits cannot be extended beyond this period."],
    ["Health screen and right of refusal", "All new clients are required to complete a brief health questionnaire before their first session. Adam reserves the right to decline a booking where the information disclosed indicates the work would not be appropriate (for example, severe hypermobility or conditions that require medical clearance). In such cases the deposit will be refunded in full."],
    ["Photography and video", "With your consent, sessions may be filmed or photographed for marketing purposes (Instagram, website, internal teaching material). Consent is captured on the enquiry form and can be withdrawn at any time by emailing bomostretch@gmail.com."],
    ["Privacy and data", "BoMovement holds the personal data submitted via enquiry forms (name, email, telephone, health information) solely for the purpose of providing the requested service and for Adam to contact you. Data is not shared with third parties. You may request deletion of your data at any time by emailing bomostretch@gmail.com. BoMovement complies with UK GDPR."],
    ["Liability", "FRC, PNF and assisted stretching are not medical treatment. Clients are responsible for disclosing any relevant medical conditions and for obtaining medical clearance where appropriate. BoMovement accepts no liability for injury arising from undisclosed conditions or failure to follow guidance given during a session."],
    ["Contact", "For questions about these terms, email bomostretch@gmail.com."]
  ];
  return (
    <div className="bm-page">
      <section className="bm-terms" data-screen-label="Terms · Body">
        <div className="bm-container-narrow">
          <FadeIn className="bm-form-head" style={{ marginBottom: 24 }}>
            <span className="bm-eyebrow">Terms &amp; policy</span>
            <h1 className="bm-h2" style={{ fontSize: 48 }}>Terms and policy.</h1>
            <p className="bm-caption">Last updated 2026-05-04.</p>
          </FadeIn>
          {sections.map(([h, b], i) => (
            <FadeIn key={h} delay={i * 30}><section>
              <h2 className="bm-h3">{`${String(i + 1).padStart(2, "0")} · ${h}`}</h2>
              <p className="bm-body" style={{ color: "var(--fg-muted)" }}>{b}</p>
            </section></FadeIn>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MasterclassPage, AboutPage, ContactPage, TermsPage });