@props([
    'label',
    'value',
    'subValue' => null,
    'progress' => 0,    // 0..100
    'gradient' => 'brand',  // brand | emerald | rose | amber | sky
])

@php
    $g = [
        'brand'   => 'bg-grad-brand',
        'emerald' => 'bg-grad-emerald',
        'rose'    => 'bg-grad-rose',
        'amber'   => 'bg-grad-amber',
        'sky'     => 'bg-grad-sky',
    ][$gradient] ?? 'bg-grad-brand';

    $progress = max(0, min(100, (float) $progress));
    $circumference = 2 * pi() * 36; // r=36
    $offset = $circumference - ($progress / 100) * $circumference;
@endphp

<div class="rounded-2xl {{ $g }} text-white relative overflow-hidden p-5 md:p-6 shadow-soft-md">
    <div class="absolute inset-0 bg-grid opacity-20"></div>
    <div class="relative flex items-center justify-between gap-4">
        <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-wider opacity-80">{{ $label }}</p>
            <p class="mt-2 text-3xl md:text-4xl font-bold font-display tracking-tight">{{ $value }}</p>
            @if ($subValue)
                <p class="mt-1 text-xs opacity-80">{{ $subValue }}</p>
            @endif
            @if ($slot->isNotEmpty())
                <div class="mt-3 text-sm">{{ $slot }}</div>
            @endif
        </div>

        {{-- Circular progress --}}
        <div class="relative w-24 h-24 flex-shrink-0">
            <svg class="w-24 h-24 -rotate-90" viewBox="0 0 80 80">
                <circle cx="40" cy="40" r="36" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="6"/>
                <circle cx="40" cy="40" r="36" fill="none" stroke="white" stroke-width="6" stroke-linecap="round"
                        stroke-dasharray="{{ $circumference }}" stroke-dashoffset="{{ $offset }}"
                        style="transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);"/>
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-lg font-bold">{{ round($progress) }}%</span>
            </div>
        </div>
    </div>
</div>