@extends('site.layout')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6">
            <div>
                <div class="text-2xl font-semibold">Services</div>
                @if ($q !== '')
                    <div class="mt-1 text-sm text-gray-600">Search results for “{{ $q }}”</div>
                @endif
            </div>
            <form method="GET" action="{{ route('services.index') }}" class="flex gap-2">
                <input type="text" name="q" value="{{ $q }}" class="rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" placeholder="Search services" />
                <button type="submit" class="rounded-md bg-red-700 px-4 py-2 text-white text-sm font-semibold hover:bg-red-800">Search</button>
            </form>
        </div>

        <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
            @foreach ($categories as $category)
                <a href="{{ route('categories.show', $category) }}" class="bg-white border border-gray-200 rounded-xl p-6 hover:shadow">
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 rounded-xl bg-red-50 flex items-center justify-center overflow-hidden">
                            @if ($category->icon_path)
                                <img src="{{ asset('storage/'.$category->icon_path) }}" alt="{{ $category->name }}" class="w-full h-full object-cover" />
                            @else
                                <div class="text-red-700 font-semibold">{{ strtoupper(mb_substr($category->name, 0, 1)) }}</div>
                            @endif
                        </div>
                        <div>
                            <div class="font-semibold text-gray-900">{{ $category->name }}</div>
                            <div class="text-sm text-gray-600">{{ $category->services->count() }} services</div>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
@endsection