@extends('visitor.layout.tamplate')

@section('content')
    {{-- 1. Hero Section Berita (Gaya Dark & Modern) --}}
    <section class="pt-44 pb-24 bg-sky-950 relative overflow-hidden">
        {{-- Background Image Overlay --}}
        <div class="absolute inset-0 opacity-10">
           
        </div>
        
        <div class="max-w-7xl mx-auto px-6 relative z-10 text-center">
            <span class="bg-yellow-400 text-sky-950 px-6 py-2 rounded-full text-[10px] md:text-xs font-black uppercase tracking-widest mb-6 inline-block animate-fade-in">
                Update Terbaru
            </span>
            <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight">
                Warta & <span class="text-yellow-400 italic font-serif">Artikel</span>
            </h1>
            <p class="max-w-2xl mx-auto text-sky-100/70 leading-relaxed text-base md:text-lg">
                Informasi terkini mengenai kegiatan pelatihan, pemberdayaan, dan perkembangan talenta muda di Papua Tengah.
            </p>
        </div>
    </section>

    {{-- 2. Filter & Search Section (Sticky) --}}
    <section class="py-10 bg-white sticky top-20 z-30 shadow-sm border-b border-slate-50">
        <div class="max-w-7xl mx-auto px-6">
            <form action="{{ route('berita') }}" method="GET"
                class="flex flex-col lg:flex-row gap-6 items-center justify-between">

                {{-- Kategori Tabs --}}
                <div class="flex items-center gap-2 overflow-x-auto w-full lg:w-auto pb-2 lg:pb-0 no-scrollbar">
                    <a href="{{ route('berita', ['search' => request('search')]) }}"
                        class="px-6 py-2.5 rounded-full text-xs font-black uppercase tracking-widest transition-all {{ !request('category') ? 'bg-yptp-blue text-white shadow-lg shadow-sky-100' : 'bg-slate-100 text-slate-500 hover:bg-slate-200' }}">
                        Semua
                    </a>
                    @foreach ($categories as $cat)
                        <a href="{{ route('berita', ['category' => $cat->slug, 'search' => request('search')]) }}"
                            class="px-6 py-2.5 rounded-full text-xs font-black uppercase tracking-widest whitespace-nowrap transition-all {{ request('category') == $cat->slug ? 'bg-yptp-blue text-white shadow-lg shadow-sky-100' : 'bg-slate-100 text-slate-500 hover:bg-slate-200' }}">
                            {{ $cat->name }}
                        </a>
                    @endforeach
                </div>

                {{-- Input Search Group --}}
                <div class="relative w-full lg:w-[450px] flex gap-2">
                    <div class="relative flex-grow group">
                        <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-yptp-blue transition-colors"></i>
                        <input type="text" name="search" value="{{ request('search') }}"
                            placeholder="Cari berita..."
                            class="w-full bg-slate-50 border border-slate-200 rounded-2xl py-3.5 pl-12 pr-4 focus:ring-2 focus:ring-yptp-blue focus:bg-white outline-none transition-all text-sm">
                    </div>

                    <button type="submit"
                        class="bg-sky-950 hover:bg-yptp-blue text-white px-8 py-3.5 rounded-2xl font-bold text-sm shadow-lg transition-all flex items-center gap-2 active:scale-95">
                        <span>Cari</span>
                    </button>
                </div>
            </form>
        </div>
    </section>

    {{-- 3. News Grid --}}
    <section class="py-20 px-6 bg-slate-50/50">
        <div class="max-w-7xl mx-auto">
            @if ($berita->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10 lg:gap-12">
                    @foreach ($berita as $item)
                        <article class="group bg-white rounded-[2.5rem] border border-slate-100 overflow-hidden hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 flex flex-col h-full">
                            {{-- Thumbnail --}}
                            <div class="relative h-64 overflow-hidden">
                                <img src="{{ asset('uploads/news/' . $item->image) }}" alt="{{ $item->title }}"
                                    class="w-full h-full object-cover group-hover:scale-110 transition duration-700">
                                
                                {{-- Badge Kategori --}}
                                <div class="absolute top-6 left-6">
                                    <span class="bg-yellow-400 text-sky-950 px-4 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg">
                                        {{ $item->category->name }}
                                    </span>
                                </div>
                            </div>

                            {{-- Content Body --}}
                            <div class="p-8 flex flex-col flex-grow">
                                <div class="flex items-center gap-4 mb-4 text-slate-400 text-[11px] font-bold uppercase tracking-wider">
                                    <span class="flex items-center gap-1.5">
                                        <i class="far fa-calendar-alt text-yptp-blue"></i>
                                        {{ $item->created_at->translatedFormat('d M Y') }}
                                    </span>
                                    <span class="w-1 h-1 rounded-full bg-slate-300"></span>
                                    <span class="flex items-center gap-1.5">
                                        <i class="far fa-user text-yptp-blue"></i>
                                        Admin
                                    </span>
                                </div>

                                <h3 class="text-xl font-bold text-sky-950 mb-4 leading-tight group-hover:text-yptp-blue transition line-clamp-2">
                                    <a href="{{ route('baca-berita', $item->slug) }}">
                                        {{ $item->title }}
                                    </a>
                                </h3>

                                <p class="text-slate-500 text-sm leading-relaxed line-clamp-3 mb-8">
                                    {{ strip_tags($item->content) }}
                                </p>

                                {{-- Footer Card --}}
                                <div class="mt-auto pt-6 border-t border-slate-50">
                                    <a href="{{ route('baca-berita', $item->slug) }}"
                                        class="inline-flex items-center gap-2 text-yptp-blue font-black text-xs uppercase tracking-widest group/btn hover:gap-4 transition-all">
                                        Baca Selengkapnya
                                        <i class="fas fa-arrow-right text-[10px]"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                {{-- Pagination --}}
                <div class="mt-20 flex justify-center">
                    {{ $berita->appends(request()->query())->links() }}
                </div>
            @else
                {{-- Empty State --}}
                <div class="text-center py-24 bg-white rounded-[3rem] border-2 border-dashed border-slate-200">
                    <div class="w-24 h-24 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-8 text-4xl">
                        <i class="fas fa-newspaper"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-sky-950 mb-3">Tidak Ada Berita</h3>
                    <p class="text-slate-500 mb-8">Maaf, kami tidak menemukan berita yang Anda cari.</p>
                    <a href="{{ route('berita') }}" class="bg-yptp-blue text-white px-8 py-4 rounded-2xl font-bold text-sm hover:bg-sky-950 transition-all shadow-lg">
                        Lihat Semua Berita
                    </a>
                </div>
            @endif
        </div>
    </section>
@endsection