/**
 * /bureau — Case file library.
 *
 * Magazine hero + filterable browser. The previous flat 80-card grid had no
 * way to navigate; the new browser carries search, agency chips, decade
 * chips, and sort, all URL-synced.
 */
import { BureauNav } from "@/components/bureau-nav";
import { CaseLibraryBrowser } from "@/components/case-library-browser";
import { getLocale } from "@/components/locale-toggle";
import { loadCases } from "@/lib/cases";

export const runtime = "nodejs";
export const dynamic = "force-dynamic";

export default async function BureauPage() {
  const locale = (await getLocale()) === "en" ? "en" : "pt-br";
  const cases = await loadCases(locale);

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
      <BureauNav locale={locale} crumbs={[{ label: locale === "en" ? "case files" : "casos" }]} />
      <main id="main" className="mx-auto max-w-5xl px-4 md:px-8 py-10 md:py-14">
        <header className="mb-8 md:mb-10">
          <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#e0c080] mb-3">
            {locale === "en" ? "The case files" : "Os arquivos do caso"}
          </div>
          <h1 className="font-display text-3xl md:text-5xl font-semibold leading-[1.05] tracking-tight text-[#e7ecf3] mb-4">
            {locale === "en"
              ? `${cases.length} declassified cases, narrated.`
              : `${cases.length} casos desclassificados, narrados.`}
          </h1>
          <p className="text-[16px] md:text-[17px] text-[#cbd2dd] leading-relaxed font-light max-w-2xl">
            {locale === "en"
              ? "Stories assembled from primary documents — memos, debriefs, intelligence reports — with every claim linked back to the source page."
              : "Histórias montadas a partir de documentos primários — memorandos, debriefings, relatórios de inteligência — com cada afirmação vinculada à página-fonte."}
          </p>
        </header>

        <CaseLibraryBrowser locale={locale} cases={cases} />
      </main>
    </div>
  );
}