<x-app-layout title="Reports">
    <h1 class="text-xl font-semibold text-slate-900">Reports</h1>
    <p class="mt-1 text-sm text-slate-500">Operational and financial analytics</p>
    <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($reports as $key => $label)
            <a href="{{ route('care.reports.show', $key) }}" class="rounded-2xl border border-slate-200 bg-white p-6 hover:border-sky-200 hover:bg-sky-50/50">
                <h2 class="font-semibold text-slate-900">{{ $label }}</h2>
                <p class="mt-1 text-sm text-slate-500">View and export</p>
            </a>
        @endforeach
    </div>
</x-app-layout>
