// Página única de la web. Orquesta el modal de contacto y el efecto de
// aparición al hacer scroll sobre los bloques marcados con .reveal.

// --- helpers ---
function useScrollReveal() {
  React.useEffect(() => {
    const nodos = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      nodos.forEach((n) => n.classList.add('is-visible'));
      return;
    }
    const observer = new IntersectionObserver(
      (entradas) => {
        entradas.forEach((entrada) => {
          if (entrada.isIntersecting) {
            entrada.target.classList.add('is-visible');
            observer.unobserve(entrada.target);
          }
        });
      },
      { threshold: 0.12 },
    );
    nodos.forEach((n) => observer.observe(n));
    return () => observer.disconnect();
  }, []);
}

// --- componente principal ---
function App() {
  const [contactoAbierto, setContactoAbierto] = React.useState(false);
  useScrollReveal();

  return (
    <>
      <FondoLiquido />
      <Nav onAbrirContacto={() => setContactoAbierto(true)} />
      <main>
        <Hero onAbrirContacto={() => setContactoAbierto(true)} />
        <ComoTrabajamos />
        <Sectores />
        <Faq />
        <CtaFinal onAbrirContacto={() => setContactoAbierto(true)} />
      </main>
      <Footer />

      <ContactoModal open={contactoAbierto} onClose={() => setContactoAbierto(false)} />
    </>
  );
}

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