@extends('layouts.app')
@section('title', 'Portal Berita Desa')

@section('content')

<!-- Header Section -->
<section class="relative pt-8 pb-16 md:pt-12 md:pb-24 overflow-hidden"
    style="background-image: url('{{ asset('images/gambar balai.jpeg') }}'); background-size: cover; background-position: center;">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-900/60 via-blue-800/50 to-indigo-900/40"></div>
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-40 -right-40 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-indigo-400/10 rounded-full blur-3xl"></div>
    </div>
    <div class="relative container mx-auto px-4 sm:px-6 max-w-7xl">
        <div class="flex flex-col md:flex-row items-center md:items-center gap-6 md:gap-10">
            <div class="text-center md:text-left md:flex-1">
                <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm text-white/90 text-sm font-medium px-4 py-1.5 rounded-full mb-4">
                    <i class="fas fa-newspaper text-blue-300"></i>
                    <span>Informasi Terkini</span>
                </div>
                <h1 class="text-3xl md:text-5xl font-bold text-white mb-3">Portal Berita Desa</h1>
                <p class="text-blue-200 text-base md:text-lg max-w-2xl">Menyajikan informasi terbaru tentang peristiwa, berita terkini, dan artikel dari Desa Cemara</p>
            </div>
        </div>
    </div>
</section>

<main class="container mx-auto px-4 sm:px-6 max-w-7xl -mt-10 relative z-10">

    <!-- Featured News Banner -->
    @if($banners->count() > 0)
    <section class="hero-section relative mb-12 rounded-2xl overflow-hidden shadow-2xl group" x-data="{ current: 0 }" x-init="if (banners.length > 1) setInterval(() => { current = (current + 1) % banners.length }, 5000)">
        <div class="relative overflow-hidden rounded-2xl h-[300px] md:h-[450px]">
            @foreach ($banners as $banner)
            <div x-show="current === {{ $loop->index }}" x-cloak
                class="absolute inset-0 transition-all duration-700 ease-in-out"
                x-transition:enter="transform transition-transform duration-700"
                x-transition:enter-start="opacity-0 scale-105"
                x-transition:enter-end="opacity-100 scale-100">
                <a href="{{ route('news.show', $banner->news->slug) }}">
                    <img src="{{ asset('storage/' . $banner->news->thumbnail) }}"
                         alt="{{ $banner->news->title }}"
                         class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
                    <div class="absolute bottom-0 left-0 right-0 p-6 md:p-10">
                        @if($banner->news->newsCategory)
                        <span class="inline-block bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full mb-3">
                            {{ $banner->news->newsCategory->title }}
                        </span>
                        @endif
                        <h2 class="text-xl md:text-3xl font-bold text-white mb-2 drop-shadow-lg">
                            {{ $banner->news->title }}
                        </h2>
                        <p class="text-white/80 text-sm md:text-base line-clamp-2 max-w-2xl drop-shadow">
                            {{ Str::limit(strip_tags($banner->news->content), 150) }}
                        </p>
                        <span class="inline-block mt-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white font-semibold py-2 px-5 rounded-full transition duration-300 text-sm">
                            Baca Selengkapnya <i class="fas fa-arrow-right ml-1"></i>
                        </span>
                    </div>
                </a>
            </div>
            @endforeach
        </div>

        @if($banners->count() > 1)
        <button @click="current = (current - 1 + banners.length) % banners.length"
            class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white p-2.5 rounded-full transition z-20 opacity-0 group-hover:opacity-100">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </button>
        <button @click="current = (current + 1) % banners.length"
            class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white p-2.5 rounded-full transition z-20 opacity-0 group-hover:opacity-100">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </button>

        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-20">
            @foreach ($banners as $banner)
            <button @click="current = {{ $loop->index }}"
                class="w-2.5 h-2.5 rounded-full transition-all duration-300"
                :class="current === {{ $loop->index }} ? 'bg-white w-6' : 'bg-white/50 hover:bg-white/75'">
            </button>
            @endforeach
        </div>
        @endif

        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('banners', () => ({
                    banners: {{ $banners->count() }}
                }))
            })
        </script>
    </section>
    @endif

    <!-- Featured News Section -->
    @if($featureds->count() > 0)
    <section class="mb-14">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Berita Unggulan</h2>
                <p class="text-gray-500 text-sm mt-0.5">Berita pilihan yang sedang hangat dibicarakan</p>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            @foreach ($featureds as $featured)
            <a href="{{ route('news.show', $featured->slug) }}"
               class="group relative bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                <div class="relative h-44 overflow-hidden">
                    <img src="{{ asset('storage/' . $featured->thumbnail) }}"
                         alt="{{ $featured->title }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    <div class="absolute top-3 left-3">
                        <span class="bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-md uppercase tracking-wider">Unggulan</span>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    <div class="absolute bottom-3 left-3 right-3">
                        @if($featured->newsCategory)
                        <span class="text-white/90 text-xs font-medium bg-white/20 backdrop-blur-sm px-2 py-0.5 rounded">
                            {{ $featured->newsCategory->title }}
                        </span>
                        @endif
                    </div>
                </div>
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 text-sm line-clamp-2 group-hover:text-blue-600 transition-colors">
                        {{ $featured->title }}
                    </h3>
                    <div class="flex items-center justify-between mt-3 text-xs text-gray-500">
                        <span>{{ $featured->updated_at->format('d M Y') }}</span>
                        <span class="flex items-center gap-1">
                            <i class="far fa-eye"></i> {{ $featured->views ?? 0 }}
                        </span>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </section>
    @endif

    <!-- Category Filter & News Grid -->
    <section class="mb-16">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Semua Berita</h2>
                <p class="text-gray-500 text-sm mt-0.5">Temukan informasi terbaru seputar desa</p>
            </div>

            @if($categories->count() > 0)
            <div class="flex flex-wrap gap-2" x-data="{ active: '{{ $categorySlug ?? '' }}' }">
                <a href="/berita"
                   class="px-4 py-2 text-sm font-medium rounded-full transition-all duration-200"
                   :class="active === '' ? 'bg-blue-600 text-white shadow-md' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
                    Semua
                </a>
                @foreach ($categories as $cat)
                <a href="/berita?category={{ $cat->slug }}"
                   class="px-4 py-2 text-sm font-medium rounded-full transition-all duration-200"
                   :class="active === '{{ $cat->slug }}' ? 'bg-blue-600 text-white shadow-md' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
                    {{ $cat->title }}
                </a>
                @endforeach
            </div>
            @endif
        </div>

        @if($news->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($news as $new)
            <a href="{{ route('news.show', $new->slug) }}"
               class="group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col">
                <div class="relative h-52 overflow-hidden">
                    <img src="{{ asset('storage/' . $new->thumbnail) }}"
                         alt="{{ $new->title }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @if($new->newsCategory)
                    <div class="absolute top-3 left-3">
                        <span class="bg-blue-600/90 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-lg backdrop-blur-sm">
                            {{ $new->newsCategory->title }}
                        </span>
                    </div>
                    @endif
                </div>
                <div class="p-5 flex flex-col flex-1">
                    <h3 class="font-bold text-gray-800 text-base line-clamp-2 group-hover:text-blue-600 transition-colors mb-2">
                        {{ $new->title }}
                    </h3>
                    <p class="text-gray-500 text-sm line-clamp-2 mb-4 flex-1">
                        {{ Str::limit(strip_tags($new->content), 120) }}
                    </p>
                    <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                        <div class="flex items-center gap-2 text-xs text-gray-500">
                            <i class="far fa-calendar-alt"></i>
                            <span>{{ $new->updated_at->format('d M Y') }}</span>
                        </div>
                        <div class="flex items-center gap-3 text-xs text-gray-500">
                            <span class="flex items-center gap-1">
                                <i class="far fa-eye"></i> {{ $new->views ?? 0 }}
                            </span>
                            @if($new->author)
                            <span class="flex items-center gap-1">
                                <i class="far fa-user"></i> {{ $new->author->name }}
                            </span>
                            @endif
                        </div>
                    </div>
                </div>
            </a>
            @endforeach
        </div>

        <!-- Pagination -->
        @if($news->hasPages())
        <div class="mt-10">
            {{ $news->withQueryString()->links('vendor.pagination.tailwind') }}
        </div>
        @endif

        @else
        <div class="text-center py-20 bg-white rounded-xl shadow-sm">
            <div class="text-6xl mb-4 text-gray-300">
                <i class="far fa-newspaper"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-600 mb-2">Belum Ada Berita</h3>
            <p class="text-gray-400">Belum ada berita yang tersedia saat ini. Silakan kunjungi kembali nanti.</p>
        </div>
        @endif
    </section>

    <!-- Stats Section -->
    @php
        $totalViews = \App\Models\News::sum('views');
        $totalCategories = \App\Models\NewsCategory::count();
        $totalNews = \App\Models\News::count();
    @endphp
    <section class="mb-16 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl p-8 md:p-10 text-white">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
            <div>
                <div class="text-4xl font-bold mb-1">{{ $totalNews }}</div>
                <div class="text-blue-200 text-sm font-medium uppercase tracking-wider">Total Berita</div>
            </div>
            <div class="hidden md:block w-px bg-white/20 mx-auto"></div>
            <div>
                <div class="text-4xl font-bold mb-1">{{ $totalCategories }}</div>
                <div class="text-blue-200 text-sm font-medium uppercase tracking-wider">Kategori Berita</div>
            </div>
            <div class="hidden md:block w-px bg-white/20 mx-auto"></div>
            <div>
                <div class="text-4xl font-bold mb-1">{{ number_format($totalViews) }}</div>
                <div class="text-blue-200 text-sm font-medium uppercase tracking-wider">Total Tayangan</div>
            </div>
        </div>
    </section>

</main>

<!-- Map Section -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Lokasi Desa Cemara</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">Temukan lokasi pasti Desa Cemara di bawah ini</p>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15814.77093245451!2d113.713333!3d-7.808333!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7d25e01a1db9ef%3A0x6b8ec523d40fe444!2sCemara%2C%20Suboh%2C%20Situbondo%20Regency%2C%20East%20Java!5e0!3m2!1sid!2sid!4v1719280000000!5m2!1sid!2sid"
                    width="1000" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade" class="w-full h-[450px]">
                </iframe>
            </div>
        </div>
    </div>
</section>

<style>
    [x-cloak] { display: none !important; }
</style>

@endsection