// Soulforce Arts — The Tension Reset Lab page sections
const { useEffect, useRef, useState } = React;

// ─── Reveal-on-scroll hook ─────────────────────────────────────────────────
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(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } }),
      { threshold: opts.threshold ?? 0.15, rootMargin: opts.rootMargin ?? '0px 0px -8% 0px' }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ─── Enso watermark with parallax drift ────────────────────────────────────
function EnsoBG({ className = '', style = {}, speed = 0.12, rotate = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const tick = () => {
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const dy = rect.top + rect.height / 2 - vh / 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}`} style={style} />;
}

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}`} />;
}

// ─── Next Lab date: third Saturday of the month, auto-advancing ─────────────
function nextLabDate() {
  const thirdSat = (y, m) => {
    const first = new Date(y, m, 1);
    const toSat = (6 - first.getDay() + 7) % 7;
    return new Date(y, m, 1 + toSat + 14);
  };
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  let d = thirdSat(now.getFullYear(), now.getMonth());
  if (d < today) d = thirdSat(now.getFullYear(), now.getMonth() + 1);
  return {
    full: d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }),
    short: d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }),
  };
}

// ─── Inline testimonial ─────────────────────────────────────────────────────
function LabQuote({ quote, name, role, photo, dark }) {
  return (
    <figure className={`lab-quote ${dark ? 'on-dark' : ''}`}>
      <blockquote>{quote}</blockquote>
      <figcaption>
        <img className="q-avatar" src={photo} alt={name} />
        <span className="q-meta">
          <span className="q-name">{name}</span>
          <span className="q-role">{role}</span>
        </span>
      </figcaption>
    </figure>
  );
}

// ═══ 01 HERO ═════════════════════════════════════════════════════════════════
function LabHero({ onCTA }) {
  const date = nextLabDate();
  return (
    <section className="hero v-lab" data-screen-label="01 Hero">
      <div className="hero-photo" aria-hidden="true"></div>
      <EnsoHero speed={0.04} />
      <div className="hero-wrap">
        <div className="hero-copy">
          <span className="kicker on-dark">The Musician&rsquo;s Tension Reset Lab</span>
          <h1 className="h-display">Stop fighting your body when you play</h1>
          <p className="lead">
            A free live online class for musicians who want to play longer without tension
            taking over.
          </p>
          <p className="lead fine">
            This is not therapy, stretching, or mindset coaching. It&rsquo;s
            <em> instrument-aware guidance you can use immediately.</em>
          </p>
          <div className="lab-schedule">
            <span className="ls-dot"></span>
            <span className="ls-text">The <strong>3rd Saturday</strong> of every month · 12:00–1:15 PM ET</span>
            <span className="ls-next">Next: {date.full}</span>
          </div>
          <div className="hero-cta-row">
            <button className="btn" onClick={() => onCTA('lab')}>Get the Zoom Link</button>
            <span className="lab-free-note">Free to attend. Bring your instrument.</span>
          </div>
          <div className="lab-social-proof">Join 300+ musicians learning to play tension-free</div>
          <figure className="hero-blurb">
            <img className="hb-avatar" src="assets/testi-thuy.png" alt="Thuy N." />
            <blockquote>
              &ldquo;Studying with Joseph has relieved my tension and pain and made me a stronger,
              more confident player. 100% recommended to musicians with tension issues!&rdquo;
              <span className="attrib">— Thuy N. · Violinist</span>
            </blockquote>
          </figure>
        </div>
      </div>
    </section>
  );
}

// ═══ 02 THE REAL PROBLEM ═════════════════════════════════════════════════════
function RealProblem() {
  const ref = useReveal();
  return (
    <section className="section s-lab-problem on-light" data-screen-label="02 The Real Problem">
      <div className="wrap reveal" ref={ref}>
        <div className="lab-problem-visual">
          <div className="lab-problem-photo" role="img" aria-label="An aging hand straining on the piano keys"></div>
        </div>
        <div className="lab-problem-copy">
          <span className="kicker">The Real Problem Behind Tension</span>
          <h2 className="h-section">It&rsquo;s not a strength problem. <span className="hl">It&rsquo;s a habit.</span></h2>
          <div className="body">
            <p>
              Most musicians don&rsquo;t have a strength or flexibility problem. They have a habit
              of <em className="gold">trying too hard</em> — usually without realizing it.
            </p>
            <p>This lab helps you interrupt that habit in real time.</p>
          </div>
          <LabQuote
            quote="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."
            name="Elijah Cole" role="Jazz guitarist" photo="assets/testi-elijah.png" />
        </div>
      </div>
    </section>
  );
}

// ═══ 03 WHAT HAPPENS ON THE CALL ═════════════════════════════════════════════
function OnTheCall() {
  const ref = useReveal();
  const rows = [
    { min: '30', unit: 'min', d: <><strong>A lesson</strong> on one technique or issue — the Magic Pause, body mapping, nervous-system work, performance anxiety, injuries, and more.</> },
    { min: '35', unit: 'min', d: <><strong>Live Q&amp;A</strong> and demonstrations on your instrument.</> },
    { min: '5', unit: 'min', d: <><strong>A practice assignment</strong> to take into the month.</> },
    { min: '5', unit: 'min', d: <><strong>The monthly drawing</strong> for a free signed copy of <a className="soulforce-link" href="/book"><em>Soulforce</em></a> (must be on the call to qualify).</> },
  ];
  return (
    <section className="section s-call on-dark deeper" data-screen-label="03 On The Call">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="call-visual">
          <div className="call-photo" role="img" aria-label="A live Zoom class of musicians">
            <span className="call-badge"><span className="ls-dot"></span>Live on Zoom</span>
          </div>
        </div>
        <div className="call-copy">
          <span className="kicker on-dark">What Happens on the Call</span>
          <h2 className="h-section">Seventy-five minutes, start to finish.</h2>
          <ul className="call-timeline">
            {rows.map((r, i) => (
              <li className="call-row" key={i}>
                <span className="call-min">{r.min}<small>{r.unit}</small></span>
                <span className="call-desc">{r.d}</span>
              </li>
            ))}
          </ul>
          <p className="call-pull">This is a live call. You can ask questions. You can be seen.</p>
          <p className="call-note">
            I can only work hands-on with a few musicians each session — reserve your spot, come
            ready, and you might be one of them.
          </p>
        </div>
      </div>
    </section>
  );
}

// ═══ 04 WHO THIS IS FOR ══════════════════════════════════════════════════════
function WhoForLab() {
  const ref = useReveal();
  const items = [
    'Shoulder, neck, arm, or vocal tension that won\u2019t release.',
    'Pain that disappears… then comes back the next time you practice.',
    'The feeling that you\u2019re “doing everything right” but still fighting your body.',
  ];
  return (
    <section className="section s-whofor-lab on-mist" data-screen-label="04 Who This Is For">
      <EnsoBG className="enso-bg enso-top" speed={0} rotate={24} />
      <EnsoBG className="enso-bg enso-bot" speed={0} rotate={-24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">Who This Is For</span>
        <h2 className="h-section">For musicians who feel it in their body.</h2>
        <p className="intro">This lab is for musicians who experience:</p>
        <ul className="symptom-list">
          {items.map((t, i) => <li key={i}>{t}</li>)}
        </ul>
        <p className="whofor-close">
          You don&rsquo;t need to be in crisis to join. <strong>You just need to be done forcing
          things.</strong>
        </p>
        <p className="whofor-close" style={{ marginTop: '14px' }}>
          <strong>Teachers welcome</strong> — bring what you&rsquo;re seeing in your students, too.
        </p>
      </div>
    </section>
  );
}

// ═══ 05 WHO I AM ═════════════════════════════════════════════════════════════
function WhoIAm() {
  const ref = useReveal();
  return (
    <section className="section s-whoami on-dark" data-screen-label="05 Who I Am">
      <EnsoBG className="enso-bg enso-top" speed={0} rotate={-24} />
      <EnsoBG className="enso-bg enso-bot" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="whoami-portrait" role="img" aria-label="Joseph Arnold playing violin in a garden"></div>
        <div className="whoami-copy">
          <span className="kicker on-dark">Who I Am</span>
          <h2 className="h-section">Hi, I&rsquo;m Joseph Arnold.</h2>
          <div className="body">
            <p>
              I&rsquo;m a professional violinist and award-winning author of <a className="soulforce-link" href="/book"><em className="gold">Soulforce</em></a>.
              My method is the Soulforce Arts Approach: instrument-aware work that retrains the
              habits underneath your playing. It grew out of years of study — including training
              as a certified Alexander Technique teacher — but goes further, into the specific,
              practical skill of releasing tension the moment it arises.
            </p>
            <p>
              For years, I tried to fix my playing with effort, discipline, and willpower. It only
              made things worse. What finally changed everything wasn&rsquo;t trying harder — it
              was learning how to stop interfering with myself. Now I help other musicians do the
              same.
            </p>
          </div>
          <p className="signature">Joseph Arnold</p>
        </div>
      </div>
    </section>
  );
}

// ═══ 06 WHAT YOU'LL GET ══════════════════════════════════════════════════════
function GetWhat() {
  const ref = useReveal();
  const pathRef = useReveal();
  const steps = [
    { num: 'I', title: 'Practical protocols', desc: 'Things you can put to work this week.' },
    { num: 'II', title: 'Real insight', desc: 'Into your own specific tension patterns.' },
    { num: 'III', title: 'Permission to ease off', desc: 'Stop trying so hard — without losing precision or intensity.' },
  ];
  return (
    <section className="section s-getwhat on-light" data-screen-label="06 What You'll Get">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="getwhat-head">
          <span className="kicker">What You&rsquo;ll Get</span>
          <h2 className="h-section">Walk away with something you can use.</h2>
        </div>
        <div className="plan-path getwhat-path" ref={pathRef}>
          <svg className="river" viewBox="0 0 1200 40" fill="none" preserveAspectRatio="none" aria-hidden="true">
            <path d="M0 20 C 220 2, 380 38, 600 20 C 820 2, 980 38, 1200 20" />
          </svg>
          {steps.map((s, i) => (
            <div className="plan-step" key={i}>
              <div className="dot">{s.num}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
        <p className="getwhat-foot">
          This isn&rsquo;t a course. It&rsquo;s not therapy. <span className="hl">It&rsquo;s a monthly reset.</span>
        </p>
        <LabQuote
          quote="I loved the Lab! I've had tingling, numbness in my elbow resurface lately after a few years of pain-free playing. But after attending the Lab I immediately began applying what I learned to playing violin. I now feel less stressed, and looser overall."
          name="Tamara Dement" role="Violinist & teacher" photo="assets/testi-tamara.png" />
      </div>
    </section>
  );
}

// ═══ 07 JOIN THE LAB ═════════════════════════════════════════════════════════
function JoinLab({ onCTA }) {
  const ref = useReveal();
  const date = nextLabDate();
  return (
    <section className="section s-joinlab on-dark deeper" data-screen-label="07 Join The Lab">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="joinlab-copy">
          <span className="kicker on-dark">Join the Lab</span>
          <h2 className="h-section">Reserve your spot.</h2>
          <div className="body">
            <p>
              Click below and I&rsquo;ll send you the Zoom link the week before. Calls happen the
              3rd Saturday of every month, 12:00–1:15 PM ET. <strong style={{ color: '#fff' }}>Next Lab: {date.full}.</strong>
            </p>
            <p>
              When you reserve, you can tell me what you play and what&rsquo;s getting in the way
              right now — optional, but it helps me make the session useful for you.
            </p>
          </div>
          <div className="ctas">
            <button className="btn" onClick={() => onCTA('lab')}>Get the Zoom Link</button>
          </div>
        </div>
        <div className="joinlab-card">
          <div className="jl-flag">When you reserve</div>
          <ul className="joinlab-fields">
            <li>Your first name</li>
            <li>Your email — that&rsquo;s where the Zoom link goes</li>
            <li>Optional: <em>“What do you play, and what&rsquo;s getting in the way?”</em></li>
          </ul>
          <p className="joinlab-bonus">
            <strong>Bonus:</strong> a monthly drawing for a free signed copy of <a className="soulforce-link" href="/book"><em>Soulforce</em></a>
            {' '}— must be on the call to qualify.
          </p>
        </div>
      </div>
    </section>
  );
}

// ═══ 08 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 FaqLab() {
  const ref = useReveal();
  return (
    <section className="section s-faq-lab on-light" data-screen-label="08 FAQ">
      <EnsoBG className="enso-bg enso-top" speed={0} rotate={24} />
      <EnsoBG className="enso-bg enso-bot" 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="Do I need to come every month?">
            No. Drop in when you can. But the musicians who show up consistently get the most out
            of it — the work compounds month over month.
          </FaqItem>
          <FaqItem q="Will there be recordings?">
            The live session stays live — the hands-on work, the real-time Q&amp;A, and being seen
            can&rsquo;t be recreated on video, and that&rsquo;s the whole reason to show up. I
            don&rsquo;t post the full Labs. But I share a lot of the teaching on my{' '}
            <a href="https://www.youtube.com/@soulforcearts" target="_blank" rel="noopener noreferrer">YouTube channel</a>,
            so subscribe there to keep learning between sessions. And if you&rsquo;d rather have a
            structured, on-demand version you can watch any time with your instrument in hand,
            that&rsquo;s exactly what the <em>Try-Harder Trap</em> webinar is for.
          </FaqItem>
          <FaqItem q="Is this a sales pitch for your Studio?">
            No. The 75 minutes are real teaching. At the very end I&rsquo;ll mention how to go
            deeper if you want to — that&rsquo;s it. You&rsquo;ll leave with something you can use
            whether or not you ever work with me.
          </FaqItem>
          <FaqItem q="What if I miss a month?">
            Nothing to make up. Each Lab stands on its own. Just join the next 3rd Saturday.
          </FaqItem>
          <FaqItem q="Is this class for my specific instrument or ability level?">
            Yes. Tension is instrument-agnostic, and these principles apply from beginner to
            professional. Strings, piano, voice, winds, guitar — bring whatever you play.
          </FaqItem>
        </div>
        <LabQuote
          quote={<>Before I met Joseph, I was feeling frustrated with my music. As a retired therapist, one of my favorite creative outlets has been to play guitar and sing, but even though it felt fun for a while, I recently hit a creative plateau. I wanted to be more connected to the music, my guitar, and my life force — and Joseph's Soulforce Arts Approach gave me the tools and methods I needed to do this. I just love how he emphasizes <em className="q-hl">authentic creativity, soul, and spirit, and also provides the opportunity to connect with a community where I felt welcome</em>, even though I'm not a professional musician.</>}
          name="Carmen Mas" role="Psychotherapist · Singer & guitarist" photo="assets/testi-carmen.png" />
      </div>
    </section>
  );
}

// ═══ 09 READY TO STOP FIGHTING ═══════════════════════════════════════════════
function ReadyToStop({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-ready on-dark deeper" data-screen-label="09 Ready">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Join us</span>
        <h2 className="h-display">Ready to <span className="hl">stop fighting?</span></h2>
        <p className="lead">Join the Musician&rsquo;s Tension Reset Lab this coming 3rd Saturday.</p>
        <div className="ctas">
          <button className="btn" onClick={() => onCTA('lab')}>Get the Zoom Link</button>
        </div>
      </div>
    </section>
  );
}

// ═══ 10 READY TO GO DEEPER ═══════════════════════════════════════════════════
function GoDeeper({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-deeper on-mist" data-screen-label="10 Go Deeper">
      <div className="wrap reveal" ref={ref}>
        <div className="deeper-head">
          <span className="kicker">Ready to Go Deeper?</span>
          <h2 className="h-section">Two ways to keep going.</h2>
        </div>
        <div className="deeper-grid two">
          <div className="deeper-card">
            <div className="dc-flag">On-demand <span className="dc-price">· $27</span></div>
            <h3>The Try-Harder Trap</h3>
            <p>
              An on-demand webinar. The Lab is live and generalist; this 45-minute class goes
              deeper on the core concept with a structured demonstration you can watch any time,
              instrument in hand. By the end you&rsquo;ll have felt your shoulder release once, in
              real time.
            </p>
            <a className="btn outline gold" href="/trap">Watch the webinar</a>
          </div>
          <div className="deeper-card feature">
            <div className="dc-flag">Go all in</div>
            <h3>The Soulforce Arts Studio</h3>
            <p>
              Where the Lab&rsquo;s work becomes a practice you keep: a small circle of committed
              musicians, a weekly live class, and a growing library of lessons — going deep on
              releasing pain and tension, and everything that opens up once you do. We start small
              and intentional, capped at 15 founding members. The Lab is a taste; the Studio is
              where the real change happens.
            </p>
            <a className="btn" href="/studio">Explore the Studio</a>
          </div>
        </div>
        <p className="deeper-talk">
          <strong>Not sure yet?</strong> If you&rsquo;d rather have a real conversation before
          anything else, let&rsquo;s talk — tell me where you are and what&rsquo;s getting in the
          way, and I&rsquo;ll point you toward the right next step.{' '}
          <button className="deeper-talk-link" onClick={() => onCTA('call')}>Talk with Joseph</button>
        </p>
        <p className="deeper-tagline">Free your mind. Relax your body. Play with soul.</p>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function LabFooter() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [instrument, setInstrument] = useState('');
  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@') || !instrument) return;
    let recaptchaToken = '';
    try {
      recaptchaToken = await new Promise((res) => {
        let done = false;
        const finish = (t) => { if (!done) { done = true; res(t || ''); } };
        setTimeout(() => finish(''), 2500);
        if (window.grecaptcha && window.grecaptcha.execute) {
          window.grecaptcha.ready(() =>
            window.grecaptcha.execute('6LfJPzQtAAAAAOgSnUuVr6D57jLJd2dJ1Mz8MFAu', { action: 'newsletter' }).then(finish).catch(() => finish('')));
        } else { finish(''); }
      });
    } catch (_) { recaptchaToken = ''; }
    fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim(), firstName: (name || '').trim(), instrument, recaptchaToken, source: 'Footer newsletter' }) }).catch(() => {});
    setSubmitted(true);
  };
  const Icon = {
    facebook: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 8h-2a2 2 0 0 0-2 2v12" /><path d="M8 13h6" /><rect x="3" y="3" width="18" height="18" rx="3" /></svg>,
    tiktok: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 12a4 4 0 1 0 4 4V4c.5 2.5 2.5 4 5 4" /></svg>,
    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={(e) => { if (((e.target.querySelector('[name=website]') || {}).value)) { e.preventDefault(); return; } submit(e); }}><input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: '1px', height: '1px', opacity: 0 }} />
                <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" />
                <select value={instrument} onChange={(e) => setInstrument(e.target.value)} required aria-label="What do you play?" className="inst-field">
                  <option value="" disabled>What do you play?</option>
                  <option>Violin - Viola</option>
                  <option>Cello - Bass</option>
                  <option>Piano</option>
                  <option>Guitar - Plucked Strings</option>
                  <option>Voice</option>
                  <option>Winds - Brass</option>
                  <option>Percussion</option>
                  <option>Other</option>
                </select>
                <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>
                  <div style={{ fontSize: '12px', opacity: 0.6, marginTop: '6px' }}>Didn&rsquo;t get a confirmation email? Please disable your ad blocker and try again.</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="/teachers">For Teachers</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, {
  LabHero, RealProblem, OnTheCall, WhoForLab, WhoIAm, GetWhat,
  JoinLab, FaqLab, ReadyToStop, GoDeeper, LabFooter,
  EnsoBG, EnsoHero, useReveal,
});