/* App composition + IntersectionObserver reveals */

const useReveals = () => {
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
      return;
    }
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e, i) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
};

const App = () => {
  useReveals();
  return (
    <>
      <Navbar />
      <main id="main">
        <Hero />
        <Manifiesto />
        <Pilares />
        <Empresas />
        <Metodo />
        <Programas />
        <Diferencia />
        <Comunidad />
        <Comenzar />
      </main>
      <Footer />
    </>
  );
};

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