/* global React */
const { useEffect: useEffectH, useState: useStateH } = React;

function NxHeader({ section, onNav, lang, setLang }) {
  const [scrolled, setScrolled] = useStateH(false);
  useEffectH(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const t = window.NX_COPY[lang];
  const links = [
    { id: "profile", label: t.nav.profile },
    { id: "services", label: t.nav.services },
    { id: "career", label: t.nav.career },
  ];
  return (
    <header className={`nx-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="nx-container nx-container--wide">
        <div className="nx-header__inner">
          <div className="nx-header__left">
            <a className="nx-logo" href="#top" onClick={(e) => { e.preventDefault(); onNav("top"); }}>
              <img src="assets/nexentia-icon.png" alt="Nexentia" />
              <span className="nx-wordmark">NEXENTIA</span>
            </a>
          </div>
          <nav className="nx-nav">
            {links.map((l) => (
              <a key={l.id} href={`#${l.id}`}
                 className={`nx-nav__link ${section === l.id ? "is-active" : ""}`}
                 onClick={(e) => { e.preventDefault(); onNav(l.id); }}>{l.label}</a>
            ))}
          </nav>
          <div className="nx-lang">
            <button className={lang === "de" ? "is-active" : ""} onClick={() => setLang("de")}>DE</button>
            <button className={lang === "en" ? "is-active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
        </div>
      </div>
    </header>
  );
}
window.NxHeader = NxHeader;