// Soulforce Arts — Perform Without Pain (8-week program) page sections
const { useEffect, useRef, useState } = React;

function useReveal(opts = {}) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    if (typeof IntersectionObserver === 'undefined') { el.classList.add('in'); return; }
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } }), { threshold: opts.threshold ?? 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el); return () => io.disconnect();
  }, []);
  return ref;
}

function EnsoBG({ className = '', speed = 0.12, rotate = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return; let raf = 0;
    const tick = () => { const rc = el.getBoundingClientRect(); const dy = rc.top + rc.height / 2 - window.innerHeight / 2; el.style.transform = `translateY(${-dy * speed}px) rotate(${rotate}deg)`; raf = 0; };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    tick(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [speed, rotate]);
  return <div ref={ref} className={`enso-bg ${className}`} />;
}

function EnsoHero({ className = '', speed = 0.05, rotate = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return; let raf = 0;
    const tick = () => { const dy = el.getBoundingClientRect().top; el.style.transform = `translateY(${-dy * speed}px) rotate(${rotate}deg)`; raf = 0; };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    tick(); window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [speed, rotate]);
  return <div ref={ref} className={`enso-hero ${className}`} />;
}

// ═══ 01 HERO ═════════════════════════════════════════════════════════════════
// ── Enrollment state helpers ─────────────────────────────────────────────────
// One setting (enrollment: open | closed) drives every primary CTA on the page.
// Closed (the default, most of the year): capture warm leads on the waitlist.
// Open: route to the application/booking flow.
function pwpPrimary(enrollment) {
  return enrollment === 'open'
    ? { label: 'Apply now', kind: 'call' }
    : { label: 'Join the waiting list', kind: 'waitlist' };
}

function EnrollNote({ enrollment, applyBy, spots, onDark }) {
  const cls = `enroll-note${onDark ? ' on-dark' : ''}`;
  if (enrollment === 'open') {
    return (
      <p className={cls}>
        <span className="enroll-dot open" aria-hidden="true"></span>
        <span>
          Doors are open{applyBy ? <> — apply by <strong>{applyBy}</strong></> : ' now'}.
          {spots ? <> {spots} spots — waitlist members notified first.</> : null}
        </span>
      </p>
    );
  }
  return (
    <p className={cls}>
      <span className="enroll-dot" aria-hidden="true"></span>
      <span>Enrollment opens in small cohorts a few times a year — join the waiting list and you&rsquo;ll be first to know.</span>
    </p>
  );
}

function PwpHero({ onCTA, enrollment, applyBy, spots }) {
  const primary = pwpPrimary(enrollment);
  return (
    <section className="hero v-pwp" data-screen-label="01 Hero">
      <div className="hero-photo" aria-hidden="true"></div>
      <EnsoBG className="enso-herobottom" speed={0} rotate={24} />
      <div className="hero-wrap">
        <div className="hero-copy">
          <span className="kicker on-dark">The Perform Without Pain Program</span>
          <h1 className="h-display">Stop fighting your body. Play without pain — <span className="hl">in 8 weeks.</span></h1>
          <p className="lead">
            A guided program for musicians with pain, tension, or injury who&rsquo;ve tried
            everything and still brace every time they play. In eight weeks you&rsquo;ll release
            the tension at its root — <em className="gold">most students see an 80–90% drop in
            pain and tension</em> — and start playing with ease.
          </p>
          <div className="hero-cta-row">
            <button className="btn" onClick={() => onCTA(primary.kind)}>{primary.label}</button>
            <button className="btn outline gold" onClick={() => onCTA('pathform')}>Find your path</button>
          </div>
          <EnrollNote enrollment={enrollment} applyBy={applyBy} spots={spots} onDark />
        </div>
      </div>
    </section>
  );
}

// ═══ 02 THE PROBLEM ══════════════════════════════════════════════════════════
function Problem() {
  const ref = useReveal();
  return (
    <section className="section s-pwp-problem on-light" data-screen-label="02 The Problem">
      <EnsoBG className="enso-bg pair-right enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="prob-visual">
          <div className="prob-photo" role="img" aria-label="A guitarist standing with a hand to their head"></div>
        </div>
        <div className="prob-copy">
          <span className="kicker">The Problem</span>
          <h2 className="h-section">You&rsquo;ve tried everything. It still comes back.</h2>
          <div className="prob-body">
            <p>
              You&rsquo;ve stretched, strengthened, rested, changed your setup, maybe seen a physical
              therapist. It helped&hellip; for a while. But the tension always returns the moment it
              matters: the audition, the solo, the passage you care about most. You&rsquo;re
              practicing more and enjoying it less, and somewhere in there a quiet voice started
              asking how long you can keep doing this.
            </p>
            <p>
              You&rsquo;re not weak, and you&rsquo;re not doing it wrong. You were just never taught
              the one thing that would actually change it.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 03 THE REFRAME ══════════════════════════════════════════════════════════
function Reframe() {
  const ref = useReveal();
  return (
    <section className="section s-pwp-reframe on-dark deeper" data-screen-label="03 The Reframe">
      <EnsoBG className="enso-bg enso-botpair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="reframe-copy">
          <span className="kicker on-dark">The Reframe</span>
          <h2 className="h-section"><span className="hl-gold">Your pain is a &ldquo;when&rdquo; problem</span>, not a &ldquo;where&rdquo; problem.</h2>
          <div className="pwp-narr-body">
            <p>
              There&rsquo;s nothing wrong with your hand or your shoulder. Treating the part that
              hurts, piece by piece, gives temporary, unsatisfying relief — because it doesn&rsquo;t
              address the root cause. The root cause is how you relate to the <em className="it">critical
              moment</em>: the instant you tighten, usually right before the &ldquo;hard thing.&rdquo;
              It&rsquo;s a habit, and habits run unconsciously, so you never notice it — until it hurts.
            </p>
            <p>
              Once you learn to find those moments and meet them with <em className="gold">openness
              instead of bracing</em>, the tension releases on its own — often in a single moment.
              That&rsquo;s what this program teaches.
            </p>
          </div>
        </div>
        <div className="reframe-visual">
          <div className="reframe-photo" role="img" aria-label="A trumpeter playing in a studio"></div>
        </div>
      </div>
    </section>
  );
}

// ═══ WHO YOU'LL DO THIS WITH ═════════════════════════════════════════════════
function WithJoseph() {
  const ref = useReveal();
  return (
    <section className="section s-pwp-joseph on-dark" data-screen-label="Who You'll Do This With">
      <EnsoBG className="enso-bg enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="pwp-joseph-visual">
          <div className="pwp-joseph-photo" role="img" aria-label="Joseph Arnold playing violin in a garden"></div>
        </div>
        <div className="pwp-joseph-copy">
          <span className="kicker on-dark">Who You&rsquo;ll Do This With</span>
          <h2 className="h-section">I almost quit, too.</h2>
          <div className="body">
            <p>
              Years ago, chronic pain and tension nearly ended my playing. I did everything I was
              supposed to do — doctors, stretches, rest, new gear — and nothing worked, because no
              one had ever taught me the real skill underneath it all. When I finally found my way
              out, it changed everything: I&rsquo;ve played pain-free ever since, and I&rsquo;ve
              spent the years since turning what I learned into something I can teach.
            </p>
            <p>
              I&rsquo;m Joseph Arnold — violinist, certified Alexander Technique teacher, and
              author of the award-winning <a className="soulforce-link" href="/book"><em className="title-italic">Soulforce</em></a>. I&rsquo;ve
              helped <em className="gold">hundreds of musicians</em> stop fighting their bodies and
              start playing the way they always knew they could. I&rsquo;d like to help you.
            </p>
          </div>
          <p className="signature">Joseph Arnold</p>
        </div>
      </div>
    </section>
  );
}

// ═══ 04 WHAT YOU'LL LEARN ════════════════════════════════════════════════════
function WhatLearn() {
  const ref = useReveal();
  const items = [
    { t: "Why your tension isn't merely physical — and what it actually is.", d: 'Stop treating the part that hurts and start changing what creates the hurt.' },
    { t: "Why \u201Cjust relax\u201D has never once worked.", d: 'A command to your body is the very thing tightening it.' },
    { t: "Why stretching and strengthening won't fix it.", d: 'The habit underneath your playing — not weak or tight muscles — keeps the pain coming back.' },
    { t: 'That ease is a skill you can implement right away.', d: "Not an accident, and not out of reach because you're a \u201Ctense person.\u201D" },
    { t: '20+ mind-body techniques.', d: 'Tools to find ease in any moment of musical challenge.' },
    { t: 'The Magic Pause.', d: 'The simplest, most immediate tool for releasing tension in the middle of playing — any passage, any instrument.' },
    { t: 'The critical moment.', d: 'The half-second that decides whether you tighten, and how to meet it free instead of tight.' },
    { t: 'Thing mode vs. being mode.', d: 'The two ways of playing, and why one quietly hurts.' },
    { t: 'The mind-body connection.', d: 'How the way you think and pay attention controls your movement.' },
    { t: 'How to sit, stand, and play with ease.', d: "It's not about \u201Cgood posture.\u201D" },
    { t: "How to relieve musician's injuries for good.", d: 'Without exercises, stretching, or surgery. An 80–90% drop in pain and tension over the eight weeks is realistic, as it has been for many of my students.' },
  ];
  return (
    <section className="section s-pwp-learn on-dark deeper" data-screen-label="04 What You'll Learn">
      <EnsoBG className="enso-bg pair-right enso-botpair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="learn-head">
          <span className="kicker on-dark">What You&rsquo;ll Learn</span>
          <h2 className="h-section">The <span className="hl-gold">skill</span> of ease.</h2>
        </div>
        <ul className="learn-grid">
          {items.map((it, i) => (
            <li className={`learn-row${i === items.length - 1 ? ' full' : ''}`} key={i}>
              <span className="lr-head"><span className="lr-title">{it.t}</span></span>
              <p>{it.d}</p>
            </li>
          ))}
          <p className="learn-foot"><span className="lf-gold">By the end, you&rsquo;ll have felt the release for yourself — with your instrument in your hands</span> — and a practice you can use for the rest of your playing life.</p>
        </ul>
      </div>
    </section>
  );
}

// ═══ 05 TWO WAYS THROUGH ═════════════════════════════════════════════════════
function TwoWays({ onCTA, enrollment }) {
  const ref = useReveal();
  const primary = pwpPrimary(enrollment);
  return (
    <section className="section s-pwp-ways on-mist" data-screen-label="05 Two Ways Through">
      <EnsoBG className="enso-bg pair-right enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="ways-head">
          <span className="kicker">Two Ways Through</span>
          <h2 className="h-section">Choose how you want to do the work.</h2>
        </div>
        <div className="ways-grid">
          <div className="way-card">
            <div className="way-flag">In a group</div>
            <h3>Perform Without Pain</h3>
            <div className="way-price">$497</div>
            <p>
              Eight weeks of recorded lessons you follow at your own pace, plus a weekly 75-minute
              live class where you bring your questions and I work with musicians in real time.
              You&rsquo;re part of a small circle doing the same work, together.
            </p>
            <button className="btn outline" onClick={() => onCTA(primary.kind)}>{primary.label}</button>
          </div>
          <div className="way-card feature">
            <span className="way-ribbon">Most personal</span>
            <div className="way-flag">Group + private coaching</div>
            <h3>PWP + Private Coaching</h3>
            <div className="way-price">$997</div>
            <p>
              Everything in the group program, <em>plus</em> four private Zoom sessions with me over
              the eight weeks — focused entirely on your body, your instrument, and your specific
              patterns. The group carries the momentum; the private sessions personalize the key
              moments — where you start, two mid-course corrections, and where you finish.
            </p>
            <button className="btn" onClick={() => onCTA(primary.kind)}>{primary.label}</button>
          </div>
        </div>
        <p className="ways-both">Both finish at the same place: an invitation to continue in the Soulforce Arts Studio.</p>
        <p className="ways-selfpaced">
          Prefer to go entirely at your own pace? <strong>Your Body Is Your Instrument</strong> is
          the self-paced course version of this material — $149.
        </p>
      </div>
    </section>
  );
}

// ═══ 06 WHO IT'S FOR ═════════════════════════════════════════════════════════
function WhoFor() {
  const ref = useReveal();
  return (
    <section className="section s-pwp-forwhom on-dark deeper" data-screen-label="06 Who It's For">
      <EnsoBG className="enso-bg pair-right enso-botpair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Who It&rsquo;s For</span>
        <h2 className="h-section">Deeper work, for musicians ready for it.</h2>
        <div className="pwp-forwhom-body">
          <p>
            This program is for <em className="gold">committed musicians</em> — amateur or
            professional — dealing with pain, tension, or injury that&rsquo;s been limiting or
            threatening their playing, who&rsquo;ve tried the usual fixes and want something that
            finally addresses the cause.
          </p>
          <p className="not">
            It&rsquo;s probably not for you if you&rsquo;re looking for a quick stretch or a new
            shoulder rest. This is deeper work — and it rewards musicians who are ready for it.
          </p>
        </div>
      </div>
    </section>
  );
}

// ═══ 07 WHERE IT LEADS — STUDIO ══════════════════════════════════════════════
function WhereLeads({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-pwp-studio on-dark" data-screen-label="07 Where It Leads">
      <div className="studio-photo" aria-hidden="true"></div>
      <EnsoBG className="enso-bg pair-right enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Where It Leads</span>
        <h2 className="h-section">This is just the beginning.</h2>
        <p className="body">
          Perform Without Pain is where you start. When you finish, you can continue in the
          <strong> Soulforce Arts Studio</strong> — an ongoing weekly circle (a short lesson or
          meditation, then open Q&amp;A and masterclass) where the work keeps deepening, for as
          long as you want to grow.
        </p>
        <p className="rate">$197 / month founding rate</p>
        <a className="studio-link" href="/studio">Explore the Studio <span className="arr">→</span></a>
      </div>
    </section>
  );
}

// ═══ 08 TESTIMONIAL WALL ═════════════════════════════════════════════════════
function Wall() {
  const ref = useReveal();
  const quotes = [
    { q: "Studying with Joseph Arnold was a pivotal experience in my musical life. He gave me the tools to tackle questions I had been struggling with for a long time, and I have been able to play with more ease and effortlessness as a result. His approach is simultaneously methodical and open, and I notice myself applying his principles nearly every time I pick up my instrument.", n: 'Elijah Cole', r: 'Guitarist & Pianist', photo: 'assets/testi-elijah.jpg' },
    { q: "Joseph helped me understand the anatomy and psychology of effortless playing. His lessons are well thought-out, entertaining, and insightful. Highly recommended!", n: 'Yoni Draiblate', r: 'Principal Cellist, The Florida Orchestra', photo: 'assets/testi-yoni.jpg' },
    { q: "Until Joe, I had no awareness of the depth of tension I was holding. Bringing awareness and creating new habits has been life-changing. He also taught me how to take focused rest, which has made a huge difference in my energy and ease. Joe has such a soothing, caring way — I felt completely safe.", n: 'Alison Rigby', r: 'Violinist', photo: 'assets/testi-alison.jpg' },
    { q: "Some teachers emphasized relaxation, but none gave me real tools to bring it into my playing — until Joseph. Breaking each movement into \u201Ccritical moments\u201D has transformed my relationship with practicing. I'm certain I'll use these tools for years to come.", n: 'Timothy Bretschneider', r: 'Guitarist & Music Therapist', photo: 'assets/testi-timothy.jpg' },
    { q: "Neck and shoulder pain had me unable to play violin for more than 30 minutes. In a few sessions, Joseph corrected self-defeating habits that had been at work for 30 years. The improvement in the quality of my sound has been a joy — for me and for those I play with.", n: 'Ellen Hughes', r: 'Fiddler', photo: 'assets/testi-ellen.jpg' },
    { q: "I was dissatisfied with my trumpet playing — inconsistent, too much tension, especially in the upper register. I now feel much more free and open when I play, with more ease and endurance than before.", n: 'George Vandoren', r: 'Trumpeter', photo: 'assets/testi-george.jpg' },
    { q: "Before I came to see Joseph I felt like I had low connectivity to my violin, even though I loved playing. I learned to work with my body's natural shape, rather than fight against it, and to take what I learned into the practice room and performances. I now have a much stronger connection with my instrument and body while performing. Invaluable!", n: 'Zoe Lemon', r: 'Singer & Violinist', photo: 'assets/testi-zoe.png' },
    { q: "I came to Joseph struggling with throat tension, running out of air at the end of phrases. After working with him, pieces that felt impossible became like toys I could play with. One split second of release before I started singing changed everything — I could sustain beautifully to the ends of phrases without tension.", n: 'Courtney P.', r: 'Vocalist', photo: 'assets/testi-courtney.jpg' },
    { q: "As a professional choral director and pianist, I'd lived with chronic pain for two decades. Joseph's approach goes far beyond technique — a real connection between music, body, and soul. His teaching is centered, compassionate, and genuinely transformative. Would I recommend him? A resounding yes.", n: 'Robert Chrystal', r: 'Pianist & Choral Director', photo: 'assets/testi-robert.jpg' },
    { q: "What sets Joseph apart is how he integrates mindfulness, physical awareness, and real care into something unlike any other teaching I've encountered. Most importantly, Joseph genuinely cares. Working with him would enrich the life of anyone who chooses to.", n: 'Cate Monaco', r: 'Pianist & Singer-Songwriter', photo: 'assets/testi-cate.jpg' },
  ];
  return (
    <section className="section s-pwp-wall on-light" data-screen-label="08 Testimonials">
      <EnsoBG className="enso-bg" speed={0.04} rotate={0} />
      <EnsoBG className="enso-bg enso-botsm" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="wall-head">
          <span className="kicker">Musicians Who Stopped Fighting Their Bodies</span>
          <h2 className="h-section">Lasting ease <span className="hl-gold">that shows up in your music.</span></h2>
        </div>
        <div className="wall">
          {quotes.map((it) => (
            <figure className="wall-card" key={it.n}>
              <blockquote>{it.q}</blockquote>
              <figcaption className="wall-cite">
                <span className="wc-avatar"><img src={it.photo} alt={it.n} /></span>
                <span>
                  <span className="wc-name">{it.n}</span>
                  <span className="wc-role">{it.r}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══ 09 FAQ ══════════════════════════════════════════════════════════════════
function FaqItem({ q, children }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>{q}<span className="faq-icon" aria-hidden="true"></span></button>
      <div className="faq-a"><div className="faq-a-inner">{children}</div></div>
    </div>
  );
}

function Faq() {
  const ref = useReveal();
  return (
    <section className="section s-pwp-faq on-light" data-screen-label="09 FAQ">
      <EnsoBG className="enso-bg enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="faq-head">
          <span className="kicker">FAQ</span>
          <h2 className="h-section">Your questions, answered.</h2>
        </div>
        <div className="faq-list">
          <FaqItem q="How is this different from the things I've already tried?">
            Most of what you&rsquo;ve tried — stretching, strengthening, new gear, &ldquo;just relax&rdquo; — treats the symptom. This works on the cause: the coordination habit underneath your playing that quietly creates the tension. That&rsquo;s why the change holds instead of fading.
          </FaqItem>
          <FaqItem q="Is it right for my instrument and level?">
            This course is for committed musicians of all instruments and experience levels.
            Tension and ease are instrument-agnostic, and the principles apply from serious amateur
            to working professional. Strings, piano, voice, winds, guitar — bring whatever you play.
          </FaqItem>
          <FaqItem q="Group or 1:1 — which should I choose?">
            The group is the same proven curriculum with live group support — ideal if you like learning alongside others. The 1:1 is for those who want my full, private attention on their specific body and instrument, and the fastest, most personal route. Not sure? Book a call and we&rsquo;ll decide together.
          </FaqItem>
          <FaqItem q="What if my pain doesn't improve?">
            I care more about your result than any policy. If you&rsquo;re doing the work and not getting there, reach out — we&rsquo;ll work it through in good faith, which may include extra one-to-one time on your specific situation.
          </FaqItem>
          <FaqItem q="What's the time commitment?">
            Eight weeks: a weekly 75-minute live class (private in the 1:1 version), the recorded lessons, and a few minutes of daily practice. It&rsquo;s built to fit a working musician&rsquo;s life.
          </FaqItem>
          <FaqItem q="Do I need to bring my instrument?">
            Yes — highly recommended. The work happens in your playing, so we apply it with your instrument in your hands.
          </FaqItem>
          <FaqItem q="Is this medical treatment?">
            No. This is education and coaching in the Soulforce Arts Approach and the Alexander Technique — ways of learning to move and play with ease. It isn&rsquo;t medical advice or a substitute for care from a health professional. If you have a medical condition, please also consult someone qualified.
          </FaqItem>
          <FaqItem q="What happens after the eight weeks?">
            You&rsquo;re invited to continue in the Soulforce Arts Studio — the ongoing weekly circle where the work keeps deepening, for as long as you want to grow. No obligation; most people continue because they want to.
          </FaqItem>
        </div>
      </div>
    </section>
  );
}

// ═══ 10 FINAL CTA ════════════════════════════════════════════════════════════
// ── Waiting-list capture (inline form; also openable as a modal via the CTAs) ──
function WaitlistSection({ enrollment, applyBy, spots, onCTA }) {
  const ref = useReveal();
  const open = enrollment === 'open';
  return (
    <section id="waitlist" className="section s-pwp-waitlist on-mist" data-screen-label="Waiting List">
      <EnsoBG className="enso-bg pair-right enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="waitlist-card">
          {open ? (
            <div className="waitlist-open">
              <span className="kicker">Enrollment is open</span>
              <h2 className="h-section">Doors are open — apply now.</h2>
              <p className="lead">
                {applyBy ? <>Applications close <strong>{applyBy}</strong>. </> : null}
                {spots ? <>{spots} spots this cohort — waitlist members are notified first. </> : null}
                The first step is a short conversation to find the right way through for you.
              </p>
              <div className="ctas">
                <button className="btn" onClick={() => onCTA('call')}>Apply now</button>
              </div>
            </div>
          ) : (
            <WaitlistForm source="PWP inline" heading={
              <div className="waitlist-head">
                <span className="kicker">The Waiting List</span>
                <h2 className="h-section">Be first when the next cohort opens.</h2>
                <p className="lead">
                  Perform Without Pain runs as small cohorts a few times a year. Add your name —
                  I&rsquo;ll personally reach out when the next one opens, and waitlist members get
                  first access.
                </p>
              </div>
            } />
          )}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onCTA, enrollment, applyBy, spots }) {
  const ref = useReveal();
  const primary = pwpPrimary(enrollment);
  return (
    <section className="section s-pwp-cta on-dark deeper" data-screen-label="10 Final CTA">
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Your First Step</span>
        <h2 className="h-display">Ready to <span className="hl">stop fighting your body?</span></h2>
        <p className="lead">The first step is just a conversation — no pitch, no pressure — to find the right way through for you.</p>
        <div className="ctas">
          <button className="btn" onClick={() => onCTA(primary.kind)}>{primary.label}</button>
          <span className="text-link" onClick={() => onCTA('pathform')}>Not ready to talk yet? Tell me about yourself <span className="arr">→</span></span>
        </div>
        <EnrollNote enrollment={enrollment} applyBy={applyBy} spots={spots} onDark />
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function PwpFooter() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => { e.preventDefault(); if (!email.includes('@')) return; fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim(), firstName: (name || '').trim(), source: 'Footer newsletter' }) }).catch(() => {}); setSubmitted(true); };
  const Icon = {
    youtube: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="5" width="20" height="14" rx="3" /><path d="M10 9.5 L15 12 L10 14.5 Z" fill="currentColor" stroke="none" /></svg>,
    instagram: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1" fill="currentColor" /></svg>,
    substack: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h16v2.5H4zM4 9h16v2.5H4zM4 14l8 6 8-6v-0.5H4z" /></svg>,
  };
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="cta-enso" aria-hidden="true"></div>
      <div className="wrap">
        <div className="footer-newsletter">
          <div>
            <span className="kicker on-dark">The Newsletter</span>
            <h3>Get a free chapter of <em style={{ fontStyle: 'italic' }}>Soulforce</em></h3>
            <p>Sign up for the Soulforce Arts Institute newsletter and we&rsquo;ll send the first chapter to your inbox. Weekly videos and blog posts on playing freely — read by hundreds of working musicians.</p>
          </div>
          <div>
            {!submitted ? (
              <form className="newsletter-form" onSubmit={submit}>
                <input type="text" placeholder="First name" value={name} onChange={(e) => setName(e.target.value)} aria-label="First name" className="name-field" />
                <input type="email" placeholder="Email address" value={email} onChange={(e) => setEmail(e.target.value)} required aria-label="Email" />
                <button type="submit" className="btn">Send Chapter</button>
                <p className="newsletter-foot">No spam. Unsubscribe in one click.</p>
              </form>
            ) : (
              <div className="footer-confirm">
                <div>
                  <div style={{ color: '#fff', fontWeight: 600, marginBottom: '4px' }}>Welcome aboard.</div>
                  <div style={{ fontSize: '13px' }}>Your first chapter is on its way to <strong style={{ color: '#fff' }}>{email}</strong>.</div>
                  <HearChips email={email} source="Newsletter" onDark />
                </div>
              </div>
            )}
          </div>
        </div>
        <nav className="footer-nav" aria-label="Explore">
          <a href="/tensionreset">Free Lab</a>
          <a href="/trap">The Try-Harder Trap</a>
          <a href="/pwp">Perform Without Pain</a>
          <a href="/ybiyi">Your Body Is Your Instrument</a>
          <a href="/studio">The Studio</a>
          <a href="/book">The Book</a>
          <a href="/about">About</a>
        </nav>
        <div className="footer-meta">
          <a className="brand-row" href="/" style={{ textDecoration: 'none' }}>
            <div className="mark" aria-hidden="true"></div>
            <div className="name">Soulforce Arts<small>INSTITUTE</small></div>
          </a>
          <div className="footer-socials">
            <a href="https://www.instagram.com/soulforcearts/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">{Icon.instagram}</a>
            <a href="https://www.youtube.com/@soulforcearts" target="_blank" rel="noopener noreferrer" aria-label="YouTube">{Icon.youtube}</a>
            <a href="https://substack.com/@soulforcearts" target="_blank" rel="noopener noreferrer" aria-label="Substack">{Icon.substack}</a>
          </div>
          <div className="footer-legal">
            <span>© 2026 Soulforce Arts Institute · Soulforce Arts™</span>
            <a href="/privacy">Privacy &amp; Terms of Service</a>
            <a href="/refunds">Refunds</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  PwpHero, Problem, Reframe, WithJoseph, WhatLearn, TwoWays, WhoFor, WhereLeads, Wall, Faq,
  WaitlistSection, FinalCTA, PwpFooter,
  EnsoBG, EnsoHero, useReveal, pwpPrimary, EnrollNote,
});