/* eslint-disable */
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Nav({ theme, setTheme, t, p, hrefs }) {
  const H = Object.assign({
    home: "#top", about: "#about", software: "#software", trade: "#trade", contact: "#contact",
  }, hrefs || {});
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navLinkS = {
    fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 11,
    letterSpacing: "1.17px", textTransform: "uppercase",
    color: p.fg, textDecoration: "none", opacity: 0.9, whiteSpace: "nowrap",
  };

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      display: "flex", alignItems: "center", gap: 24,
      padding: "18px 32px",
      background: scrolled ? p.navBg : "transparent",
      borderBottom: scrolled ? `1px solid ${p.navBorder}` : "1px solid transparent",
      transition: "background 200ms ease, border-color 200ms ease",
      fontFamily: "var(--font-ui)",
      backdropFilter: scrolled ? "saturate(140%)" : "none",
    }}>
      <a href={H.home} style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
        <img src={p.logo} alt="Forwardmax" style={{ height: 18, width: "auto", display: "block" }} />
      </a>

      <div style={{ display: "flex", marginLeft: "auto", alignItems: "center", gap: 28 }}>
        <div className="__nav-links" style={{ display: "flex", gap: 28, alignItems: "center" }}>
          <a href={H.about} style={navLinkS}>{t.nav.about}</a>
          <a href={H.software} style={navLinkS}>{t.nav.software}</a>
          <a href={H.trade} style={navLinkS}>{t.nav.trade}</a>
          <a href={H.contact} style={navLinkS}>{t.nav.contact}</a>
        </div>

        <div role="group" aria-label="Theme toggle" style={{
          display: "inline-flex", alignItems: "center",
          border: `1px solid ${p.pillBorder}`,
          borderRadius: 999, padding: 2, gap: 0,
        }}>
          {[
            { code: "dark", label: "Dark" },
            { code: "light", label: "Light" },
          ].map(({ code, label }) => {
            const active = theme === code;
            return (
              <button key={code} onClick={() => setTheme(code)} style={{
                appearance: "none", border: 0, cursor: "pointer",
                padding: "5px 12px", borderRadius: 999,
                background: active ? p.pillActiveBg : "transparent",
                color: active ? p.pillActiveFg : p.pillFg,
                fontFamily: "var(--font-ui)", fontWeight: 700,
                fontSize: 11, letterSpacing: "1.17px", textTransform: "uppercase",
                transition: "background 160ms ease, color 160ms ease",
              }}>{label}</button>
            );
          })}
        </div>

        <a href={H.contact} style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "transparent", color: p.fg,
          border: `1px solid ${p.btnBorder}`, borderRadius: 999,
          padding: "10px 18px",
          fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 11,
          letterSpacing: "1.17px", textTransform: "uppercase", textDecoration: "none",
          whiteSpace: "nowrap",
        }}>
          {t.nav.getInTouch}
        </a>
      </div>
    </nav>
  );
}

window.Nav = Nav;