/* Top navigation with mobile menu. */
const { Icon, SITE } = window;

function SiteNav() {
  const [open, setOpen] = React.useState(false);
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const on = () => setSolid(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  React.useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);
  const close = () => setOpen(false);
  return (
    <header className={"nav" + (solid || open ? " nav--solid" : "")}>
      <div className="nav__inner">
        <a href="#top" className="nav__logo" onClick={close} aria-label="LexInTosh home">
          <img src={window.__asset("logo", "assets/lexintosh-logo.png")} alt="LexInTosh" />
        </a>
        <nav className="nav__links">
          {SITE.nav.map((l) => <a key={l.href} href={l.href} className="nav__link">{l.label}</a>)}
        </nav>
        <span className="nav__spacer" />
        <span className="nav__cta"><window.SalesButton size={window.CTA_MD} /></span>
        <button className="nav__burger" aria-label="Toggle menu" onClick={() => setOpen((o) => !o)}>
          <Icon name={open ? "x" : "menu"} size={24} />
        </button>
      </div>
      {open ? (
        <div className="mobile-menu">
          {SITE.nav.map((l) => (
            <a key={l.href} href={l.href} className="mobile-menu__link" onClick={close}>
              {l.label}<Icon name="arrow-right" size={18} />
            </a>
          ))}
          <div className="mobile-menu__cta"><window.SalesButton size={{ ...window.CTA_LG, width: "100%" }} /></div>
        </div>
      ) : null}
    </header>
  );
}
window.SiteNav = SiteNav;