/* ASCX Box Walkthrough — app: composition, scroll reveal, progress bar. text/babel. */
(function () {
const { AnnouncementBar, Nav, Hero, Movement, Seam, Stamp } = window.W1;
const { Disciplines, Climb, DayCard } = window.W2;
const { InsideBox, Versus, Marks, Pricing, Faq, FinalCTA, Footer } = window.W3;
const { Drop01, CartButton } = window.LVD;
const { Flows, FreeBand } = window.LVX;

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      els.forEach(e => e.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);
}

function ProgressBar() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      if (ref.current) ref.current.style.width = (max > 0 ? (h.scrollTop / max) * 100 : 0) + '%';
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return <div className="pgbar" ref={ref} />;
}

function WalkApp() {
  useReveal();
  return (
    <React.Fragment>
      <ProgressBar />
      <div className="lp-topbar">
        <AnnouncementBar />
        <Nav />
      </div>
      <Hero />
      <Movement />
      {/* Chapter two opens with the product itself — the box, then the card it
          runs on, ending with what a missed day costs. */}
      <Seam lt bare />
      <InsideBox />
      <DayCard />
      <Seam bare />
      <Disciplines />
      <Climb />
      <Seam lt bare />
      <Versus />
      <Seam bare />
      <Marks />
      <Drop01 />
      <Pricing />
      <Stamp items={['Earned', 'Not given']} />
      <Seam lt bare />
      <Faq />
      <Seam bare />
      <FreeBand />
      <FinalCTA />
      <Footer />
      <CartButton />
      <Flows />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<WalkApp />);
})();