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

// ─── 01 HERO — award-led ────────────────────────────────────────────────────
function BookHero({ onCTA }) {
  return (
    <section className="hero v-book" 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">A Book by Joseph Arnold</span>
          <h1 className="h-display">Soulforce</h1>
          <p className="book-subtitle">
            How to discover your artistic purpose, create more freely, and make art that matters
          </p>
          <p className="lead">
            For artists who want their work to actually matter — to inspire, heal, and connect.
            <span className="for-readers">For readers of Julia Cameron, Elizabeth Gilbert,
            Alex Grey, and Rick Rubin.</span>
          </p>
          <blockquote className="hero-blurb">
            &ldquo;A deeply inspiring and hopeful vision for how a more fulfilling creative
            process can create a better world.&rdquo;
            <span className="attrib">— Raji M. · Fingerstyle guitarist</span>
          </blockquote>
          <div className="hero-cta-row">
            <button className="btn" onClick={() => onCTA('chapter')}>
              Read the first chapter free
            </button>
            <a className="btn outline" href="https://a.co/d/0gpcNaOG" target="_blank" rel="noopener noreferrer">
              Order the book
            </a>
          </div>
          <p className="hero-avail">
            Available now through online sellers and at Joseph&rsquo;s in-person events.
          </p>
        </div>
        <div className="hero-cover">
          <img src="assets/book-cover.png" alt="Soulforce by Joseph Arnold — book cover" />
        </div>
      </div>
    </section>
  );
}

// ─── 02 AWARDS — quiet seal strip ───────────────────────────────────────────
function Awards({ onCTA }) {
  const ref = useReveal();
  const items = [
    { seal: 'assets/award-bigbook.png', rank: 'Winner', name: '2024 NYC Big Book Award — Arts & Entertainment' },
    { seal: 'assets/award-hoffer.png', rank: 'Finalist', name: '2025 Eric Hoffer Award' },
    { seal: 'assets/award-niea.png', rank: 'Finalist', name: '2025 National Indie Excellence Award' },
  ];
  return (
    <section className="section s-awards" data-screen-label="02 Awards">
      <div className="wrap reveal" ref={ref}>
        <div className="awards-strip">
          <span className="awards-lead">Winner of multiple book awards</span>
          {items.map((it, i) => (
            <div className="award-item" key={i}>
              <img className="seal" src={it.seal} alt={`${it.rank} — ${it.name}`} />
              <div className="meta">
                <span className="award-rank">{it.rank}</span>
                <span className="award-name">{it.name}</span>
                <button className="award-link" onClick={() => onCTA('award')}>
                  See the award
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 02.5 PRAISE — authority strip ───────────────────────────────────────────
function Praise() {
  const ref = useReveal();
  const praise = [
    {
      q: <>Deeply moving and wonderfully practical. <em>Soulforce</em> empowers artists to address their creative and physical blocks and make the kind of art the world needs right now.</>,
      name: 'Marci Shimoff',
      cred: <>#1 <em>New York Times</em> bestselling author, <em>Happy for No Reason</em></>,
    },
    {
      q: <>Arnold’s advice releases our innate creative energies, honors wildness, and restores hope. His account is both deeply spiritual and eminently practical. We are lucky to have it.</>,
      name: 'Patrick Curry, PhD',
      cred: <>Author of <em>Art and Enchantment</em></>,
    },
    {
      q: <>An impassioned plea for the necessity of the arts in our fragmented society. Though written with musicians in mind, all creative people will benefit from Joseph’s beautifully written and practical suggestions.</>,
      name: 'Martha Hansen Fertman, EdD',
      cred: 'Director, Philadelphia School for the Alexander Technique',
    },
  ];
  return (
    <section className="section s-praise" data-screen-label="02.5 Praise">
      <div className="wrap reveal" ref={ref}>
        <div className="praise-head">
          <span className="kicker">Praise</span>
        </div>
        <div className="praise-grid">
          {praise.map((it, i) => (
            <figure className="praise-card" key={i}>
              <blockquote>{it.q}</blockquote>
              <figcaption>
                <span className="praise-name">{it.name}</span>
                <span className="praise-cred">{it.cred}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 03 WHAT'S OURS TO DO ────────────────────────────────────────────────────
function WhatsOurs() {
  const ref = useReveal();
  return (
    <section className="section s-whatsours on-dark" data-screen-label="03 What's Ours To Do">
      <EnsoBG className="enso-bg" speed={0} rotate={-18} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">The Invitation</span>
        <h2 className="h-section">What&rsquo;s ours to do, as artists, in a world gone mad?</h2>
        <div className="whatsours-body">
          <p>
            Many artists, musicians, and creatives share a secret fear: that their art
            doesn&rsquo;t really matter — that it isn&rsquo;t practical or useful enough to make
            a tangible contribution to a world in need.
          </p>
          <p className="turn">This couldn&rsquo;t be further from the truth.</p>
          <p>
            The purpose of art is to bring us more alive, to connect us with something bigger
            than ourselves, to inspire, heal, and bring us together. These are universal human
            needs whose fulfillment gives life meaning, purpose, and belonging — and without
            which life becomes a dry, dusty bone.
          </p>
          <p>
            But to make art that fulfills this purpose, you first have to come to terms with
            creating in an extractive, consumer-driven society.
          </p>
          <p className="soulforce-def">
            <em>Soulforce</em> — the transformative energy that comes from facing creative
            challenges from a place of wholeness, aliveness, and connection — can breathe new
            life into your work and change how you experience your art and its impact on you,
            your community, and the world.
          </p>
          <p>
            Through his Soulforce Arts Approach, Joseph Arnold helps you see art through the
            lens of <em className="gold">deep humanity and interbeing</em>, and offers a
            curriculum for moving from fear, doubt, and disconnection to a place where art
            becomes a tangible expression of love, life, and the divine in all of us.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── 04 WHAT READERS SAY ─────────────────────────────────────────────────────
function Readers() {
  const ref = useReveal();
  const quotes = [
    {
      q: "This book brought me to tears more than once. I’m a visual artist who hadn’t made much work in years, after some dark, turbulent times. Joseph’s words gave me the inspiration to keep going — to express my creative magic and integrate the darkness with the joy.",
      name: 'Emily C.', role: 'Visual artist', photo: 'assets/testi-emily.png',
    },
    {
      q: "Soulforce showed me that being kind to my body, heart, and soul is the key. It healed the place in me that never felt good enough, and gave me hope I can finally move beyond the tendinitis that’s held me back — and reclaim the joy and magic that first drew me to music.",
      name: 'Elena R.', role: 'Concert pianist', photo: 'assets/testi-elena.png',
    },
    {
      q: "I love what I do, but my career had turned into a grind — living gig to gig, taking work that made me feel less whole, asking myself, ‘Is this really why I became a musician?’ Soulforce gave me a bigger vision, and a way to reconnect to my creative life force and be of real service through it.",
      name: 'Marie D.', role: 'Oboist & music teacher', photo: 'assets/testi-marie.png',
    },
  ];
  return (
    <section className="section s-readers on-mist" data-screen-label="04 What Readers Say">
      <EnsoBG className="enso-bg" speed={0} rotate={-18} />
      <div className="wrap reveal" ref={ref}>
        <div className="readers-head">
          <span className="kicker">What Readers Say</span>
          <h2 className="h-section">Words for things they&rsquo;d felt their whole lives.</h2>
        </div>
        <div className="readers-grid">
          {quotes.map((it, i) => (
            <figure className="reader-card" key={i}>
              <blockquote>{it.q}</blockquote>
              <figcaption className="reader-cite">
                <img className="reader-avatar" src={it.photo} alt={it.name} />
                <span className="reader-name">{it.name}<span className="reader-role">{it.role}</span></span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 05 DISCOVER A NEW ARTISTIC HORIZON ─────────────────────────────────────
function Horizon() {
  const ref = useReveal();
  const items = [
    { t: 'Find your real voice', d: 'Let your Soulforce guide what you make and how you make it.' },
    { t: 'Make a living without selling out', d: 'Build a creative career that actually pays and still lines up with what you believe.' },
    { t: 'Create with purpose', d: 'Shape your creative life around something that genuinely means something to you.' },
    { t: 'Make art that does some good', d: 'For the people around you, and for the world.' },
    { t: 'Fall back in love with it', d: 'Get back the joy and ease that made you pick up your instrument in the first place.' },
    { t: 'Learn to play with ease', d: 'Nine simple lessons from the Alexander Technique that take the pain and strain out of playing.' },
    { t: "Heal what's been hurting", d: 'Let go of the physical and emotional toll of years of pushing too hard.' },
  ];
  return (
    <section className="section s-horizon on-dark" data-screen-label="05 Horizon">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="horizon-head">
          <span className="kicker on-dark">The Transformation</span>
          <h2 className="h-section">What changes <span className="hl">when you read this.</span></h2>
        </div>
        <ul className="horizon-list">
          {items.map((it, i) => (
            <li className="horizon-item" key={i}>
              <span className="horizon-label">{it.t}</span>
              <p>{it.d}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ─── 06 INSIDE THE BOOK ──────────────────────────────────────────────────────
function InsideTheBook() {
  const ref = useReveal();
  const sections = [
    {
      img: 'assets/book-spread-1.png', num: 'Section One',
      title: 'The Arts in a World Gone Mad',
      body: "Artists and artistic institutions aren't immune to the broader challenges of our world. Rooted in a mindset of separation, we see ourselves and our creations as isolated rather than interconnected. This section names that mindset and offers the Soulforce Arts Approach as a remedy.",
    },
    {
      img: 'assets/book-spread-2.png', num: 'Section Two',
      title: 'The Heart of Soulforce Artistry',
      body: "The purpose of art is to come more to life, to awaken to a larger reality, to heal. But this purpose can get lost in modern life, turning art into routine. If you reconnect with your inner guidance, you'll create with renewed authenticity and heart.",
    },
    {
      img: 'assets/book-spread-3.png', num: 'Section Three',
      title: 'Holistic Values Development',
      body: 'So much of what we do stems from division, self-centeredness, and insecurity — fueling both global chaos and the challenges artists face. By understanding how individual and societal values evolve, we can pivot toward a more cohesive, compassionate way of life, and toward richer artistry and deeper impact.',
    },
    {
      img: 'assets/book-spread-4.png', num: 'Section Four',
      title: 'Practical Soulforce',
      body: 'Tangible methods for harnessing Soulforce in how you create, practice, perform, and teach — plus a blueprint for the thing that can seem unattainable: a thriving, meaningful artistic career that marries your Soulforce, your financial needs, and a dedication to the greater good.',
    },
  ];
  return (
    <section className="section s-inside on-light" data-screen-label="06 Inside the Book">
      <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="inside-head">
          <span className="kicker">Inside the Book</span>
          <h2 className="h-section">Four parts, one path.</h2>
          <p className="body">
            <em className="title-italic" style={{ fontStyle: 'italic' }}>Soulforce</em> moves
            through four sections — from naming what&rsquo;s gone wrong to a real plan for a
            creative life that holds you up.
          </p>
        </div>
        <div className="inside-rows">
          {sections.map((s, i) => (
            <div className={`inside-row ${i % 2 === 1 ? 'flip' : ''}`} key={i}>
              <figure className="inside-figure">
                <img src={s.img} alt={`Spread from ${s.title}`} />
              </figure>
              <div className="inside-copy">
                <div className="inside-section-num">{s.num}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="interludes">
          <span className="interludes-flag">Woven throughout</span>
          <div className="interludes-main">
            <h3>Mind-Body Interludes</h3>
            <p>
              Nine lessons from the <em>Alexander Technique</em> — a century-old practice that
              turns unwanted tension into ease and graceful movement — anchor the Soulforce Arts
              Approach in your body, so effortlessness becomes possible even in the most demanding
              creative work.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 07 JOSEPH'S JOURNEY ─────────────────────────────────────────────────────
function Journey() {
  const ref = useReveal();
  return (
    <section className="section s-journey on-dark" data-screen-label="07 Joseph's Journey">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="journey-portrait" role="img" aria-label="Joseph Arnold"></div>
        <div className="journey-copy">
          <span className="kicker on-dark">The Author</span>
          <h2 className="h-section">How I got here.</h2>
          <div className="body">
            <p>
              I&rsquo;m a professional violinist and a certified Alexander Technique teacher, and
              I&rsquo;ve spent years figuring out how to make and teach art from a more holistic
              place. The repetitive strain injuries I sustained in music school came from the
              outdated notion that musical mastery is achieved through effort and virtuosity
              alone. My journey since then taught me that it actually requires the development of
              your whole self: mind, body, and soul.
            </p>
            <p>
              <em className="title-italic">Soulforce</em> is everything I&rsquo;ve learned, put
              into one book — meant to reignite your spark and change how your art touches the
              people around you.
            </p>
          </div>
          <p className="signature">Joseph Arnold</p>
        </div>
      </div>
    </section>
  );
}

// ─── 08 THIS BOOK IS FOR YOU IF ──────────────────────────────────────────────
function ForYou() {
  const ref = useReveal();
  const items = [
    { want: "You want to make art that's real and means something", rest: ' — but everything around you pushes you toward the shallow and the show-offy.' },
    { want: 'You want to create freely,', rest: ' but perfectionism, self-doubt, or pain keeps getting in the way.' },
    { want: 'You want your work and your income to line up with what you believe', rest: ' — but you worry the money won\u2019t add up, or that you\u2019ll have to sell out to make it.' },
    { want: 'You want to be around artists who care about more than just their careers', rest: ' — but you often feel alone, or worry you\u2019re \u201Ctoo idealistic.\u201D' },
    { want: 'You want your art to make a real difference', rest: ' — but some part of you fears it isn\u2019t practical enough to count.' },
    { want: 'You love your art,', rest: ' but somewhere along the way it started to feel like a grind — and you want the joy back.' },
  ];
  return (
    <section className="section s-foryou on-mist" data-screen-label="08 For You If">
      <div className="wrap reveal" ref={ref}>
        <div className="foryou-head">
          <span className="kicker">A Book For You</span>
          <h2 className="h-section">This book is for you if&hellip;</h2>
        </div>
        <ul className="foryou-list">
          {items.map((it, i) => (
            <li className="foryou-item" key={i}>
              <span className="mark" aria-hidden="true"></span>
              <p><span className="want">{it.want}</span>{it.rest}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ─── 08.5 FIVE STARS ON AMAZON ───────────────────────────────────────────────
function AmazonReviews() {
  const ref = useReveal();
  const reviews = [
    {
      q: 'Brilliantly refreshing and informative. It gave me a new feeling of purpose and put a spring in my step on my journey as an artist. Yes — it was an inspiration.',
      name: 'Phyllis C.',
    },
    {
      q: 'Every time I pick it up I learn something new — a valuable resource for artists and creative entrepreneurs. The premise is so thought-provoking. It’s helping me disengage from hustle culture and get back to why I love making art.',
      name: 'Amazon customer',
    },
    {
      q: 'I’m not an artist, but I found this book so inspiring and useful for all areas of life. Using less effort rather than more, and tuning into our “inner audience,” makes you more effective and joyful at everything — performing, talking with a friend, playing catch with a child. It’s rare that I sit and read a book these days, but I had a hard time putting this one down.',
      name: 'Tara W.',
    },
  ];
  return (
    <section className="section s-amazon on-light" data-screen-label="08.5 Amazon Reviews">
      <div className="wrap reveal" ref={ref}>
        <div className="amazon-head">
          <span className="kicker">Five-star reviews on Amazon</span>
        </div>
        <div className="amazon-grid">
          {reviews.map((it, i) => (
            <figure className="amazon-card" key={i}>
              <div className="amazon-stars" aria-label="Rated five out of five stars">★★★★★</div>
              <blockquote>{it.q}</blockquote>
              <figcaption className="amazon-cite">— {it.name}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 09 GET THE BOOK ─────────────────────────────────────────────────────────
function GetTheBook({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-getbook on-dark" data-screen-label="09 Get the Book">
      <EnsoBG className="enso-bg" speed={0} rotate={-24} />
      <div className="wrap reveal" ref={ref}>
        <div className="getbook-cover">
          <img src="assets/book-cover.png" alt="Soulforce by Joseph Arnold — book cover" />
        </div>
        <div className="getbook-copy">
          <span className="blurb-meta">Get the Book</span>
          <h2 className="h-section">Soulforce</h2>
          <p className="getbook-sub">
            How to discover your artistic purpose, create more freely, and make art that matters.
            <strong> Winner of the 2024 NYC Big Book Award.</strong> Available now through online
            sellers and at Joseph&rsquo;s in-person events.
          </p>
          <blockquote className="pull-quote">
            &ldquo;Soulforce taught me a way to approach the piano that feels more real,
            comfortable, and kind to my body. I can now see how my music can serve something
            larger than myself — a way to connect with others and make the world a little
            better.&rdquo;
            <span className="attrib">— Raquel B. · Pianist &amp; translator</span>
          </blockquote>
          <div className="hero-cta-row">
            <button className="btn" onClick={() => onCTA('chapter')}>
              Read the first chapter free
            </button>
            <a className="btn outline" href="https://a.co/d/0gpcNaOG" target="_blank" rel="noopener noreferrer">
              Order the book
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 10 ONE QUIET DOOR ───────────────────────────────────────────────────────
function QuietDoor({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-door" data-screen-label="10 One Quiet Door">
      <div className="wrap reveal" ref={ref}>
        <div className="door-mark" aria-hidden="true"></div>
        <p>
          If the book named something you&rsquo;ve been carrying — not only in your creative life
          but in your body, in the tension or pain or anxiety that shows up when you play —
          there&rsquo;s a place to take the next step. The free <em>Musician&rsquo;s Tension Reset
          Lab</em> is where the ideas in Soulforce become something you can feel.
        </p>
        <button className="door-link" onClick={() => onCTA('lab')}>
          Experience the work — join the free Tension Reset Lab
        </button>
      </div>
    </section>
  );
}

// ─── 11 CONTACT THE AUTHOR ───────────────────────────────────────────────────
function Contact({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-contact" data-screen-label="11 Contact">
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">Contact</span>
        <h2 className="h-section">Contact the author.</h2>
        <p>
          For inquiries about <em style={{ fontStyle: 'italic' }}>Soulforce</em> or to book Joseph
          for a speaking engagement, get in touch.
        </p>
        <div className="ctas">
          <a className="btn" href="mailto:joseph@soulforcearts.com">
            Contact Joseph
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function BookFooter() {
  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 = {
    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={submit}>
                <input type="text" placeholder="First name" value={name} onChange={(e) => setName(e.target.value)} aria-label="First name" className="name-field" />
                <input type="email" placeholder="Email address" value={email} onChange={(e) => setEmail(e.target.value)} required aria-label="Email" />
                <button type="submit" className="btn">Send Chapter</button>
                <p className="newsletter-foot">No spam. Unsubscribe in one click.</p>
              </form>
            ) : (
              <div className="footer-confirm">
                <div>
                  <div style={{ color: '#fff', fontWeight: 600, marginBottom: '4px' }}>Welcome aboard.</div>
                  <div style={{ fontSize: '13px' }}>Your first chapter is on its way to <strong style={{ color: '#fff' }}>{email}</strong>.</div>
                  <HearChips email={email} source="Newsletter" onDark />
                </div>
              </div>
            )}
          </div>
        </div>
        <nav className="footer-nav" aria-label="Explore">
          <a href="/tensionreset">Free Lab</a>
          <a href="/trap">The Try-Harder Trap</a>
          <a href="/pwp">Perform Without Pain</a>
          <a href="/ybiyi">Your Body Is Your Instrument</a>
          <a href="/studio">The Studio</a>
          <a href="/book">The Book</a>
          <a href="/about">About</a>
        </nav>
        <div className="footer-meta">
          <a className="brand-row" href="/" style={{ textDecoration: 'none' }}>
            <div className="mark" aria-hidden="true"></div>
            <div className="name">Soulforce Arts<small>INSTITUTE</small></div>
          </a>
          <div className="footer-socials">
            <a href="https://www.instagram.com/soulforcearts/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">{Icon.instagram}</a>
            <a href="https://www.youtube.com/@soulforcearts" target="_blank" rel="noopener noreferrer" aria-label="YouTube">{Icon.youtube}</a>
            <a href="https://substack.com/@soulforcearts" target="_blank" rel="noopener noreferrer" aria-label="Substack">{Icon.substack}</a>
          </div>
          <div className="footer-legal">
            <span>© 2026 Soulforce Arts Institute · Soulforce Arts™</span>
            <a href="/privacy">Privacy &amp; Terms of Service</a>
            <a href="/refunds">Refunds</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  BookHero, Awards, Praise, WhatsOurs, Readers, Horizon, InsideTheBook,
  Journey, ForYou, AmazonReviews, GetTheBook, QuietDoor, Contact, BookFooter,
  EnsoBG, EnsoHero, useReveal,
});