// === App — Kaiko-inspired layout ==========================================
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [scrolled, setScrolled] = useStateApp(false);
  const [menuOpen, setMenuOpen] = useStateApp(false);
  const [modal, setModal] = useStateApp(null); // 'login' | 'signup' | null

  useReveal();

  useEffectApp(() => {
    document.documentElement.setAttribute('data-theme', 'light');
  }, []);

  useEffectApp(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffectApp(() => {
    document.body.style.overflow = (menuOpen || modal) ? 'hidden' : '';
  }, [menuOpen, modal]);

  // Deep-link: ?login=1 or #ingresar opens modal
  useEffectApp(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get('login') === '1' || window.location.hash === '#ingresar') {
      setModal('login');
    }
    if (params.get('signup') === '1' || window.location.hash === '#probar') {
      setModal('signup');
    }
  }, []);

  return (
    <React.Fragment>
      {/* Stripes + glows — previous working version */}
      <div className="atmosphere atmosphere--stripes" aria-hidden="true">
        <div className="atmosphere__base" />
        <div className="atmosphere__stripes" />
        <div className="atmosphere__glow atmosphere__glow--1" />
        <div className="atmosphere__glow atmosphere__glow--2" />
        <div className="atmosphere__glow atmosphere__glow--3" />
        <div className="atmosphere__vignette" />
      </div>

      <Nav
        onOpenMenu={() => setMenuOpen(true)}
        scrolled={scrolled}
        onLogin={() => setModal('login')}
        onSignup={() => setModal('signup')}
      />
      <Drawer
        open={menuOpen}
        onClose={() => setMenuOpen(false)}
        onLogin={() => setModal('login')}
        onSignup={() => setModal('signup')}
      />

      <LoginModal
        open={modal === 'login'}
        onClose={() => setModal(null)}
        onSwitch={() => setModal('signup')}
      />
      <SignupModal
        open={modal === 'signup'}
        onClose={() => setModal(null)}
        onSwitch={() => setModal('login')}
      />

      <main className="page">
        <Hero />

        <div className="content-box">
          <Marquee />
          <Stats />
          <Pillars />
          <Modules />
          <Dashboard />
          <Steps />
          <Testimonials />
          <Trust />
          <Pricing />
          <Services />
          <Blog />
          <FAQ />
          <Closing onSignup={() => setModal('signup')} />
          <Footer />
        </div>
      </main>
    </React.Fragment>
  );
}

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