@extends('layouts.public')
@section('title','Categories | PLOCAL')
@section('description','Explore local business categories evaluated by PLOCAL.')
@section('canonical',config('plocal.public_url').'/categories.html')
@section('image',config('plocal.public_url').'/assets/img/og-meta/plocal-category.png')
@section('body-class','plocal-categories-page')
@push('styles')<link rel="stylesheet" href="/assets/css/pages/categories.css">@endpush
@section('content')
@include('public.partials.site-header')
<main id="main-content">
    <section class="plocal-categories-hero" aria-labelledby="categories-title">
        <div class="container">
            <nav class="plocal-categories-breadcrumb" aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li aria-current="page">Categories</li></ol></nav>
            <p class="plocal-categories-eyebrow">PLOCAL Directory</p>
            <h1 id="categories-title">Find the right local category</h1>
            <p>Explore published categories of local businesses evaluated by PLOCAL. Choose a category to see available providers in your area.</p>
        </div>
    </section>
    <section class="plocal-categories-list" aria-labelledby="categories-list-title">
        <div class="container">
            <header><p class="plocal-categories-eyebrow">Browse categories</p><h2 id="categories-list-title">What are you looking for?</h2></header>
            @if ($categories->isNotEmpty())
                <div class="plocal-categories-grid">
                    @foreach ($categories as $category)
                        <article class="plocal-category-card">
                            <div class="plocal-category-card-visual">
                                <img src="{{ $category->illustration }}" alt="" loading="lazy" decoding="async">
                            </div>
                            <div class="plocal-category-card-body">
                                <a href="{{ route('public.find-businesses.show', ['category' => $category->slug]) }}">
                                    <span>{{ $category->name }}</span><i class="far fa-arrow-right" aria-hidden="true"></i>
                                </a>
                                @if(isset($servicesByCategory[$category->slug]) && $servicesByCategory[$category->slug]->isNotEmpty())
                                    <ul>
                                        @foreach($servicesByCategory[$category->slug] as $service)
                                            <li><a href="{{ route('public.find-businesses.show', ['category' => $category->slug]) }}">{{ $service->name }}</a></li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p class="plocal-category-card-empty">Explore evaluated local providers in this category.</p>
                                @endif
                            </div>
                        </article>
                    @endforeach
                </div>
            @else
                <p class="plocal-categories-empty">Published categories will appear here as PLOCAL expands its evaluated directory.</p>
            @endif
        </div>
    </section>
</main>
@include('public.partials.site-footer')
@endsection