disclosure-bureau/web/components/hero-banner.tsx

/**
 * HeroBanner — homepage opener.
 *
 * Full-bleed banner that establishes the brand promise. Reader sees:
 *   - The mission line in display serif
 *   - A subhead that names what this archive contains
 *   - A live stats row showing real corpus counts
 *
 * Uses a declassified document page as background art (the green-fireball
 * Sandia file is a good choice — period typewriter look). Falls back to
 * a CSS gradient when the asset is unavailable.
 */
import Link from "next/link";

interface Stats {
  documents: number;
  events: number;
  people: number;
  uap_objects: number;
}

export function HeroBanner({ locale, stats, heroDocId, heroPage }: {
  locale: "pt-br" | "en";
  stats: Stats;
  heroDocId?: string;
  heroPage?: number;
}) {
  const heroImg = heroDocId && heroPage
    ? `/api/static/processing/png/${heroDocId}/p-${String(heroPage).padStart(3, "0")}.png`
    : null;

  return (
    <section className="relative overflow-hidden border-b border-[rgba(224,192,128,0.15)]">
      {/* Background art layer — high-priority because it's above the fold */}
      {heroImg && (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={heroImg}
          alt=""
          aria-hidden="true"
          fetchPriority="high"
          width={1600}
          height={900}
          className="absolute inset-0 w-full h-full object-cover opacity-[0.18] mix-blend-luminosity"
        />
      )}
      {/* Gradient overlay so text always reads */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#0a0e1a] via-[#0a0e1a]/85 to-[#0a0e1a]/95" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(224,192,128,0.10),transparent_60%)]" />

      <div className="relative mx-auto max-w-7xl px-4 md:px-8 py-16 md:py-24">
        <div className="max-w-3xl">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[rgba(224,192,128,0.30)] bg-[rgba(224,192,128,0.06)] mb-6">
            <span className="size-1.5 rounded-full bg-[#e0c080] animate-pulse" />
            <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#e0c080]">
              {locale === "en" ? "Declassified archive · live" : "Arquivo desclassificado · ao vivo"}
            </span>
          </div>

          <h1 className="font-display text-4xl md:text-6xl lg:text-7xl font-semibold text-[#e7ecf3] leading-[1.05] tracking-tight mb-6">
            {locale === "en" ? (
              <>
                The files the government<br />
                <span className="text-[#e0c080]">didn&rsquo;t want you to read.</span>
              </>
            ) : (
              <>
                Os arquivos que o governo<br />
                <span className="text-[#e0c080]">não queria que você lesse.</span>
              </>
            )}
          </h1>

          <p className="text-lg md:text-xl text-[#cbd2dd] leading-relaxed mb-8 max-w-2xl">
            {locale === "en"
              ? <>
                  <strong className="text-[#e7ecf3]">122 declassified UAP/UFO documents</strong> from the
                  US Department of War. Pilots, officers and physicists describe what they
                  saw — read from primary sources, with every quote linked to its page.
                </>
              : <>
                  <strong className="text-[#e7ecf3]">122 documentos UAP/UFO desclassificados</strong> do
                  Departamento de Guerra dos EUA. Pilotos, oficiais e físicos descrevem o
                  que viram — lido das fontes primárias, com cada citação ligada à sua página.
                </>}
          </p>

          {/* Stats row — anchors trust and gives GEO-friendly factual numbers */}
          <dl className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-2">
            <Stat label={locale === "en" ? "Documents" : "Documentos"} value={stats.documents.toLocaleString("pt-BR")} />
            <Stat label={locale === "en" ? "Events"    : "Eventos"}    value={stats.events.toLocaleString("pt-BR")} />
            <Stat label={locale === "en" ? "Witnesses" : "Testemunhas"} value={stats.people.toLocaleString("pt-BR")} />
            <Stat label={locale === "en" ? "Craft catalogued" : "Objetos catalogados"} value={stats.uap_objects.toLocaleString("pt-BR")} />
          </dl>

          <div className="mt-8 flex items-center gap-3 flex-wrap">
            <Link
              href="/bureau"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#e0c080] text-[#0a0e1a] font-mono text-[13px] font-semibold hover:bg-[#f0d090] transition-colors"
            >
              {locale === "en" ? "Read the case files →" : "Ler os casos →"}
            </Link>
            <Link
              href="/sightings"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#e0c080]/40 text-[#e0c080] font-mono text-[13px] hover:bg-[rgba(224,192,128,0.06)] transition-colors"
            >
              {locale === "en" ? "Browse sightings" : "Avistamentos"}
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-[10px] font-mono uppercase tracking-[0.14em] text-[#5a6678]">{label}</dt>
      <dd className="font-display text-3xl md:text-4xl font-semibold text-[#e7ecf3] mt-1 tabular-nums">{value}</dd>
    </div>
  );
}