// Activa Soluciones — Marketing site
// Top navigation. Sticky. Switches to blurred state once scrolled past hero.

const Nav = ({ onOpenDialog }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('Servicios');
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = ['Servicios', 'Industrias', 'Casos', 'Insights', 'Nosotros'];

  return (
    <nav className={"site-nav " + (scrolled ? "scrolled" : "")}>
      <div className="site-nav-inner">
        <a href="#top" className="brand" onClick={() => setActive('')}>
          <img src="../../assets/logo-mark.png" alt="" />
          <span className="brand-name">ACTIVA</span>
          <span className="brand-sub">SOLUCIONES</span>
        </a>
        <ul className="links">
          {links.map((l) => (
            <li key={l}>
              <a
                href={"#" + l.toLowerCase()}
                className={l === active ? "active" : ""}
                onClick={() => setActive(l)}
              >{l}</a>
            </li>
          ))}
        </ul>
        <button className="btn primary" onClick={onOpenDialog}>
          Agendar diagnóstico <span className="arr arrow-rise">→</span>
        </button>
      </div>
      <style>{`
        .site-nav {
          position: sticky; top: 0; z-index: 90;
          background: rgba(255,255,255,0.92);
          border-bottom: 1px solid transparent;
          transition: all 220ms var(--ease-rise);
        }
        .site-nav.scrolled {
          background: rgba(255,255,255,0.86);
          backdrop-filter: blur(12px);
          border-bottom-color: var(--color-border);
          box-shadow: 0 2px 12px rgba(10,26,53,0.04);
        }
        .site-nav-inner {
          max-width: var(--container-wide);
          margin: 0 auto;
          padding: 0 32px;
          height: var(--nav-height);
          display: flex; align-items: center; gap: 36px;
        }
        .brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
        .brand img { height: 36px; width: auto; align-self: center; }
        .brand-name {
          font-family: var(--font-display); font-weight: 800;
          color: var(--activa-blue-700); font-size: 18px; letter-spacing: 0.04em;
        }
        .brand-sub {
          font-family: var(--font-body); font-weight: 600;
          color: var(--color-accent); font-size: 10px; letter-spacing: 0.18em;
        }
        .links { list-style: none; padding: 0; margin: 0 0 0 24px; display: flex; gap: 28px; flex: 1; }
        .links a {
          font-family: var(--font-body); font-weight: 500; font-size: 14px;
          color: var(--color-fg-1); text-decoration: none;
          padding: 8px 0; position: relative; transition: color 180ms var(--ease-rise);
        }
        .links a:hover { color: var(--color-accent); }
        .links a.active { color: var(--activa-blue-700); font-weight: 600; }
        .links a::after {
          content: ""; position: absolute; left: 0; right: 100%;
          bottom: -4px; height: 2px;
          background: var(--color-accent);
          border-radius: 2px;
          transition: right 280ms var(--ease-rise);
        }
        .links a.active::after { right: 30%; }
        .site-nav .btn { padding: 11px 18px; font-size: 13px; }
      `}</style>
    </nav>
  );
};