function App() {
  const [modalOpen, setModalOpen] = React.useState(false);
  const [preselected, setPreselected] = React.useState('');

  const openModal = (product) => {
    setPreselected(typeof product === 'string' ? product : '');
    setModalOpen(true);
  };

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav onCotizar={openModal} />
      <Hero onCotizar={openModal} />
      <Portafolio onCotizar={openModal} />
      <Aliados />
      <QuienesSomos />
      <Contacto onCotizar={openModal} />
      <Footer />
      <QuoteModal open={modalOpen} preselected={preselected} onClose={() => setModalOpen(false)} />
      <FloatingContact />
    </>
  );
}

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