@php
    $summaryCards = [
        ['label' => 'Passed', 'value' => $summary['pass'], 'classes' => 'bg-emerald-50 text-emerald-800 ring-emerald-200'],
        ['label' => 'Warnings', 'value' => $summary['warning'], 'classes' => 'bg-amber-50 text-amber-900 ring-amber-200'],
        ['label' => 'Failed', 'value' => $summary['fail'], 'classes' => 'bg-rose-50 text-rose-800 ring-rose-200'],
        ['label' => 'Total checks', 'value' => $summary['total'], 'classes' => 'bg-slate-50 text-slate-800 ring-slate-200'],
    ];

    $statusClasses = [
        'pass' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
        'warning' => 'bg-amber-50 text-amber-800 ring-amber-200',
        'fail' => 'bg-rose-50 text-rose-700 ring-rose-200',
    ];
@endphp

<x-filament-panels::page>
    <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="bg-gradient-to-br from-teal-50 via-white to-sky-50 p-6">
            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-teal-700">Launch readiness</p>
            <div class="mt-3 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
                <div>
                    <h2 class="text-2xl font-semibold tracking-tight text-slate-950">RemoteMatch system health</h2>
                    <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-600">
                        Use this checklist before handing the script to a buyer or launching on a real domain. Failed checks should be fixed before production traffic.
                    </p>
                </div>
                <code class="rounded-2xl bg-slate-950 px-4 py-3 text-xs font-semibold text-white shadow-lg shadow-slate-950/10">php artisan remotematch:health</code>
            </div>
        </div>

        <div class="grid gap-4 p-6 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($summaryCards as $card)
                <div class="rounded-3xl p-5 ring-1 {{ $card['classes'] }}">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] opacity-70">{{ $card['label'] }}</p>
                    <p class="mt-3 text-3xl font-semibold">{{ number_format($card['value']) }}</p>
                </div>
            @endforeach
        </div>
    </section>

    <div class="mt-6 space-y-5">
        @foreach ($groups as $group => $checks)
            <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-100 px-5 py-4">
                    <h3 class="text-lg font-semibold text-slate-950">{{ $group }}</h3>
                </div>

                <div class="divide-y divide-slate-100">
                    @foreach ($checks as $check)
                        <article class="grid gap-4 p-5 lg:grid-cols-[12rem_1fr_1.2fr] lg:items-start">
                            <div>
                                <span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.12em] ring-1 {{ $statusClasses[$check['status']] ?? $statusClasses['warning'] }}">
                                    {{ $check['status'] }}
                                </span>
                            </div>

                            <div>
                                <h4 class="font-semibold text-slate-950">{{ $check['title'] }}</h4>
                                <p class="mt-1 break-words text-sm leading-6 text-slate-600">{{ $check['details'] }}</p>
                            </div>

                            <div class="rounded-2xl bg-slate-50 p-4 text-sm leading-6 text-slate-600 ring-1 ring-slate-100">
                                {{ $check['action'] ?: 'No action required.' }}
                            </div>
                        </article>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>
</x-filament-panels::page>