import { Container } from "@/components/Container";
import { stats } from "@/lib/data";

export function Stats() {
  return (
    <section className="bg-paper">
      <Container className="grid grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <div
            key={stat.label}
            className={`px-4 py-8 sm:px-6 ${index % 2 === 1 ? "border-r border-line" : ""} lg:border-r lg:last:border-0`}
          >
            <p className="text-3xl font-extrabold text-brand sm:text-4xl">{stat.value}</p>
            <p className="mt-2 text-[13px] leading-6 text-muted">{stat.label}</p>
          </div>
        ))}
      </Container>
    </section>
  );
}