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

{{-- KPI Hero variant — large standalone statistic --}}
<div
    class="my-8 bg-card rounded-r-xl border-l-4 border-primary p-6 sm:p-8"
    data-animate="kpi"
    role="figure"
    aria-label="Statistic: {{ $data['number'] ?? $data['value'] ?? '' }} {{ $data['label'] ?? '' }}">
    <div class="flex items-baseline gap-2" data-kpi-stagger>
        @if(!empty($data['prefix']))
        <span class="text-2xl font-normal text-primary">{{ $data['prefix'] }}</span>
        @endif
        <span
            class="text-[2.8rem] font-bold text-primary leading-tight"
            data-kpi-counter="{{ $data['number'] ?? $data['value'] ?? 0 }}">
            {{ $data['number'] ?? $data['value'] ?? 0 }}
        </span>
        @if(!empty($data['suffix']))
        <span class="text-2xl font-normal text-primary" data-kpi-stagger>{{ $data['suffix'] }}</span>
        @endif
    </div>

    @if(!empty($data['label']))
    <p class="text-[0.95rem] font-semibold text-foreground mt-2" data-kpi-stagger>
        {{ $data['label'] }}
    </p>
    @endif

    @if(!empty($data['source']))
    <p class="text-[0.75rem] text-muted-foreground mt-1" data-kpi-stagger>
        {{ $data['source'] }}
    </p>
    @endif
</div>