function Header({ active, lang }) {
  // NOTE: this header is used by Yritys/tarina/ajankohtaista pages (ui/styles.css
  // styling under .sft-header). The product pages use components/Topbar.jsx
  // (under .site-header). Keep their nav items in sync.
  lang = lang || (typeof window !== "undefined" && window.SOFTERA_LANG) || "fi";
  const lh = (h) => (typeof window !== "undefined" && window.langHref) ? window.langHref(h) : h;
  const switchHref = (t) => (typeof window !== "undefined" && window.langSwitchHref) ? window.langSwitchHref(t) : (t === "en" ? "home-english" : "etusivu");
  const fi = (a, b) => lang === "fi" ? a : b;
  const [open, setOpen] = React.useState(false);
  const headerRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (headerRef.current && !headerRef.current.contains(e.target)) setOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("pointerdown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("pointerdown", onDoc); document.removeEventListener("keydown", onKey); };
  }, [open]);
  const path = (typeof window !== "undefined" ? window.location.pathname : "") || "";
  const file = path.split("/").pop() || "";
  const detected =
    active ||
    (file.startsWith("ajankohtaista") ? "ajankohtaista" :
     file.startsWith("tarina-") ? "yritys" :
     file === "yritys" ? "yritys" :
     file === "asiakkaat" ? "asiakkaat" :
     file.startsWith("ratkaisut") || file === "softera-360" || file === "softera-horizon" ? "ratkaisut" :
     file.startsWith("toimialat") || file === "ymparistohuolto" || file === "valokuitu" || file === "kiinteistot-energia" ? "toimialat" :
     "yritys");
  const cls = (key) => "sft-header__link" + (detected === key ? " is-active" : "");
  return (
    <header ref={headerRef} className="sft-header">
      <a href={lh("etusivu")} className="sft-header__brand" aria-label="Softera">
        <img src="assets/softera-logo-white.png" alt="" />
      </a>
      <nav className={"sft-header__nav" + (open ? " is-open" : "")} onClick={(e) => { if (e.target.closest("a")) setOpen(false); }}>
        <a className={cls("ratkaisut")} href={lh("ratkaisut")}>{fi("Ratkaisut", "Solutions")}</a>
        <a className={cls("toimialat")} href={lh("toimialat")}>{fi("Toimialat", "Industries")}</a>
        <a className={cls("asiakkaat")} href={lh("asiakkaat")}>{fi("Asiakkaat", "Customers")}</a>
        <a className={cls("yritys")} href={lh("yritys")}>{fi("Yritys", "Company")}</a>
        <a className={cls("ajankohtaista")} href={lh("ajankohtaista")}>{fi("Ajankohtaista", "Latest")}</a>
        <a className="sft-header__link sft-header__navcta" href={lh("etusivu#yhteys")}>{fi("Varaa demo", "Request a demo")}</a>
      </nav>
      <div className="sft-header__cta">
        <div className="lang-switch" role="group" aria-label={fi("Vaihda kieli", "Change language")}>
          {lang === "fi"
            ? <span className="lang-switch__opt is-active" aria-current="true" lang="fi">FI</span>
            : <a className="lang-switch__opt" href={switchHref("fi")} hrefLang="fi" lang="fi">FI</a>}
          {lang === "en"
            ? <span className="lang-switch__opt is-active" aria-current="true" lang="en">EN</span>
            : <a className="lang-switch__opt" href={switchHref("en")} hrefLang="en" lang="en">EN</a>}
        </div>
        <a className="sft-btn sft-btn--ghost-light" href={lh("etusivu#yhteys")}>{fi("Varaa demo", "Request a demo")}</a>
        <button type="button" className={"nav-toggle" + (open ? " is-open" : "")} aria-label={fi("Valikko", "Menu")} aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <span className="nav-toggle__bars"></span>
        </button>
      </div>
    </header>
  );
}