@php
    $limit = $content['limit'] ?? 3;
    $recentPosts = \App\Models\BlogPost::with('category')
        ->where('published_at', '<=', now())
        ->orderBy('published_at', 'desc')
        ->limit($limit)
        ->get();
@endphp

@if($recentPosts->isNotEmpty())
    <section class="py-20 px-6 max-w-7xl mx-auto {{ $content['custom_class'] ?? '' }}" style="{{ $content['custom_style'] ?? '' }}">
        <div class="flex justify-between items-end mb-12">
            <h2 class="font-headline-md text-3xl md:text-4xl text-primary font-semibold">
                {{ $content['title'] ?? 'Yazılarımız ve Önerilerimiz' }}
            </h2>
            <a href="/blog" class="font-body-md text-sm text-primary-container hover:opacity-80 flex items-center gap-1 font-semibold uppercase tracking-wider">
                Tümünü Gör <span class="material-symbols-outlined text-[18px]">chevron_right</span>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($recentPosts as $post)
                <article class="flex flex-col border border-primary-container/20 rounded overflow-hidden hover:border-primary-container transition-colors bg-[#FCFBF7]">
                    @if($post->featured_image)
                        <a href="{{ route('blog.show', $post->slug) }}" class="block overflow-hidden h-52">
                            <img src="{{ \Illuminate\Support\Str::startsWith($post->featured_image, ['http', 'assets/']) ? asset($post->featured_image) : \Illuminate\Support\Facades\Storage::url($post->featured_image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                        </a>
                    @endif
                    <div class="p-6 flex-grow flex flex-col justify-between">
                        <div>
                            @if($post->category)
                                <a href="/blog?category={{ $post->category->slug }}" class="font-label-caps text-xs text-primary-container mb-3 block uppercase tracking-widest hover:opacity-80">
                                    {{ $post->category->name }}
                                </a>
                            @endif
                            <h3 class="font-headline-sm text-lg md:text-xl text-on-surface mb-3 font-semibold line-clamp-2">
                                <a href="{{ route('blog.show', $post->slug) }}" class="hover:text-primary-container transition-colors">
                                    {{ $post->title }}
                                </a>
                            </h3>
                            @if($post->summary)
                                <p class="font-body-md text-xs text-on-surface-variant leading-relaxed line-clamp-3 mb-4">
                                    {{ $post->summary }}
                                </p>
                            @endif
                        </div>
                        <div class="text-xs text-gray-500 mt-4">
                            {{ $post->published_at->translatedFormat('d M Y') }}
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </section>
@endif