import { site } from "@/content/site";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import { CyclingGrantAmount } from "@/components/grants/CyclingGrantAmount";
export function StatsGrid() {
  return (
    <Section variant="muted" id="stats">
      <TopoProseSurface className="topo-on-green-bg mx-auto max-w-3xl text-center">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
          The future starts here
        </p>
        <h2 className="mt-3 text-3xl font-bold text-white md:text-4xl">
          Powering Ethiopia&apos;s innovation leap forward
        </h2>
      </TopoProseSurface>
      <div className="mt-12 grid grid-cols-2 gap-6 md:grid-cols-4">
        {site.stats.map((stat) => (
          <div
            key={stat.label}
            className="topo-card-surface rounded-2xl border border-border bg-white p-6 text-center text-[#1a5c38] shadow-sm"
          >
            {stat.type === "cycling" ? (
              <CyclingGrantAmount
                showCaption
                valueClassName="text-3xl font-bold text-[#1a5c38] md:text-4xl"
                captionClassName="text-[#3d5248]"
              />
            ) : (
              <p className="text-3xl font-bold text-[#1a5c38] md:text-4xl">{stat.value}</p>
            )}
            <p className="mt-2 text-sm text-[#3d5248]">{stat.label}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}