// Nav
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="nav" data-scrolled={scrolled}>
      <div className="nav-inner">
        <a href="#top" className="nav-logo" aria-label="NorthEdge Automations">
          <img src="assets/logo-mark-ivory.png" alt="NorthEdge Automations" className="nav-mark" />
        </a>
        <div className="nav-links">
          <a href="#problem">The leak</a>
          <a href="#services">Services</a>
          <a href="#process">Process</a>
          <a href="#case">Case study</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#contact" className="btn btn-accent">Book a free audit <span className="arrow">→</span></a>
      </div>
    </nav>
  );
}
Object.assign(window, { Nav });