// App — mount everything + scroll reveal + nav progress
const App = () => {
  React.useEffect(() => {
    // Reveal on scroll
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('on');
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => obs.observe(el));

    // Nav progress dots
    const sections = Array.from(document.querySelectorAll('section.screen'));
    const navProg = document.getElementById('nav-prog');
    if (navProg) {
      navProg.innerHTML = '';
      sections.forEach((s, i) => {
        const d = document.createElement('div');
        d.className = 'dot';
        d.title = s.getAttribute('data-screen-label') || `Sekcja ${i + 1}`;
        d.onclick = () => s.scrollIntoView({ behavior: 'smooth', block: 'start' });
        navProg.appendChild(d);
      });
    }

    const progObs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          const i = sections.indexOf(e.target);
          if (i < 0) return;
          const dot = navProg?.children[i];
          if (!dot) return;
          if (e.isIntersecting) dot.classList.add('active');
          else dot.classList.remove('active');
        });
      },
      { threshold: 0.35 }
    );
    sections.forEach((s) => progObs.observe(s));

    return () => { obs.disconnect(); progObs.disconnect(); };
  }, []);

  return (
    <>
      <HeroSection />
      <AlarmSection />
      <ProblemSection />
      <BeforeAfter />
      <HowItWorks />
      <CostsSection />
      <FearsSection />
      <RealizationsSection />
      <StorySection />
      <CTASection />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('main')).render(<App />);