// app.jsx

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const close = () => setOpen(false);

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#top" className="nav-brand" onClick={close}>
          <img src="assets/Solo Logo Talos.png" alt="Talos" className="nav-logo" />
          <span>Talos Labs IA</span>
          <span className="dot" />
        </a>
        <div className="nav-links">
          <a href="#productos">Productos</a>
          <a href="#como-trabajamos">Cómo trabajamos</a>
          <a href="#contacto">Contacto</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="#contacto" className="nav-cta">Empecemos</a>
          <button
            className={`nav-hamburger ${open ? 'open' : ''}`}
            onClick={() => setOpen(o => !o)}
            aria-label="Menú">
            <span /><span /><span />
          </button>
        </div>
      </nav>
      {open && (
        <div className="nav-mobile-menu">
          <a href="#productos"        onClick={close}>Productos</a>
          <a href="#como-trabajamos"  onClick={close}>Cómo trabajamos</a>
          <a href="#contacto"         onClick={close}>Contacto</a>
          <a href="#contacto" className="btn btn-primary" style={{ marginTop: 8 }} onClick={close}>Empecemos</a>
        </div>
      )}
    </>
  );
}

function App() {
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-palette', 'indigo');
    root.setAttribute('data-density', 'regular');
  }, []);

  return (
    <>
      <Nav />
      <main id="top">
        <Hero variant="fullbleed" />
        <Marquee />
        <Products />
        <HowWeWork />
        <CTA />
      </main>
      <Footer />
    </>
  );
}

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