import Link from "next/link";
import { NetzknotenLogo } from "@/components/brand/netzknoten-logo";
import { de, t } from "@/lib/i18n/de";

const NAV_ITEMS = [
  { href: "/fahrzeuge", label: de.nav.fahrzeuge },
  { href: "/geraete", label: de.nav.geraete },
  { href: "/wehren", label: de.nav.wehren },
] as const;

export function Topbar() {
  return (
    <header className="border-b border-rand bg-white">
      <div className="mx-auto flex h-14 max-w-6xl items-center gap-6 px-4">
        <Link href="/start" className="flex items-center gap-2">
          <NetzknotenLogo />
          <span className="font-display text-lg text-navy">{t("app.name")}</span>
        </Link>
        <nav className="flex items-center gap-1" aria-label="Hauptnavigation">
          {NAV_ITEMS.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="rounded px-3 py-1.5 text-sm font-medium text-anthrazit/80 transition-colors hover:bg-nebel hover:text-anthrazit"
            >
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="ml-auto">
          {/* Guard-Slot: Benutzermenü/Abmelden wird vom Auth-Workstream gefüllt. */}
        </div>
      </div>
    </header>
  );
}
