/**
 * SiteHeader — top navigation present on the homepage.
 *
 * Magazine-style — clean, with the brand mark left and a slim nav right.
 * On narrow viewports the nav cluster collapses behind a hamburger drawer
 * (MobileNav) so the row stops overflowing the screen edge.
 * Sub-pages use BureauNav (sticky with breadcrumbs) instead.
 */
import Link from "next/link";
import { AuthBar } from "./auth-bar";
import { LocaleToggle } from "./locale-toggle";
import { MobileNav } from "./mobile-nav";
import { NavLink } from "./nav-link";

export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
  const items = [
    { href: "/sightings",  label: locale === "en" ? "Sightings"  : "Avistamentos" },
    { href: "/witnesses",  label: locale === "en" ? "Witnesses"  : "Testemunhas" },
    { href: "/objects",    label: locale === "en" ? "Craft"      : "Objetos" },
    { href: "/locations",  label: locale === "en" ? "Locations"  : "Locais" },
    { href: "/operations", label: locale === "en" ? "Programs"   : "Programas" },
    { href: "/bureau",     label: locale === "en" ? "Case files" : "Casos" },
    { href: "/search",     label: locale === "en" ? "Search"     : "Busca" },
  ];

  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">
        <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>

        {/* Desktop nav — hidden below md, shown md+. */}
        <nav
          aria-label={locale === "en" ? "Primary" : "Principal"}
          className="hidden md:flex items-center gap-1 text-[13px] font-mono"
        >
          {items.map((it) => (
            <NavLink key={it.href} href={it.href} label={it.label} />
          ))}
          <span className="ml-2"><LocaleToggle current={locale} variant="navbar" /></span>
          <span className="ml-2"><AuthBar locale={locale} /></span>
        </nav>

        {/* Mobile menu — hamburger + drawer; hidden md+. */}
        <div className="md:hidden">
          <MobileNav locale={locale} items={items} />
        </div>
      </div>
    </header>
  );
}