{{-- Blog article cards — 3-column responsive grid --}}
@php
$articles = __('blog.placeholder_articles');
$categories = __('blog.categories');
@endphp

<div class="max-w-7xl mx-auto px-4 py-8">
    @if(is_array($articles) && count($articles) > 0)
    {{-- Featured article (first one) --}}
    @php $featured = $articles[0]; @endphp
    <div class="mb-12">
        <span class="inline-block text-xs font-semibold uppercase tracking-wider text-primary mb-4">
            {{ __('blog.featured') }}
        </span>
        <a href="{{ locale_url('/blog/' . ($featured['slug'] ?? '#')) }}"
            class="block group bg-card rounded-xl overflow-hidden border border-border/30 hover:border-primary/30 transition-colors">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
                <div class="aspect-video lg:aspect-auto overflow-hidden">
                    <img src="{{ asset('images/blog/' . ($featured['image'] ?? 'placeholder.webp')) }}"
                        alt="{{ $featured['image_alt'] ?? $featured['title'] }}"
                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        loading="eager">
                </div>
                <div class="p-6 lg:p-10 flex flex-col justify-center space-y-4">
                    <div class="flex items-center gap-3">
                        <span class="text-xs px-3 py-1 rounded-full bg-primary/20 text-primary font-medium">
                            {{ $categories[$featured['category']] ?? $featured['category'] }}
                        </span>
                        <time class="text-xs text-muted-foreground">{{ $featured['date'] }}</time>
                    </div>
                    <h2 class="text-2xl lg:text-3xl font-semibold text-foreground group-hover:text-primary transition-colors">
                        {{ $featured['title'] }}
                    </h2>
                    <p class="text-foreground/60 text-base line-clamp-3">{{ $featured['excerpt'] }}</p>
                    <span class="inline-flex items-center text-primary text-sm font-medium">
                        {{ __('blog.read_more') }}
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 group-hover:translate-x-1 transition-transform">
                            <polyline points="9 18 15 12 9 6"></polyline>
                        </svg>
                    </span>
                </div>
            </div>
        </a>
    </div>

    {{-- Remaining articles in grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        @foreach(array_slice($articles, 1) as $article)
        <article class="bg-card rounded-xl overflow-hidden group border border-border/30 hover:border-primary/30 transition-colors" data-appear-from-bottom>
            <a href="{{ locale_url('/blog/' . ($article['slug'] ?? '#')) }}" class="block">
                <div class="aspect-video overflow-hidden">
                    <img src="{{ asset('images/blog/' . ($article['image'] ?? 'placeholder.webp')) }}"
                        alt="{{ $article['image_alt'] ?? $article['title'] }}"
                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        loading="lazy">
                </div>
                <div class="p-6 space-y-3">
                    <div class="flex items-center gap-2">
                        <span class="text-xs px-2 py-1 rounded-full bg-primary/20 text-primary font-medium">
                            {{ $categories[$article['category']] ?? $article['category'] }}
                        </span>
                        <time class="text-xs text-muted-foreground">{{ $article['date'] }}</time>
                    </div>
                    <h3 class="text-lg font-semibold text-foreground line-clamp-2 group-hover:text-primary transition-colors">
                        {{ $article['title'] }}
                    </h3>
                    <p class="text-muted-foreground text-sm line-clamp-3">{{ $article['excerpt'] }}</p>
                </div>
            </a>
        </article>
        @endforeach
    </div>
    @else
    {{-- Empty state --}}
    <div class="text-center py-20">
        <p class="text-muted-foreground text-lg">{{ __('blog.empty_state') }}</p>
    </div>
    @endif
</div>