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

  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="#" className="nav-logo" aria-label="Base 38 home">
        <span className="nav-logo-mark">
          BASE<span className="num">38</span>
        </span>
      </a>
      <div className="nav-links">
        <a href="#what-we-do">What we do</a>
        <a href="#use-cases">Use cases</a>
        <a href="#process">Process</a>
        <a href="#try-it">Try it live</a>
        <a href="#about">About</a>
      </div>
      <a href="#contact" className="btn btn-primary nav-cta">
        Book a chat
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14M13 6l6 6-6 6"/>
        </svg>
      </a>
    </nav>
  );
}
window.Nav = Nav;