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

  const links = [
    { id: 'products', label: 'Products' },
    { id: 'about', label: 'About' },
    { id: 'progress', label: 'Development' },
    { id: 'devs', label: 'About the Devs', href: 'about.html', external: true },
  ];

  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <nav className={`k-nav ${scrolled ? 'k-nav--scrolled' : ''}`}>
      <div className="k-nav__inner">
        <a href="#top" onClick={go('top')} className="k-logo" aria-label="Kratos Applications">
          <span className="k-logo__mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="18" height="18">
              <path d="M4 4 L4 20 M4 12 L14 4 M4 12 L14 20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="square"/>
            </svg>
          </span>
          <span className="k-logo__word">Kratos</span>
          <span className="k-logo__suffix">/applications</span>
        </a>

        <div className="k-nav__links">
          {links.map((l) => (
            l.external ? (
              <a key={l.id} href={l.href} className="k-nav__link">{l.label}</a>
            ) : (
              <a
                key={l.id}
                href={`#${l.id}`}
                onClick={go(l.id)}
                className={`k-nav__link ${active === l.id ? 'is-active' : ''}`}
              >
                {l.label}
              </a>
            )
          ))}
        </div>

        <div className="k-nav__cta">
          <a href="#progress" onClick={go('progress')} className="k-btn k-btn--ghost k-btn--sm">
            <span className="k-dot k-dot--live" /> In development
          </a>
          <a href="#cta" onClick={go('cta')} className="k-btn k-btn--primary k-btn--sm">Get in touch</a>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;