function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 12);
    h();
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  React.useEffect(() => {
    const onResize = () => {
      if (window.innerWidth > 640) setMenuOpen(false);
    };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  React.useEffect(() => {
    if (menuOpen && window.innerWidth <= 640) {
      document.body.style.overflow = 'hidden';
      document.documentElement.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
      document.documentElement.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
      document.documentElement.style.overflow = '';
    };
  }, [menuOpen]);
  const root = '/';
  const logoHref = '/';
  const closeMenu = () => setMenuOpen(false);
  const mobileMenu = menuOpen && typeof document !== 'undefined'
    ? ReactDOM.createPortal(
        <div id="mobile-nav-panel" className="nav__mobile-panel">
          <div className="wrap nav__mobile-panel-inner">
            <div className="nav__mobile-links">
              <a href={root + "#platform"} onClick={closeMenu}>Product</a>
              <a href={root + "#generations"} onClick={closeMenu}>How It Works</a>
              <a href={root + "#roi"} onClick={closeMenu}>ROI</a>
              <a href={root + "#compare"} onClick={closeMenu}>Alternatives</a>
              <a href={root + "#faq"} onClick={closeMenu}>FAQ</a>
            </div>
            <div className="nav__mobile-actions">
              <a href="https://app.clearmetric.ai" className="btn btn--ghost btn--sm" onClick={closeMenu}>Sign in</a>
              <a href={BOOK_DEMO_URL} onClick={(event) => { closeMenu(); openBookDemo(event); }} className="btn btn--primary btn--sm">Book a demo <Arrow size={12}/></a>
            </div>
          </div>
        </div>,
        document.body
      )
    : null;
  return (
    <React.Fragment>
      <nav className={"nav " + (scrolled ? "scrolled" : "") + (menuOpen ? " nav--menu-open" : "")}>
        <div className="wrap nav__inner">
          <a href={logoHref} aria-label="Clearmetric home" className="nav__brand">
            <img className="nav__logo" src="assets/clearmetric-logo.svg" alt="Clearmetric"/>
            <span className="nav__beta">Beta</span>
          </a>
          <div className="nav__links">
            <a href={root + "#platform"}>Product</a>
            <a href={root + "#generations"}>How It Works</a>
            <a href={root + "#roi"}>ROI</a>
            <a href={root + "#compare"}>Alternatives</a>
            <a href={root + "#faq"}>FAQ</a>
          </div>
          <div className="nav__actions">
            <a href="https://app.clearmetric.ai" className="btn btn--ghost btn--sm">Sign in</a>
            <a href={BOOK_DEMO_URL} onClick={openBookDemo} className="btn btn--primary btn--sm">Book a demo <Arrow size={12}/></a>
          </div>
          <button
            type="button"
            className="nav__menu-toggle"
            aria-expanded={menuOpen}
            aria-controls="mobile-nav-panel"
            aria-label={menuOpen ? "Close navigation menu" : "Open navigation menu"}
            onClick={() => setMenuOpen(open => !open)}
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </nav>
      {mobileMenu}
    </React.Fragment>
  );
}
window.Nav = Nav;