@php
$title = $section->settings['title'] ?? 'Latest Intelligence';
$mode = $section->settings['mode'] ?? 'dynamic';
$manualKeys = $section->settings['manual_keys'] ?? ''; 

$posts = collect();

if ($mode === 'manual' && filled($manualKeys)) {
    $keys = array_map('trim', explode(',', $manualKeys));
    $posts = \App\Models\Post::with(['category', 'author'])
        ->whereIn('slug', $keys)
        ->where('status', 'published')
        ->take(3)
        ->get();
} else {
    // Dynamic fallback
    $posts = \App\Models\Post::with(['category', 'author'])
        ->where('status', 'published')
        ->latest()
        ->take(3)
        ->get();
}
@endphp

<section class="py-24 md:py-32 bg-bg-main relative border-y border-border-subtle overflow-hidden">
    {{-- Grid Background --}}
    <div class="absolute inset-0 bg-[radial-gradient(rgba(var(--text-dim-rgb),0.03)_1px,transparent_1px)] [background-size:32px:32px] opacity-20 pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-10 md:gap-16 mb-20 md:mb-24">
            <div class="space-y-6">
                <div class="inline-flex items-center gap-3 px-4 py-2 bg-brand-500/10 border border-brand-500/20 text-brand-500 text-[10px] font-900 tracking-[0.3em] uppercase rounded-xl shadow-inner">
                    <i data-lucide="newspaper" class="w-4 h-4 stroke-[3]"></i>
                    Engineering Transmission Log
                </div>
                <h2 class="text-4xl md:text-6xl font-display font-900 text-text-base uppercase tracking-tight">{{ $title }}</h2>
            </div>
            
            <a href="{{ route('storefront.blog.index') }}" class="w-full md:w-auto inline-flex items-center justify-center gap-4 h-14 px-10 rounded-2xl bg-surface-secondary border border-border-subtle text-text-base hover:bg-surface-primary hover:border-brand-500/40 transition-all duration-500 font-900 text-[11px] uppercase tracking-widest shadow-xl active:scale-95 shadow-brand-500/5">
                Read All Vectors
                <i data-lucide="arrow-right" class="w-4 h-4"></i>
            </a>
        </div>

        @if($posts->isNotEmpty())
        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
            @foreach($posts as $post)
                <div class="glass-card bg-surface-secondary/50 backdrop-blur-xl border border-border-subtle rounded-[3rem] overflow-hidden hover:border-brand-500/40 transition-all duration-700 shadow-2xl group flex flex-col h-full hover:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.2)] md:hover:-translate-y-3 relative active:scale-[0.98]">
                    
                    {{-- Featured Image Box --}}
                    <div class="relative aspect-video bg-surface-primary overflow-hidden border-b border-border-subtle">
                        <img src="{{ asset('storage/' . ($post->featured_image ?: $post->og_image)) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-all duration-1000">
                        
                        {{-- Category Badge --}}
                        @if($post->category)
                        <div class="absolute top-5 left-5 z-10 px-4 py-2 bg-bg-main/80 backdrop-blur-md rounded-xl border border-border-subtle text-text-base font-900 text-[10px] uppercase tracking-widest shadow-2xl">
                            {{ $post->category->name }}
                        </div>
                        @endif
                    </div>

                    <div class="p-10 flex flex-col flex-1 relative">
                        <div class="flex items-center gap-3 text-[10px] font-900 uppercase tracking-[0.2em] text-text-dim/60 mb-6">
                            <i data-lucide="calendar" class="w-4 h-4 text-brand-500"></i>
                            <time>{{ $post->created_at->format('M d, Y') }}</time>
                        </div>
                        
                        <h3 class="text-2xl font-display font-800 text-text-base mb-6 tracking-tight group-hover:text-brand-500 transition-colors duration-500 uppercase leading-snug">
                            {{ Str::limit($post->title, 60) }}
                        </h3>
                        
                        <p class="text-text-muted text-[15px] leading-relaxed font-600 mb-10 align-bottom uppercase tracking-wide">
                            {{ Str::limit(strip_tags($post->excerpt ?: $post->content), 120) }}
                        </p>

                        <a href="{{ route('storefront.blog.show', $post->slug) }}" class="mt-auto flex items-center gap-3 text-[11px] font-900 uppercase tracking-[0.2em] text-text-base hover:text-brand-500 active:scale-95 transition-all w-max after:content-[''] after:absolute after:inset-0 group/link">
                            Read Intelligence Log
                            <i data-lucide="chevron-right" class="w-4 h-4 text-brand-500 transition-transform group-hover/link:translate-x-1"></i>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
        @else
        <div class="p-20 text-center border-2 border-dashed border-border-subtle rounded-[3rem] bg-surface-secondary/20">
            <i data-lucide="folder-open" class="w-16 h-16 mx-auto mb-6 text-text-dim/20"></i>
            <p class="font-900 uppercase tracking-[0.4em] text-sm text-text-dim/50">No engineering logs found in current archives.</p>
        </div>
        @endif
    </div>
</sectio