const { Logo } = window.DASKINODesignSystem_5a312e;

const NAV = [["home","Home"],["trabalhos","Trabalhos"],["stills","Stills"],["estudio","Estúdio"],["contato","Contato"]];

function SiteNav({ route, go }) {
  return (
    <nav aria-label="Navegação principal" style={{ flexWrap: "wrap", position: "sticky", top: 0, zIndex: 50, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, padding: "18px clamp(20px,4vw,56px)", background: "rgba(0,0,0,.82)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--rule)" }}>
      <button onClick={() => go("home")} style={{ background: "none", border: "none", padding: 0, cursor: "pointer", display: "block", lineHeight: 0 }} aria-label="DAS KINO">
        <Logo mark="typographic" tone="light" height={26} />
      </button>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "clamp(14px,2.4vw,34px)" }}>
        {NAV.map(([id, label]) => (
          <button key={id} onClick={() => go(id)}
            style={{ background: "none", border: "none", padding: "2px 0", cursor: "pointer",
              fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: route === id ? 700 : 500,
              letterSpacing: "0.14em", textTransform: "uppercase",
              color: route === id ? "var(--kino-white)" : "var(--text-secondary)",
              borderBottom: "1px solid " + (route === id ? "var(--kino-white)" : "transparent"),
              transition: "color var(--dur-fast) var(--ease-mech)" }}>{label}</button>
        ))}
      </div>
    </nav>
  );
}

Object.assign(window, { SiteNav });