import { platformStatus } from "@/lib/status";
import { GlassCard } from "./GlassCard";
import { ProgressPill } from "./ProgressPill";

export function StatusRoadmap() {
  const items = [
    { label: "Seneste build", value: `Build ${platformStatus.latestBuild}` },
    { label: "Version", value: platformStatus.latestVersion },
    { label: "Health", value: "OK (/health)" },
    { label: "Update-kanal", value: "latest.json live" },
    { label: "Tests", value: `${platformStatus.testsPassed} unit tests` },
    { label: "Status", value: platformStatus.pocLabel },
  ];

  return (
    <section aria-label="Platform status" className="mx-auto max-w-6xl px-4 sm:px-6">
      <GlassCard className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {items.map((item) => (
          <div key={item.label} className="flex flex-col gap-1">
            <span className="text-xs uppercase tracking-wide text-nexus-muted">
              {item.label}
            </span>
            <span className="font-medium text-nexus-navy">{item.value}</span>
          </div>
        ))}
        <div className="flex items-end sm:col-span-2 lg:col-span-3">
          <ProgressPill label="Anbefalet: Build 91 som POC-baseline" variant="brand" pulse />
        </div>
      </GlassCard>
    </section>
  );
}
