// Operação Brasil — landing nav bar
const { Button: OBButton } = window.OperaOBrasilDesignSystem_ac060f;

function Nav() {
  const links = [
    ["Oferta", "#oferta"],
    ["Como funciona", "#como"],
    ["Parceiros", "#parceiros"],
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      display: "block",
      padding: "12px clamp(20px, 4vw, 62px)",
      background: "rgba(4,5,4,0.72)",
      backdropFilter: "blur(18px)",
      borderBottom: "1px solid var(--border-soft)",
    }}>
      <div className="nav-content-shell" style={{
        width: "min(100%, 1200px)", margin: "0 auto",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <a href="#top" aria-label="Operação Brasil" className="nav-brand-logo" style={{
          position: "relative", display: "block", flex: "0 0 auto",
          width: "210px", height: "62px", overflow: "hidden", textDecoration: "none",
        }}>
          <img src="../../assets/brand/logo-operacao-brasil.png" alt="Operação Brasil"
            style={{
              position: "absolute", left: "50%", top: "50%", display: "block",
              width: "200px", height: "auto", transform: "translate(-50%, -50%)",
            }} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: "8px" }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} style={{
              display: "none", padding: "0 14px", height: "38px", alignItems: "center",
              color: "var(--text-muted)", textDecoration: "none",
              fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "0.9rem",
              textTransform: "uppercase", letterSpacing: "0.02em",
            }} className="nav-link">{label}</a>
          ))}
          <OBButton as="a" href="#cadastro" size="sm">Consultar oportunidades</OBButton>
        </nav>
      </div>
    </header>
  );
}
window.Nav = Nav;