"use client";

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

const STATS: [string, { en: string; sv: string }][] = [
  ["4 980", { en: "records in the sample", sv: "poster i exempel" }],
  ["20", { en: "omitted. Never guessed", sv: "utelämnade. Ej gissade" }],
  ["3,2", { en: "sources per field", sv: "källor per fält" }],
];

export function CollectionSection() {
  const t = useT();
  const ref = useReveal<HTMLElement>();
  const liveCount = MARKETS.filter((m) => m.live).length;
  return (
    <section ref={ref} id="tackning" className="border-b border-border bg-background">
      <div className="mx-auto max-w-[80rem] px-6 py-32 lg:py-40">
        <div className="flex items-baseline justify-between gap-6 border-b border-border pb-6">
          <p className="reveal font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">{t({ en: "04 — Coverage", sv: "04 — Täckning" })}</p>
          <p className="reveal delay-1 font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">{liveCount}/{MARKETS.length} live</p>
        </div>

        <div className="mt-12 grid items-end gap-y-8 lg:grid-cols-12 lg:gap-x-10">
          <h2 className="reveal delay-1 col-span-8 text-[clamp(2.4rem,6vw,4.75rem)] font-medium leading-[0.95] tracking-[-0.03em]">
            {t({ en: "Twenty markets.", sv: "Tjugo marknader." })}
            <br />
            {t({ en: "One model.", sv: "En modell." })}
          </h2>
          <p className="reveal-fade delay-2 col-span-4 font-mono text-[13px] leading-relaxed text-muted-foreground lg:text-right">
            {t({ en: "Same engine. Same proof.", sv: "Samma motor. Samma bevis." })}
            <br />
            {t({ en: "Every country.", sv: "Varje land." })}
          </p>
        </div>

        <div className="reveal delay-2 mt-16 grid grid-cols-[repeat(auto-fill,minmax(108px,1fr))] gap-px border border-border bg-border">
          {MARKETS.map((m, i) => (
            <div
              key={m.code}
              className="group relative bg-background p-4 transition-opacity duration-300"
              style={{ opacity: m.live ? 1 : 0.4 }}
            >
              <div className="flex items-baseline justify-between">
                <p className="font-mono text-sm font-semibold tracking-tight">{m.code}</p>
                <span className="font-mono text-[9px] text-muted-foreground">{String(i + 1).padStart(2, "0")}</span>
              </div>
              <p className="mt-1 font-mono text-[10px] uppercase tracking-[0.08em] text-muted-foreground">
                {m.live ? `${m.coverage}%` : t({ en: "coming", sv: "kommande" })}
              </p>
              <div className="mt-3 h-px w-full bg-secondary">
                <div
                  className="h-full transition-[width] duration-500"
                  style={{
                    width: `${m.coverage}%`,
                    backgroundColor: m.coverage >= 95 ? "var(--prov-3)" : m.coverage >= 85 ? "var(--prov-2)" : "var(--muted-foreground)",
                  }}
                />
              </div>
            </div>
          ))}
        </div>

        <div className="reveal delay-3 mt-px grid grid-cols-1 gap-px border border-border bg-border sm:grid-cols-3">
          {STATS.map(([n, l], i) => (
            <div key={l.sv} className="bg-background p-6">
              <p
                className="text-[clamp(2.25rem,4vw,3rem)] font-medium leading-none tracking-[-0.03em]"
                style={i === 1 ? { color: "var(--accent-red)" } : undefined}
              >
                {n}
              </p>
              <p className="mt-3 font-mono text-[10px] uppercase tracking-[0.1em] text-muted-foreground">{t(l)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}