function Nav() {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <nav className={"alg-nav alg-nav-overlay" + (open ? " is-open" : "")}>
      <div className="alg-nav-inner">
        <a href="#" className="alg-logo" onClick={close}>
          <img src="assets/logos/horizontal-white.png" alt="ALG — Aviation Lead Generation"/>
        </a>
        <div className="alg-nav-links">
          <a href="#about">About</a>
          <a href="#industries">Who We Serve</a>
          <a href="#system">Our System</a>
          <a href="/blog">Blog</a>
        </div>
        <div className="alg-nav-cta">
          <a href="#contact" className="alg-btn alg-btn-primary">Get a Free Audit</a>
          <button
            type="button"
            className="alg-nav-toggle"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            aria-controls="alg-mobile-menu"
            onClick={() => setOpen(o => !o)}
          >
            <span className="alg-nav-toggle-bar"></span>
            <span className="alg-nav-toggle-bar"></span>
            <span className="alg-nav-toggle-bar"></span>
          </button>
        </div>
      </div>
      <div id="alg-mobile-menu" className="alg-mobile-menu" role="dialog" aria-modal="true" hidden={!open}>
        <a href="#about" onClick={close}>About</a>
        <a href="#industries" onClick={close}>Who We Serve</a>
        <a href="#system" onClick={close}>Our System</a>
        <a href="/blog" onClick={close}>Blog</a>
        <a href="#contact" className="alg-btn alg-btn-primary alg-mobile-menu-cta" onClick={close}>Get a Free Audit</a>
      </div>
    </nav>
  );
}
window.Nav = Nav;