---
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="rounded-md border border-line bg-surface-1 p-5">
          <p class="font-display text-[22px] font-semibold leading-tight text-ink">{tile.stat}</p>
          <p class="mt-2 font-mono text-mono-label font-medium uppercase tracking-[0.08em] text-ink-faint">
            {tile.label}
          </p>
        </li>
      ))
    }
  </ul>
</section>
