// Nav — fixed, translucent-on-scroll top navigation
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a className="brand" href="#top">
          <img src="../../assets/logo-mark.svg" alt="" />
          delego
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#pillars">Product</a>
          <a className="nav-link" href="#how">How it works</a>
          <a className="nav-link" href="#code">Docs</a>
          <a className="nav-link" href="#pricing">Pricing</a>
          <a className="nav-link" href="#spec">Spec</a>
        </div>
        <div className="nav-spacer"></div>
        <div className="nav-cta">
          <a className="btn btn-ghost" href="#">Sign in</a>
          <a className="btn btn-primary" href="#">Start building <i data-lucide="arrow-right"></i></a>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;