// Soulforce Arts — Your Body Is Your Instrument (self-paced course) sections
const { useEffect, useRef, useState } = React;

function useReveal(opts = {}) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    if (typeof IntersectionObserver === 'undefined') { el.classList.add('in'); return; }
    const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } }), { threshold: opts.threshold ?? 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el); return () => io.disconnect();
  }, []);
  return ref;
}

function EnsoBG({ className = '', speed = 0.12, rotate = 0 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return; let raf = 0;
    const tick = () => { const rc = el.getBoundingClientRect(); const dy = rc.top + rc.height / 2 - window.innerHeight / 2; el.style.transform = `translateY(${-dy * speed}px) rotate(${rotate}deg)`; raf = 0; };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); };
    tick(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [speed, rotate]);
  return <div ref={ref} className={`enso-bg ${className}`} />;
}

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 ═════════════════════════════════════════════════════════════════
function YbyiHero({ onCTA }) {
  return (
    <section className="hero v-ybyi" data-screen-label="01 Hero">
      <EnsoBG className="enso-herobottom" speed={0} rotate={24} />
      <div className="hero-wrap">
        <div className="hero-copy">
          <span className="kicker on-dark">A self-paced Alexander Technique course for musicians</span>
          <h1 className="h-display">Your body is your instrument. <span className="hl">Learn to play it with ease.</span></h1>
          <p className="lead">
            Ten practical, hands-on video lessons — with your instrument in your hands — to release
            tension, prevent injury, and reconnect with the joy of playing. Learn at your own pace,
            with lifetime access.
          </p>
          <p className="ybyi-pricemeta">$149<span className="sep">·</span>lifetime access<span className="sep">·</span>14-day money-back guarantee</p>
          <div className="hero-cta-row">
            <button className="btn" onClick={() => onCTA('course')}>Get the course</button>
          </div>
        </div>
        <div className="hero-visual">
          <span className="visual-badge">10 Lessons</span>
          <img className="hero-pack" src="assets/ybyi-thumb.webp" alt="Your Body Is Your Instrument — course lesson with Joseph Arnold" />
        </div>
      </div>
    </section>
  );
}

// ═══ 02 THE BIG IDEA ═════════════════════════════════════════════════════════
function BigIdea() {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-idea on-light" data-screen-label="02 The Big Idea">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="idea-visual">
          <div className="idea-photo" role="img" aria-label="A taiko drummer mid-strike"></div>
        </div>
        <div className="idea-copy">
          <span className="kicker">The Big Idea</span>
          <h2 className="h-section">You&rsquo;ve been practicing the wrong instrument.</h2>
          <div className="ybyi-narr-body">
            <p>
              You might think your violin, your piano, your voice is your instrument. But every note
              you play — every nuance you express — is made by how you use your <em className="it">body</em>.
              Misuse your body, and that misuse comes through in your sound. Play with freedom and
              poise, and that comes through too.
            </p>
            <p>
              Learn to use your body more freely, and everything downstream changes:
              <em className="gold"> your technique, your tone, your comfort, your stamina, your stage
              presence</em> — and the pain and tension that have been holding you back begin to dissolve.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 03 WHAT MAKES IT DIFFERENT ══════════════════════════════════════════════
function Different() {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-narr s-ybyi-diff on-dark deeper" data-screen-label="03 What Makes It Different">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">What Makes It Different</span>
        <h2 className="h-section">This isn&rsquo;t a course you just watch.</h2>
        <div className="ybyi-narr-body">
          <p>
            It&rsquo;s a course you <em className="gold">do</em> — with your instrument in your hands.
            The lessons are full of guided practices, and the videos invite you to pause and try each
            one yourself, right there in your own playing. You don&rsquo;t just learn the ideas; you
            feel the difference, in your own body and your own sound, lesson by lesson.
          </p>
          <p>
            It&rsquo;s an approachable, practical, and complete introduction to the
            <em className="it"> Alexander Technique</em> — the century-old practice that turns
            unwanted tension into ease.
          </p>
        </div>
      </div>
    </section>
  );
}

// ═══ 04 WHAT YOU'LL LEARN ════════════════════════════════════════════════════
function WhatLearn() {
  const ref = useReveal();
  const benefits = [
    <>Release unnecessary tension while you play — <em>in real time</em>, in the moment it arises</>,
    <>Understand <em>why</em> you get tense in the first place, and how to interrupt the habit</>,
    <>Find ease, space, and freedom in how you move at your instrument</>,
    <>Relieve and prevent repetitive strain and injury</>,
    <>Quiet the nerves that show up under pressure</>,
    <>Reconnect with expression — playing from the heart, not just getting the notes right</>,
  ];
  const lessons = [
    'Introduction', 'Getting to Know Your Body', 'Body Directions', 'The Mind/Body Connection',
    'Why Do We Get Tense in the First Place?', 'Space, Time & Tension',
    'Breath, Ground & Pause with Awareness', "Musician's Injuries & Touch-Back",
    'Performance Anxiety', 'Playing from the Heart',
  ];
  return (
    <section className="section s-ybyi-learn on-dark deeper" data-screen-label="04 What You'll Learn">
      <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="learn-head">
          <span className="kicker on-dark">What You&rsquo;ll Learn</span>
          <h2 className="h-section">Across ten lessons, you&rsquo;ll learn how to&hellip;</h2>
        </div>
        <div className="ybyi-learn-cols">
          <ul className="ybyi-benefits">
            {benefits.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
          <div className="curriculum">
            <div className="cur-flag">The full curriculum · 10 lessons</div>
            <p className="cur-meta">30–45 minutes each | 5+ hours total</p>
            <ol>
              {lessons.map((l, i) => <li key={i}>{l}</li>)}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 05 WHO IT'S FOR ═════════════════════════════════════════════════════════
function WhoFor() {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-forwhom on-mist" data-screen-label="05 Who It's For">
      <EnsoBG className="enso-bg enso-top pair-right" speed={0} rotate={24} />
      <EnsoBG className="enso-bg enso-bot pair-right" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">Who It&rsquo;s For</span>
        <h2 className="h-section">Any musician, at any level.</h2>
        <div className="ybyi-forwhom-body">
          <p>
            Any musician — strings, piano, voice, winds, guitar — at any level, who wants to play
            with more ease and less tension. It&rsquo;s especially for the
            <em className="gold"> self-directed musician</em> who&rsquo;d rather start on their own
            time, at their own pace, with everything they need in one place.
          </p>
        </div>
      </div>
    </section>
  );
}

// ═══ 06 WHO YOU'LL LEARN FROM ════════════════════════════════════════════════
function FromJoseph() {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-joseph on-dark" data-screen-label="06 Who You'll Learn From">
      <EnsoBG className="enso-bg pair-right enso-toppair" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="ybyi-joseph-visual">
          <div className="ybyi-joseph-photo" role="img" aria-label="Joseph Arnold with his book Soulforce"></div>
        </div>
        <div className="ybyi-joseph-copy">
          <span className="kicker on-dark">Who You&rsquo;ll Learn From</span>
          <h2 className="h-section">Hi, I&rsquo;m Joseph.</h2>
          <div className="body">
            <p>
              I&rsquo;m Joseph Arnold — violinist, certified Alexander Technique teacher, and
              award-winning author of <em className="title-italic">Soulforce</em>. Years ago, chronic
              pain nearly ended my own playing; learning this work is what saved it. I&rsquo;ve spent
              the years since helping <em className="gold">hundreds of musicians</em> stop fighting
              their bodies and play the way they always knew they could. This course is the
              foundation of everything I teach.
            </p>
          </div>
          <p className="signature">Joseph Arnold</p>
        </div>
      </div>
    </section>
  );
}

// ═══ 07 TESTIMONIALS ═════════════════════════════════════════════════════════
function Quotes() {
  const ref = useReveal();
  const quotes = [
    { q: "Neck and shoulder pain had me unable to play violin for more than 30 minutes. In a few sessions, Joseph corrected self-defeating habits that had been at work for 30 years. The improvement in the quality of my sound has been a joy.", n: 'Ellen Hughes', r: 'Fiddler', photo: 'assets/testi-ellen.jpg' },
    { q: "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 \u2014 and now I can enjoy playing Bach again.", n: 'Christophe Merville', r: 'Violinist', photo: 'assets/testi-christophe.png' },
    { q: "In the year I have been taking lessons with Joseph 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 every time I hear this I know that much of the credit goes to his instruction in Alexander Technique. I couldn't recommend him more highly!", n: 'Jessica Renfro', r: 'Opera Singer', photo: 'assets/testi-jessica.png' },
  ];
  return (
    <section className="section s-ybyi-quotes on-light" data-screen-label="07 Testimonials">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="quotes-head">
          <span className="kicker">What Musicians Say</span>
          <h2 className="h-section">Ease you can hear in your music.</h2>
        </div>
        <div className="quotes-grid">
          {quotes.map((it) => (
            <figure className="quote-card" key={it.n}>
              <blockquote>{it.q}</blockquote>
              <figcaption className="quote-cite">
                <span className="qc-avatar"><img src={it.photo} alt={it.n} /></span>
                <span>
                  <span className="qc-name">{it.n}</span>
                  <span className="qc-role">{it.r}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══ 08 ENROLL ═══════════════════════════════════════════════════════════════
function Enroll({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-enroll on-dark deeper" data-screen-label="08 Enroll">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="enroll-head">
          <span className="kicker on-dark">Enroll</span>
          <h2 className="h-section">Your Body Is Your Instrument</h2>
          <p className="enroll-sub">Ten video lessons · self-paced · lifetime access</p>
        </div>
        <div className="enroll-grid">
          <div className="enroll-card">
            <div className="ec-flag">Just the course</div>
            <div className="ec-price">$149</div>
            <div className="ec-value">Lifetime access</div>
            <p>Everything above, yours to keep and revisit any time — ten video lessons with 5+ hours of content you follow at your own pace.</p>
            <button className="btn outline gold" onClick={() => onCTA('course')}>Get the course</button>
          </div>
          <div className="enroll-card feature">
            <span className="enroll-ribbon">Best value</span>
            <div className="ec-flag">Course + a private lesson</div>
            <div className="ec-price">$199</div>
            <div className="ec-value">$299 value</div>
            <p>Add a one-to-one session with me to work through anything in the course on your own playing, live.</p>
            <button className="btn" onClick={() => onCTA('coursePlus')}>Get the course + a lesson</button>
          </div>
        </div>
        <p className="enroll-fine">14-day money-back guarantee on the course. <em>The private lesson ($150 value), if you add it, is non-refundable.</em></p>
      </div>
    </section>
  );
}

// ═══ 09 GUARANTEE ════════════════════════════════════════════════════════════
function Guarantee() {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-guarantee" data-screen-label="09 Guarantee">
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">The Guarantee</span>
        <h2 className="h-section">Try it for 14 days.</h2>
        <p>
          Watch the lessons, do the practices, feel the difference. If the course isn&rsquo;t for
          you, email me within 14 days and I&rsquo;ll refund you in full — no questions asked.
        </p>
      </div>
    </section>
  );
}

// ═══ 10 UPSELL ═══════════════════════════════════════════════════════════════
function Upsell() {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-upsell on-dark" data-screen-label="10 Upsell">
      <div className="upsell-photo" aria-hidden="true"></div>
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Want Hands-On Guidance?</span>
        <h2 className="h-section">Rather not do it alone?</h2>
        <p className="body">
          This course is the do-it-yourself path. If you&rsquo;d rather have live support,
          accountability, and my eyes on your specific patterns, <strong>Perform Without Pain</strong>{' '}
          is the guided version: an 8-week program, in a group or one-to-one, where we do this work
          together and you feel the difference in week one.
        </p>
        <a className="upsell-link" href="/pwp">Explore Perform Without Pain <span className="arr">→</span></a>
      </div>
    </section>
  );
}

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

function Faq() {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-faq on-light" data-screen-label="11 FAQ">
      <EnsoBG className="enso-bg pair-left-top" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="faq-head">
          <span className="kicker">FAQ</span>
          <h2 className="h-section">Your questions, answered.</h2>
        </div>
        <div className="faq-list">
          <FaqItem q="Do I need any experience with the Alexander Technique?">
            None at all. This is a complete, beginner-friendly introduction — it assumes nothing and builds from the ground up.
          </FaqItem>
          <FaqItem q="What instrument is it for?">
            All of them. The body is your instrument no matter what you play — strings, piano, voice, winds, guitar. The principles are the same; you apply them to your own playing.
          </FaqItem>
          <FaqItem q="How long do I have access?">
            Forever. Lifetime access — watch and revisit the lessons whenever you like, at your own pace.
          </FaqItem>
          <FaqItem q="How is this different from Perform Without Pain?">
            Same core material, different level of support. This course is self-paced and self-guided. Perform Without Pain is the live, guided version — group or 1:1 — with my support and a path into the Studio community.
          </FaqItem>
          <FaqItem q="What's your refund policy?">
            14 days, no questions asked, on the video course. If you add a private lesson, that part is non-refundable.
          </FaqItem>
        </div>
      </div>
    </section>
  );
}

// ═══ 12 FINAL CTA ════════════════════════════════════════════════════════════
function FinalCTA({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-ybyi-cta on-dark deeper" data-screen-label="12 Final CTA">
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">Start Today</span>
        <h2 className="h-display">Your body is your instrument. <span className="hl">It&rsquo;s time to learn to play it.</span></h2>
        <p className="lead">Ten lessons. Lifetime access. A 14-day guarantee.</p>
        <div className="ctas">
          <button className="btn" onClick={() => onCTA('course')}>Get the course — $149</button>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function YbyiFooter() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => { e.preventDefault(); if (!email.includes('@')) return; 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>
        <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</a>
            <a href="/privacy">Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  YbyiHero, BigIdea, Different, WhatLearn, WhoFor, FromJoseph, Quotes, Enroll, Guarantee, Upsell, Faq, FinalCTA, YbyiFooter,
  EnsoBG, EnsoHero, useReveal,
});