export default function StatsSection({
  data,
}: {
  data: { id: string; items: { value: string; label: string }[] };
}) {
  return (
    <section
      className="py-16 lg:py-32 bg-surface-container-low border-y border-primary/10"
      id={data.id}
    >
      <div className="max-w-hd mx-auto px-[var(--spacing-gutter)]">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-32 text-center">
          {data.items.map((x) => (
            <div key={x.label} className="space-y-3 lg:space-y-6">
              <div className="font-[var(--font-display-lg)] text-5xl lg:text-[96px] text-primary">
                {x.value}
              </div>
              <div className="font-[var(--font-label-caps)] text-sm lg:text-[18px] text-on-surface/80 tracking-widest uppercase">
                {x.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}