// Soulforce Arts — About Joseph 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 ═════════════════════════════════════════════════════════════════
function AboutHero() {
  return (
    <section className="hero v-about" data-screen-label="01 Hero">
      <div className="hero-photo" aria-hidden="true"></div>
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="hero-wrap">
        <div className="hero-copy">
          <span className="kicker on-dark">About Joseph</span>
          <h1 className="h-display">I almost quit the violin. <span className="hl">Then I learned the one thing no one had taught me.</span></h1>
          <p className="lead">
            If you&rsquo;re a musician fighting pain, tension, performance anxiety, or the quiet
            fear that you can&rsquo;t keep doing this — I&rsquo;ve been exactly where you are.{' '}
            <em className="gold">Here&rsquo;s how I found the way out</em>, and why I&rsquo;ve spent
            my life helping other musicians find it too.
          </p>
        </div>
      </div>
      <div className="hero-banner">
        <span>Play with freedom</span>
        <span>Move your audiences</span>
        <span>Thrive in your career</span>
      </div>
    </section>
  );
}

// ═══ 02 WELCOME ══════════════════════════════════════════════════════════════
function Welcome() {
  const ref = useReveal();
  return (
    <section className="section s-welcome story on-light" data-screen-label="02 Welcome">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="story-visual">
          <div className="story-photo" role="img" aria-label="Joseph Arnold"></div>
        </div>
        <div className="story-copy">
          <span className="kicker">Welcome</span>
          <h2 className="h-section">Hi, I&rsquo;m Joseph Arnold.</h2>
          <div className="story-narrative">
            <p className="intro-lead">
              Violinist, Alexander Technique teacher, award-winning author, and director of the
              <strong> Soulforce Arts Institute.</strong>
            </p>
            <p>
              If you&rsquo;re a musician struggling with pain, tension, performance anxiety,
              burnout, or self-doubt, I want you to know: I&rsquo;ve been there too.
            </p>
            <p>
              And something else — the way out isn&rsquo;t only about the pain. It&rsquo;s about
              getting back <em className="gold">the joy, the ease, and the reason you picked up
              your instrument in the first place.</em>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 03 VIOLINIST, INTERRUPTED ═══════════════════════════════════════════════
function Interrupted() {
  const ref = useReveal();
  return (
    <section className="section s-interrupted story flip on-mist" data-screen-label="03 Violinist, Interrupted">
      <div className="wrap reveal" ref={ref}>
        <div className="story-visual">
          <div className="story-photo" role="img" aria-label="Joseph as a boy after a violin recital">
            <span className="photo-cap">After a recital, age 7</span>
          </div>
        </div>
        <div className="story-copy">
          <span className="kicker">Where It Started</span>
          <h2 className="h-section">Violinist, interrupted.</h2>
          <div className="story-narrative">
            <p>
              I grew up loving to play. But not long after I got to music school, I started feeling
              pain in both arms, along with an intense stage fright I couldn&rsquo;t shake. The pain
              only got worse, until playing for more than a few minutes was impossible. Eventually I
              stopped practicing altogether.
            </p>
            <p>
              I saw every doctor, specialist, and wellness professional I could find. You name it, I
              tried it. A year in, I was still in pain and still without answers.
            </p>
            <p>
              Then came the moment I still think about. Months in, I walked into a violin lesson
              wearing an arm brace, barely able to play. My teacher looked at me and asked,
              &ldquo;What happened to the violinist who first walked in here?&rdquo; I was so stunned
              I couldn&rsquo;t answer. How could he not see it? I&rsquo;d been telling him about my
              injury for months. When I asked for help, all he could offer was three words.
            </p>
          </div>
          <p className="pull">&ldquo;You should learn to relax.&rdquo; He meant well — but he had no idea how. And neither did I.</p>
        </div>
      </div>
    </section>
  );
}

// ═══ 04+05 THE TURNING POINT (grouped) ═══════════════════════════════════════
function Turning() {
  const ref = useReveal();
  return (
    <section className="section s-turning story on-dark deeper" data-screen-label="04 The Turning Point">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="story-visual">
          <div className="story-photo" role="img" aria-label="Joseph as a young man playing violin">
            <span className="photo-cap">Music school years</span>
          </div>
        </div>
        <div className="story-copy">
          <span className="kicker on-dark">The Turning Point</span>
          <h2 className="h-section">The thing no one taught me.</h2>
          <div className="story-narrative">
            <p>Then I took a class in the Alexander Technique.</p>
            <p>
              At first I had no idea what the teacher was talking about. She kept asking me to pay
              attention to my body, and I was incredulous — what could that possibly have to do with
              my music? Honestly, I didn&rsquo;t even know I had a body, not really.
            </p>
            <p>
              But when she put her hands on me, and when we did the guided body explorations, I felt
              something shift. All the tension I&rsquo;d been carrying — tension so constant I&rsquo;d
              mistaken it for who I was — simply <em className="gold">let go</em>. With practice,
              those moments came more easily, and my playing got better and better. I was hooked on
              that feeling of freedom.
            </p>
          </div>
          <div className="what-changed">
            <span className="wc-flag">What changed</span>
            <p>
              Learning to release that tension changed everything. It ended my pain for good —
              I&rsquo;ve played pain-free ever since. It made my technique fluid and effortless, and
              my sound more open and alive than it had ever been.
            </p>
            <p>
              And then the part I never saw coming: it opened a channel to something deeper — my
              <em className="gold"> Soulforce</em> — and let it flow through the music to move the
              people listening. Almost all of my training had been about mechanics. The things that
              make music <em>matter</em> had been left out entirely. I decided to spend my life
              putting them back in. That&rsquo;s why I started the Soulforce Arts Institute.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 06 CREDENTIALS & CRAFT ══════════════════════════════════════════════════
function Credentials() {
  const ref = useReveal();
  const stats = [
    { n: '2012', l: 'Certified Alexander Technique teacher (ATI)' },
    { n: '8 yrs', l: 'Assistant teacher trainer, Philadelphia School for the Alexander Technique' },
    { n: '100s', l: 'Musicians helped to play with ease' },
    { n: '15 yrs', l: 'With the Hot Club of Philadelphia' },
  ];
  return (
    <section className="section s-cred on-light" data-screen-label="06 Credentials">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <EnsoBG className="enso-bg enso-fill" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="cred-copy">
          <span className="kicker">Credentials &amp; Craft</span>
          <h2 className="h-section">What I&rsquo;ve done since.</h2>
          <div className="body">
            <p>
              I trained at the Philadelphia School for the Alexander Technique, graduated in 2012,
              and stayed on as an assistant teacher trainer for eight years. Since then I&rsquo;ve
              helped hundreds of musicians relieve injuries, quiet performance anxiety, and
              rediscover ease and soul in their playing.
            </p>
            <p>
              I&rsquo;ve never stopped performing, either — thousands of shows, tours across the
              country, and fifteen years with the Hot Club of Philadelphia. My book,
              <a className="soulforce-link" href="/book"><em className="title-italic"> Soulforce</em></a>, won the 2024 NYC Big Book Award and was
              a finalist for the Eric Hoffer and National Indie Excellence Awards.
            </p>
          </div>
          <ul className="cred-stats">
            {stats.map((s, i) => (
              <li key={i}>
                <span className="stat-num">{s.n}</span>
                <span className="stat-label">{s.l}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="cred-visual">
          <div className="cred-photo" role="img" aria-label="Joseph presenting Soulforce Arts at the Omega Institute"></div>
          <p className="cred-cap">Presenting Soulforce Arts at the Omega Institute, 2025</p>
          <div className="cred-photo cred-loft" role="img" aria-label="Gypsy Reverie playing a sold-out show at City Winery, Philadelphia"></div>
          <p className="cred-cap">Gypsy Reverie playing a sold-out show at City Winery, Philadelphia</p>
        </div>
      </div>
    </section>
  );
}

// ═══ 07 WHERE I AM NOW ═══════════════════════════════════════════════════════
function Now() {
  const ref = useReveal();
  return (
    <section className="section s-now story flip on-mist" data-screen-label="07 Where I Am Now">
      <EnsoBG className="enso-bg enso-top" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <div className="story-visual">
          <div className="story-photo" role="img" aria-label="Joseph Arnold today"></div>
        </div>
        <div className="story-copy">
          <span className="kicker">These Days</span>
          <h2 className="h-section">Where I am now.</h2>
          <div className="story-narrative">
            <p>
              These days I live in Asheville, North Carolina, where I lead my own gypsy jazz band,{' '}
              <a className="inline-link" href="https://www.gypsyreveriemusic.com" target="_blank" rel="noopener noreferrer">Gypsy Reverie</a>, hike the mountains, sit in at the area&rsquo;s many jam
              sessions, and volunteer at a local food forest. I&rsquo;m also helping conscious
              entrepreneurs get found by the people who need them through my{' '}
              <a className="inline-link" href="https://www.overflowthrive.com" target="_blank" rel="noopener noreferrer">Overflow</a> app. And I still spend a good amount of time exploring the
              outer reaches of inner space.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══ 08 THE VISION ═══════════════════════════════════════════════════════════
function Vision() {
  const ref = useReveal();
  return (
    <section className="section s-vision on-dark" data-screen-label="08 The Vision">
      <div className="vision-photo" aria-hidden="true"></div>
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker on-dark">The Vision</span>
        <h2 className="h-section">Where this is going.</h2>
        <p className="body">
          Right now, the Soulforce Arts Institute is just me. But the vision is bigger. I want to
          build it into an in-person school and a far-reaching online program — the next evolution
          of music education. Not just technique, but <em className="gold">effortlessness and
          soul</em> — so musicians everywhere can discover their artistic purpose, create more
          freely, and make art that matters to a world that needs it.
        </p>
      </div>
    </section>
  );
}

// ═══ 09 IF THIS SOUNDS LIKE YOU ══════════════════════════════════════════════
function AboutCTA({ onCTA }) {
  const ref = useReveal();
  return (
    <section className="section s-about-cta on-light" data-screen-label="09 If This Sounds Like You">
      <EnsoBG className="enso-bg" speed={0} rotate={24} />
      <div className="wrap reveal" ref={ref}>
        <span className="kicker">Your Next Step</span>
        <h2 className="h-section">If you see yourself in my story, <span className="hl">you&rsquo;re in the right place.</span></h2>
        <p className="lead">
          Want to explore on your own first? My videos, my blog, and the free first chapter of
          <a className="soulforce-link" href="/book"><em style={{ fontStyle: 'italic' }}> Soulforce</em></a> are all good places to start. When
          you&rsquo;re ready, the best way forward is a conversation.
        </p>
        <div className="ctas">
          <button className="btn" onClick={() => onCTA('call')}>Talk with Joseph</button>
          <button className="btn outline gold" onClick={() => onCTA('pathform')}>Find your path</button>
        </div>
        <div className="about-tertiary">
          <a className="btn-link" href="https://www.youtube.com/@soulforcearts" target="_blank" rel="noopener noreferrer">Watch on YouTube</a>
          <a className="btn-link" href="https://substack.com/@soulforcearts" target="_blank" rel="noopener noreferrer">Read the blog</a>
          <button className="btn-link" onClick={() => onCTA('chapter')}>Read the first chapter free</button>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────
function AboutFooter() {
  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, {
  AboutHero, Welcome, Interrupted, Turning, Credentials, Now, Vision, AboutCTA, AboutFooter,
  EnsoBG, EnsoHero, useReveal,
});