@php
    $news = $data['news'] ?? collect();
@endphp

@if($news->count())
<div class="site-section site-section--dark">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 reveal">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'آخر الأخبار' }}</h2>
            @if($section->subtitle)
                <p class="mt-4 text-white/60 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($news as $article)
                <article class="site-card reveal reveal--delay-{{ ($loop->index % 3) + 1 }}">
                    @if($article->image)
                        <div class="relative overflow-hidden aspect-[16/9]">
                            <img src="{{ $article->image->url }}"
                                 alt="{{ $article->title }}"
                                 class="site-card__image"
                                 loading="lazy">
                        </div>
                    @endif

                    <div class="p-5">
                        @if($article->published_at)
                            <time class="text-xs text-white/40">
                                {{ $article->published_at->translatedFormat('j F Y') }}
                            </time>
                        @endif

                        <h3 class="text-lg font-bold text-white mt-2 line-clamp-2">
                            {{ $article->title }}
                        </h3>

                        @if($article->excerpt)
                            <p class="text-white/50 text-sm mt-2 line-clamp-3">
                                {{ $article->excerpt }}
                            </p>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</div>
@endif
