---
import type { ProfileVM } from '@lib/content';

interface Props {
  profile: ProfileVM;
}
const { profile } = Astro.props;
---

<section class="mx-auto max-w-[--content-max] px-6" data-reveal>
  <ul class="grid grid-cols-2 gap-4 lg:grid-cols-4">
    {
      profile.proof.map((tile) => (
        <li class="border-line bg-surface-1 rounded-md border p-5">
          <p class="font-display text-ink text-[22px] leading-tight font-semibold">{tile.stat}</p>
          <p class="text-mono-label text-ink-faint mt-2 font-mono font-medium tracking-[0.08em] uppercase">
            {tile.label}
          </p>
        </li>
      ))
    }
  </ul>
</section>