/**
 * PortalGrid — magazine-style 6-tile navigation under the hero.
 *
 * Each tile is a thematic doorway into a slice of the archive:
 * sightings (events), witnesses (people), craft (uap_objects),
 * locations, programs (operations), documents. Counts come from
 * public.entities counters loaded by the homepage server component.
 */
import Link from "next/link";

export interface PortalCounts {
  events: number;
  people: number;
  uap_objects: number;
  locations: number;
  operations: number;
  documents: number;
}

interface Portal {
  href: string;
  icon: string;
  title_en: string;
  title_pt: string;
  blurb_en: string;
  blurb_pt: string;
  count: number;
}

export function PortalGrid({ counts, locale }: { counts: PortalCounts; locale: "pt-br" | "en" }) {
  const portals: Portal[] = [
    {
      href: "/sightings",
      icon: "🛸",
      title_en: "Sightings",
      title_pt: "Avistamentos",
      blurb_en: "Every recorded incident in the archive, from Kenneth Arnold's 1947 disks to the green fireballs over Sandia.",
      blurb_pt: "Cada incidente registrado no arquivo, dos discos de Kenneth Arnold em 1947 às bolas de fogo verdes sobre Sandia.",
      count: counts.events,
    },
    {
      href: "/witnesses",
      icon: "✍️",
      title_en: "Witnesses",
      title_pt: "Testemunhas",
      blurb_en: "Pilots, officers, scientists — the people who saw, photographed, or signed the memos.",
      blurb_pt: "Pilotos, oficiais, cientistas — quem viu, fotografou ou assinou os memorandos.",
      count: counts.people,
    },
    {
      href: "/objects",
      icon: "📷",
      title_en: "Craft",
      title_pt: "Objetos UAP",
      blurb_en: "Catalogued by shape and behaviour: discs, cigars, spheres, triangles, tic-tacs.",
      blurb_pt: "Catalogados por forma e comportamento: discos, charutos, esferas, triângulos, tic-tacs.",
      count: counts.uap_objects,
    },
    {
      href: "/locations",
      icon: "🗺",
      title_en: "Hot spots",
      title_pt: "Hot spots",
      blurb_en: "Where the sky lit up. Sandia, Roswell, Rendlesham, Phoenix, Nimitz waters.",
      blurb_pt: "Onde o céu acendeu. Sandia, Roswell, Rendlesham, Phoenix, águas do Nimitz.",
      count: counts.locations,
    },
    {
      href: "/operations",
      icon: "🏛",
      title_en: "Programs",
      title_pt: "Programas secretos",
      blurb_en: "Project Blue Book, the Robertson Panel, AATIP — the official machinery of disclosure.",
      blurb_pt: "Project Blue Book, Robertson Panel, AATIP — a máquina oficial da divulgação.",
      count: counts.operations,
    },
    {
      href: "/documents",
      icon: "📂",
      title_en: "Documents",
      title_pt: "Documentos",
      blurb_en: "The primary record — every memo, telegram and report indexed and searchable.",
      blurb_pt: "O registro primário — cada memorando, telegrama e relatório indexado e buscável.",
      count: counts.documents,
    },
  ];

  return (
    <section className="bg-[#0c111e] border-y border-[rgba(224,192,128,0.10)]">
      <div className="mx-auto max-w-7xl px-4 md:px-8 py-10 md:py-14">
        <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#5a6678] mb-4">
          {locale === "en" ? "// Enter the archive" : "// Entre no arquivo"}
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
          {portals.map((p) => (
            <Link
              key={p.href}
              href={p.href}
              className="group relative rounded-xl border border-[rgba(224,192,128,0.12)] bg-[#0d1220] p-5 md:p-6 hover:border-[#e0c080]/50 hover:bg-[#10162a] transition-all"
            >
              <div className="flex items-baseline justify-between mb-3">
                <span className="text-2xl">{p.icon}</span>
                <span className="font-mono text-[11px] text-[#5a6678] tabular-nums">
                  {p.count.toLocaleString("pt-BR")}
                </span>
              </div>
              <h3 className="font-display text-xl md:text-2xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors mb-2">
                {locale === "en" ? p.title_en : p.title_pt}
              </h3>
              <p className="text-[13px] text-[#9aa6b8] leading-relaxed">
                {locale === "en" ? p.blurb_en : p.blurb_pt}
              </p>
              <div className="absolute bottom-5 right-5 text-[#5a6678] group-hover:text-[#e0c080] group-hover:translate-x-1 transition-all">
                →
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}