/* Top navigation. Sticky, translucent on scroll, with a language toggle on the right.
   All copy from i18n; layout is the same in both languages. */
function Nav() {
  const { t, lang, toggle } = useT();
  const mobile = useMobile();

  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
      background: "rgba(5,8,15,0.72)",
      borderBottom: "1px solid var(--tb-line)"
    }}>
      <div style={{
        maxWidth: 1200, margin: "0 auto",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: mobile ? "12px 20px" : "14px 32px", gap: 16
      }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, color: "#fff", textDecoration: "none" }}>
          <img src="assets/timeback-mark.png" alt="" style={{ width: 28, height: 28 }} />
          <span style={{ font: "700 17px/1 'Inter'", letterSpacing: "-0.01em" }}>
            TimeBack <span style={{ color: "#94A3B8", fontWeight: 500 }}>AI</span>
          </span>
        </a>

        <div style={{ display: "flex", gap: mobile ? 10 : 28, alignItems: "center" }}>
          {!mobile && <>
            <a href="#problem"    style={navLink}>{t("nav.problem")}</a>
            <a href="#services"   style={navLink}>{t("nav.services")}</a>
            <a href="#industries" style={navLink}>{t("nav.industries")}</a>
            <a href="#process"    style={navLink}>{t("nav.process")}</a>
          </>}

          <button onClick={toggle} aria-label="Switch language" style={langBtn}>
            <span style={{ color: "#fff" }}>{lang === "en" ? "EN" : "ES"}</span>
            <span style={{ color: "#475569" }}>·</span>
            <span style={{ color: "#64748B" }}>{lang === "en" ? "ES" : "EN"}</span>
          </button>

          <a href="#cta" style={navCta}>{t("nav.cta")}</a>
        </div>
      </div>
    </nav>
  );
}

const navLink = {
  font: "500 14px 'Inter'",
  color: "#94A3B8",
  textDecoration: "none"
};

const langBtn = {
  display: "inline-flex", alignItems: "center", gap: 6,
  font: "600 12px/1 'JetBrains Mono'",
  letterSpacing: "0.06em",
  background: "transparent",
  border: "1px solid var(--tb-line)",
  borderRadius: 999,
  padding: "7px 12px",
  cursor: "pointer"
};

const navCta = {
  font: "600 14px/1 'Inter'", color: "#fff",
  background: "#3B82F6",
  padding: "10px 16px",
  borderRadius: 10,
  textDecoration: "none"
};

window.Nav = Nav;