// Top navigation
const { useState: useStateN, useEffect: useEffectN } = React;

const Nav = ({ route, setRoute, locale, setLocale }) => {
  const [scrolled, setScrolled] = useStateN(false);
  useEffectN(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className="nav" style={{ background: scrolled ? "rgba(10,10,12,0.92)" : "rgba(10,10,12,0.55)" }}>
      <div className="nav__inner">
        <a className="nav__logo" href="#" onClick={(e) => { e.preventDefault(); setRoute({ page: "home" }); }}>
          <Logo />
          <BELoop />
        </a>
        <div className="nav__links">
          {NAV_ITEMS.map(item => (
            <button
              key={item.id}
              className={`nav__link ${route.page === item.id ? "is-active" : ""}`}
              onClick={() => setRoute({ page: item.id })}
            >
              {item.label}
            </button>
          ))}
        </div>
        <div className="nav__right">
          <div className="nav__locale" role="group" aria-label="locale">
            <button className={locale === "en" ? "is-active" : ""} onClick={() => setLocale("en")}>EN</button>
            <button className={locale === "ar" ? "is-active" : ""} onClick={() => setLocale("ar")}>عر</button>
          </div>
          <BriefBtn label="Brief us" />
        </div>
      </div>
    </nav>
  );
};

Object.assign(window, { Nav });