@php
    $limit = (int) ($section->settings['limit'] ?? 3);
    $posts = \App\Models\Post::where('status', 'published')
        ->orderBy('published_at', 'desc')
        ->limit($limit)
        ->get();
    
    $title = $section->settings['title'] ?? 'Latest From Our Blog';
    $subtitle = $section->settings['subtitle'] ?? 'Stay updated with the latest news, tutorials and community highlights.';
    $show_date = $section->settings['show_date'] ?? true;
    $show_author = $section->settings['show_author'] ?? true;

    // Theme integration
    $activeTheme = \App\Services\ThemeManager::getActiveTheme();
    $themeSettings = \App\Models\ThemeSetting::where('theme_slug', $activeTheme)->first();
    
    $primaryColor = $themeSettings->primary_brand_color ?? '#6366f1';
    $cardBg = $themeSettings->component_bg_color ?? '#ffffff';
    $textColor = $themeSettings->primary_text_color ?? '#0f172a';
    $textMuted = $themeSettings->secondary_text_color ?? '#64748b';

    // Compact Grid Logic
    $count = $posts->count();
    $gridClass = "grid grid-cols-1 gap-8 ";
    if($count === 1) {
        $gridClass = "flex justify-center";
        $cardWidth = "max-w-sm w-full"; // Significantly smaller
    } elseif($count === 2) {
        $gridClass .= "md:grid-cols-2 max-w-4xl mx-auto";
        $cardWidth = "w-full";
    } else {
        $gridClass .= "md:grid-cols-2 lg:grid-cols-" . ($limit >= 4 ? 4 : 3);
        $cardWidth = "w-full";
    }
@endphp

<section id="section-{{ $section->id }}" 
    class="relative py-16 overflow-hidden theme-blog-section" 
    style="
        padding-top: {{ $section->settings['padding_top'] ?? '80px' }}; 
        padding-bottom: {{ $section->settings['padding_bottom'] ?? '80px' }};
        background: {{ $section->settings['bg_color'] ?? 'transparent' }};
        --blog-primary: {{ $primaryColor }};
        --blog-text: {{ $textColor }};
        --blog-muted: {{ $textMuted }};
        --blog-card: {{ $cardBg }};
    ">
    
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none overflow-hidden -z-10 opacity-30">
        <div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-[var(--blog-primary)] blur-[120px] rounded-full opacity-5"></div>
        <div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-[var(--blog-primary)] blur-[120px] rounded-full opacity-5"></div>
    </div>

    <div class="container mx-auto px-6 relative">
        <div class="max-w-3xl mb-12 mx-auto text-center">
            @if(!empty($section->settings['badge']))
                <span class="inline-block px-4 py-1.5 mb-6 text-[10px] font-black uppercase tracking-[0.2em] rounded-full border mx-auto"
                      style="color: var(--blog-primary); background: color-mix(in srgb, var(--blog-primary) 8%, transparent); border-color: color-mix(in srgb, var(--blog-primary) 20%, transparent);">
                    {{ $section->settings['badge'] }}
                </span>
            @endif
            
            <h2 class="text-3xl md:text-5xl font-black mb-6 leading-tight tracking-tighter" style="color: var(--blog-text);">
                {!! nl2br(e($title)) !!}
            </h2>
            
            @if(!empty($subtitle))
                <p class="text-base leading-relaxed max-w-2xl mx-auto opacity-70" style="color: var(--blog-muted);">
                    {{ $subtitle }}
                </p>
            @endif
        </div>

        @if($count > 0)
            <div class="{{ $gridClass }}">
                @foreach($posts as $post)
                    <article class="group h-full flex flex-col rounded-[2rem] border transition-all duration-500 hover:shadow-xl overflow-hidden {{ $cardWidth ?? '' }}"
                             style="background: var(--blog-card); border-color: color-mix(in srgb, var(--blog-muted) 10%, transparent);">
                        
                        <a href="{{ route('blog.post', $post->slug) }}" class="relative aspect-[16/10] overflow-hidden block bg-slate-900/5">
                            @php
                                $imgUrl = $post->featured_image;
                                if ($imgUrl && !str_starts_with($imgUrl, 'http')) {
                                    $imgUrl = \Illuminate\Support\Facades\Storage::url($imgUrl);
                                }
                            @endphp
                            
                            @if($imgUrl)
                                <img src="{{ $imgUrl }}" 
                                     alt="{{ $post->title }}"
                                     class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            @endif
                            
                            {{-- Placeholder State --}}
                            <div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center" 
                                 style="display: {{ $imgUrl ? 'none' : 'flex' }}; background: linear-gradient(135deg, color-mix(in srgb, var(--blog-primary) 5%, #1e293b), #0f172a);">
                                <i data-lucide="image" class="w-8 h-8 mb-3 opacity-20" style="color: var(--blog-primary);"></i>
                                <span class="text-[9px] font-black uppercase tracking-widest opacity-30" style="color: var(--blog-text);">Visuals Pending</span>
                            </div>
                            
                            @if($post->category)
                                <div class="absolute top-4 left-4 z-10">
                                    <span class="px-3 py-1.5 bg-white/10 backdrop-blur-md border border-white/10 text-[8px] font-black uppercase tracking-widest text-white rounded-xl shadow-xl">
                                        {{ $post->category->name }}
                                    </span>
                                </div>
                            @endif
                        </a>

                        <div class="p-8 flex-1 flex flex-col">
                            <div class="flex items-center gap-4 mb-4 text-[9px] font-black uppercase tracking-widest opacity-60" style="color: var(--blog-muted);">
                                @if($show_date)
                                    <div class="flex items-center gap-1.5">
                                        <i data-lucide="calendar" class="w-3 h-3"></i>
                                        <span>{{ $post->published_at ? $post->published_at->format('M d, Y') : $post->created_at->format('M d, Y') }}</span>
                                    </div>
                                @endif
                                @if($show_author && $post->author)
                                    <div class="flex items-center gap-1.5">
                                        <i data-lucide="user" class="w-3 h-3"></i>
                                        <span>{{ $post->author->name }}</span>
                                    </div>
                                @endif
                            </div>

                            <h3 class="text-xl font-bold mb-4 leading-snug transition-colors duration-300" style="color: var(--blog-text); --hover-color: var(--blog-primary);" onmouseover="this.style.color='var(--hover-color)'" onmouseout="this.style.color='var(--blog-text)'">
                                <a href="{{ route('blog.post', $post->slug) }}">
                                    {{ $post->title }}
                                </a>
                            </h3>

                            <p class="text-sm leading-relaxed line-clamp-2 mb-8 flex-1 opacity-70" style="color: var(--blog-muted);">
                                {{ $post->excerpt ?: Str::limit(strip_tags($post->content), 120) }}
                            </p>

                            <a href="{{ route('blog.post', $post->slug) }}" 
                               class="inline-flex items-center gap-3 text-[10px] font-black uppercase tracking-widest group/link transition-all"
                               style="color: var(--blog-primary);">
                                Explore Story
                                <i data-lucide="arrow-right" class="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-2"></i>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            <div class="text-center py-20 rounded-[2.5rem] border-2 border-dashed" 
                 style="background: color-mix(in srgb, var(--blog-muted) 5%, transparent); border-color: color-mix(in srgb, var(--blog-muted) 20%, transparent);">
                <i data-lucide="newspaper" class="w-10 h-10 mx-auto mb-6 opacity-20" style="color: var(--blog-muted);"></i>
                <h3 class="text-lg font-bold mb-2" style="color: var(--blog-text);">No blog posts found</h3>
                <p class="text-sm opacity-60" style="color: var(--blog-muted);">Start sharing your thoughts with the world!</p>
            </div>
        @endif
    </div>
</section>


<style>
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }
    .theme-blog-section h2, .theme-blog-section h3 {
        font-family: var(--font-display, inherit) !important;
    }
    .theme-blog-section p, .theme-blog-section span, .theme-blog-section a {
        font-family: var(--font-sans, inherit) !important;
    }
</style>