@props(['data' => []])

{{-- KPI Mini variant — compact 3-column grid for multiple stats --}}
@php
$items = $data['items'] ?? [];
@endphp

<div class="my-8 grid grid-cols-1 sm:grid-cols-3 gap-4" role="group" aria-label="Statistics">
    @foreach($items as $item)
    <div
        class="bg-card rounded-r-lg border-l-3 border-primary p-4"
        data-animate="kpi"
        role="figure"
        aria-label="Statistic: {{ $item['number'] ?? $item['value'] ?? '' }} {{ $item['label'] ?? '' }}">
        <span
            class="text-2xl font-bold text-primary block"
            data-kpi-counter="{{ $item['number'] ?? $item['value'] ?? 0 }}">
            {{ $item['number'] ?? $item['value'] ?? 0 }}
        </span>
        @if(!empty($item['label']))
        <span class="text-[0.7rem] text-muted-foreground mt-1 block" data-kpi-stagger>
            {{ $item['label'] }}
        </span>
        @endif
    </div>
    @endforeach
</div>