Minimal centered text brand

---
/**
 * Minimal centered text brand: Four centred figures between two rules on the brand colour.
 *
 * @block metrics
 * @order 6
 */
import Section from '@/components/apogee/Section/Section.astro'
import type { MetricsContent } from '@/components/apogee/sections/_shared/metrics.ts'

/** @composable */
interface Props extends MetricsContent {}

const {
  label = 'Key figures',
  items = [
    { value: '400+', label: 'Projects completed' },
    { value: '600%', label: 'Return on investment' },
    { value: '10k', label: 'Global downloads' },
    { value: '200+', label: 'Five-star reviews' },
  ],
} = Astro.props
---

<Section spacing="large" background="primary">
  <dl aria-label={label} class="grid gap-x-4 gap-y-8 md:grid-cols-2 md:border-y md:py-16 lg:grid-cols-4 border-current/25">
    {items.map((s) => (
      <div class="flex flex-col gap-3 items-center text-center">
        <dt class="order-2 text-lg font-semibold">{s.label}</dt>
        <dd class="order-1 text-5xl font-semibold tracking-tight tabular-nums md:text-6xl ">{s.value}</dd>
      </div>
    ))}
  </dl>
</Section>