/**
 * SiteHeader — top navigation present on the homepage.
 *
 * Magazine-style — clean, with the brand mark left and a slim nav right.
 * Sub-pages use BureauNav (sticky with breadcrumbs) instead.
 */
import Link from "next/link";
import { AuthBar } from "./auth-bar";
import { LocaleToggle } from "./locale-toggle";
import { NavLink } from "./nav-link";

export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
  return (
    <header className="border-b border-[rgba(224,192,128,0.15)]">
      <div className="mx-auto max-w-7xl px-4 md:px-8 py-4 flex items-center justify-between gap-4 flex-wrap">
        <Link href="/" className="flex items-center gap-2 group" aria-label="The Disclosure Bureau — home">
          <span className="text-[#e0c080] text-lg" aria-hidden="true">▍</span>
          <span className="font-display text-xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors">
            The Disclosure Bureau
          </span>
        </Link>

        <nav
          aria-label={locale === "en" ? "Primary" : "Principal"}
          className="flex items-center gap-1 text-[13px] font-mono"
        >
          <NavLink href="/sightings"   label={locale === "en" ? "Sightings"  : "Avistamentos"} />
          <NavLink href="/witnesses"   label={locale === "en" ? "Witnesses"  : "Testemunhas"} />
          <NavLink href="/objects"     label={locale === "en" ? "Craft"      : "Objetos"} />
          <NavLink href="/locations"   label={locale === "en" ? "Locations"  : "Locais"} />
          <NavLink href="/operations"  label={locale === "en" ? "Programs"   : "Programas"} />
          <NavLink href="/bureau"      label={locale === "en" ? "Case files" : "Casos"} />
          <NavLink href="/search"      label={locale === "en" ? "Search"     : "Busca"} />
          <span className="ml-2"><LocaleToggle current={locale} variant="navbar" /></span>
          <span className="ml-2"><AuthBar locale={locale} /></span>
        </nav>
      </div>
    </header>
  );
}