function Nav() {
  const [openMenu, setOpenMenu] = React.useState(false);
  const closeTimer = React.useRef(null);

  const open = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    setOpenMenu(true);
  };
  const scheduleClose = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setOpenMenu(false), 240);
  };

  const iconFor = (key) => key === 'bot' ? I.bot : key === 'web' ? I.web : key === 'flow' ? I.flow
    : key === 'data' ? I.data : key === 'doc' ? I.doc : I.sparkle;

  return (
    <nav className="top">
      <div className="inner">
        <a href="#top" className="logo"><span className="g">G</span>enerative <span style={{ color: 'var(--fg-dim)', fontWeight: 400 }}>Solutions</span></a>

        <div
          className="nav-item-with-menu"
          onMouseEnter={open}
          onMouseLeave={scheduleClose}
        >
          <a href="#servicios" className={`nav-link nav-link-trigger ${openMenu ? 'active' : ''}`}>
            Servicios
            <span className={`caret ${openMenu ? 'up' : ''}`}>▾</span>
          </a>
          <div className={`mega-menu ${openMenu ? 'open' : ''}`} onMouseEnter={open} onMouseLeave={scheduleClose}>
            <div className="mega-menu-inner">
              <div className="mega-menu-header">
                <div className="mono" style={{ color: 'var(--fg-dim)' }}>Catálogo de servicios</div>
                <div className="mega-menu-title">Automatizaciones e IA adaptadas a tu negocio</div>
              </div>
              <div className="mega-menu-grid">
                {SERVICES.map((s) => (
                  <a key={s.title} href="#servicios" className="mega-menu-card" onClick={() => setOpenMenu(false)}>
                    <div className="mm-icon">{iconFor(s.icon)}</div>
                    <div className="mm-body">
                      <div className="mm-title">{s.title}</div>
                      <div className="mm-sub">{s.tagline}</div>
                    </div>
                  </a>
                ))}
                <a href="#contacto" className="mega-menu-card mega-menu-card-cta" onClick={() => setOpenMenu(false)}>
                  <div className="mm-icon mm-icon-cta">↗</div>
                  <div className="mm-body">
                    <div className="mm-title">Háblame y lo valoramos</div>
                    <div className="mm-sub">¿Tu caso no encaja? Llamada gratuita de 20 min</div>
                  </div>
                  <div className="mm-price mm-price-cta">gratis</div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <a href="#proceso" className="nav-link">Proceso</a>
        <a href="#roi" className="nav-link">Calcula tu ahorro</a>
        <a href="#demo" className="nav-link">Demo</a>
        <a href="#faq" className="nav-link">Preguntas frecuentes</a>
        <a href="#contacto" className="btn btn-primary nav-link cta-link" style={{ padding: '10px 18px', fontSize: '0.85rem', color: 'rgb(245, 232, 232)' }}>
          Hablemos <span className="arrow">↗</span>
        </a>
      </div>
    </nav>
  );
}
window.Nav = Nav;