@php
    $palette = [
        'sky'     => ['bg' => 'bg-sky-50',     'ring' => 'ring-sky-100',     'text' => 'text-sky-600',     'accent' => 'text-sky-700'],
        'amber'   => ['bg' => 'bg-amber-50',   'ring' => 'ring-amber-100',   'text' => 'text-amber-600',   'accent' => 'text-amber-700'],
        'blue'    => ['bg' => 'bg-blue-50',    'ring' => 'ring-blue-100',    'text' => 'text-blue-600',    'accent' => 'text-blue-700'],
        'emerald' => ['bg' => 'bg-emerald-50', 'ring' => 'ring-emerald-100', 'text' => 'text-emerald-600', 'accent' => 'text-emerald-700'],
        'rose'    => ['bg' => 'bg-rose-50',    'ring' => 'ring-rose-100',    'text' => 'text-rose-600',    'accent' => 'text-rose-700'],
        'indigo'  => ['bg' => 'bg-indigo-50',  'ring' => 'ring-indigo-100',  'text' => 'text-indigo-600',  'accent' => 'text-indigo-700'],
        'violet'  => ['bg' => 'bg-violet-50',  'ring' => 'ring-violet-100',  'text' => 'text-violet-600',  'accent' => 'text-violet-700'],
        'slate'   => ['bg' => 'bg-slate-50',   'ring' => 'ring-slate-100',   'text' => 'text-slate-600',   'accent' => 'text-slate-700'],
    ];

    $applicationsRoute = route('admin.applications.index');

    $appCards = [
        [
            'label' => 'Total Applications',
            'value' => $total,
            'sub'   => 'All time',
            'icon'  => 'fa-clipboard-list',
            'color' => 'sky',
            'href'  => $applicationsRoute,
        ],
        [
            'label' => 'Pending',
            'value' => $pending,
            'sub'   => 'Awaiting confirmation',
            'icon'  => 'fa-clock',
            'color' => 'amber',
            'href'  => $applicationsRoute.'?status=pending',
        ],
        [
            'label' => 'In Process',
            'value' => $inProcess,
            'sub'   => 'Being processed',
            'icon'  => 'fa-arrows-rotate',
            'color' => 'blue',
            'href'  => $applicationsRoute.'?status=in_process',
        ],
        [
            'label' => 'Approved',
            'value' => $approved,
            'sub'   => 'Successfully completed',
            'icon'  => 'fa-circle-check',
            'color' => 'emerald',
            'href'  => $applicationsRoute.'?status=approved',
        ],
        [
            'label' => 'Rejected',
            'value' => $rejected,
            'sub'   => 'Applications rejected',
            'icon'  => 'fa-circle-xmark',
            'color' => 'rose',
            'href'  => $applicationsRoute.'?status=rejected',
        ],
    ];

    $peopleCards = [
        [
            'label' => 'Customers',
            'value' => $customers,
            'sub'   => 'Registered customer accounts',
            'icon'  => 'fa-user-group',
            'color' => 'indigo',
            'href'  => route('admin.users'),
        ],
        [
            'label' => 'Agents',
            'value' => $agents,
            'sub'   => 'Approved partner agents',
            'icon'  => 'fa-id-badge',
            'color' => 'violet',
            'href'  => route('admin.users.agents'),
        ],
        [
            'label' => 'Pending Approvals',
            'value' => $pendingRegistrations,
            'sub'   => 'Awaiting your review',
            'icon'  => 'fa-user-clock',
            'color' => 'amber',
            'href'  => route('admin.users'),
        ],
    ];
@endphp

<div class="space-y-5" wire:poll.60s="loadStats">
    {{-- Applications row --}}
    <div>
        <div class="mb-2 flex items-center justify-between">
            <h3 class="text-[13px] font-bold uppercase tracking-wide text-cv-navy-light/80">Applications</h3>
            <a href="{{ $applicationsRoute }}" class="text-[12px] font-semibold text-cv-gold hover:underline">
                View all <i class="fa-solid fa-arrow-right text-[10px]"></i>
            </a>
        </div>
        <div class="-mx-4 flex gap-3 overflow-x-auto px-4 pb-1 sm:mx-0 sm:grid sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 lg:grid-cols-5">
            @foreach ($appCards as $card)
                @php($c = $palette[$card['color']])
                <a href="{{ $card['href'] }}" wire:navigate
                   class="group flex w-[240px] shrink-0 flex-col gap-2 rounded-[14px] border border-cv-sand bg-white p-4 shadow-card transition hover:-translate-y-0.5 hover:border-cv-gold/40 hover:shadow-md sm:w-auto sm:shrink">
                    <div class="flex items-start justify-between">
                        <span class="inline-flex h-10 w-10 items-center justify-center rounded-full {{ $c['bg'] }} ring-4 {{ $c['ring'] }}">
                            <i class="fa-solid {{ $card['icon'] }} {{ $c['text'] }} text-[15px]"></i>
                        </span>
                        <i class="fa-solid fa-arrow-up-right-from-square text-[11px] text-slate-300 transition group-hover:text-cv-gold"></i>
                    </div>
                    <div>
                        <p class="text-[12px] font-semibold uppercase tracking-wide text-cv-navy-light">{{ $card['label'] }}</p>
                        <p class="mt-0.5 text-[24px] font-bold leading-none {{ $c['accent'] }}">{{ number_format($card['value']) }}</p>
                        <p class="mt-1 text-[11px] text-cv-navy-light/80">{{ $card['sub'] }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>

    {{-- People row --}}
    <div>
        <div class="mb-2 flex items-center justify-between">
            <h3 class="text-[13px] font-bold uppercase tracking-wide text-cv-navy-light/80">Users &amp; roles</h3>
            <a href="{{ route('admin.users') }}" class="text-[12px] font-semibold text-cv-gold hover:underline">
                Manage <i class="fa-solid fa-arrow-right text-[10px]"></i>
            </a>
        </div>
        <div class="-mx-4 flex gap-3 overflow-x-auto px-4 pb-1 sm:mx-0 sm:grid sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($peopleCards as $card)
                @php($c = $palette[$card['color']])
                <a href="{{ $card['href'] }}" wire:navigate
                   class="group flex w-[280px] shrink-0 items-center gap-4 rounded-[14px] border border-cv-sand bg-white p-4 shadow-card transition hover:-translate-y-0.5 hover:border-cv-gold/40 hover:shadow-md sm:w-auto sm:shrink">
                    <span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-full {{ $c['bg'] }} ring-4 {{ $c['ring'] }}">
                        <i class="fa-solid {{ $card['icon'] }} {{ $c['text'] }} text-[20px]"></i>
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-[12px] font-semibold uppercase tracking-wide text-cv-navy-light">{{ $card['label'] }}</p>
                            <i class="fa-solid fa-arrow-up-right-from-square text-[11px] text-slate-300 transition group-hover:text-cv-gold"></i>
                        </div>
                        <p class="mt-0.5 text-[26px] font-bold leading-none {{ $c['accent'] }}">{{ number_format($card['value']) }}</p>
                        <p class="mt-1 text-[11px] text-cv-navy-light/80">{{ $card['sub'] }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</div>