{{--
    Liste des actualités (blog) — filtres par catégorie (chips) + grille paginée
    de cartes article. Données fournies par NewsController@index.

    @var \Illuminate\Pagination\LengthAwarePaginator $news  Articles publiés (9/page).
    @var \Illuminate\Support\Collection $categories         Catégories disponibles.
    @var string|null $selected                              Catégorie filtrée ou null.
--}}
@extends('layouts.app')

@section('title', 'Actualités — ' . config('app.name'))
@section('meta_description', 'Toute l\'actualité de HR Consulting & Co : conseils RH, tendances du recrutement, formation et management.')

@section('content')
    <x-page-header
        eyebrow="Le blog"
        title="Actualités"
        subtitle="Conseils RH, tendances du recrutement, formation et management : retrouvez nos dernières publications."
        :breadcrumbs="[['label' => 'Actualités']]"
    />

    <section class="py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            {{-- ============================= FILTRES PAR CATÉGORIE --}}
            @if ($categories->isNotEmpty())
                <div class="mb-12 flex flex-wrap gap-3" role="list" aria-label="Filtrer par catégorie">
                    {{-- Chip « Toutes » : actif si aucune catégorie sélectionnée. --}}
                    <a href="{{ route('news.index') }}"
                       @class([
                           'inline-flex items-center rounded-full px-5 py-2 text-sm font-semibold transition',
                           'bg-cta-green text-white shadow-soft' => $selected === null,
                           'border border-line bg-surface text-slate-600 hover:border-brand-500/40 hover:text-brand-600' => $selected !== null,
                       ])
                       @if ($selected === null) aria-current="true" @endif
                       role="listitem">
                        Toutes
                    </a>

                    @foreach ($categories as $category)
                        <a href="{{ route('news.index', ['category' => $category]) }}"
                           @class([
                               'inline-flex items-center rounded-full px-5 py-2 text-sm font-semibold transition',
                               'bg-cta-green text-white shadow-soft' => $selected === $category,
                               'border border-line bg-surface text-slate-600 hover:border-brand-500/40 hover:text-brand-600' => $selected !== $category,
                           ])
                           @if ($selected === $category) aria-current="true" @endif
                           role="listitem">
                            {{ $category }}
                        </a>
                    @endforeach
                </div>
            @endif

            {{-- ============================= GRILLE D'ARTICLES --}}
            @if ($news->isNotEmpty())
                <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                    @foreach ($news as $article)
                        <x-reveal :delay="($loop->index % 3) * 100" class="h-full">
                            <x-news-card :article="$article" class="h-full" />
                        </x-reveal>
                    @endforeach
                </div>

                {{-- Pagination stylée (Paginator::useTailwind actif). --}}
                <div class="mt-14">
                    {{ $news->links() }}
                </div>
            @else
                {{-- État vide (catégorie sans article ou blog vide). --}}
                <div class="mx-auto max-w-md rounded-card border border-line bg-surface p-12 text-center shadow-soft">
                    <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-500/10 text-brand-600">
                        @svg('heroicon-o-newspaper', 'h-7 w-7')
                    </span>
                    <p class="mt-5 text-slate-600">
                        @if ($selected !== null)
                            Aucune actualité dans cette catégorie pour le moment.
                        @else
                            Aucune actualité publiée pour le moment.
                        @endif
                    </p>
                    @if ($selected !== null)
                        <div class="mt-6">
                            <x-btn :href="route('news.index')" variant="secondary">Voir toutes les actualités</x-btn>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </section>
@endsection