// Top nav — minimal, sticky on scroll
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"nav " + (scrolled ? "nav-scrolled" : "")}>
      <div className="container nav-inner">
        <a className="nav-brand" href="#top" aria-label="Haven home">
          <IconLogo size={20}/>
          <span>Haven</span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="#how">How it works</a>
          <a href="#tests">What we test</a>
          <a href="#trust">Accreditation</a>
          <a href="#report">Sample report</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="nav-link-quiet" href="#faq">Sign in</a>
          <a className="btn btn-primary btn-sm" href="#order">
            Order kit
          </a>
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;