@props([
    'badge',
    'title',
    'description' => null,
    'stats' => [],
])

@php
    $statCols = match (count($stats)) {
        4 => 'sm:grid-cols-2 lg:grid-cols-4',
        2 => 'sm:grid-cols-2',
        default => 'sm:grid-cols-3',
    };
@endphp

<div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white']) }}>
    <div class="absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-violet-50/60"></div>
    <div class="relative px-6 py-8 sm:px-10">
        <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
            <div class="max-w-xl">
                <div class="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">
                    {{ $badge }}
                </div>
                <h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">{{ $title }}</h1>
                @if ($description)
                    <p class="mt-2 text-sm leading-6 text-slate-600">{{ $description }}</p>
                @endif
                @isset($actions)
                    <div class="mt-6 flex flex-wrap items-center gap-2">
                        {{ $actions }}
                    </div>
                @endisset
            </div>

            @if (count($stats) > 0)
                <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid {{ $statCols }} sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
                    @foreach ($stats as $stat)
                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $stat['value'] }}</p>
                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>