@extends('layouts.app')
@section('titre', 'Actualités')

@section('contenu')

<section class="bg-bleu-fonce py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8">
        <div class="text-vert text-sm font-bold uppercase tracking-wide mb-4">Actualités</div>
        <h1 class="text-white text-4xl font-bold max-w-2xl">Dernières nouvelles</h1>
        @include('composants.fil-ariane')
    </div>
</section>

<section class="py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse ($actualites as $item)
        <a href="{{ route('actualites.show', $item) }}" class="bg-white border border-gray-200 block">
            <div class="h-40 bg-bleu overflow-hidden">
                @if ($item->image)
                    <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->titre }}" loading="lazy" class="w-full h-full object-cover">
                @endif
            </div>
            <div class="p-5">
                <span class="text-vert-fonce text-xs font-bold uppercase">{{ $item->categorie }}</span>
                <h3 class="font-bold text-bleu-fonce mt-2">{{ $item->titre }}</h3>
                @if ($item->extrait)
                    <p class="text-sm text-gray-500 mt-2">{{ $item->extrait }}</p>
                @endif
            </div>
</a>
        @empty
        <p class="text-gray-400 col-span-full text-center">Aucune actualité publiée pour le moment.</p>
        @endforelse
    </div>
</section>

@endsection