<script setup lang="ts">
import { metrics } from '~/data/siteContent'
</script>

<template>
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
    <div v-for="m in metrics" :key="m.label"
      class="bg-white rounded-2xl p-8 text-center shadow-sm border border-gray-100">
      <div class="text-4xl font-bold font-mono text-primary mb-3">{{ m.value }}</div>
      <div class="font-semibold text-text-primary mb-1">{{ m.label }}</div>
      <div class="text-xs text-text-secondary">{{ m.desc }}</div>
    </div>
  </div>
</template>
