Stats Cards

import {
  ArrowDownRight,
  ArrowUpRight,
  Clock,
  Globe,
  Rocket,
  ShieldCheck,
  Users,
  Zap,
} from "lucide-react";

import { cn } from "@/lib/utils";

const stats = [
  { icon: Rocket, label: "Deploys this month", value: "38,410", delta: "+12%", up: true },
  { icon: Clock, label: "Median build time", value: "48s", delta: "−9s", up: true },
  { icon: Users, label: "Active developers", value: "1,284", delta: "+4%", up: true },
  { icon: Globe, label: "Regions serving", value: "30", delta: "+2", up: true },
  { icon: Zap, label: "p95 latency", value: "41ms", delta: "+3ms", up: false },
  { icon: ShieldCheck, label: "Failed audits", value: "0", delta: "12 mo", up: true },
];

export default function StatsCards() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-24">
        <div className="mb-10 max-w-md">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            This month, in numbers
          </h2>
          <p className="mt-2 text-muted-foreground">
            Pulled from the live platform — deltas versus last month.
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="rounded-xl border border-border/60 bg-card p-5"
            >
              <div className="flex items-center justify-between">
                <stat.icon className="size-4 text-muted-foreground" />
                <span
                  className={cn(
                    "flex items-center gap-0.5 font-mono text-xs tabular-nums",
                    stat.up ? "text-muted-foreground" : "text-destructive",
                  )}
                >
                  {stat.up ? (
                    <ArrowUpRight className="size-3" />
                  ) : (
                    <ArrowDownRight className="size-3" />
                  )}
                  {stat.delta}
                </span>
              </div>
              <p className="mt-4 text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl">
                {stat.value}
              </p>
              <p className="mt-1 text-sm text-muted-foreground">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}