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

const tagVariant = (tag: string) => {
  if (tag.includes("Fungerer") || tag.includes("Live") || tag.includes("Anbefalet"))
    return "brand" as const;
  if (tag.includes("Planlagt")) return "muted" as const;
  if (tag.includes("Under test")) return "blue" as const;
  return "blue" as const;
};

export function FeatureGrid() {
  return (
    <section className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
      <h2 className="text-2xl font-bold text-nexus-navy">Hvad kan platformen?</h2>
      <p className="mt-2 max-w-2xl text-nexus-muted">
        Ærlig oversigt over Nexus-moduler i POC — ikke alt er produktionsklar endnu.
      </p>
      <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {features.map((f) => (
          <GlassCard key={f.title} className="flex flex-col gap-3">
            <ProgressPill label={f.tag} variant={tagVariant(f.tag)} />
            <h3 className="font-semibold text-nexus-navy">{f.title}</h3>
            <p className="text-sm text-nexus-muted">{f.description}</p>
          </GlassCard>
        ))}
      </div>
    </section>
  );
}
