disclosure-bureau/web/components/bureau-nav.tsx

/**
 * BureauNav — top navigation bar present on every bureau page.
 *
 * Solves "I'm stuck on this page, there's no way back" UX. Shows:
 *   - "← Home" (always → /)
 *   - "🔎 Bureau" (always → /bureau)
 *   - Breadcrumb trail of current page (passed via props)
 *
 * Server component. No client-side history needed because the parent links
 * are deterministic (every bureau page has a known parent in the hierarchy).
 */
import Link from "next/link";
import { ArrowLeft, Home } from "lucide-react";
import { LocaleToggle, type Locale } from "./locale-toggle";

export interface Crumb {
  /** Display label. */
  label: string;
  /** When omitted the crumb is rendered as the current page (no link). */
  href?: string;
}

export function BureauNav({ crumbs, locale }: { crumbs: Crumb[]; locale?: Locale }) {
  return (
    <nav className="sticky top-0 z-30 bg-[#0a0e1a]/95 backdrop-blur border-b border-[rgba(224,192,128,0.18)]">
      <div className="mx-auto max-w-6xl px-4 py-2 flex items-center gap-3 flex-wrap text-[12px] font-mono">
        <Link
          href="/"
          className="inline-flex items-center gap-1 px-2 py-1 rounded border border-[rgba(127,219,255,0.30)] text-[#7fdbff] hover:bg-[rgba(127,219,255,0.08)]"
          aria-label="Voltar para a home"
        >
          <ArrowLeft size={12} />
          <Home size={12} />
          <span>home</span>
        </Link>

        <Link
          href="/bureau"
          className="inline-flex items-center gap-1 px-2 py-1 rounded border border-[#e0c080] text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)]"
          aria-label="Hub do bureau"
        >
          🔎 <span>bureau</span>
        </Link>

        {crumbs.length > 0 && (
          <div className="text-[11px] text-[#5a6678] flex items-center gap-1.5 flex-wrap">
            <span className="mx-1">/</span>
            {crumbs.map((c, i) => (
              <span key={`${c.label}-${i}`} className="inline-flex items-center gap-1.5">
                {c.href ? (
                  <Link href={c.href} className="hover:text-[#7fdbff]">{c.label}</Link>
                ) : (
                  <span className="text-[#e7ecf3]">{c.label}</span>
                )}
                {i < crumbs.length - 1 && <span>/</span>}
              </span>
            ))}
          </div>
        )}

        {locale && (
          <span className="ml-auto">
            <LocaleToggle current={locale} variant="navbar" />
          </span>
        )}
      </div>
    </nav>
  );
}