@extends('layouts.public')

@section('title', $category->name . ' — ' . config('app.name'))

@section('content')
    <section class="py-5">
        <div class="container">
            <a href="{{ route('home') }}" class="small fw-bold text-muted text-decoration-none">&larr; All categories</a>

            <div class="mt-3 mb-4 mb-lg-5" style="max-width: 40rem;">
                <span class="hp-eyebrow">{{ $services->count() }} services</span>
                <h1 class="fw-bold mt-2 mb-3" style="font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em;">
                    <x-category-icon :name="$category->name" /> {{ $category->name }}
                </h1>
                <p class="text-muted mb-0">{{ $category->description }}</p>
            </div>

            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 g-lg-4">
                @forelse ($services as $service)
                    <div class="col">
                        <a href="{{ route('customer.book.address', $service) }}" class="hp-tile">
                            <div class="hp-tile-media hp-tile-media-wide">🧩</div>
                            <div class="hp-tile-body">
                                <h3 class="hp-tile-name">{{ $service->name }}</h3>
                                @if ($service->description)
                                    <p class="hp-tile-meta">{{ $service->description }}</p>
                                @endif
                                <span class="hp-tile-cta">
                                    {{ auth()->check() && auth()->user()->isCustomer() ? 'Find providers' : 'Log in to book' }}
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                                </span>
                            </div>
                        </a>
                    </div>
                @empty
                    <p class="text-muted">No services listed in this category yet.</p>
                @endforelse
            </div>
        </div>
    </section>
@endsection