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

<div class="site-section site-section--alt">
    <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-gray-500 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        @if($news->count())
            <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-gray-400">
                                    {{ $article->published_at->translatedFormat('j F Y') }}
                                </time>
                            @endif

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

                            @if($article->excerpt)
                                <p class="text-gray-500 text-sm mt-2 line-clamp-3">
                                    {{ $article->excerpt }}
                                </p>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @for($i = 0; $i < 3; $i++)
                    <div class="skeleton-card">
                        <div class="aspect-[16/9] skeleton-block"></div>
                        <div class="p-5 space-y-3">
                            <div class="skeleton-block h-3 w-20"></div>
                            <div class="skeleton-block h-5 w-3/4"></div>
                            <div class="skeleton-block h-3 w-full"></div>
                        </div>
                    </div>
                @endfor
            </div>
            <div class="empty-state mt-4">
                <p class="text-sm">لم تُضف أخبار بعد</p>
            </div>
        @endif
    </div>
</div>
