/* 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];

  // Detect current page for active nav state
  const path = window.location.pathname;
  const isAI = path.includes("ai.html") || path.endsWith("/ai");
  const isConsulting = path.includes("consulting.html") || path.endsWith("/consulting");

  function handleLogoClick(e) {
    if (onNav) { e.preventDefault(); onNav("top"); }
  }

  function handleContactClick(e) {
    e.preventDefault();
    if (onNav) {
      // Homepage: use scrollspy nav
      onNav("contact");
    } else {
      // Sub-pages: scroll to local #contact anchor
      const el = document.getElementById("contact");
      if (el) {
        window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
      }
    }
  }

  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="/" onClick={handleLogoClick}>
              <img src="/assets/nexentia-icon.png" alt="Nexentia" />
              <span className="nx-wordmark">NEXENTIA</span>
            </a>
          </div>
          <nav className="nx-nav">
            <a href="/ai" className={`nx-nav__link ${isAI ? "is-active" : ""}`}>
              {t.nav.ai}
            </a>
            <a href="/consulting" className={`nx-nav__link ${isConsulting ? "is-active" : ""}`}>
              {t.nav.consulting}
            </a>
            <a
              href="#contact"
              className={`nx-nav__link ${section === "contact" ? "is-active" : ""}`}
              onClick={handleContactClick}
            >
              {t.nav.contact}
            </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;