<div
    @if ($pollingInterval)
        wire:poll.{{ $pollingInterval }}
    @endif
>
    <x-filament::section>
        <x-slot name="heading">
            <span class="flex items-center gap-2">
                <x-filament::icon
                    icon="heroicon-m-shield-check"
                    class="h-5 w-5 text-gray-400 dark:text-gray-500"
                />
                Recovery Readiness
            </span>
        </x-slot>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            @foreach ([$backupPosture, $recoveryEvidence] as $stat)
                @php
                    $colorClasses = match ($stat['color']) {
                        'danger' => 'border-danger-300 dark:border-danger-700',
                        'warning' => 'border-warning-300 dark:border-warning-700',
                        'success' => 'border-success-300 dark:border-success-700',
                        'info' => 'border-info-300 dark:border-info-700',
                        default => 'border-gray-200 dark:border-white/10',
                    };
                    $valueColorClasses = match ($stat['color']) {
                        'danger' => 'text-danger-600 dark:text-danger-400',
                        'warning' => 'text-warning-600 dark:text-warning-400',
                        'success' => 'text-success-600 dark:text-success-400',
                        'info' => 'text-info-600 dark:text-info-400',
                        default => 'text-gray-950 dark:text-white',
                    };
                    $descriptionColorClasses = match ($stat['color']) {
                        'danger' => 'text-danger-600 dark:text-danger-400',
                        'warning' => 'text-warning-600 dark:text-warning-400',
                        'success' => 'text-success-600 dark:text-success-400',
                        default => 'text-gray-600 dark:text-gray-300',
                    };
                @endphp

                @if ($stat['url'])
                    <a
                        href="{{ $stat['url'] }}"
                        class="{{ $colorClasses }} block rounded-xl border-l-4 bg-white p-5 shadow-sm transition hover:shadow-md dark:bg-gray-900"
                    >
                @else
                    <div class="{{ $colorClasses }} rounded-xl border-l-4 bg-white p-5 shadow-sm dark:bg-gray-900">
                @endif

                    <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
                        {{ $stat['label'] }}
                    </div>

                    <div class="{{ $valueColorClasses }} mt-1 text-2xl font-bold tracking-tight">
                        {{ $stat['value'] }}
                    </div>

                    @if (filled($stat['description']))
                        <div class="{{ $descriptionColorClasses }} mt-2 text-sm leading-relaxed">
                            {{ $stat['description'] }}
                        </div>
                    @endif

                @if ($stat['url'])
                    </a>
                @else
                    </div>
                @endif
            @endforeach
        </div>
    </x-filament::section>
</div>
