@props([
'prefix' => '',
'value' => '',
'suffix' => '',
'description' => '',
'quote' => '',
'button' => null,
])

<x-molecules.card-border :transparent="true">
    <div class="w-full p-8 gap-6 max-w-3xl mx-auto bg-glassmorphism rounded-lg flex flex-col items-center"
        data-animate="kpi"
        role="figure"
        aria-label="{{ $prefix }}{{ $value }}{{ $suffix }}{{ $description ? ' — ' . $description : '' }}">

        {{-- Value display --}}
        <div class="flex items-baseline gap-2 justify-center" data-kpi-stagger>
            @if($prefix)
            <span class="text-4xl lg:text-6xl font-regular text-foreground" data-kpi-stagger>{{ $prefix }}</span>
            @endif
            <span class="text-6xl lg:text-8xl font-bold text-foreground" data-kpi-counter="{{ $value }}">{{ $value }}</span>
            @if($suffix)
            <span class="text-4xl lg:text-6xl font-regular text-foreground" data-kpi-stagger>{{ $suffix }}</span>
            @endif
        </div>

        {{-- Description --}}
        @if($description)
        <p class="text-center text-base text-foreground mt-4 max-w-3xl mx-auto" data-kpi-stagger>
            {{ $description }}
        </p>
        @endif

        {{-- Quote --}}
        @if($quote)
        <blockquote class="text-center italic text-sm text-foreground mt-4 max-w-3xl mx-auto" data-kpi-stagger>
            {{ $quote }}
        </blockquote>
        @endif

        {{-- Button --}}
        @if($button)
        <div class="mt-6 flex justify-center" data-kpi-stagger>
            <x-atoms.button-link :href="$button['to'] ?? $button['href'] ?? '#'">
                {{ $button['text'] ?? $button['label'] ?? '' }}
            </x-atoms.button-link>
        </div>
        @endif
    </div>
</x-molecules.card-border>