// Top navigation
function Nav({ t, lang, onLang }) {
  const narrow = window.useNarrow(768);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "color-mix(in srgb, var(--bg) 88%, transparent)" : "transparent",
      backdropFilter: scrolled ? "blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid var(--rule-2)" : "1px solid transparent",
      transition: "background .2s, border-color .2s",
    }}>
      <div className="wrap" style={{
        display: "flex", flexDirection: narrow ? "column" : "row", alignItems: narrow ? "stretch" : "center",
        justifyContent: "space-between", gap: narrow ? 12 : 0, padding: narrow ? "12px 16px" : "16px 32px",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: narrow ? 12 : 36, flexWrap: "wrap", minWidth: 0 }}>
          <a href="#" style={{ display: "flex", alignItems: "center", gap: 9, flexShrink: 0 }}>
            <Logomark />
            <span className="serif" style={{ fontSize: 22, letterSpacing: "-0.01em" }}>Grendex</span>
          </a>
          <nav style={{ display: "flex", flexWrap: "wrap", gap: narrow ? 14 : 24, fontSize: narrow ? 13 : 14, color: "var(--ink-2)" }}>
            <a href="#how">{t.product}</a>
            <a href="#modules">{t.modules}</a>
            <a href="#regulation">{t.regulation}</a>
          </nav>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: narrow ? "space-between" : "flex-end", gap: 16, flexWrap: "wrap" }}>
          <LangToggle lang={lang} onChange={onLang} />
          <a href="#calc" className="mono" style={{ fontSize: 12, letterSpacing: "0.06em", color: "var(--ink-3)", textTransform: "uppercase" }}>
            {t.calc} →
          </a>
          <a className="btn" href="#demo" style={{ flexShrink: 0 }}>{t.demo}</a>
        </div>
      </div>
    </header>
  );
}

function LangToggle({ lang, onChange }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center",
      border: "1px solid var(--rule)", borderRadius: 999, padding: 2,
      fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.06em",
    }}>
      {["tr", "en"].map(l => (
        <button key={l} onClick={() => onChange(l)} style={{
          appearance: "none", border: 0, padding: "5px 10px", borderRadius: 999,
          background: lang === l ? "var(--ink)" : "transparent",
          color: lang === l ? "var(--bg)" : "var(--ink-3)",
          textTransform: "uppercase",
          transition: "all .15s",
        }}>{l}</button>
      ))}
    </div>
  );
}

function Logomark({ size = 26 }) {
  // Use the brand logo asset; switches based on dark/light aesthetic
  const dark = typeof document !== "undefined" && document.body.dataset.aesthetic === "mono";
  const src = dark
    ? (window.__resources?.logoWhite || "assets/grendex-logo-white.png")
    : (window.__resources?.logoBlack || "assets/grendex-logo-black.png");
  return (
    <img src={src} alt="Grendex" width={size} height={size} style={{ display: "block", objectFit: "contain" }}/>
  );
}

window.Nav = Nav;
window.Logomark = Logomark;