// Soulforce Arts — Studio 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}`} />;
}

function InkMark() {
  // Removed site-wide on the Studio page — the kicker's inline tick is the only rule we keep.
  return null;
}

// ─── 01 HERO ───────────────────────────────────────────────────────────────
function StudioHero({ onCTA }) {
  return (
    <section className="hero v-fullbleed s-hero-studio" data-screen-label="Studio Hero">
      <div className="hero-photo" aria-hidden="true"></div>
      <EnsoHero speed={0.05} />
      <div className="hero-wrap">
        <div className="hero-copy">
          <span className="kicker on-dark">The Soulforce Arts Studio</span>
          <h1 className="h-display" style={{ margin: '18px 0 24px' }}>
            This isn&rsquo;t where you come to get fixed.<br />
            <span className="hl">It&rsquo;s where you become the musician you were meant to be.</span>
          </h1>
          <div className="hero-lead-row">
            <p className="lead">
              You came because something hurts. You&rsquo;ll stay for the music you actually
              came here to make.
            </p>
            <div className="hero-cta-row">
              <a className="btn" href="/pwp">Start with Perform Without Pain</a>
              <button className="btn outline" onClick={() => onCTA('pathform')}>
                Find Your Path
              </button>
            </div>
            <p className="studio-pwp-note">The Studio starts with Perform Without Pain — <a href="/pwp">join the waiting list there</a>.</p>
          </div>
        </div>
      </div>
    </section>);
}

// ─── 02 THE TURN ────────────────────────────────────────────────────────────
function TheTurn() {
  const ref = useReveal();
  return (
    <section className="section s-turn on-light" data-screen-label="The Turn">
      <div className="wrap reveal" ref={ref}>
        <div className="turn-copy">
          <InkMark />
          <span className="kicker">From Relief to a Way of Life</span>
          <h2 className="h-section">
            Perform Without Pain is where you find the ease.<br />
            <span className="hl">The Studio is where it becomes a way of life.</span>
          </h2>
          <div className="narrative">
            <p>
              In the <em>Perform Without Pain</em> course, you learn the skill of releasing
              tension when it matters most, and feel what it&rsquo;s like to play without
              fighting your body.
            </p>
            <p>
              The Studio is where that skill stops being something you&rsquo;re learning and
              becomes something you live: steadier, deeper, and in good company, for as long
              as you want to grow.
            </p>
          </div>
        </div>
        <div className="turn-visual">
          <div className="turn-photo" role="img" aria-label="A musician playing freely"></div>
        </div>
      </div>
    </section>);
}

// ─── 03 WHAT THE STUDIO IS ───────────────────────────────────────────────────
function WhatItIs() {
  const ref = useReveal();
  const inside = [
    { t: 'Guided lesson', d: 'A short, focused teaching or guided meditation to begin.' },
    { t: 'Open Q&A and masterclass', d: 'Your questions and your playing, worked in real time.' },
    { t: 'Shared breakthroughs', d: 'Learn as much from a fellow member’s breakthrough as from your own.' },
    { t: 'Real connection', d: 'Time to reflect, share, and grow alongside people on the same path.' },
  ];
  return (
    <section className="section s-what on-light keep-light" data-screen-label="What It Is">
      <EnsoBG className="enso-bg" speed={0.05} />
      <div className="wrap reveal" ref={ref}>
        <div className="what-head">
          <InkMark />
          <span className="kicker">What the Studio Is</span>
          <h2 className="h-section">A weekly 75-minute class,<br /><span className="hl">live on Zoom.</span></h2>
          <p className="body">
            A short lesson or guided meditation, then open Q&amp;A — you bring whatever
            you&rsquo;re working on and we work it live, together. Part teaching, part practice,
            part honest conversation among musicians who understand each other.
          </p>
        </div>
        <ul className="what-list">
          {inside.map((x, i) => (
            <li className="what-item" key={i}>
              <span className="what-label">{x.t}</span>
              <p>{x.d}</p>
            </li>
          ))}
        </ul>
        <p className="what-foot">
          Between classes, simple daily practices and a journaling rhythm, so the work
          compounds instead of evaporating the moment you log off. It isn&rsquo;t a course
          you finish. <strong>It&rsquo;s a practice you keep</strong> — the inner craft of
          music-making, deepening over time, in good company.
        </p>
      </div>
    </section>);
}

// ─── 04 WHO IT'S FOR ─────────────────────────────────────────────────────────
function WhoFor() {
  const ref = useReveal();
  return (
    <section className="section s-whofor on-mist" data-screen-label="Who It's For">
      <EnsoBG className="enso-bg" speed={0.06} rotate={-20} />
      <div className="wrap reveal" ref={ref}>
        <div className="whofor-head">
          <span className="kicker">Who It&rsquo;s For</span>
          <h2 className="h-section">This is deeper work.<br /><span className="hl">It rewards musicians who are ready for it.</span></h2>
        </div>
        <div className="fit-grid">
          <div className="whofor-photo"><div className="pic" role="img" aria-label="A vocalist performing"></div></div>
          <div className="fit-card fit-yes">
            <span className="fit-tag">It&rsquo;s for you if</span>
            <ul>
              <li>You&rsquo;ve tried the usual fixes and they haven&rsquo;t lasted.</li>
              <li>Some part of you suspects the problem isn&rsquo;t merely physical — it&rsquo;s something deeper in how you approach the instrument.</li>
              <li>You&rsquo;re drawn to growth — the personal kind, not just the technical kind.</li>
              <li>You&rsquo;d rather do this work alongside others than alone.</li>
            </ul>
          </div>
          <div className="fit-card fit-no">
            <span className="fit-tag">It&rsquo;s probably not for you if</span>
            <ul>
              <li>You&rsquo;re looking for a quick fix.</li>
              <li>You want a stretching routine or a new shoulder rest.</li>
              <li>You&rsquo;d rather treat the symptom than the cause.</li>
            </ul>
          </div>
        </div>
        <p className="whofor-close">
          <strong>The Studio is for committed musicians</strong> — amateur or professional — who&rsquo;ve
          come to the end of their rope with pain, tension, anxiety, or playing out of obligation, and
          who are ready for a real change in how they play, and why. <em className="gold">That&rsquo;s
          who thrives here.</em>
        </p>
      </div>
    </section>);
}

// ─── 05 THE GUIDE ────────────────────────────────────────────────────────────
function Guide() {
  const ref = useReveal();
  return (
    <section className="section s-guide on-light" data-screen-label="The Guide">
      <EnsoBG className="enso-bg" speed={0.05} rotate={-10} />
      <div className="wrap reveal" ref={ref}>
        <div className="guide-portrait" role="img" aria-label="Joseph Arnold" />
        <div className="guide-copy">
          <InkMark />
          <span className="kicker">Who You&rsquo;ll Study With</span>
          <h2 className="h-section">I&rsquo;ve been where you are.</h2>
          <div className="body">
            <p>
              I&rsquo;m Joseph Arnold — a violinist who nearly quit because of repetitive strain
              injuries, found the way out, and spent the years since turning what I learned into
              something I could teach. I&rsquo;m the author of <a className="soulforce-link" href="/book"><em>Soulforce</em></a> and the Director
              of the Soulforce Arts Institute.
            </p>
            <p>
              I&rsquo;ve helped musicians around the world stop fighting their bodies and start
              playing the way they always knew they could.
            </p>
          </div>
          <a className="linkish" href="/about">
            Read my full story
          </a>
        </div>
      </div>
    </section>);
}

// ─── 06 INSIDE THE STUDIO (programs) ─────────────────────────────────────────
function Seasons({ onCTA }) {
  const ref = useReveal();
  const hiw = [
    'A weekly 75-minute live class — a short lesson or guided meditation, then open Q&A, where you bring what you’re working on and we work it live, together.',
    'A growing library of recorded lessons you can watch any time, at your own pace — so you’re never waiting for a topic, and the work is always there when you need it.',
    'A small circle of serious musicians on the same path — the people who make this a practice you keep, not a program you finish.',
  ];
  const keep = [
    { t: 'Calm under pressure', d: 'Quieting the nerves that hijack a performance, so you play onstage the way you do alone.' },
    { t: 'Your truest sound', d: 'Letting expression arrive on its own, instead of forcing it.' },
    { t: 'The deeper why', d: 'Reconnecting with the music that actually matters to you, and the purpose underneath your playing.' },
    { t: 'Ease, everywhere', d: 'Carrying the skill of release into every part of your playing life, for as long as you want to grow.' },
  ];
  const extras = [
    { k: 'Private lessons', d: 'One-to-one work with me, at a member’s rate, whenever you want to go further on something specific to you.', cta: 'Book your lesson', kind: 'lessons' },
    { k: '“Your Body Is Your Instrument”', d: 'A self-paced video course: ten practical lessons covering everything a musician should know about playing freely. Study at your own pace — free for all Studio members.', cta: 'Learn more', kind: 'course' },
    { k: 'The Tension Reset Lab', d: 'A free, live drop-in session, running again this month. A no-pressure way to taste the work before you commit.', cta: 'Save my spot — free', kind: 'lab' },
  ];
  return (
    <section className="section s-seasons on-light" data-screen-label="Inside the Studio">
      <EnsoBG className="enso-bg" speed={0.05} rotate={15} />
      <div className="wrap reveal" ref={ref}>
        <div className="seasons-head">
          <div className="seasons-head-copy">
            <InkMark />
            <span className="kicker">Inside the Studio</span>
            <h2 className="h-section">Come for the pain relief. <span className="hl">Stay for everything it opens up.</span></h2>
            <div className="body">
              <p>
                You come to release the pain and tension that&rsquo;s been limiting your playing &mdash;
                that&rsquo;s where we start, and where most musicians feel the first real shift. But
                releasing tension is just the doorway.
              </p>
              <p>
                As your body frees up, so does everything downstream: your nerves settle under
                pressure, your sound opens, you play more expressively and naturally, and you reconnect
                with why you picked up the instrument in the first place.
              </p>
              <p>
                <em className="gold">It&rsquo;s all the same work, going deeper</em> &mdash; pain relief
                that keeps unfolding into calm, into expressive freedom, into the music you actually
                came here to make.
              </p>
            </div>
          </div>
          <div className="seasons-head-visual">
            <div className="hiw-photo" role="img" aria-label="A guitarist at ease"></div>
          </div>
        </div>

        <div className="hiw-block">
          <span className="hiw-label">How it works</span>
          <ul className="hiw-list">
            {hiw.map((x, i) => (<li key={i}>{x}</li>))}
          </ul>
        </div>

        <div className="hiw-block">
          <span className="hiw-label">What you&rsquo;ll keep working on</span>
          <ul className="hiw-list keep-list">
            {keep.map((x, i) => (<li key={i}><strong>{x.t}</strong> &mdash; {x.d}</li>))}
          </ul>
        </div>

        <div className="incl-extras">
          <div className="extras-head">Also included with membership</div>
          <div className="extras-grid">
            {extras.map((x, i) => (
              <div className="extra-card" key={i}>
                <h4>{x.k}</h4>
                <p>{x.d}</p>
                <button className="btn-link" onClick={() => onCTA(x.kind)}>{x.cta}</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>);
}

// ─── 07 THE CIRCLE (community moment) ────────────────────────────────────────
function Circle() {
  const ref = useReveal();
  return (
    <section className="section s-circle on-dark" data-screen-label="The Circle">
      <EnsoBG className="enso-bg" speed={0.07} rotate={30} />
      <div className="wrap reveal" ref={ref}>
        <div className="circle-copy">
          <InkMark />
          <span className="kicker on-dark">The Circle</span>
          <h2 className="h-section">You won&rsquo;t do this alone.</h2>
          <p className="body">
            The hardest part of struggling with your playing is how alone it feels — as if you&rsquo;re
            the only one fighting your own body. The Studio is the cure for that, too: a small circle of
            serious musicians doing the same deep work, week after week. People who understand, who cheer
            your breakthroughs, and whose breakthroughs teach you as much as your own.
          </p>
          <p className="body">
            You stop being the only one &mdash; and that{' '}
            <em className="gold">belonging turns out to be its own kind of medicine</em>, the thing most
            musicians didn&rsquo;t know they were missing.
          </p>
        </div>
        <div className="circle-visual" aria-hidden="true">
          <div className="circle-ring"></div>
          <div className="circle-ring r2"></div>
          <div className="circle-photo" role="img" aria-label="A circle of musicians in a live Studio class"></div>
        </div>
      </div>
    </section>);
}

// ─── 08 TESTIMONIALS (quote wall) ────────────────────────────────────────────
function Testimonials() {
  const ref = useReveal();
  const quotes = [
    { q: 'Until Joe, I had no awareness of the depth of tension I was holding. Bringing awareness and beginning to create new habits has been life-changing. Joe has such a soothing voice and caring way — I felt completely safe working with him.', n: 'Alison Rigby', r: 'Violinist', img: 'assets/testi-alison.png' },
    { q: 'Breaking each movement into "critical moments" 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', img: 'assets/testi-timothy.png' },
    { 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', img: 'assets/testi-cate.png' },
  ];
  return (
    <section className="section s-quotes on-light keep-light" data-screen-label="Testimonials">
      <EnsoBG className="enso-bg" speed={0.05} rotate={-15} />
      <div className="wrap reveal" ref={ref}>
        <div className="quotes-head">
          <InkMark center />
          <span className="kicker">In Their Words</span>
          <h2 className="h-section">Musicians who stopped fighting their bodies.</h2>
        </div>
        <div className="quote-wall quote-wall-3">
          {quotes.map((x, i) => (
            <figure className="quote-card" key={i}>
              <blockquote>{x.q}</blockquote>
              <figcaption>
                {x.img && <img className="quote-avatar" src={x.img} alt={x.n} loading="lazy"
                  onError={(e) => { e.currentTarget.style.display = 'none'; }} />}
                <strong>{x.n}</strong>
                <span>{x.r}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>);
}

// ─── 09 JOIN THE STUDIO (pricing) ────────────────────────────────────────────
function Founding({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-founding on-dark deeper" data-screen-label="Join the Studio">
      <EnsoBG className="enso-bg" speed={0.05} rotate={-15} />
      <div className="wrap reveal" ref={ref}>
        <div className="founding-grid">
          <div className="founding-copy">
            <InkMark />
            <span className="kicker on-dark">Become A Founding Member</span>
            <h2 className="h-section">Join the Studio.</h2>
            <p className="body">
              The Studio is the ongoing circle — where the work keeps deepening after your
              foundation, for as long as you want to grow. It stays small and intentional, so it
              feels like a real community.
            </p>
            <ul className="founding-facts">
              <li><span className="fact-key">When</span><span className="fact-val">Weekly · starting summer 2026 — day &amp; time set with founders (likely Wed 11:00–12:30 ET)</span></li>
              <li><span className="fact-key">Where</span><span className="fact-val">Live on Zoom</span></li>
              <li><span className="fact-key">Size</span><span className="fact-val">Limited to 15 founding members</span></li>
            </ul>
          </div>

          <div className="price-card">
            <div className="price-step">
              <div className="price-step-flag">Step 1 · Start here</div>
              <h3 className="price-step-name">Perform Without Pain</h3>
              <p className="price-step-desc">
                Eight weeks that release the pain and tension at the root — the relief and the
                baseline before you join the circle.
              </p>
              <div className="price-step-rows">
                <span><strong>$497</strong> group</span>
                <span><strong>$997</strong> group plus private coaching</span>
              </div>
              <a className="btn-link step-link" href="/pwp">Explore Perform Without Pain →</a>
            </div>

            <div className="price-step price-step-main">
              <div className="price-step-flag">Step 2 · Then join the Studio</div>
              <div className="price-amount"><span className="cur">$</span>197<span className="per"> / month</span></div>
              <div className="price-alt">Founding rate locked · open-ended · cancel any time</div>
              <p className="price-note">
                Standard rate <strong>$250/month</strong> when the Studio opens to the public.
                Prefer to go all in? Prepay a year — <strong>$1,970</strong> (two months free) —
                optional, never required.
              </p>
              <p className="price-lessons">
                Members-only private lessons rate: <strong>$100/hour</strong> <span>(standard $150)</span>
              </p>
            </div>

            <a className="btn" href="/pwp">Start with Perform Without Pain</a>
            <p className="studio-pwp-note center">The Studio starts with Perform Without Pain — <a href="/pwp">join the waiting list there</a>.</p>
            <button className="btn-link center" onClick={() => onCTA('pathform')}>
              Not ready to talk yet? Tell me about yourself instead →
            </button>
            <p className="price-fine">Limited to 15 founding members · enrolling for this season only.</p>
          </div>
        </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(!open)} aria-expanded={open}>
        <span>{q}</span>
        <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-faq on-light" data-screen-label="FAQ">
      <div className="wrap reveal" ref={ref}>
        <div className="faq-head">
          <InkMark center />
          <span className="kicker">Before We Talk</span>
          <h2 className="h-section">A few questions, answered.</h2>
        </div>
        <div className="faq-list">
          <FaqItem q="What's the time commitment, and what if I miss a class?">
            One live 75-minute class a week, plus a few minutes of daily practice between classes if
            you want the work to compound. Life happens, though — every class is recorded, so if you
            miss one you can catch up, and the daily practices are short by design. Consistency helps
            most, but you won&rsquo;t fall behind for missing a week.
          </FaqItem>
          <FaqItem q="Is the Studio right for my instrument and level?">
            The Studio is for committed musicians of any level who are ready for deeper work, not a
            quick fix. Tension and ease are instrument-agnostic — the principles work for strings,
            piano, voice, winds, and guitar, from serious amateur to working professional.
          </FaqItem>
          <FaqItem q="I've tried things before and nothing lasted. How is this different?">
            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 habits
            underneath your playing that quietly create the tension in the first place. That&rsquo;s
            why the change holds, and why people feel a real shift early instead of temporary relief
            that fades.
          </FaqItem>
          <FaqItem q="Do I have to commit to a whole year?">
            No. You start with the 8-week founding cohort — that&rsquo;s the only commitment to begin.
            After that, you continue month-to-month for as long as it serves you, and you can stop any
            time. If you&rsquo;d rather go all in, there&rsquo;s an optional annual prepay at a founding
            discount — but it&rsquo;s never required.
          </FaqItem>
          <FaqItem q="It's not running yet — what am I signing up for as a founding member?">
            You&rsquo;re joining the very first 8-week cohort and helping shape what the Studio becomes.
            You get the live classes, the recordings, the growing practice library, a member&rsquo;s
            rate on private lessons, and a locked founding rate if you continue month-to-month. It&rsquo;s
            intentionally small — fifteen musicians — so it stays a real circle. Your honest feedback is
            part of the deal.
          </FaqItem>
          <FaqItem q="What if the Studio isn't right for me?">
            That&rsquo;s exactly what the first conversation is for. Before anyone joins, we talk — no
            pitch, no pressure — to make sure the Studio is genuinely a fit for where you are and what
            you need. If it isn&rsquo;t, I&rsquo;ll tell you, and point you toward something that is.
          </FaqItem>
        </div>
      </div>
    </section>);
}

// ─── 11 STAKES ───────────────────────────────────────────────────────────────
function StudioStakes({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-stakes on-dark deeper" data-screen-label="Stakes">
      <div className="wrap reveal" ref={ref}>
        <InkMark center />
        <span className="kicker on-dark" style={{ justifyContent: 'center', display: 'inline-flex' }}>Begin</span>
        <h2 className="h-display" style={{ color: '#fff', marginTop: '24px' }}>
          You can keep pushing through.<br /><span className="hl">Or you can finally learn another way.</span>
        </h2>
        <p className="body">
          Every year spent fighting your body is a year of music you don&rsquo;t get to make freely.
          It doesn&rsquo;t have to be the price of playing. There&rsquo;s a skill that changes
          everything, a community ready to grow alongside you, and a teacher who&rsquo;s been where
          you are. <em className="gold">The first step is just a conversation.</em>
        </p>
        <div className="ctas">
          <a className="btn" href="/pwp">Start with Perform Without Pain</a>
        </div>
        <p className="studio-pwp-note center">The Studio starts with Perform Without Pain — <a href="/pwp">join the waiting list there</a>.</p>
        <p className="stakes-third">
          <button className="btn-link" onClick={() => onCTA('pathform')}>
            Not ready to talk? Tell me about yourself →
          </button>
        </p>
      </div>
    </section>);
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function StudioFooter() {
  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 = {
    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.
            </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</span>
            <a href="/privacy">Privacy &amp; Terms of Service</a>
            <a href="/refunds">Refunds</a>
          </div>
        </div>
      </div>
    </footer>);
}

Object.assign(window, {
  StudioHero, TheTurn, WhatItIs, WhoFor, Circle, Guide, Seasons,
  Testimonials, Founding, Faq, StudioStakes, StudioFooter,
});
