// Soulforce Arts — sections (revision: world-class polish pass)
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;
      const offset = -dy * speed;
      el.style.transform = `translateY(${offset}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} />;
}

// Hero enso — uses different class (always visible regardless of intensity tweak)
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 rect = el.getBoundingClientRect();
      const dy = rect.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 ───────────────────────────────────────────────────────────────
// ─── InkMark ──────────────────────────────────────────────────────────────
function InkMark({ center = false, className = '' }) {
  return <div className={`ink-mark ${center ? 'center' : ''} ${className}`.trim()} aria-hidden="true" />;
}

function Hero({ variant, onCTA }) {
  const copy =
  <>
      <span className="kicker on-dark">Soulforce Arts Institute</span>
      <h1 className="h-display" style={{ margin: '20px 0 28px' }}>
        Ease is a skill.<br /><span className="hl">And it can be learned.</span>
      </h1>
      <p className="lead">
        They told you to relax. Nobody ever told you <em className="gold-em-i">how</em>.<br />
        Ease isn&rsquo;t random — it&rsquo;s a <em className="gold-em">skill</em>, as learnable as any
        scale or shift. And it&rsquo;s the one thing your training left out.
      </p>
      <div className="hero-cta-row">
        <button className="btn" onClick={() => onCTA('chapter')}>
          Read the first chapter free        </button>
        <button className="btn outline" onClick={() => onCTA('intake', 'Hero')}>
          Tell me about yourself
        </button>
      </div>
    </>;


  if (variant === 'split') {
    return (
      <section className="hero v-split" data-screen-label="01 Hero">
        <div className="hero-left">
          <EnsoHero speed={0.04} />
          <div className="hero-copy">{copy}</div>
        </div>
        <div className="hero-right" aria-hidden="true"></div>
      </section>);

  }
  if (variant === 'inset') {
    return (
      <section className="hero v-inset" data-screen-label="01 Hero">
        <EnsoHero speed={0.05} />
        <div className="hero-wrap" style={{ display: 'grid' }}>
          <div className="hero-copy">{copy}</div>
          <div className="hero-photo" role="img" aria-label="Joseph Arnold, violin in hand"></div>
        </div>
      </section>);

  }
  // default: fullbleed sunset
  return (
    <section className="hero v-fullbleed" data-screen-label="01 Hero">
      <div className="hero-photo" aria-hidden="true"></div>
      <EnsoHero speed={0.05} />
      <div className="hero-wrap">
        <div className="hero-copy">{copy}</div>
      </div>
    </section>);

}

// ─── 02 PROBLEM ────────────────────────────────────────────────────────────
// ─── Thin Lab banner — echoes the free Lab right under the hero ─────────────
function LabBanner({ onCTA }) {
  return (
    <button className="lab-banner" onClick={() => onCTA('lab')} aria-label="Save your spot at the free Tension Reset Lab">
      <span className="lab-banner-tag"><span className="lab-dot"></span>Free this month</span>
      <span className="lab-banner-text">
        The <strong>Musician&rsquo;s Tension Reset Lab</strong> — a live 75-minute drop-in. Feel the shift for yourself.
      </span>
      <span className="lab-banner-cta">Join the free Lab</span>
    </button>
  );
}

function Problem() {
  const ref = useReveal();
  return (
    <section className="section s-problem on-light" data-screen-label="02 Problem">
      <EnsoBG className="enso-bg" speed={0.05} />
      <div className="wrap reveal" ref={ref}>
        <div className="problem-visual">
          <div className="problem-photo" role="img" aria-label="A musician hunched over a piano, weighed down" />
        </div>
        <div className="problem-copy">
          <span className="kicker">The Problem</span>
          <h2 className="h-section">You know something isn&rsquo;t right.</h2>
          <div className="narrative">
            <p className="dropcap">
              <span className="dropcap-letter">Y</span>ou&rsquo;ve tried everything they told you to try. You stretched.
              You strengthened. You rested. You bought the better shoulder rest,
              the ergonomic chair, the new setup. Maybe you saw a physical
              therapist. Maybe a teacher told you to push through.
            </p>
            <p className="tight">And maybe it helped, a little. For a while.</p>
            <p>
              <em className="gold">But the tension always came back.</em> It comes back the moment you
              really play — in the audition, the solo, the phrase you care about
              most. You&rsquo;re practicing more and enjoying it less. And
              somewhere in there, a quiet voice started asking whether you can
              keep doing this at all.
            </p>
            <p>The truth is that it&rsquo;s not your fault&hellip;</p>
          </div>
          <div className="pull">
            You just weren&rsquo;t taught the one thing that would actually relieve it.
          </div>
        </div>
      </div>
    </section>);

}

// ─── 03 REFRAME — Try-Harder Trap with animated loop ───────────────────────
function LoopDiagram() {
  const ref = useRef(null);
  const [animated, setAnimated] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {setAnimated(true);io.disconnect();}
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const cx = 200,cy = 200,R = 130;
  const nodes = [
  { label: 'TENSION ARISES', angle: -90 },
  { label: 'TRY HARDER', angle: 30 },
  { label: 'HABIT DEEPENS', angle: 150 }];

  const toXY = (a) => {
    const rad = a * Math.PI / 180;
    return { x: cx + R * Math.cos(rad), y: cy + R * Math.sin(rad) };
  };
  const arcBetween = (a1, a2) => {
    let aa2 = a2;
    if (aa2 < a1) aa2 += 360;
    const p1 = toXY(a1);
    const p2 = toXY(aa2);
    const midA = (a1 + aa2) / 2;
    const midRad = midA * Math.PI / 180;
    const mx = cx + (R + 28) * Math.cos(midRad);
    const my = cy + (R + 28) * Math.sin(midRad);
    return `M ${p1.x} ${p1.y} Q ${mx} ${my} ${p2.x} ${p2.y}`;
  };

  return (
    <div className="loop-diagram" ref={ref}>
      <svg viewBox="0 0 400 400" aria-hidden="true">
        <defs>
          <marker id="goldArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="#DEBE51" />
          </marker>
        </defs>

        <circle cx={cx} cy={cy} r={R + 32} fill="none" stroke="rgba(222,190,81,0.06)" strokeWidth="1" />
        <circle cx={cx} cy={cy} r={R - 26} fill="none" stroke="rgba(222,190,81,0.08)" strokeWidth="1" strokeDasharray="2 5" />

        {nodes.map((n, i) => {
          const next = nodes[(i + 1) % 3];
          const a1 = n.angle + 24;
          const a2 = next.angle - 24;
          const d = arcBetween(a1, a2);
          return (
            <path
              key={i}
              d={d}
              fill="none"
              stroke="#DEBE51"
              strokeWidth="1.3"
              strokeDasharray="600"
              strokeDashoffset={animated ? 0 : 600}
              style={{ transition: `stroke-dashoffset 1.4s ease ${0.3 + i * 0.5}s` }}
              markerEnd="url(#goldArrow)" />);


        })}

        {nodes.map((n, i) => {
          const { x, y } = toXY(n.angle);
          return (
            <g key={i}
            style={{
              opacity: animated ? 1 : 0,
              transform: animated ? 'none' : 'scale(0.7)',
              transformOrigin: `${x}px ${y}px`,
              transition: `opacity .7s ease ${0.15 + i * 0.5}s, transform .7s ease ${0.15 + i * 0.5}s`
            }}>
              
              <circle cx={x} cy={y} r="46" fill="rgba(15,36,34,0.6)" stroke="rgba(222,190,81,0.55)" strokeWidth="0.85" />
              <text x={x} y={y - 7} textAnchor="middle" className="loop-node-label">
                <tspan x={x} dy="0">{n.label.split(' ')[0]}</tspan>
                <tspan x={x} dy="14">{n.label.split(' ').slice(1).join(' ')}</tspan>
              </text>
            </g>);

        })}

        <text x={cx} y={cy - 28} textAnchor="middle"
        fontFamily="Montserrat" fontSize="10" letterSpacing="0.28em" fill="rgba(255,255,255,0.55)"
        style={{ opacity: animated ? 1 : 0, transition: 'opacity .8s ease 1.4s' }}>
          THE
        </text>
        <text x={cx} y={cy - 4} textAnchor="middle"
        fontFamily="TheQueen, serif" fontSize="22" fill="#DEBE51" letterSpacing="0.02em"
        style={{ opacity: animated ? 1 : 0, transition: 'opacity .8s ease 1.6s', textTransform: 'uppercase' }}>
          TRY-HARDER
        </text>
        <text x={cx} y={cy + 24} textAnchor="middle"
        fontFamily="TheQueen, serif" fontSize="22" fill="#DEBE51" letterSpacing="0.02em"
        style={{ opacity: animated ? 1 : 0, transition: 'opacity .8s ease 1.8s' }}>
          TRAP
        </text>
      </svg>
    </div>);

}

function Reframe() {
  const ref = useReveal();
  return (
    <section className="section s-reframe on-dark" data-screen-label="03 Reframe">
      <EnsoBG className="enso-bg" speed={0.07} rotate={20} />
      <div className="wrap reveal" ref={ref}>
        <div>
          <span className="kicker on-dark">The Reframe</span>
          <h2 className="h-section" style={{ color: '#fff' }}>
            The harder you try, the worse it gets.
          </h2>
          <p className="body">
            Here&rsquo;s what almost no one understands about tension: it&rsquo;s
            not a strength problem or a flexibility problem. It&rsquo;s a{' '}
            <em className="gold">coordination habit</em> — one your body learned right alongside your
            technique, and one it now repeats automatically, especially under
            pressure.
          </p>
          <p className="body">
            That&rsquo;s why trying harder backfires. Every effort to force your
            way out of tension only deepens the habit. I call it the{' '}
            <span className="trap-name">Try-Harder Trap</span>, and nearly every
            struggling musician is caught in it.
          </p>
          <p className="summary">
            <em className="summary-line">The way out isn&rsquo;t more effort.</em><br />
            <em className="summary-line">It&rsquo;s a different skill entirely.</em>
          </p>
          <div className="ctas" style={{ marginTop: '26px' }}>
            <a className="btn outline gold" href="/trap">
              Watch the 45-min class — $27
            </a>
          </div>
        </div>
        <LoopDiagram />
      </div>
    </section>);

}

// ─── 04 JOSEPH ─────────────────────────────────────────────────────────────
function Joseph({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-joseph on-light" data-screen-label="04 Joseph">
      <div className="wrap reveal" ref={ref}>
        <div className="portrait-wrap">
          <div className="portrait" role="img" aria-label="Joseph Arnold portrait" />
        </div>
        <div>
          <span className="kicker">Meet Joseph</span>
          <h2 className="h-section">I almost quit, too.</h2>
          <div className="body">
            <p>
              I&rsquo;m Joseph Arnold — professional violinist, and the creator
              of the Soulforce Arts Approach. Years ago, chronic tension and
              pain nearly ended my playing. I did everything I was supposed to
              do, and nothing worked — because no one had ever taught me the
              real skill underneath it all.
            </p>
            <p>
              When I finally found my way out, I realized the thing that saved
              my playing was never going to be found in a practice room or a
              doctor&rsquo;s office. So I spent the years since turning it into
              something I could teach. Today I&rsquo;m Director of the Soulforce
              Arts Institute, and I help musicians around the world stop
              fighting their bodies and start playing the way they always knew
              they could.
            </p>
          </div>
          <p className="signature">Joseph</p>
          <div style={{ marginTop: '34px' }}>
            <a className="linkish" href="#" onClick={(e) => {e.preventDefault();onCTA('story');}}>
              Read My Full Story
            </a>
          </div>
          <div className="award-strip">
            <span className="award-label">Author of the<br />award-winning <a className="soulforce-link" href="/book"><em style={{ fontStyle: 'italic', color: 'var(--ink)' }}>Soulforce</em></a></span>
            <div className="seals">
              <img className="award-seal" src="assets/award-bigbook.png" alt="NYC Big Book Award 2024 Winner" />
              <img className="award-seal" src="assets/award-hoffer.png" alt="Eric Hoffer Award Finalist" />
              <img className="award-seal" src="assets/award-niea.png" alt="National Indie Excellence Awards Finalist" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── 05 PILLARS ────────────────────────────────────────────────────────────
function Pillars() {
  const ref = useReveal();
  return (
    <section className="section s-pillars on-mist" data-screen-label="05 Pillars">
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">Soulforce Mastery</span>
        <h2 className="h-section">
          Real mastery has three parts.<br /><span className="hl">You were only ever taught one.</span>
        </h2>
        <p className="body intro-body">
          Technique gives form to what you do. Effortlessness is what lets it
          flow freely. And the Knowledge of the Soul is what makes it worth
          doing. You need all three to achieve <em className="gold">Soulforce Mastery</em>.
        </p>

        <div className="pillars">
          <div className="pillar">
            <span className="tag muted">What you were taught</span>
            <div className="numeral">I</div>
            <div className="pmeta">Strand One</div>
            <h3 className="pname">Technique</h3>
            <p className="pdesc-examples">Theory · Training · Mechanics · Repertoire</p>
            <p className="pdesc">
              The form of what you do — what music school obsesses over, and what
              most musicians believe mastery is made of. It matters. <strong style={{ color: 'var(--gold-warm)' }}>But on its
              own, it&rsquo;s not enough.</strong>
            </p>
          </div>

          <div className="pillar mid">
            <span className="tag">The Missing Strand</span>
            <div className="numeral">II</div>
            <div className="pmeta">Strand Two</div>
            <h3 className="pname">Effortlessness</h3>
            <p className="pdesc-examples">Releasing effort · Letting go · Finding flow · Trusting self</p>
            <p className="pdesc">
              The skill of ease — releasing tension in the exact moment it
              arises. No one teaches this beyond &ldquo;you should relax,&rdquo;
              which is no instruction at all. I&rsquo;ve spent years developing
              more than{' '}
              <strong style={{ color: 'var(--gold-warm)' }}>twenty concrete, practical tools</strong>{' '}
              for it. This is where freedom from pain, calm under pressure, and
              your truest sound actually live.
            </p>
          </div>

          <div className="pillar">
            <span className="tag muted">The &ldquo;why&rdquo; behind your music</span>
            <div className="numeral">III</div>
            <div className="pmeta">Strand Three</div>
            <h3 className="pname">Knowledge of the Soul</h3>
            <p className="pdesc-examples">Experience · Intuition · What wants to be expressed</p>
            <p className="pdesc">
              What&rsquo;s inside you that wants to be expressed — <strong style={{ color: 'var(--gold-warm)' }}>the core of who you are</strong>.
              It can be developed with the right methods, but few are taught in
              school, so it rarely gets the attention it deserves. It&rsquo;s what
              brought you to music in the first place and what keeps you going.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// ─── 06 PLAN ───────────────────────────────────────────────────────────────
function Plan() {
  const ref = useReveal();
  const steps = [
  { n: 'I', title: 'Come for the pain relief.',
    copy: 'Learn to release the tension that&rsquo;s been holding you back — and feel the difference in your very first sessions.' },
  { n: 'II', title: 'Stay for the self-discovery and ease.',
    copy: 'Build a real, repeatable practice of ease that transforms your comfort, sound, technique, expression, and confidence.' },
  { n: 'III', title: 'Discover what you&rsquo;re here to play.',
    copy: 'Reconnect with the music that feeds your soul — and become the musician you always knew you could be.' }];

  return (
    <section className="section s-plan on-light" data-screen-label="06 Plan">
      <EnsoBG className="enso-bg" speed={0.05} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">The Path</span>
        <h2 className="h-section">The path is simple.</h2>
        <p className="body intro-body">
          Three movements, in the order that always works.
        </p>
        <div className="plan-path in">
          <svg className="river" viewBox="0 0 1000 32" preserveAspectRatio="none" aria-hidden="true">
            <path d="M 50 24 Q 180 4, 333 16 T 666 16 T 950 14" />
          </svg>
          {steps.map((s, i) =>
          <div className="plan-step" key={i}>
              <div className="dot">{s.n}</div>
              <h4 dangerouslySetInnerHTML={{ __html: s.title }} />
              <p dangerouslySetInnerHTML={{ __html: s.copy }} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── 06.5 FIND YOUR PATH — signal capture / personal recommendation ─────────
function PathFan() {
  const rows = [
    { y: 30, label: 'Something free', sub: 'A chapter · a live Lab', color: '#9cbd56' },
    { y: 125, label: 'A class',        sub: 'Learn the skill, step by step', color: '#6f97d6' },
    { y: 220, label: 'A conversation', sub: 'Talk it through with me', color: '#e2c25c' },
  ];
  const ox = 30, oy = 125;
  return (
    <div className="path-fan">
      <svg viewBox="0 0 200 250" preserveAspectRatio="xMinYMid meet" aria-hidden="true">
        <circle cx={ox} cy={oy} r="6" fill="var(--gold)" />
        <circle cx={ox} cy={oy} r="13" fill="none" stroke="var(--gold)" strokeOpacity="0.4" />
        {rows.map((r, i) => (
          <path key={i} className="pf-path"
            d={`M ${ox} ${oy} C 110 ${oy}, 140 ${r.y}, 190 ${r.y}`}
            fill="none" stroke={r.color} strokeWidth="1.6" />
        ))}
        {rows.map((r, i) => (
          <circle key={`d${i}`} className="pf-end" cx={190} cy={r.y} r="4.5" fill={r.color} />
        ))}
      </svg>
      <div className="path-fan-labels">
        {rows.map((r, i) => (
          <div className="pf-row" key={i}>
            <div className="pf-label" style={{ ['--pf-accent']: r.color }}>{r.label}</div>
            <div className="pf-sub">{r.sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FindYourPath({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-findpath on-dark" id="find-your-path" data-screen-label="06.5 Find Your Path">
      <EnsoBG className="enso-bg" speed={0.06} rotate={-25} />
      <div className="wrap reveal" ref={ref}>
        <div className="fp-copy">
          <span className="kicker on-dark">Where To Begin</span>
          <h2 className="h-section">
            Not sure where to start?<br />
            <span className="hl">I&rsquo;ll point you in the right direction.</span>
          </h2>
          <p className="body">
            Tell me a little about yourself and what you&rsquo;re dealing with, and
            I&rsquo;ll personally recommend your next step — something free, a class,
            or a conversation. No pitch, no pressure. Just a musician who&rsquo;s
            been where you are.
          </p>
          <div className="ctas">
            <button className="btn" onClick={() => onCTA('intake', 'Section 6.5')}>
              Tell me about yourself
            </button>
          </div>
        </div>
        <div className="fp-visual">
          <PathFan />
        </div>
      </div>
    </section>);

}

// ─── 06.6 TENSION RESET LAB — free live drop-in ─────────────────────────────
function TensionResetLab({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-lab on-mist" id="lab" data-screen-label="06.6 Tension Reset Lab">
      <div className="wrap reveal" ref={ref}>
        <div className="lab-visual">
          <div className="lab-card">
            <img src="assets/lab-zoom.png" alt="Musicians in a live Tension Reset Lab on Zoom, arms raised in an exercise" />
            <span className="lab-badge"><span className="lab-dot"></span>Free · Live</span>
            <span className="lab-play" aria-hidden="true"></span>
          </div>
          <p className="lab-caption">A recent Musician&rsquo;s Tension Reset Lab where we learned to release tension in the hardest musical challenges.</p>
        </div>
        <div className="lab-copy">
          <span className="kicker">The Musician&rsquo;s Tension Reset Lab</span>
          <h2 className="h-section">
            Come experience the work —<br /><span className="hl">free.</span>
          </h2>
          <p className="body">
            The Musician&rsquo;s Tension Reset Lab is a free, live online drop-in. In 75 minutes I
            work with a few musicians in real time so you can feel the shift for
            yourself — no lecture, no pressure. The next one is this month.
          </p>
          <div className="ctas">
            <button className="btn" onClick={() => onCTA('lab')}>
              Join the free Lab            </button>
          </div>
          <p className="lab-note">
            Can&rsquo;t make it live? <a href="#" onClick={(e) => { e.preventDefault(); onCTA('lab'); }}>Add your name</a> and
            I&rsquo;ll tell you when the next one runs.
          </p>
        </div>
      </div>
    </section>);

}

// ─── 07 STUDIO ─────────────────────────────────────────────────────────────
function Studio({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-studio on-cobalt" data-screen-label="07 Studio">
      <EnsoBG className="enso-bg" speed={0.07} rotate={180} />
      <div className="wrap reveal" ref={ref}>
        <div>
          <span className="kicker on-dark">Work With Me</span>
          <h2 className="h-section">
            Start with Perform Without Pain.<br /><span className="hl">Then keep growing in the Studio.</span>
          </h2>
          <p className="body">
            <em className="gold">Perform Without Pain</em> is the eight-week program where you release the
            pain and tension at the root and learn the skill of playing freely — the front door to all my
            work. From there, the <em className="gold">Soulforce Arts Studio</em> is where it becomes a
            practice you keep: a small circle of musicians, a weekly live class, and a growing library,
            for as long as you want to grow.
          </p>
          <ul className="studio-list">
            <li>Eight weeks to release pain and tension at the root</li>
            <li>A weekly live class and 20+ practical tools for ease</li>
            <li>Continue month-to-month in the Studio — a small circle of committed musicians</li>
            <li>Private lessons with me whenever you want to go deeper</li>
          </ul>
          <div className="ctas">
            <button className="btn" onClick={() => { window.location.href = '/pwp'; }}>
              Explore Perform Without Pain
            </button>
            <button className="btn outline gold" onClick={() => onCTA('call')}>
              Apply to work with me
            </button>
          </div>
        </div>
        <div className="studio-visual" role="img" aria-label="Joseph teaching" />
      </div>
    </section>);

}

// ─── 08 BOOK ───────────────────────────────────────────────────────────────
function Book({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-book on-dark deeper" data-screen-label="08 Book">
      <EnsoBG className="enso-bg" speed={0.06} rotate={-30} />
      <div className="wrap reveal" ref={ref}>
        <div>
          <span className="kicker on-dark">The Book</span>
          <h2 className="h-section">The full philosophy, <span className="hl">in one book.</span></h2>
          <p className="body">
            <a className="soulforce-link" href="/book"><em className="title-italic">Soulforce</em></a> is the full story —
            the philosophy, the science, and the practical path to mastery
            through ease. Readers tell me it puts words to things they&rsquo;ve
            felt their whole musical lives but could never name.
          </p>
          <blockquote className="pull-quote">
            &ldquo;A deeply inspiring and hopeful vision for how a more
            fulfilling creative process can create a better world.&rdquo;
            <span className="attrib">— Raji Malik · Guitarist</span>
          </blockquote>
          <div className="book-awards">
            <span className="award-label">Award winning</span>
            <div className="seals">
              <img className="award-seal" src="assets/award-bigbook.png" alt="NYC Big Book Award 2024 Winner" />
              <img className="award-seal" src="assets/award-hoffer.png" alt="Eric Hoffer Award Finalist" />
              <img className="award-seal" src="assets/award-niea.png" alt="National Indie Excellence Awards Finalist" />
            </div>
          </div>
          <div className="ctas">
            <button className="btn" onClick={() => onCTA('chapter')}>
              Read the first chapter free            </button>
            <button className="btn-link" onClick={() => onCTA('buy')}>
              Order the book            </button>
          </div>
        </div>
        <div className="cover-wrap">
          <img src="assets/book-cover.png" alt="Soulforce by Joseph Arnold — book cover" />
        </div>
      </div>
    </section>);

}

// ─── 09 SOCIAL PROOF ───────────────────────────────────────────────────────
function SocialProof() {
  const ref = useReveal();
  const items = [
  {
    quote: "In the year I have been taking lessons with him I have experienced more progress in improving my vocal technique than any time previously. I continually get compliments on how natural and easy I look up on stage now — and much of the credit goes to Joseph's instruction.",
    name: "Jessica Renfro",
    role: "Opera Singer",
    photo: "assets/testi-jessica.jpg"
  },
  {
    quote: "Before I studied with Joseph, I was unable to play more than 15 minutes without excruciating, stabbing pain. I thought I wouldn't be able to play again. Now I have never played with such pleasure and less concern about physical problems. No drugs or surgery were necessary — and now I can enjoy playing Bach again.",
    name: "Christophe Merville",
    role: "Violinist",
    photo: "assets/testi-christophe.jpg"
  },
  {
    quote: "Joseph helped me understand the anatomy and psychology of effortless playing. His lessons are well thought-out, entertaining, and insightful. Whether you are a beginner or already have a career in music, I would highly recommend a lesson or a class with Mr. Arnold.",
    name: "Yoni Draiblate",
    role: "Principal Cellist, Florida Orchestra",
    photo: "assets/testi-yoni.jpg"
  }];

  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % items.length), 8000);
    return () => clearInterval(id);
  }, [paused, items.length]);
  return (
    <section className="section s-proof on-light" data-screen-label="09 Social Proof"
    onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <EnsoBG className="enso-bg" speed={0.05} rotate={30} />
      <div className="wrap reveal" ref={ref}>
        <div className="head">
          <span className="kicker">In Their Words</span>
          <h2 className="h-section">These musicians stopped fighting their bodies.</h2>
        </div>
        <div className="testi-stage">
          {items.map((t, idx) =>
          <div key={idx} className={`testi-slide testimonial ${idx === i ? 'active' : ''}`}>
              <div className="testi-portrait" style={{ backgroundImage: `url(${t.photo})` }} role="img" aria-label={t.name} />
              <blockquote>{t.quote}</blockquote>
              <cite><strong>{t.name}</strong> · {t.role}</cite>
            </div>
          )}
        </div>
        <div className="testi-controls">
          <button className="arrow" aria-label="Previous" onClick={() => setI((i - 1 + items.length) % items.length)}>‹</button>
          <div className="testi-dots">
            {items.map((_, idx) =>
            <button key={idx} className={idx === i ? 'active' : ''}
            aria-label={`Testimonial ${idx + 1}`} onClick={() => setI(idx)} />
            )}
          </div>
          <button className="arrow" aria-label="Next" onClick={() => setI((i + 1) % items.length)}>›</button>
        </div>
      </div>
    </section>);

}

// ─── 10 STAKES ─────────────────────────────────────────────────────────────
function Stakes({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-stakes on-dark deeper" data-screen-label="10 Stakes">
      <div className="wrap reveal" ref={ref}>
        <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 learn another way.</span>
        </h2>
        <p className="body">
          Every year you spend fighting your body is a year of music you don&rsquo;t
          get to make freely. The pain doesn&rsquo;t have to be the price of playing.
          The tension doesn&rsquo;t have to win.{' '}
          <em className="gold">There&rsquo;s a skill that changes everything — and it can be learned.</em>
        </p>
        <div className="ctas">
          <button className="btn" onClick={() => onCTA('chapter')}>
            Read the first chapter free          </button>
          <button className="btn outline" onClick={() => onCTA('intake', 'Final CTA')}>
            Tell me about yourself
          </button>
        </div>
        <p className="stakes-third">
          <button className="btn-link" onClick={() => onCTA('lab')}>
            Join the free Lab          </button>
        </p>
      </div>
    </section>);

}

// ─── FOOTER ────────────────────────────────────────────────────────────────
function Footer() {
  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="footer-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">
          <div className="brand-row">
            <div className="mark" aria-hidden="true"></div>
            <div className="name">
              Soulforce Arts
              <small>INSTITUTE</small>
            </div>
          </div>
          <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, {
  Hero, Problem, Reframe, Joseph, Pillars, Plan,
  FindYourPath, TensionResetLab, LabBanner,
  Studio, Book, SocialProof, Stakes, Footer,
  EnsoBG, useReveal
});