function Nav() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [menu, setMenu] = useState(null);
  const [mobSys, setMobSys] = useState(false);
  const closeTimer = React.useRef(null);
  const openMenu = (id) => { clearTimeout(closeTimer.current); setMenu(id); };
  const scheduleClose = () => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setMenu(null), 320); };
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (id) => (e) => {
    e.preventDefault();
    setOpen(false);
    const t = document.getElementById(id);
    if (t) t.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <header className={`nav nav-glass ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a className="nav-logo" href="#top" onClick={go("top")}>
          <img className="nav-logo-img" src="assets/aigenci-logo-white.png" alt="Aigenci" />
        </a>
        <nav className="nav-links">
          <div className={`nav-item ${menu === "sistemas" ? "open" : ""}`} onMouseEnter={() => openMenu("sistemas")} onMouseLeave={scheduleClose}>
            <a href="#" onClick={(e) => e.preventDefault()} className="has-menu">Sistemas</a>
            <div className="menu-panel">
              <a className="menu-item" href="Aigenci One.html"><span className="mi-ic">①</span><span className="mi-tx"><span className="mi-title">Aigenci One</span><span className="mi-sub">Visibilidad directa</span></span><span className="mi-go">→</span></a>
              <a className="menu-item" href="Aigenci Pro.html"><span className="mi-ic">②</span><span className="mi-tx"><span className="mi-title">Aigenci Pro</span><span className="mi-sub">Atracción + conversión</span></span><span className="mi-go">→</span></a>
              <a className="menu-item" href="Aigenci Max.html"><span className="mi-ic">③</span><span className="mi-tx"><span className="mi-title">Aigenci Max</span><span className="mi-sub">Máquina de ventas escalable</span></span><span className="mi-go">→</span></a>
            </div>
          </div>
          <a href="Casos.html">Casos</a>
          <a href="Sobre Nosotros.html">Nosotros</a>
        </nav>
        <div className="nav-right">
          <a className="btn btn-primary" href="#cba672efdb">Crece tu negocio <Arrow /></a>
          <button className="nav-burger" aria-label="Menú" onClick={() => setOpen(!open)}>
            <svg width="18" height="12" viewBox="0 0 18 12"><path d="M0 1h18M0 6h18M0 11h18" stroke="currentColor" strokeWidth="1.8"/></svg>
          </button>
        </div>
        <div className={`nav-mobile ${open ? "open" : ""}`}>
          <button type="button" className={`nav-mob-acc ${mobSys ? "open" : ""}`} onClick={() => setMobSys(!mobSys)}>
            Sistemas
            <svg className="nav-mob-chev" width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div className={`nav-mob-sub ${mobSys ? "open" : ""}`}>
            <div className="nav-mob-sub-in">
              <a href="Aigenci One.html"><span className="nav-mob-ic">①</span><span className="nav-mob-tx"><span className="nav-mob-sub-n">Aigenci One</span><span className="nav-mob-sub-d">Visibilidad directa</span></span></a>
              <a href="Aigenci Pro.html"><span className="nav-mob-ic">②</span><span className="nav-mob-tx"><span className="nav-mob-sub-n">Aigenci Pro</span><span className="nav-mob-sub-d">Atracción + conversión</span></span></a>
              <a href="Aigenci Max.html"><span className="nav-mob-ic">③</span><span className="nav-mob-tx"><span className="nav-mob-sub-n">Aigenci Max</span><span className="nav-mob-sub-d">Máquina de ventas escalable</span></span></a>
            </div>
          </div>
          <a href="Casos.html">Casos de éxito</a>
          <a href="Sobre Nosotros.html">Nosotros</a>
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { Nav });