// Soulforce Arts — For Music Teachers (Perform Without Pain, teacher track) 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}`} />;
}

// ═══ MODAL SHELL (local — mirrors modals.jsx behavior) ═══════════════════════
function TModalShell({ onClose, children }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  return (
    <div className="modal-scrim" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="close" onClick={onClose} aria-label="Close">×</button>
        {children}
      </div>
    </div>
  );
}

// ─── Waiting-list modal ──────────────────────────────────────────────────────
function WaitlistModal({ onClose }) {
  const [step, setStep] = useState('form'); // form | done
  const [email, setEmail] = useState('');
  const submit = (e) => { e.preventDefault(); if (!email.includes('@')) return; setStep('done'); };

  if (step === 'done') {
    return (
      <TModalShell onClose={onClose}>
        <div className="modal-success">
          <div className="check">✓</div>
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>You&rsquo;re on the list</div>
          <h2 className="h-section" style={{ marginTop: '12px' }}>I&rsquo;ll be in touch.</h2>
          <p className="lead" style={{ margin: '0 auto 24px' }}>
            I&rsquo;ll email <strong>{email}</strong> the moment the next teacher cohort of Perform
            Without Pain opens — with dates, group rates, and the details on credit.
          </p>
          <button className="btn" onClick={onClose}>Close</button>
        </div>
      </TModalShell>
    );
  }

  return (
    <TModalShell onClose={onClose}>
      <div className="kicker" style={{ marginBottom: '16px' }}>For Music Teachers</div>
      <h2 className="h-section">Join the waiting list.</h2>
      <p className="lead">
        Cohorts open quarterly and fill from this list first. Add your name and I&rsquo;ll send
        you the next dates, the teacher group rate, and where the professional-development credit stands.
      </p>
      <form className="form" onSubmit={submit}>
        <div className="field">
          <label htmlFor="wl-name">Your name</label>
          <input id="wl-name" type="text" placeholder="Alex Renfro" />
        </div>
        <div className="field">
          <label htmlFor="wl-email">Email</label>
          <input id="wl-email" type="email" required placeholder="you@example.com"
            value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="field">
          <label htmlFor="wl-role">Where you teach (optional)</label>
          <select id="wl-role" defaultValue="">
            <option value="" disabled>Choose one…</option>
            <option>Private studio</option>
            <option>School / district</option>
            <option>Both</option>
          </select>
        </div>
        <button type="submit" className="btn">Join the waiting list <span className="arr">→</span></button>
        <p className="fine">No spam. I&rsquo;ll only email you about teacher cohorts and credit.</p>
      </form>
    </TModalShell>
  );
}

// ─── Group / association inquiry modal ───────────────────────────────────────
function GroupModal({ onClose }) {
  const [step, setStep] = useState('form'); // form | done
  const [email, setEmail] = useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    const g = (id) => ((e.target.querySelector('#' + id) || {}).value || '').trim();
    fetch('/api/group', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
      email: email.trim(),
      name: g('gp-name'),
      org: g('gp-org'),
      kind: g('gp-kind'),
      size: g('gp-size'),
      note: g('gp-note'),
      source: 'Teacher group inquiry',
    }) }).catch(() => {});
    setStep('done');
  };

  if (step === 'done') {
    return (
      <TModalShell onClose={onClose}>
        <div className="modal-success">
          <div className="check">✓</div>
          <div className="kicker" style={{ justifyContent: 'center', display: 'inline-flex' }}>Message received</div>
          <h2 className="h-section" style={{ marginTop: '12px' }}>Let&rsquo;s find a fit.</h2>
          <p className="lead" style={{ margin: '0 auto 24px' }}>
            Thanks — I&rsquo;ll reply to <strong>{email}</strong> within a couple of days to talk dates,
            group rates, and how to tailor a session to your members.
          </p>
          <button className="btn" onClick={onClose}>Close</button>
        </div>
      </TModalShell>
    );
  }

  return (
    <TModalShell onClose={onClose}>
      <div className="kicker" style={{ marginBottom: '16px' }}>For Your Association or School</div>
      <h2 className="h-section">Talk about a group.</h2>
      <p className="lead">
        Tell me a little about your group and I&rsquo;ll come back with group rates and a session
        shaped to your members. No obligation.
      </p>
      <form className="form" onSubmit={submit}>
        <div className="field">
          <label htmlFor="gp-name">Your name</label>
          <input id="gp-name" type="text" placeholder="Alex Renfro" />
        </div>
        <div className="field">
          <label htmlFor="gp-email">Email</label>
          <input id="gp-email" type="email" required placeholder="you@example.com"
            value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="field">
          <label htmlFor="gp-org">Association or school</label>
          <input id="gp-org" type="text" placeholder="e.g. PMTA, or Lincoln High School" />
        </div>
        <div className="field two">
          <div className="field">
            <label htmlFor="gp-kind">Type</label>
            <select id="gp-kind" defaultValue="">
              <option value="" disabled>Choose one…</option>
              <option>Teachers&rsquo; association (MTNA chapter)</option>
              <option>School or district</option>
              <option>University / conservatory</option>
              <option>Other</option>
            </select>
          </div>
          <div className="field">
            <label htmlFor="gp-size">Approx. group size</label>
            <input id="gp-size" type="text" placeholder="e.g. 15–20" />
          </div>
        </div>
        <div className="field">
          <label htmlFor="gp-note">What would you like? (optional)</label>
          <textarea id="gp-note" placeholder="A workshop for members, a full cohort, credit questions…" />
        </div>
        <button type="submit" className="btn">Send inquiry <span className="arr">→</span></button>
        <p className="fine">Goes straight to me. I read every one.</p>
      </form>
    </TModalShell>
  );
}

// ═══ 01 HERO ═════════════════════════════════════════════════════════════════
function TeachHero({ onCTA }) {
  return (
    <section className="hero v-teach" 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">For Music Teachers</span>
          <h1 className="h-display">You teach your students everything — <span className="hl">except the one thing no one taught you.</span></h1>
          <p className="lead">
            Relieve your own tension, gain tools you can bring straight to your studio, and earn
            professional development that actually transforms you. For private-studio and school
            music teachers.
          </p>
          <div className="hero-cta-row">
            <a className="btn" href="/pwp">Join the Perform Without Pain waiting list</a>
            <button className="btn outline gold" onClick={() => onCTA('group')}>Bring this to my association</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 02 THE PROBLEM ══════════════════════════════════════════════════════════
function Problem() {
  const ref = useReveal();
  return (
    <section className="section s-teach-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 teacher guiding a young student at the keyboard"></div>
        </div>
        <div className="prob-copy">
          <span className="kicker">The Problem</span>
          <h2 className="h-section">You became a teacher to pass on the joy — not the strain.</h2>
          <div className="teach-narr-body">
            <p>
              You carry your own tension and pain from decades of playing and demonstrating. Your
              students show up with the same struggles — the tight shoulder, the sore wrist, the
              nerves — and you don&rsquo;t always have an answer, because no one ever gave you one.
            </p>
            <p>
              And you&rsquo;re tired: <em className="gold">more than half of music teachers report
              burnout.</em> You became a teacher to pass on the joy, <em className="gold">not the strain.</em>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 03 THE REFRAME ══════════════════════════════════════════════════════════
function Reframe() {
  const ref = useReveal();
  return (
    <section className="section s-teach-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">Tension isn&rsquo;t a strength problem. <span className="hl">It&rsquo;s a habit — and it&rsquo;s teachable in reverse.</span></h2>
          <div className="teach-narr-body">
            <p>
              Tension isn&rsquo;t a strength or flexibility problem — it&rsquo;s a coordination habit,
              learned alongside technique. And anything learned can be <em className="gold">taught in
              reverse.</em> Once <em className="it">you</em> learn the skill of ease, you can teach it.
            </p>
            <p>
              This is the work Juilliard, Boston Conservatory, and the Royal College already trust —
              and you&rsquo;ll learn it from someone who trained the trainers.
            </p>
          </div>
        </div>
        <div className="reframe-visual">
          <div className="reframe-photo" role="img" aria-label="A young guitarist playing with relaxed ease"></div>
        </div>
      </div>
    </section>
  );
}

// ═══ 04 WHAT YOU'LL WALK AWAY WITH ═══════════════════════════════════════════
function WalkAway() {
  const ref = useReveal();
  const items = [
    <>Relief from your own playing-related pain and tension</>,
    <>Concrete tools you can bring straight into your teaching — so you can finally help students with <em>tension, injury, and nerves</em></>,
    <>A renewed relationship with your own playing, and your energy for teaching</>,
  ];
  return (
    <section className="section s-teach-walk on-mist" data-screen-label="04 What You'll Walk Away With">
      <EnsoBG className="enso-bg enso-top pair-left-top" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="walk-head">
          <span className="kicker">What You&rsquo;ll Walk Away With</span>
          <h2 className="h-section">More than a workshop. <span className="hl">A change you keep.</span></h2>
        </div>
        <div className="walk-cols">
          <ul className="teach-benefits">
            {items.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
          <div className="credit-card">
            <div className="cc-flag">Credit &amp; PD</div>
            <h3>A certificate you can use.</h3>
            <p>
              A certificate of completion plus professional-development hours toward your
              certification.
            </p>
            <p className="cc-note">
              <strong>Act 48</strong> for PA-certified educators is coming via our provider
              partnership.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 05 TWO WAYS IN ══════════════════════════════════════════════════════════
function TwoWaysIn() {
  const ref = useReveal();
  return (
    <section className="section s-teach-ways on-dark deeper" data-screen-label="05 Two Ways In">
      <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 on-dark">Two Ways In</span>
          <h2 className="h-section">Wherever you teach, there&rsquo;s a way in.</h2>
        </div>
        <div className="ways-grid">
          <div className="way-card">
            <div className="way-photo wp-private" role="img" aria-label="A teacher leading a group music class with young children"></div>
            <div className="way-body">
              <div className="way-flag">Private-studio teachers · MTNA</div>
              <h3>Counts toward your growth.</h3>
              <p>
                It counts toward your professional growth, and the tools come straight back to your
                studio. <em className="gold">Member group rates</em> through PMTA, Philadelphia MTA,
                and NJMTA.
              </p>
            </div>
          </div>
          <div className="way-card">
            <div className="way-photo wp-school" role="img" aria-label="A music educator directing a student ensemble"></div>
            <div className="way-body">
              <div className="way-flag">School music educators</div>
              <h3>The relief you actually need.</h3>
              <p>
                The burnout relief and student tools you actually need — with <em className="gold">Act
                48 credit on the way</em> through our provider partner.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 06 FOR YOUR ASSOCIATION OR SCHOOL ═══════════════════════════════════════
function ForGroup({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-teach-group" data-screen-label="06 For Your Association or School">
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">For Your Association or School</span>
        <h2 className="h-section">Bring it to your whole group.</h2>
        <p className="group-body">
          Associations and schools can enroll members or staff at a <em className="gold">group
          discount</em> — and I&rsquo;ll tailor a session to your members.
        </p>
        <div className="ctas">
          <button className="btn" onClick={() => onCTA('group')}>Talk about a group</button>
        </div>
      </div>
    </section>
  );
}

// ═══ 07 WHO YOU'LL LEARN FROM ════════════════════════════════════════════════
function FromJoseph() {
  const ref = useReveal();
  return (
    <section className="section s-teach-joseph on-dark" data-screen-label="07 Who You'll Learn From">
      <EnsoBG className="enso-bg enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="teach-joseph-visual">
          <div className="teach-joseph-photo" role="img" aria-label="Joseph Arnold standing in a field at sunset, holding his violin"></div>
        </div>
        <div className="teach-joseph-copy">
          <span className="kicker on-dark">Who You&rsquo;ll Learn From</span>
          <h2 className="h-section">You want to help your students. <span className="hl">You were just never shown how.</span></h2>
          <div className="body">
            <p>
              If your students show up with the same tension, pain, and nerves you&rsquo;ve fought
              yourself — and you don&rsquo;t always know what to tell them — you&rsquo;re not alone,
              and <em className="gold">it&rsquo;s not your fault.</em> Almost no one is taught how to
              teach this. It wasn&rsquo;t in your training, and it wasn&rsquo;t in mine.
            </p>
            <p>
              I&rsquo;m Joseph Arnold — a violinist and certified Alexander Technique teacher.
              I&rsquo;ve helped hundreds of musicians release tension and play with ease, and many of
              them are teachers, just like you. And because I&rsquo;ve spent years not only doing this
              work but teaching others how to teach it, I&rsquo;ve had to make it simple, practical,
              and reliable — methods you can actually use with a student in the room and watch work.
            </p>
            <p>
              That&rsquo;s what I want to hand you. You&rsquo;ll bring it to your own playing first —
              and come away with something real to give every student who walks through your door.
            </p>
          </div>
          <p className="signature">Joseph Arnold, author of the award-winning <em className="title-italic">Soulforce</em></p>
        </div>
      </div>
    </section>
  );
}

// ═══ 08 TESTIMONIAL (placeholder — collect a teacher quote) ══════════════════
function TeacherQuote() {
  const ref = useReveal();
  const quotes = [
    {
      body: <>I first came to Joseph for tension that had crept into my left arm while playing violin — it had started to get in the way in performances. He&rsquo;s an experienced Alexander Technique teacher who comes from a musician&rsquo;s background, and he gave me a much more detailed awareness of how my body is interconnected. <em>Playing feels significantly better now, and sustainable over long periods.</em> And when I&rsquo;m teaching, I can demonstrate the kind of ease I want my students to have.</>,
      name: 'Hannes Dietrich',
      role: 'Professor of Violin · Lebanon Valley College',
      photo: 'assets/tq-hannes.jpg',
    },
    {
      body: <>After a few years of pain-free playing, tingling and numbness in my elbow resurfaced — and the stress of being a working musician, the teaching and scheduling and endless emails, only added to the tension. The Magic Pause changed that. After the course I felt looser and less stressed, and I immediately began applying it to teaching violin: in that lesson I felt less anxious about what to do or say next, and more at ease. <em>I&rsquo;ll be using these tools for years.</em></>,
      name: 'Tamara D.',
      role: 'Music teacher',
      photo: 'assets/tq-tamara.jpg',
    },
  ];
  return (
    <section className="section s-teach-quote on-light" data-screen-label="08 Testimonials">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="quote-head">
          <span className="kicker">From Teachers</span>
          <h2 className="h-section">What it gives back.</h2>
        </div>
        <div className="quote-grid">
          {quotes.map((q, i) => (
            <figure className="teach-quote-card" key={i}>
              <blockquote>{q.body}</blockquote>
              <figcaption className="tq-cite">
                <span className="tq-avatar" aria-hidden="true" style={{ backgroundImage: `url(${q.photo})` }}></span>
                <span>
                  <span className="tq-name">{q.name}</span>
                  <span className="tq-role">{q.role}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══ 09 HOW IT WORKS / NEXT STEP ═════════════════════════════════════════════
function HowItWorks({ onCTA }) {
  const ref = useReveal();
  const steps = [
    { t: 'Join the waiting list', d: 'Cohorts open quarterly and fill from the list first.' },
    { t: 'Start with Perform Without Pain', d: 'The 8-week program — in a group, or with private coaching.' },
    { t: 'Bring it to your studio', d: 'Earn your certificate and PD hours, and teach what you&rsquo;ve learned.' },
  ];
  return (
    <section className="section s-teach-how on-dark deeper" data-screen-label="09 How It Works">
      <EnsoBG className="enso-bg enso-botpair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="how-head">
          <span className="kicker on-dark">How It Works</span>
          <h2 className="h-section">The next step is a small one.</h2>
          <p className="how-sub">It starts with Perform Without Pain — the 8-week program, in a group or with private coaching. Cohorts open quarterly.</p>
        </div>
        <ol className="how-steps">
          {steps.map((s, i) => (
            <li key={i}>
              <span className="hs-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="hs-title">{s.t}</span>
              <span className="hs-desc" dangerouslySetInnerHTML={{ __html: s.d }} />
            </li>
          ))}
        </ol>
        <div className="ctas">
          <a className="btn" href="/pwp">Join the Perform Without Pain waiting list</a>
          <button className="btn outline gold" onClick={() => onCTA('group')}>Bring this to my association</button>
        </div>
      </div>
    </section>
  );
}

// ═══ 10 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-teach-faq on-light" data-screen-label="10 FAQ">
      <EnsoBG className="enso-bg pair-left-top" 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="Does it count for credit?">
            You&rsquo;ll earn a certificate of completion and professional-development hours toward
            your certification. For PA-certified educators, Act 48 credit is on the way through our
            provider partnership — join the waiting list and I&rsquo;ll keep you posted on exactly
            where it stands.
          </FaqItem>
          <FaqItem q="I teach [instrument / voice] — is it relevant?">
            Yes. The body is the instrument behind every instrument, so the work applies to strings,
            piano, voice, winds, guitar — whatever you and your students play. You learn the
            principles; you apply them to your own teaching.
          </FaqItem>
          <FaqItem q="Can my whole studio — or my members — join?">
            Absolutely. Associations and schools can enroll members or staff at a group discount, and
            I&rsquo;ll tailor a session to your group. Use &ldquo;Bring this to my association&rdquo;
            and we&rsquo;ll talk specifics.
          </FaqItem>
          <FaqItem q="Do I need to be in pain to benefit?">
            No. Many teachers come for the tools and the renewed energy as much as for relief. If you
            do carry pain or tension, the work addresses that too — but you don&rsquo;t need to be
            hurting to get a great deal out of it.
          </FaqItem>
          <FaqItem q="Is this for school teachers or private teachers?">
            Both. There are two ways in — one built around private-studio teachers (MTNA), one around
            school music educators — and the core work is the same for everyone.
          </FaqItem>
        </div>
      </div>
    </section>
  );
}

// ═══ 11 FINAL CTA ════════════════════════════════════════════════════════════
function FinalCTA({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-teach-cta on-dark deeper" data-screen-label="11 Final CTA">
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Your Next Step</span>
        <h2 className="h-display">Learn the skill of ease — <span className="hl">then teach it.</span></h2>
        <p className="lead">Relief for you, tools for your students, and PD that actually transforms you.</p>
        <div className="ctas">
          <a className="btn" href="/pwp">Join the Perform Without Pain waiting list</a>
          <button className="btn outline gold" onClick={() => onCTA('group')}>Bring this to my association</button>
        </div>
        <p className="bridge-line">
          This is my <em>Perform Without Pain</em> program, seen through a teacher&rsquo;s lens.{' '}
          <a href="/pwp">See the full program and join the list <span className="arr">→</span></a>
        </p>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function TeachFooter() {
  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 = {
    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>,
    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>,
    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 and teachers.</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>
                </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, {
  TeachHero, Problem, Reframe, WalkAway, TwoWaysIn, ForGroup, FromJoseph, TeacherQuote, HowItWorks, Faq, FinalCTA, TeachFooter,
  WaitlistModal, GroupModal, EnsoBG, useReveal,
});