"use client";

import { useReveal } from "@/hooks/use-reveal";
import { useT } from "@/components/locale-provider";
import { DataArtifact } from "@/components/data-artifact";

const TILES: { variant: "table" | "map" | "schema" | "chart" | "grid"; index: string; title: { en: string; sv: string }; line: { en: string; sv: string } }[] = [
  { variant: "table", index: "01", title: { en: "Table", sv: "Tabell" }, line: { en: "Source per cell.", sv: "Källa per cell." } },
  { variant: "map", index: "02", title: { en: "Coverage", sv: "Täckning" }, line: { en: "Share confirmed.", sv: "Andel bekräftat." } },
  { variant: "schema", index: "03", title: { en: "Schema", sv: "Schema" }, line: { en: "Delivered model.", sv: "Levererad modell." } },
  { variant: "chart", index: "04", title: { en: "Dashboard", sv: "Dashboard" }, line: { en: "One series.", sv: "En serie." } },
  { variant: "grid", index: "05", title: { en: "Export", sv: "Export" }, line: { en: "Any format.", sv: "Valfritt format." } },
];

export function GallerySection() {
  const ref = useReveal<HTMLElement>();
  const tr = useT();
  return (
    <section ref={ref} className="border-b border-border bg-background">
      <div className="mx-auto max-w-[80rem] px-6 py-32 lg:py-40">
        <header className="flex items-end justify-between gap-8 border-b border-border pb-8">
          <div>
            <p className="reveal font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">{tr({ en: "— Visualizations", sv: "— Visualiseringar" })}</p>
            <h2 className="reveal delay-1 mt-4 text-[clamp(2.4rem,5.5vw,4.5rem)] font-medium leading-[0.95] tracking-[-0.03em]">
              {tr({ en: "See it.", sv: "Se den." })}
            </h2>
          </div>
          <p className="reveal-right delay-2 hidden max-w-[16rem] text-sm leading-relaxed text-muted-foreground md:block">
            {tr({ en: "Table. Map. Schema. Chart. Your call.", sv: "Tabell. Karta. Schema. Graf. Du väljer." })}
          </p>
        </header>

        <div className="mt-16 grid grid-cols-1 gap-px border border-border bg-border md:grid-cols-2 lg:grid-cols-3">
          {TILES.map((t, i) => (
            <article
              key={t.index}
              className={`group reveal-scale delay-${i + 1} flex flex-col bg-background p-8 transition-opacity duration-300 hover:opacity-[0.92] ${i === 0 ? "md:col-span-2" : ""}`}
            >
              <div className="flex items-baseline justify-between">
                <span className="font-mono text-[clamp(2rem,4vw,3.5rem)] font-medium leading-none tracking-[-0.04em] text-border transition-colors duration-300 group-hover:text-muted-foreground">
                  {t.index}
                </span>
                <span className="h-px w-12 origin-right scale-x-50 bg-border transition-transform duration-300 group-hover:scale-x-100" />
              </div>

              <div className="mt-8">
                <DataArtifact variant={t.variant} />
              </div>

              <div className="mt-6 flex items-baseline justify-between border-t border-border pt-4">
                <span className="text-base font-medium tracking-[-0.01em]">{tr(t.title)}</span>
                <span className="font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground">{tr(t.line)}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}