@extends('website.layout')

@section('content')
<div class="pt-28 pb-16 min-h-screen bg-[var(--site-surface)]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Header --}}
        <div class="text-center mb-12">
            <h1 class="text-3xl lg:text-4xl font-bold text-gray-900" style="font-family: var(--site-heading-font);">آخر الأخبار</h1>
            <p class="mt-3 text-gray-500 text-lg">تابع أحدث أخبار وأنشطة الأكاديمية</p>
        </div>

        {{-- Category Filters --}}
        @if($categories->count())
            <div class="flex items-center justify-center gap-2 mb-10 overflow-x-auto pb-2 scrollbar-hide">
                <a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default']) }}"
                   class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap {{ !$activeCategory ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' }}">
                    الكل
                </a>
                @foreach($categories as $cat)
                    <a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default', 'category' => $cat]) }}"
                       class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap {{ $activeCategory === $cat ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' }}">
                        {{ $cat }}
                    </a>
                @endforeach
            </div>
        @endif

        {{-- News Grid --}}
        @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 overflow-hidden group hover:shadow-xl transition-shadow">
                        @if($article->image)
                            <div class="relative overflow-hidden bg-gray-100">
                                <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">
                            @if($article->published_at)
                                <time class="text-xs text-gray-400">
                                    {{ $article->published_at->translatedFormat('j F Y') }}
                                </time>
                            @endif
                            <h2 class="text-lg font-bold text-gray-900 mt-2 line-clamp-2 group-hover:text-[var(--site-accent)] transition-colors">
                                <a href="{{ route('website.news.show', ['slug' => $academy->slug ?? 'default', 'news' => $article->slug]) }}">
                                    {{ $article->title }}
                                </a>
                            </h2>
                            @if($article->excerpt)
                                <p class="text-gray-500 text-sm mt-2 line-clamp-3">{{ $article->excerpt }}</p>
                            @endif
                            <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>
                        </div>
                    </article>
                @endforeach
            </div>

            {{-- Pagination --}}
            <div class="mt-10">
                {{ $news->withQueryString()->links() }}
            </div>
        @else
            <div class="text-center py-16">
                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
                </div>
                <p class="text-gray-500">لا توجد أخبار حالياً</p>
            </div>
        @endif
    </div>
</div>
@endsection
