<x-app-layout :title="$title ?? 'Overview'">
    <div class="space-y-6">
        <x-care.page-hero
            :badge="$badge ?? 'Analytics'"
            :title="$title ?? 'Overview'"
            :description="$description ?? ''"
            :stats="collect($adminOverview['kpis'] ?? [])->take(3)->map(fn ($kpi) => [
                'value' => $kpi['value'],
                'label' => $kpi['label'],
            ])->values()->all()"
        />

        <p class="text-sm text-slate-500">
            {{ $adminOverview['period_label'] ?? 'Period' }}
            @if (! empty($adminOverview['from']) && ! empty($adminOverview['to']))
                · {{ $adminOverview['from'] }} to {{ $adminOverview['to'] }}
            @endif
        </p>

        @include('care.partials.admin-overview', ['adminOverview' => $adminOverview])

        @isset($catalog)
            <section class="rounded-2xl border border-slate-200 bg-white p-5">
                <h2 class="text-sm font-semibold text-slate-900">Detailed reports</h2>
                <p class="mt-1 text-sm text-slate-500">Open a report for date-range filters and CSV export.</p>
                <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($catalog as $key => $label)
                        <a href="{{ route('care.reports.show', $key) }}" class="rounded-xl border border-slate-200 px-4 py-3 hover:border-indigo-200 hover:bg-indigo-50/40">
                            <p class="font-medium text-slate-900">{{ $label }}</p>
                            <p class="mt-0.5 text-xs text-slate-500">View and export</p>
                        </a>
                    @endforeach
                </div>
            </section>
        @endisset
    </div>
</x-app-layout>
