<x-admin-layout title="Dashboard" active="dashboard">
    @php
        $cards = [
            ['label' => 'Projects',       'value' => $projectCount, 'icon' => 'integration', 'url' => route('admin.projects.index')],
            ['label' => 'News articles',  'value' => $articleCount, 'icon' => 'quote',       'url' => route('admin.articles.index')],
            ['label' => 'Total enquiries','value' => $enquiryCount, 'icon' => 'mail',        'url' => route('admin.enquiries.index')],
            ['label' => 'New enquiries',  'value' => $newEnquiries, 'icon' => 'spark',       'url' => route('admin.enquiries.index', ['status' => 'new'])],
        ];
    @endphp

    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @foreach ($cards as $c)
            <a href="{{ $c['url'] }}" class="card p-6 group">
                <div class="flex items-center justify-between">
                    <span class="grid place-items-center w-11 h-11 rounded-xl bg-brand-50 text-brand-600 group-hover:bg-brand-500 group-hover:text-white transition"><x-icon :name="$c['icon']" class="w-6 h-6"/></span>
                    @if ($c['label'] === 'New enquiries' && $c['value'] > 0)
                        <span class="text-xs font-semibold bg-brand-500 text-white px-2 py-0.5 rounded-full">action</span>
                    @endif
                </div>
                <p class="mt-4 font-display text-3xl font-semibold text-slate-ink">{{ $c['value'] }}</p>
                <p class="text-sm text-slate-500">{{ $c['label'] }}</p>
            </a>
        @endforeach
    </div>

    <div class="grid lg:grid-cols-3 gap-5 mt-6">
        <div class="card p-6 lg:col-span-2">
            <div class="flex items-center justify-between mb-4">
                <h2 class="font-semibold text-slate-ink">Recent enquiries</h2>
                <a href="{{ route('admin.enquiries.index') }}" class="text-sm font-semibold text-brand-600">View all</a>
            </div>
            @if ($recent->isEmpty())
                <p class="text-slate-500 text-sm py-8 text-center">No enquiries yet.</p>
            @else
                <div class="divide-y divide-slate-100">
                    @foreach ($recent as $e)
                        <a href="{{ route('admin.enquiries.show', $e) }}" class="flex items-center justify-between py-3 group">
                            <div class="min-w-0">
                                <p class="font-medium text-slate-ink truncate">{{ $e->name }} <span class="text-slate-400 font-normal">· {{ $e->company ?? $e->email }}</span></p>
                                <p class="text-xs text-slate-500 truncate">{{ \Illuminate\Support\Str::limit($e->message, 70) }}</p>
                            </div>
                            <div class="flex items-center gap-3 shrink-0 ml-4">
                                <x-admin.status-badge :status="$e->status"/>
                                <span class="text-xs text-slate-400 hidden sm:inline">{{ $e->created_at->diffForHumans() }}</span>
                            </div>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="card p-6">
            <h2 class="font-semibold text-slate-ink mb-4">Quick actions</h2>
            <div class="space-y-3">
                <a href="{{ route('admin.projects.create') }}" class="btn btn-ghost w-full justify-start"><x-icon name="integration" class="w-5 h-5"/> New project</a>
                <a href="{{ route('admin.articles.create') }}" class="btn btn-ghost w-full justify-start"><x-icon name="quote" class="w-5 h-5"/> New article</a>
                <a href="{{ route('admin.enquiries.index', ['status' => 'new']) }}" class="btn btn-ghost w-full justify-start"><x-icon name="mail" class="w-5 h-5"/> Review new enquiries</a>
            </div>
        </div>
    </div>
</x-admin-layout>
