/* CỘI — homepage root (trimmed) */

const { useState: useStateApp, useEffect: useEffectApp } = React;
const { Nav, Hero, BrandPillars, ProductFeature, Legend } = window.SonSections1;
const { FounderNote, VerifyABag, Footer } = window.SonSections3;

function App() {
  const [scrolled, setScrolled] = useStateApp(false);
  const [overDark, setOverDark] = useStateApp(true);

  useEffectApp(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 48);
      const navMidY = 24;
      let isDark = false;
      document.querySelectorAll('.section.dark, .vab, .footer, .hero, .pillars, .product-feature, .founder-note, .legend')
        .forEach(el => {
          const r = el.getBoundingClientRect();
          if (r.top <= navMidY + 32 && r.bottom > navMidY + 32) isDark = true;
        });
      setOverDark(isDark);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffectApp(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '-50px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div>
      <Nav scrolled={scrolled} overDark={overDark} />
      <Hero />
      <BrandPillars />
      <ProductFeature />
      <Legend />
      <FounderNote />
      <VerifyABag />
      <Footer />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);