@if(isset($latestNews) && $latestNews->count() > 0)
<section class="py-12 md:py-20 bg-white"> {{-- Fond différent pour varier --}}
    <div class="container mx-auto max-w-7xl px-4">
        <div class="flex justify-between items-center mb-10">
            <h2 class="text-3xl md:text-4xl font-extrabold text-slate-800">آخر الأخبار</h2>
            {{-- J'imagine une route 'news.all' --}}
            <a href="{{ route('actualite') }}" class="group flex items-center text-green-600 font-semibold transition-colors duration-300 hover:text-green-700">
                <span>عرض الكل</span>
                <i class="fas fa-arrow-left me-2 transition-transform duration-300 group-hover:-translate-x-1.5"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {{-- Boucle sur les 3 dernières actualités --}}
            @foreach ($latestNews as $news_item)
                <div class="group bg-white rounded-2xl overflow-hidden shadow-md transition-all duration-400 ease-in-out hover:-translate-y-1.5 hover:shadow-xl flex flex-col">
                    <div class="h-52 overflow-hidden">
                        {{-- J'imagine une route 'news.show' --}}
                        <a href="{{ route('news.show', $news_item->slug) }}" class="block h-full">
                            <img src="{{ $news_item->image ? asset('storage/' . $news_item->image) : 'https://placehold.co/600x400/e2e8f0/475569?text=خبر' }}" 
                                 alt="{{ $news_item->title }}" 
                                 class="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110">
                        </a>
                    </div>
                    <div class="p-6 flex flex-col flex-grow">
                        {{-- ... Adaptez ici le contenu de la carte pour les actualités ... --}}
                         <h3 class="text-xl font-bold mb-3 text-slate-800 flex-grow">
                            <a href="{{ route('news.show', $news_item->slug) }}" class="hover:text-green-600 transition-colors">
                                {{ $news_item->title }}
                            </a>
                        </h3>
                        <p class="text-slate-500 mb-5">
                            {{ \Illuminate\Support\Str::limit(strip_tags($news_item->content), 100) }}
                        </p>
                        <a href="{{ route('news.show', $news_item->slug) }}" class="flex items-center text-green-600 font-semibold group-hover:text-green-700">
                            <span>اقرأ المزيد</span>
                            <i class="fas fa-arrow-left me-2 transition-transform duration-300 group-hover:-translate-x-1"></i>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif