@php
    $news = $data['news'] ?? collect();
    $layout = $section->getSetting('layout', 'grid_3');
    $showCategories = $section->getSetting('show_categories', true);
    $categories = $news->pluck('category')->filter()->unique()->values();

    $gridClass = match($layout) {
        'grid_2' => 'grid grid-cols-1 sm:grid-cols-2 gap-[var(--card-gap,1.5rem)]',
        'grid_4' => 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[var(--card-gap,1.5rem)]',
        'list' => 'flex flex-col gap-[var(--card-gap,1.5rem)]',
        'carousel' => 'flex overflow-x-auto snap-x snap-mandatory gap-[var(--card-gap,1.5rem)] pb-4 -mx-4 px-4 scrollbar-hide',
        default => 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--card-gap,1.5rem)]',
    };
    $cardExtraClass = $layout === 'carousel' ? 'min-w-[300px] snap-start shrink-0' : '';
    $listMode = $layout === 'list';
@endphp

<div class="site-section site-section--alt" x-data="{ activeCategory: 'all' }">
    <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())
            {{-- Category Filter --}}
            @if($showCategories && $categories->count() > 1)
                <div class="flex items-center justify-center gap-2 mb-8 overflow-x-auto pb-2 scrollbar-hide reveal">
                    <button @click="activeCategory = 'all'"
                            :class="activeCategory === 'all' ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                            class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap">
                        الكل
                    </button>
                    @foreach($categories as $cat)
                        <button @click="activeCategory = '{{ $cat }}'"
                                :class="activeCategory === '{{ $cat }}' ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap">
                            {{ $cat }}
                        </button>
                    @endforeach
                </div>
            @endif

            <div class="{{ $gridClass }}">
                @foreach($news as $article)
                    <article class="site-card {{ $cardExtraClass }} {{ $listMode ? 'flex flex-row' : '' }} reveal reveal--delay-{{ ($loop->index % 3) + 1 }} overflow-hidden group"
                             x-show="activeCategory === 'all' || activeCategory === '{{ $article->category ?? '' }}'"
                             x-transition>
                        @if($article->image)
                            <div class="relative overflow-hidden bg-gray-100 {{ $listMode ? 'w-48 shrink-0' : '' }}">
                                <img src="{{ $article->image->url }}"
                                     alt="{{ $article->title }}"
                                     class="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-500"
                                     loading="lazy">
                                @if($article->category)
                                    <span class="absolute top-3 start-3 px-2.5 py-1 bg-[var(--site-accent)] text-white text-xs font-medium rounded-full">
                                        {{ $article->category }}
                                    </span>
                                @endif
                            </div>
                        @endif

                        <div class="p-5 flex flex-col flex-1">
                            @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 group-hover:text-[var(--site-accent)] transition-colors">
                                {{ $article->title }}
                            </h3>

                            @if($article->excerpt)
                                <p class="text-gray-500 text-sm mt-2 line-clamp-3 flex-1">
                                    {{ $article->excerpt }}
                                </p>
                            @endif

                            @if($article->body)
                                <a href="{{ route('website.news.show', ['slug' => $academy->slug ?? 'default', 'news' => $article->slug]) }}"
                                   class="inline-flex items-center gap-1 mt-3 text-[var(--site-accent)] text-sm font-medium hover:gap-2 transition-all">
                                    اقرأ المزيد
                                    <svg class="w-4 h-4 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                                </a>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>

            {{-- View All Link --}}
            @if($news->count() >= 6)
                <div class="text-center mt-8 reveal">
                    <a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default']) }}"
                       class="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--site-accent)] text-[var(--site-accent)] text-sm font-medium hover:bg-[var(--site-accent)] hover:text-white transition-colors">
                        عرض جميع الأخبار
                        <svg class="w-4 h-4 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            @endif
        @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>
