/* global React, useT, LangToggle, NymoMark */

function Nav() {
  const { t } = useT();
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nv " + (stuck ? "is-stuck" : "")}>
      <a href="#" className="nv-brand" aria-label="nymo">
        <NymoMark size={22} />
        <span className="nv-tag" aria-hidden="true">BETA</span>
      </a>
      <ul className="nv-links">
        <li><a href="#how">{t.nav.how}</a></li>
        <li><a href="#emp">{t.nav.employers}</a></li>
        <li><a href="#cand">{t.nav.candidates}</a></li>
        <li><a href="#pilot">{t.nav.pilot}</a></li>
      </ul>
      <div className="nv-actions">
        <LangToggle />
        <a href="#waitlist" className="btn btn-primary">{t.nav.cta} <span aria-hidden="true">→</span></a>
      </div>
    </nav>
  );
}

window.Nav = Nav;