{{-- Assurez-vous d'avoir configuré Carbon en arabe dans votre AppServiceProvider pour que diffForHumans() fonctionne correctement --}}

@if(isset($latestPosts) && $latestPosts->count() > 0)
<section class="py-12 md:py-20 bg-slate-50">
    <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>
            {{-- Le lien pointe vers la page de tous les articles --}}
            <a href="{{ route('posts.all') }}" class="group flex items-center text-blue-600 font-semibold transition-colors duration-300 hover:text-blue-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 derniers articles récupérés --}}
            @foreach ($latestPosts as $post)
                <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">
                        {{-- Image de l'article avec un fallback --}}
                        <a href="{{ route('posts.show', $post->slug) }}" class="block h-full">
                            <img src="{{ $post->image ? asset('storage/' . $post->image) : 'https://placehold.co/600x400/e2e8f0/475569?text=مقالة' }}" 
                                 alt="{{ $post->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">
                        <div class="flex items-center gap-4 mb-4">
                            {{-- Afficher la première catégorie (s'il y en a) --}}
                            @if ($post->categories->isNotEmpty())
                                <div class="bg-blue-100 text-blue-600 py-1 px-3 rounded-full text-sm font-semibold">
                                    {{ $post->categories->first()->name }}
                                </div>
                            @endif
                            <div class="text-slate-500 flex items-center text-sm gap-2">
                                <i class="far fa-calendar"></i>
                                {{-- Date de publication formatée --}}
                                <span>{{ $post->published_at->diffForHumans() }}</span>
                            </div>
                        </div>
                        {{-- Titre de l'article --}}
                        <h3 class="text-xl font-bold mb-3 text-slate-800 flex-grow">
                            <a href="{{ route('posts.show', $post->slug) }}" class="hover:text-blue-600 transition-colors">
                                {{ $post->title }}
                            </a>
                        </h3>
                        {{-- Extrait du contenu --}}
                        <p class="text-slate-500 mb-5">
                            {{ \Illuminate\Support\Str::limit(strip_tags($post->content), 100) }}
                        </p>
                        {{-- Lien "Lire la suite" --}}
                        <a href="{{ route('posts.show', $post->slug) }}" class="flex items-center text-blue-600 font-semibold group-hover:text-blue-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