GRV-Summit-Site/components/home/StatsGrid.tsx

import { site } from "@/content/site";
import { Section } from "@/components/layout/Section";
import { CyclingGrantAmount } from "@/components/grants/CyclingGrantAmount";

export function StatsGrid() {
  return (
    <Section variant="muted" id="stats" riftPattern="whisper">
      <p className="text-center text-xs font-semibold uppercase tracking-widest text-[#1f3d7e]">
        The future starts here
      </p>
      <h2 className="mt-3 text-center text-3xl font-bold md:text-4xl">
        Powering Ethiopia&apos;s innovation leap forward
      </h2>
      <div className="mt-12 grid grid-cols-2 gap-6 md:grid-cols-4">
        {site.stats.map((stat) => (
          <div
            key={stat.label}
            className="rounded-2xl border border-border bg-white p-6 text-center shadow-sm"
          >
            {stat.type === "cycling" ? (
              <CyclingGrantAmount
                showCaption
                valueClassName="text-3xl font-bold text-[#1f3d7e] md:text-4xl"
                captionClassName="text-muted-foreground"
              />
            ) : (
              <p className="text-3xl font-bold text-[#1f3d7e] md:text-4xl">{stat.value}</p>
            )}
            <p className="mt-2 text-sm text-muted-foreground">{stat.label}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}