// Main app — sections + scroll animations const { useState, useEffect, useRef } = React; // Scroll-reveal helper function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.18, rootMargin: '0px 0px -80px 0px' } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } function useScrollState() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return scrolled; } // Track section progress (0→1) for parallax / pathway fill // Section progress applied via CSS var on DOM directly (no React state — avoids re-render storm) function useSectionProgressDOM(ref, targetSelector = '.pathway-steps') { useEffect(() => { if (!ref.current) return; let raf = 0; let last = -1; const target = ref.current.querySelector(targetSelector); const stepEls = target ? Array.from(target.querySelectorAll('.pathway-step')) : []; const total = stepEls.length; const compute = () => { raf = 0; if (!ref.current || !target) return; const r = ref.current.getBoundingClientRect(); const vh = window.innerHeight; const start = vh * 0.85; const end = vh * 0.2; const totalDist = r.height + start - end; const passed = start - r.top; const prog = Math.round(Math.max(0, Math.min(1, passed / totalDist)) * 100); if (prog !== last) { last = prog; target.style.setProperty('--progress', prog + '%'); // Mark complete / current const current = Math.min(total - 1, Math.floor((prog / 100) * total)); stepEls.forEach((el, i) => { el.classList.toggle('complete', i < current); el.classList.toggle('current', i === current); }); } }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); }; const t = setTimeout(compute, 200); window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); clearTimeout(t); }; }, [ref, targetSelector]); } // ───────────────────────── Store buttons (shared, aligned CTAs) ───────────────────────── // const StoreButtons = ({ dark = false }) => { const stores = window.CONTENT.stores; return (
); }; // ───────────────────────── Nav ───────────────────────── // const Nav = () => { const scrolled = useScrollState(); const [open, setOpen] = useState(false); useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); return ( ); }; // ───────────────────────── Hero ───────────────────────── // const Hero = () => { // Tilted phone stack — parallax done via direct DOM (no re-render storm) const phonesRef = useRef(null); useEffect(() => { let raf = 0; const apply = () => { raf = 0; const y = Math.min(window.scrollY * 0.12, 80); const el = phonesRef.current; if (!el) return; const left = el.querySelector('.hero-phone-left'); const right = el.querySelector('.hero-phone-right'); const front = el.querySelector('.hero-phone-front'); if (left) left.style.transform = `translate(-58%, calc(-50% + ${-20 + y * 0.4}px)) rotate(-10deg) scale(0.78)`; if (right) right.style.transform = `translate(58%, calc(-50% + ${20 + y * 0.6}px)) rotate(10deg) scale(0.78)`; if (front) front.style.transform = `translate(-50%, calc(-50% + ${-y * 0.2}px))`; }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); }; apply(); window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); const hero = window.CONTENT.hero; return (
{hero.eyebrow}

{hero.title1}
{hero.title2}
{hero.titleAccent}

{hero.subhead}

{hero.howLink}
{hero.stats.map((s, i) =>
{s.num}{s.small && {s.small}}
{s.label}
)}

{hero.disclaimer}