/* eslint-disable no-undef */
// Nav — centered links, no logo

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="container nav-inner nav-inner-centered">
          <div className="nav-links">
            {window.SITE.NAV.map(n => (
              <a
                key={n.href}
                href={n.href}
                className={n.label === 'Inquire' ? 'nav-link nav-link-cta' : 'nav-link'}
              >{n.label}</a>
            ))}
          </div>
          <button
            className="menu-btn"
            aria-label="Open menu"
            onClick={() => setOpen(true)}
          >
            <Icon.Menu />
          </button>
        </div>
      </nav>

      <div className={`drawer ${open ? 'open' : ''}`}>
        <div className="drawer-head">
          <button className="icon-btn" onClick={() => setOpen(false)} aria-label="Close menu">
            <Icon.Close />
          </button>
        </div>
        <div className="drawer-links">
          {window.SITE.NAV.map(n => (
            <a
              key={n.href}
              href={n.href}
              onClick={() => setOpen(false)}
              className={n.label === 'Inquire' ? 'drawer-link-cta' : ''}
            >{n.label}</a>
          ))}
        </div>
      </div>
    </>
  );
}

window.Nav = Nav;