/* global React */

function Topbar({ lang = "fi", setLang, dark = true, homeHref = "Etusivu.html" }) {
  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).html" : "Etusivu.html");
  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]);
  return (
    <header ref={headerRef} className={"site-header" + (dark ? "" : " is-light")}>
      <a className="site-header__brand" href={lh(homeHref)} aria-label="Softera">
        <img src={dark ? "assets/softera-logo-white.png" : "assets/softera-logo.png"} alt="" />
      </a>
      <nav className={"site-header__nav" + (open ? " is-open" : "")} onClick={(e) => { if (e.target.closest("a")) setOpen(false); }}>
        <a className="site-header__link" href={lh("ratkaisut.html")}>{lang === "fi" ? "Ratkaisut" : "Solutions"}</a>
        <a className="site-header__link" href={lh("toimialat.html")}>{lang === "fi" ? "Toimialat" : "Industries"}</a>
        <a className="site-header__link" href={lh("asiakkaat.html")}>{lang === "fi" ? "Asiakkaat" : "Customers"}</a>
        <a className="site-header__link" href={lh("Yritys.html")}>{lang === "fi" ? "Yritys" : "Company"}</a>
        <a className="site-header__link" href={lh("ajankohtaista.html")}>{lang === "fi" ? "Ajankohtaista" : "Latest"}</a>
        <a className="site-header__link site-header__navcta" href="#yhteys">{lang === "fi" ? "Pyydä demo" : "Request a demo"}</a>
      </nav>
      <div className="site-header__cta">
        <div className="lang-switch" role="group" aria-label={lang === "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 href="#yhteys" className="btn btn--accent" style={{padding:"9px 16px",fontSize:14}}>{lang === "fi" ? "Pyydä demo" : "Request a demo"}</a>
        <button type="button" className={"nav-toggle" + (open ? " is-open" : "")} aria-label={lang === "fi" ? "Valikko" : "Menu"} aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <span className="nav-toggle__bars"></span>
        </button>
      </div>
    </header>
  );
}

window.Topbar = Topbar;