Stats Hairline

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

const stats = [
  { value: "12,400+", label: "teams in production" },
  { value: "99.99%", label: "uptime, rolling 90 days" },
  { value: "38ms", label: "median response time" },
  { value: "4.9/5", label: "support satisfaction" },
];

export default function StatsHairline() {
  return (
    <section className="border-y border-border/60 bg-background">
      <div className="mx-auto grid w-full max-w-6xl grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <div
            key={stat.label}
            className={cn(
              "px-6 py-10",
              index > 0 && "lg:border-l lg:border-border/60",
              index % 2 === 1 && "max-lg:border-l max-lg:border-border/60",
              index >= 2 && "max-lg:border-t max-lg:border-border/60",
            )}
          >
            <p className="text-3xl font-semibold tracking-tight tabular-nums sm:text-4xl">
              {stat.value}
            </p>
            <p className="mt-1.5 text-sm text-muted-foreground">{stat.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
}