// ===== Reveal Choreography + Micro-interactions (Gate 5) =====
// Centralized GSAP polish layer:
//   1. .section-head children stagger in (eyebrow -> heading -> body) on
//      first scroll into view.
//   2. Stat numbers (.reviews-stat-num) count up when they enter.
//   3. Pointer spotlight: cards expose --mx/--my CSS vars that a radial
//      gradient (::after in home.css) tracks.
// The IntersectionObserver initReveal fallback in chrome.jsx keeps handling
// .reveal elements when GSAP is absent; this engine no-ops entirely under
// reduced motion so content is simply visible.

function initHomeReveals() {
  if (
    window.__pdaReduceMotion ||
    typeof gsap === 'undefined' ||
    typeof ScrollTrigger === 'undefined'
  ) {
    return;
  }

  // 1 — staggered section-head reveals
  document.querySelectorAll('.section-head').forEach((head) => {
    const kids = Array.from(head.children);
    if (!kids.length) return;
    gsap.set(kids, { opacity: 0, y: 36 });
    ScrollTrigger.create({
      trigger: head,
      start: 'top 85%',
      once: true,
      onEnter: () =>
        gsap.to(kids, {
          opacity: 1,
          y: 0,
          duration: 0.75,
          stagger: 0.12,
          ease: 'power3.out',
        }),
    });
  });

  // 2 — stat counters ("5.0", "94%", "42" — decimals and suffixes preserved)
  document.querySelectorAll('.reviews-stat-num').forEach((el) => {
    const raw = el.textContent.trim();
    const target = parseFloat(raw);
    if (isNaN(target)) return;
    const decimals = /\./.test(raw) ? 1 : 0;
    const suffix = raw.replace(/[\d.]/g, '');
    const obj = { v: 0 };
    ScrollTrigger.create({
      trigger: el,
      start: 'top 88%',
      once: true,
      onEnter: () =>
        gsap.to(obj, {
          v: target,
          duration: 1.4,
          ease: 'power1.out',
          onUpdate: () => {
            el.textContent = obj.v.toFixed(decimals) + suffix;
          },
        }),
    });
  });

  // 3 — section handoff: blueprint grid paper fades up over the Roadmap's
  // tail as the Blueprint section approaches (construction -> drafting)
  const schem = document.querySelector('.schem-section');
  const bpSection = document.querySelector('.bp-section');
  if (schem && bpSection) {
    gsap.to(schem, {
      '--bp-handoff': 1,
      ease: 'none',
      scrollTrigger: {
        trigger: bpSection,
        start: 'top 170%',
        end: 'top 85%',
        scrub: 1,
      },
    });
  }

  // 4 — pointer spotlight on cards (desktop pointers only)
  if (window.matchMedia('(hover: hover)').matches) {
    document.addEventListener(
      'pointermove',
      (e) => {
        const card = e.target.closest && e.target.closest('.hww-card, .review-card');
        if (!card) return;
        const r = card.getBoundingClientRect();
        card.style.setProperty('--mx', (((e.clientX - r.left) / r.width) * 100).toFixed(1) + '%');
        card.style.setProperty('--my', (((e.clientY - r.top) / r.height) * 100).toFixed(1) + '%');
      },
      { passive: true }
    );
  }
}

// Babel + React mount after first paint; wait for rendered sections.
(function bootHomeReveals() {
  let tries = 0;
  const attempt = () => {
    tries += 1;
    if (document.querySelector('.section-head')) {
      initHomeReveals();
    } else if (tries < 25) {
      setTimeout(attempt, 200);
    }
  };
  setTimeout(attempt, 350);
})();
window.initHomeReveals = initHomeReveals;