@php
    $categories = \App\Models\Category::withCount(['competitions' => function ($query) {
        $query->where('closed', false)->where('draw_date', '>', now());
    }])
    ->orderBy('sort_order', 'asc')
    ->orderBy('competitions_count', 'desc')
    ->get();
@endphp

@if($categories->isNotEmpty())
    <section class="bg-gray-50 border-t border-b border-gray-100 py-12 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-xl font-bold text-gray-900 mb-6 tracking-tight flex items-center gap-2">
                <span>🔗</span> Competition Category Quick Links
            </h2>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                @foreach($categories as $category)
                    @php
                        // Singularize and format name (e.g. Cars -> Car Competitions, Watches -> Watch Competitions)
                        $cleanName = \Illuminate\Support\Str::singular($category->name);
                        $anchorText = "{$cleanName} Competitions";
                    @endphp
                    <a href="{{ route('home.category', ['category' => $category->slug]) }}" 
                       class="flex items-center gap-2 p-3 bg-white rounded-xl border border-gray-200 hover:border-indigo-500 hover:shadow-sm transition-all group">
                        <span class="text-lg group-hover:scale-110 transition-transform">{{ $category->icon }}</span>
                        <div class="flex flex-col min-w-0">
                            <span class="text-sm font-semibold text-gray-700 group-hover:text-indigo-600 transition-colors truncate">
                                {{ $anchorText }}
                            </span>
                            @if($category->competitions_count > 0)
                                <span class="text-[10px] font-medium text-gray-400">
                                    {{ $category->competitions_count }} active {{ \Illuminate\Support\Str::plural('draw', $category->competitions_count) }}
                                </span>
                            @else
                                <span class="text-[10px] font-medium text-gray-400">
                                    Browse draws
                                </span>
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
@endif