// Soulforce Arts — The Try-Harder Trap ($27 webinar) 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 ─────────────────────────────────────────────────────────
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 dy = rect.top + rect.height / 2 - window.innerHeight / 2;
      el.style.transform = `translateY(${-dy * speed}px) rotate(${rotate}deg)`;
      raf = 0;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    tick();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [speed, rotate]);
  return <div ref={ref} className={`enso-bg ${className}`} 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}`} />;
}

// ─── Inline testimonial ─────────────────────────────────────────────────────
function TrapQuote({ quote, name, role, slotId, photo }) {
  return (
    <figure className="trap-quote">
      <blockquote>{quote}</blockquote>
      <figcaption>
        <span className="q-avatar">
          {photo
            ? <img src={photo} alt={name} />
            : <image-slot id={slotId} shape="circle" placeholder="Photo"></image-slot>}
        </span>
        <span className="q-meta">
          <span className="q-name">{name}</span>
          <span className="q-role">{role}</span>
        </span>
      </figcaption>
    </figure>
  );
}

// ═══ 01 HERO ═════════════════════════════════════════════════════════════════
function TrapHero({ onCTA }) {
  return (
    <section className="hero v-trap" data-screen-label="01 Hero">
      <EnsoBG className="enso-bg enso-herobottom" speed={0} rotate={24} />
      <div className="hero-wrap">
        <div className="hero-copy">
          <span className="kicker on-dark">On-Demand Class · 45 Minutes</span>
          <h1 className="h-display">Why trying harder is making your tension <span className="hl">worse</span> — and what actually changes it</h1>
          <p className="lead">
            A 45-minute on-demand class for musicians who&rsquo;ve tried everything — and still
            can&rsquo;t practice without tension taking over.
          </p>
          <div className="trap-buybar">
            <button className="btn" onClick={() => onCTA('checkout')}>Get instant access — $27</button>
          </div>
          <p className="trap-reassure">
            <span>Watch on your own schedule</span>
            <span>14-day refund</span>
            <span>Instrument-aware</span>
          </p>
        </div>
        <div className="hero-visual">
          <span className="visual-badge">$27 · Instant access</span>
          <img className="hero-pack" src="assets/trap-cover.png?v=2" alt="The Try-Harder Trap — on-demand masterclass" />
        </div>
      </div>
    </section>
  );
}

// ═══ 02 THE TRAP ═════════════════════════════════════════════════════════════
function TheTrap() {
  const ref = useReveal();
  return (
    <section className="section s-trap-problem on-light" data-screen-label="02 The Trap">
      <EnsoBG className="enso-bg enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="trap-head">
          <span className="kicker">The Trap</span>
          <h2 className="h-section">You&rsquo;ve done everything right. It still comes back.</h2>
        </div>
        <div className="trap-cols">
          <div className="trap-visual">
            <div className="trap-harp" role="img" aria-label="A harpist’s hands on the strings"></div>
          </div>
          <div className="trap-body">
            <p>You&rsquo;ve stretched. You&rsquo;ve strengthened. You&rsquo;ve been told to &ldquo;just relax.&rdquo;</p>
            <p>And it helps&hellip; for a while. Then you pick up your instrument and the tension comes back.</p>
            <p className="step">Here&rsquo;s what no one told you.</p>
            <p>
              Tension doesn&rsquo;t come from weakness or inflexibility. It&rsquo;s a
              <em className="gold"> coordination habit</em> — one you learned alongside your
              technique, usually without realizing it.
            </p>
            <p className="reveal-line">
              That&rsquo;s why effort makes it worse. You&rsquo;re using the same learned patterns to
              try to fix the learned patterns. It&rsquo;s a trap — and most musicians stay in it for
              years.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 03 WHAT YOU'LL LEARN + PROMISE ══════════════════════════════════════════
function WhatYoullLearn() {
  const ref = useReveal();
  const items = [
    <>Why the <strong>harder you try</strong> to release tension, the more tension you create.</>,
    <>What&rsquo;s <strong>actually causing</strong> your shoulder, wrist, or throat to tighten when you play.</>,
    <>A <strong>live technique you can use today</strong> to interrupt the pattern — with your instrument in hand.</>,
  ];
  return (
    <section className="section s-learn on-dark deeper" data-screen-label="03 What You'll Learn">
      <EnsoBG className="enso-bg enso-botpair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="learn-head">
          <span className="kicker on-dark">In This Class</span>
          <h2 className="h-section">What you&rsquo;ll learn.</h2>
          <p className="learn-sub">45 minutes · three things that change everything</p>
        </div>
        <ul className="learn-list">
          {items.map((t, i) => (
            <li className="learn-item" key={i}>
              <span className="learn-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="learn-text">{t}</span>
            </li>
          ))}
        </ul>
        <div className="promise-card">
          <span className="pc-flag">The promise</span>
          <p>By the end you&rsquo;ll have felt your tension <em>release multiple times</em> with your instrument in your hands.</p>
        </div>
        <p className="learn-note">
          This isn&rsquo;t therapy. It&rsquo;s not another stretching routine. It&rsquo;s
          instrument-aware nervous system work that you can feel working in the first session.
        </p>
      </div>
    </section>
  );
}

// ═══ Testimonial A ═══════════════════════════════════════════════════════════
function QuoteA() {
  const ref = useReveal();
  return (
    <section className="section s-quote-a" data-screen-label="Testimonial — Alyssa">
      <EnsoBG className="enso-bg enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <TrapQuote
          photo="assets/testi-alyssa.png"
          quote={<>Even though I studied musician wellness in college, I still struggled with one major nuisance: knots in my neck and shoulders. I stretch every day, massage my shoulders, try to be mindful of my technique, and rest whenever I feel fatigued. But the knots were still there and I couldn&rsquo;t practice as much as I&rsquo;d like. <em className="q-hl">The Try-Harder Trap showed me that there&rsquo;s nothing wrong with my body physically, and that it&rsquo;s about how to have more choice in responding to stressful situations</em> — whether it&rsquo;s playing a difficult passage, performing, or just having a hectic day. I absolutely recommend this course to other professional musicians, and have already shared it with my friends!</>}
          name="Alyssa L." role="Violinist" />
      </div>
    </section>
  );
}

// ═══ 04 WHO THIS IS FOR ══════════════════════════════════════════════════════
function WhoForTrap() {
  const ref = useReveal();
  const items = [
    { who: 'Violinists & violists', rest: ' with shoulder or neck tension that won\u2019t release.' },
    { who: 'Pianists', rest: ' whose wrists or forearms burn after 20\u201330 minutes of practice.' },
    { who: 'Guitarists', rest: ' whose fretting hand cramps or locks up.' },
    { who: 'Singers', rest: ' whose throat tightens when reaching for high notes.' },
    { who: 'Any musician', rest: ' who has tried physical therapy, stretching, or technique adjustments \u2014 and still fights their body when they play.' },
  ];
  return (
    <section className="section s-trap-whofor on-mist" data-screen-label="04 Who This Is For">
      <EnsoBG className="enso-bg enso-botpair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="whofor-head">
          <span className="kicker">Who This Is For</span>
          <h2 className="h-section">This class is for you if&hellip;</h2>
        </div>
        <ul className="whofor-list">
          {items.map((it, idx) => (
            <li className="whofor-row" key={idx}>
              <span className="wf-mark" aria-hidden="true"></span>
              <p><span className="wf-who">{it.who}</span>{it.rest}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ═══ 05 ABOUT JOSEPH ═════════════════════════════════════════════════════════
function AboutJoseph() {
  const ref = useReveal();
  return (
    <section className="section s-trap-about on-dark deeper" data-screen-label="05 About Joseph">
      <EnsoBG className="enso-bg enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="trap-about-visual">
          <div className="trap-about-photo" role="img" aria-label="Joseph Arnold playing violin"></div>
        </div>
        <div className="trap-about-copy">
          <span className="kicker on-dark">About Joseph</span>
          <h2 className="h-section">I&rsquo;ve been where you are.</h2>
          <div className="body">
            <p>
              I&rsquo;m Joseph Arnold — professional violinist, certified Alexander Technique
              teacher, and author of <a className="soulforce-link" href="/book"><em className="gold">Soulforce</em></a>. For years I tried to fix
              my tension with discipline and willpower. It made things worse.
            </p>
            <p>
              What finally changed wasn&rsquo;t trying harder. It was learning how to stop
              interfering with myself. Now I help other musicians do the same.
            </p>
          </div>
          <p className="signature">Joseph Arnold</p>
        </div>
      </div>
    </section>
  );
}

// ═══ Testimonial B ═══════════════════════════════════════════════════════════
function QuoteB() {
  const ref = useReveal();
  return (
    <section className="section s-quote-b" data-screen-label="Testimonial — Paul">
      <EnsoBG className="enso-bg enso-botpair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <TrapQuote
          photo="assets/testi-paul.png"
          quote="When I first found Joseph, I thought it was almost too good to be true: this professional musician who plays with so much ease used to have as much tension as I have? And he found a way out? Joseph helped me release the immense tension in my violin playing that I'd struggled with since my days in conservatory. Now, I can release and sing with ease! I wish I had found him years ago!"
          name="Paul N." role="Vocalist" />
      </div>
    </section>
  );
}

// ═══ 06 PRICE & CTA ══════════════════════════════════════════════════════════
function PriceCTA({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-trap-cta on-dark deeper" data-screen-label="06 Price & CTA">
      <EnsoBG className="enso-bg enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Get the Class</span>
        <h2 className="h-section">Stop fighting your body when you play.</h2>
        <div className="trap-cta-price">$27</div>
        <p className="trap-cta-sub">Watch immediately, on your own schedule.</p>
        <div className="ctas">
          <button className="btn" onClick={() => onCTA('checkout')}>Get instant access — $27</button>
        </div>
        <p className="trap-cta-foot">
          Already attended the free <span className="lablink" onClick={() => onCTA('lab')}>Tension Reset Lab</span>?
          This goes deeper. 14-day, no-questions refund.
        </p>
      </div>
    </section>
  );
}

// ═══ 07 FAQ ══════════════════════════════════════════════════════════════════
function FaqItem({ q, children }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        {q}<span className="faq-icon" aria-hidden="true"></span>
      </button>
      <div className="faq-a"><div className="faq-a-inner">{children}</div></div>
    </div>
  );
}

function TrapFaq() {
  const ref = useReveal();
  return (
    <section className="section s-trap-faq on-light" data-screen-label="07 FAQ">
      <div className="wrap reveal" ref={ref}>
        <div className="faq-head">
          <span className="kicker">FAQ</span>
          <h2 className="h-section">Your questions, answered.</h2>
        </div>
        <div className="faq-list">
          <FaqItem q="Do I need to bring my instrument?">
            Highly recommended. You&rsquo;ll get more out of it in Part 3, where you put the
            technique to work with your instrument in hand.
          </FaqItem>
          <FaqItem q="Is this the same as the free Lab?">
            No. The Lab is live and generalist. This webinar goes deeper on the core concept with
            a structured demonstration you can watch any time.
          </FaqItem>
          <FaqItem q="What if I'm a hobbyist, not a professional?">
            This works for any musician at any level. Tension is instrument-agnostic — the same
            principles apply whether you&rsquo;re a beginner or a touring pro.
          </FaqItem>
          <FaqItem q="Refund?">
            Yes — 14 days, no questions asked.
          </FaqItem>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function TrapFooter() {
  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 = {
    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, {
  TrapHero, TheTrap, WhatYoullLearn, QuoteA, WhoForTrap, AboutJoseph, QuoteB, PriceCTA, TrapFaq, TrapFooter,
  EnsoBG, EnsoHero, useReveal,
});