// AscentHero — 21st.dev "PrismaHero" structure (framed full-bleed scene, notch nav, giant pull-up
// wordmark, copy + pill CTA bottom-right) rebuilt for Ascend Faith, extended into a scroll-scrubbed
// journey: zoom into Jesus teaching → The Word → up through the clouds → the road with His disciples.
// GSAP ScrollTrigger scrubs one timeline across a tall section; the stage is CSS-sticky (Lenis-safe).
(() => {
const { Icon } = window.AscendFaithDesignSystem_9749b4;
const { WordsPullUp, FloatingIcons, GoldDust, Figure, scrollToY, reduced } = window.AF_MOTION;
const IMG = p => '../../assets/' + p;
const HEADER = 72;
const CHAPTERS = [
  { n: '00', label: 'Ascend', at: 0 },
  { n: '01', label: 'The Word', at: 0.24 },
  { n: '02', label: 'Higher', at: 0.56 },
  { n: '03', label: 'The Walk', at: 0.93 },
];
const FLOAT_WORDS = [ // kept to the outer columns so they never cross the centred headline
  { t: 'Faith', x: '4%', y: '40%', s: 'clamp(34px,4.6vw,76px)', cls: 'ah-fw--display' },
  { t: 'Hope', x: '78%', y: '24%', s: 'clamp(30px,4vw,64px)', cls: 'ah-fw--outline' },
  { t: 'Grace', x: '11%', y: '58%', s: 'clamp(24px,2.8vw,46px)', cls: 'ah-fw--serif' },
  { t: 'Truth', x: '72%', y: '52%', s: 'clamp(34px,4.4vw,74px)', cls: 'ah-fw--outline' },
  { t: 'Love', x: '88%', y: '72%', s: 'clamp(22px,2.6vw,42px)', cls: 'ah-fw--serif' },
];
const FIGS = [
  { fig: 'cross', x: '7%', y: '18%', size: 30, depth: 0.7, o: 0.55 },
  { fig: 'dove', x: '86%', y: '14%', size: 40, depth: 0.9, o: 0.5, r: -8 },
  { fig: 'sparkle', x: '64%', y: '30%', size: 18, depth: 0.3, o: 0.7 },
  { fig: 'fish', x: '14%', y: '62%', size: 34, depth: 0.5, o: 0.35 },
  { fig: 'flame', x: '92%', y: '56%', size: 26, depth: 0.6, o: 0.4 },
  { fig: 'sparkle', x: '38%', y: '10%', size: 14, depth: 0.2, o: 0.6 },
  { fig: 'olive', x: '50%', y: '74%', size: 30, depth: 0.8, o: 0.3 },
];

function AscentHero({ nav }) {
  const root = React.useRef(null);
  const stage = React.useRef(null);
  const [chapter, setChapter] = React.useState(0);
  const [live] = React.useState(() => !reduced() && !!(window.gsap && window.ScrollTrigger));

  React.useEffect(() => {
    if (!live) return;
    const gsap = window.gsap; gsap.registerPlugin(window.ScrollTrigger);
    const q = gsap.utils.selector(root);
    let last = 0;
    const tl = gsap.timeline({
      defaults: { ease: 'none' },
      scrollTrigger: {
        trigger: root.current, start: `top ${HEADER}px`, end: 'bottom bottom', scrub: 1,
        onUpdate: s => {
          root.current.style.setProperty('--prog', s.progress);
          let i = 0; CHAPTERS.forEach((c, k) => { if (s.progress >= c.at - 0.06) i = k; });
          if (i !== last) { last = i; setChapter(i); }
        },
      },
    });
    tl.to(q('.ah-ch1'), { y: -90, autoAlpha: 0, duration: 1.1 }, 0.25)
      .to(q('.ah-hint'), { autoAlpha: 0, duration: 0.4 }, 0)
      .to(q('.ah-teach img'), { scale: 2.7, duration: 3.2, ease: 'power1.in' }, 0)
      .fromTo(q('.ah-ch2'), { autoAlpha: 0, y: 60, filter: 'blur(12px)' }, { autoAlpha: 1, y: 0, filter: 'blur(0px)', duration: 0.9 }, 1.4)
      .to(q('.ah-ch2'), { autoAlpha: 0, y: -50, filter: 'blur(10px)', duration: 0.7 }, 3.0)
      .to(q('.ah-light'), { autoAlpha: 1, duration: 0.8 }, 3.0)
      .to(q('.ah-teach img'), { scale: 4.4, duration: 0.9, ease: 'power2.in' }, 3.2)
      .set(q('.ah-teach'), { autoAlpha: 0 }, 4.05)
      .fromTo(q('.ah-clouds img'), { scale: 1.7 }, { scale: 1.15, duration: 1.6 }, 3.8)
      .fromTo(q('.ah-clouds'), { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.6 }, 3.8)
      .to(q('.ah-light'), { autoAlpha: 0, duration: 1 }, 4.1)
      .fromTo(q('.ah-fw'), { y: (i) => 180 + i * 50, autoAlpha: 0 }, { y: (i) => -(220 + i * 40), autoAlpha: 0.95, stagger: 0.16, duration: 2.8 }, 4.3)
      .fromTo(q('.ah-rise'), { y: '55vh', autoAlpha: 0, scale: 0.55 }, { y: '0vh', autoAlpha: 1, scale: 1, duration: 2.3, ease: 'power2.out' }, 4.5)
      .fromTo(q('.ah-ch3'), { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0, duration: 0.8 }, 5.1)
      .to([q('.ah-ch3'), q('.ah-fw'), q('.ah-rise')], { autoAlpha: 0, duration: 0.7 }, 7.1)
      .to(q('.ah-clouds img'), { scale: 2.4, duration: 1.4, ease: 'power2.in' }, 7.0)
      .to(q('.ah-clouds'), { autoAlpha: 0, duration: 0.6 }, 8.0)
      .fromTo(q('.ah-road'), { autoAlpha: 1, clipPath: 'circle(0% at 50% 42%)' }, { clipPath: 'circle(80% at 50% 42%)', duration: 1.4, ease: 'power2.inOut' }, 7.2)
      .fromTo(q('.ah-road img'), { scale: 1.4 }, { scale: 1, duration: 2.6, ease: 'power1.out' }, 7.2)
      .fromTo(q('.ah-side'), { x: 160, autoAlpha: 0 }, { x: 0, autoAlpha: 1, duration: 0.9, ease: 'power3.out' }, 8.4)
      .fromTo(q('.ah-rail > *'), { x: -70, autoAlpha: 0 }, { x: 0, autoAlpha: 1, stagger: 0.14, duration: 0.8, ease: 'power3.out' }, 8.5)
      .to({}, { duration: 0.7 }, 9.4);

    // Pointer depth: every [data-depth] layer drifts against the cursor.
    const st = stage.current; let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0;
    const layers = Array.from(st.querySelectorAll('[data-depth]'));
    const tick = () => { cx += (tx - cx) * 0.07; cy += (ty - cy) * 0.07; layers.forEach(l => { const d = +l.dataset.depth; l.style.transform = `translate3d(${-cx * 40 * d}px,${-cy * 28 * d}px,0)`; }); raf = Math.abs(tx - cx) + Math.abs(ty - cy) > 0.0005 ? requestAnimationFrame(tick) : 0; };
    const move = e => { const r = st.getBoundingClientRect(); tx = (e.clientX - r.left) / r.width - 0.5; ty = (e.clientY - r.top) / r.height - 0.5; if (!raf) raf = requestAnimationFrame(tick); };
    st.addEventListener('pointermove', move);
    const refresh = () => window.ScrollTrigger.refresh();
    window.addEventListener('load', refresh);
    return () => { st.removeEventListener('pointermove', move); window.removeEventListener('load', refresh); cancelAnimationFrame(raf); tl.scrollTrigger && tl.scrollTrigger.kill(); tl.kill(); };
  }, [live]);

  const jump = at => {
    const el = root.current; const top = el.getBoundingClientRect().top + window.scrollY - HEADER;
    scrollToY(top + at * (el.offsetHeight - (window.innerHeight - HEADER)));
  };

  return (
    <section ref={root} className={`ah ${live ? '' : 'ah--static'}`} data-no-rv aria-label="Ascend Faith — The way up">
      <div ref={stage} className="ah__stage">
        <div className="ah__frame">
          {/* Scenes */}
          <div className="ah-scene ah-teach" data-depth="0.35"><img src={IMG('imagery/scenes/teaching-hillside-hd.jpg')} alt="Jesus seated on a hillside at sunrise, teaching His disciples" /></div>
          <div className="ah-scene ah-clouds" data-depth="0.6"><img src={IMG('imagery/scenes/clouds-rays-hd.jpg')} alt="" /></div>
          <div className="ah-scene ah-road" data-depth="0.3"><img src={IMG('imagery/scenes/walking-road-hd.jpg')} alt="Jesus walking an ancient road with His disciples at sunrise" /></div>
          <div className="ah-light" aria-hidden="true" />

          {/* Atmosphere */}
          <div className="afm-noise" style={{ opacity: 0.55 }} />
          <div className="ah-grad" aria-hidden="true" />
          <div className="afm-vignette" />
          <GoldDust count={70} style={{ zIndex: 3 }} />
          <FloatingIcons items={FIGS} parallax={live} />

          {/* Notch chapter nav (PrismaHero navbar) */}
          <nav className="ah-notch" aria-label="Hero chapters">
            {CHAPTERS.map((c, i) => (
              <button key={c.label} className={`ah-notch__item ${chapter === i ? 'is-on' : ''}`} onClick={() => live ? jump(c.at) : null} aria-current={chapter === i ? 'step' : undefined}>
                <span className="ah-notch__n">{c.n}</span>{c.label}
              </button>
            ))}
            <button className="ah-notch__item" onClick={() => nav('shop')}><span className="ah-notch__n">↗</span>Shop</button>
          </nav>

          {/* Chapter 0 — PrismaHero layout */}
          <div className="ah-ch ah-ch1">
            <div className="ah-ch1__grid">
              <div>
                <span className="ah-eyebrow">Faith &nbsp;·&nbsp; Community &nbsp;·&nbsp; Purpose</span>
                <h1 className="ah-word"><WordsPullUp text="Ascend" mark={IMG('logo/ascend-arrow-solid.png')} delay={150} /></h1>
              </div>
              <div className="ah-ch1__copy">
                <p className="ah-lede">A Christian network and streetwear label for people finding their way to God — bound not by status or labels, but by one road up the mountain.</p>
                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
                  <button className="afm-pill" onClick={() => live ? jump(CHAPTERS[1].at) : nav('shop')}>Walk the way<span className="afm-pill__dot"><Icon name="arrow-down-right" /></span></button>
                  <button className="ah-textlink" onClick={() => nav('shop')}>Shop Drop 01</button>
                </div>
              </div>
            </div>
          </div>
          <div className="ah-hint" aria-hidden="true"><span>Scroll to ascend</span><i><Icon name="arrow-down" /></i></div>

          {/* Chapter 1 — zoomed into the teaching */}
          <div className="ah-ch ah-ch2">
            <span className="ah-eyebrow ah-eyebrow--gold">01 &nbsp;—&nbsp; The Word</span>
            <blockquote className="ah-verse">“Come, follow me,” Jesus said, “and I will send you out to fish for people.”</blockquote>
            <cite className="ah-ref">Matthew 4:19</cite>
          </div>

          {/* Chapter 2 — through the clouds */}
          {FLOAT_WORDS.map((w, i) => <span key={w.t} className={`ah-fw ${w.cls}`} style={{ left: w.x, top: w.y, fontSize: w.s }} aria-hidden="true">{w.t}</span>)}
          <div className="ah-rise" aria-hidden="true"><div className="afm-rays" /><img src={IMG('logo/ascend-arrow-solid.png')} alt="" /></div>
          <div className="ah-ch ah-ch3">
            <span className="ah-eyebrow ah-eyebrow--gold ah-chip">02 &nbsp;—&nbsp; Higher</span>
            <h2 className="ah-h2">Higher than<br /><span className="afm-shimmer">yesterday</span></h2>
            <p className="ah-lede" style={{ textAlign: 'center', maxWidth: 460 }}>I press on toward the goal to win the prize for which God has called me heavenward in Christ Jesus. <span className="ah-ref" style={{ display: 'inline' }}>Philippians 3:14</span></p>
          </div>

          {/* Chapter 3 — the road; floating side titles + glass panel */}
          <div className="ah-rail" aria-hidden="true">
            {[['cross', 'Faith'], ['fish', 'Community'], ['peak', 'Purpose']].map(([f, t]) => <div key={t} className="ah-rail__item"><Figure name={f} size={22} /><span>{t}</span></div>)}
          </div>
          <aside className="ah-side afm-glass">
            <span className="ah-eyebrow ah-eyebrow--gold">03 &nbsp;—&nbsp; The Walk</span>
            <h2 className="ah-side__h">He didn’t just teach.<br />He walked with them.</h2>
            <p className="ah-verse ah-verse--s">“Whoever claims to live in him must live as Jesus did.”</p>
            <cite className="ah-ref">1 John 2:6</cite>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 8 }}>
              <button className="afm-pill" onClick={() => nav('shop')}>Shop the drop<span className="afm-pill__dot"><Icon name="arrow-up-right" /></span></button>
              <button className="afm-pill afm-pill--ghost" onClick={() => nav('home', 'network')}>Join the network<span className="afm-pill__dot"><Icon name="users-three" /></span></button>
            </div>
          </aside>

          {/* Progress rail */}
          <div className="ah-progress" aria-hidden="true"><i /></div>
        </div>
      </div>
    </section>
  );
}
window.AscentHero = AscentHero;
})();