/**
 * 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";

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">
          <span className="text-[#e0c080] text-lg">▍</span>
          <span className="font-display text-xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors">
            The Disclosure Bureau
          </span>
        </Link>

        <nav className="flex items-center gap-1 text-[12px] 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"><AuthBar /></span>
        </nav>
      </div>
    </header>
  );
}

function NavLink({ href, label }: { href: string; label: string }) {
  return (
    <Link
      href={href}
      className="px-2.5 py-1.5 rounded text-[#9aa6b8] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] transition-colors"
    >
      {label}
    </Link>
  );
}