// app.jsx — root composition
function App() {
  // Simple scroll-reveal: any [data-reveal] gets .is-visible when in viewport
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach(el => el.classList.add('is-visible'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div className="app">
      <Nav/>
      <Hero/>
      <Band/>
      <Process/>
      <Packages/>
      <Testimonials/>
      <Faq/>
      <Contact/>
      <Footer/>
      <FloatingWA/>
    </div>
  );
}

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