{{-- Homepage Blog Preview Section — 3 most recent published articles (Story 5.10 — AC #6) --}}
@php
$articles = $latestArticles ?? collect();
$locale = $locale ?? app()->getLocale();
@endphp

@if($articles->isNotEmpty())
<section class="w-full px-4">
    <div class="w-full h-full px-4 pt-20 pb-20 bg-background rounded-lg">
        <div class="w-full max-w-7xl mx-auto">
            <x-atoms.title
                :subject="__('blog.preview_subject')"
                :title="__('blog.preview_title')"
                align="left" />

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-10" data-display-wrapped>
                @foreach($articles as $article)
                <x-blog.blog-card :article="$article" variant="compact" :locale="$locale" />
                @endforeach
            </div>

            <div class="mt-10 text-center">
                <x-atoms.button-link href="{{ localized_route('blog.index') }}">
                    {{ __('blog.view_all_articles') }}
                </x-atoms.button-link>
            </div>
        </div>
    </div>
</section>
@endif