@extends('layouts.app')

@section('title', 'Beranda')
@section('meta_description', 'Website Resmi ' . $profile->nama_desa . ' — ' . $profile->kecamatan . ', ' . $profile->kabupaten . ', ' . $profile->provinsi)

@section('content')

{{-- HERO SECTION --}}
<section class="relative flex items-center justify-center overflow-hidden" style="min-height: 90vh; background: #0f1c4d;">
    {{-- Background Photo --}}
    @if($profile->foto_utama_url)
        <img src="{{ $profile->foto_utama_url }}" alt="Foto Desa {{ $profile->nama_desa }}" class="absolute inset-0 w-full h-full object-cover" style="transform: scale(1.04); filter: brightness(0.6);">
    @else
        <div class="absolute inset-0" style="background: linear-gradient(145deg, #0a1940 0%, #112369 50%, #0a1445 100%);"></div>
    @endif
    {{-- Dark cinematic overlay — tetap ada agar teks terbaca di atas FOTO APAPUN --}}
    <div class="absolute inset-0" style="background: linear-gradient(160deg, rgba(5,15,55,0.78) 0%, rgba(10,28,80,0.62) 45%, rgba(3,10,40,0.85) 100%);"></div>

    {{-- Hero Content --}}
    <div class="relative z-10 text-center text-white px-6 sm:px-8 w-full max-w-4xl mx-auto py-28 sm:py-36">

        {{-- Location Badge --}}
        <div class="inline-flex items-center gap-2.5 mb-8"
             style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(12px); border-radius: 999px; padding: 8px 20px;">
            <span class="block w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span class="text-xs sm:text-sm font-semibold tracking-widest" style="color: rgba(255,255,255,0.9); letter-spacing: 0.1em; text-transform: uppercase;">
                {{ $profile->kecamatan }}, {{ $profile->kabupaten }}
            </span>
        </div>

        {{-- Main Heading --}}
        <h1 class="font-extrabold mb-5 leading-tight tracking-tight"
            style="font-size: clamp(2.4rem, 6.5vw, 4.8rem); text-shadow: 0 4px 30px rgba(0,0,0,0.5);">
            Selamat Datang di<br>
            <span style="color: #93C5FD;">{{ $profile->nama_desa }}</span>
        </h1>

        {{-- Slogan --}}
        @if($profile->slogan)
        <p class="mb-10 font-light leading-relaxed mx-auto"
           style="font-size: clamp(0.9rem, 2vw, 1.15rem); color: rgba(255,255,255,0.68); max-width: 580px; font-style: italic;">
            &ldquo;{{ $profile->slogan }}&rdquo;
        </p>
        @else
        <div class="mb-10"></div>
        @endif

        {{-- CTA Buttons — Kontras Tinggi, Ukuran Proporsional --}}
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="{{ route('profil.tentang') }}"
               class="group inline-flex items-center justify-center gap-3 font-bold transition-all duration-200 hover:-translate-y-1 w-full sm:w-auto"
               style="background: #ffffff; color: #1E3A8A; padding: 14px 36px; border-radius: 14px; font-size: 0.9375rem; box-shadow: 0 8px 28px rgba(0,0,0,0.3); text-decoration: none; white-space: nowrap;">
                Kenali Desa Kami
                <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
            <a href="{{ route('peta') }}"
               class="group inline-flex items-center justify-center gap-3 font-semibold transition-all duration-200 hover:-translate-y-1 hover:bg-white/20 w-full sm:w-auto"
               style="background: transparent; color: #ffffff; padding: 14px 36px; border-radius: 14px; font-size: 0.9375rem; border: 2px solid rgba(255,255,255,0.65); text-decoration: none; backdrop-filter: blur(8px); white-space: nowrap;">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
                </svg>
                Lihat Peta Desa
            </a>
        </div>

        {{-- Mini Stats Bar (Kaca) --}}
        <div class="mt-14 hidden sm:grid grid-cols-4 gap-0 mx-auto max-w-xl"
             style="background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(20px); border-radius: 20px; padding: 20px 28px;">
            <div class="text-center" style="border-right: 1px solid rgba(255,255,255,0.14); padding-right: 20px;">
                <div class="text-2xl font-extrabold text-white">{{ number_format($statistic->jumlah_penduduk ?? 0) }}</div>
                <div class="text-[11px] mt-1 font-medium tracking-wide" style="color: rgba(255,255,255,0.55);">Penduduk</div>
            </div>
            <div class="text-center" style="border-right: 1px solid rgba(255,255,255,0.14); padding-right: 20px; padding-left: 20px;">
                <div class="text-2xl font-extrabold text-white">{{ number_format($statistic->jumlah_kk ?? 0) }}</div>
                <div class="text-[11px] mt-1 font-medium tracking-wide" style="color: rgba(255,255,255,0.55);">KK</div>
            </div>
            <div class="text-center" style="border-right: 1px solid rgba(255,255,255,0.14); padding-right: 20px; padding-left: 20px;">
                <div class="text-2xl font-extrabold text-white">{{ $statistic->jumlah_dusun ?? 0 }}</div>
                <div class="text-[11px] mt-1 font-medium tracking-wide" style="color: rgba(255,255,255,0.55);">Dusun</div>
            </div>
            <div class="text-center" style="padding-left: 20px;">
                <div class="text-2xl font-extrabold text-white">{{ $statistic->jumlah_rt ?? 0 }}</div>
                <div class="text-[11px] mt-1 font-medium tracking-wide" style="color: rgba(255,255,255,0.55);">RT / RW</div>
            </div>
        </div>
    </div>

    {{-- Scroll Indicator --}}
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 hidden sm:flex flex-col items-center gap-2" style="color: rgba(255,255,255,0.45);">
        <span class="text-[10px] font-semibold tracking-widest" style="letter-spacing: 0.2em;">SCROLL</span>
        <div class="w-px h-8 animate-bounce" style="background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);"></div>
    </div>
</section>

{{-- SAMBUTAN KEPALA DESA --}}
@if($profile->sambutan_kepala_desa)
<section class="py-14 sm:py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-center">
            <!-- Frame Foto Kepala Desa (Rapi & Berbingkai) -->
            <div class="text-center">
                <div class="relative inline-block p-2 bg-white rounded-full shadow-xl border border-gray-100 ring-4 ring-blue-50/80">
                    @if($profile->foto_kepala_dasa_url)
                        <img src="{{ $profile->foto_kepala_dasa_url }}" alt="Kepala Desa" class="w-36 h-36 sm:w-44 sm:h-44 rounded-full object-cover shadow-inner" loading="lazy">
                    @else
                        <div class="w-36 h-36 sm:w-44 sm:h-44 rounded-full bg-blue-100 flex items-center justify-center shadow-inner">
                            <svg class="w-16 h-16 sm:w-20 sm:h-20 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        </div>
                    @endif
                </div>
                <h3 class="mt-4 font-bold text-primary text-base sm:text-lg">Kepala Desa</h3>
                <p class="text-gray-500 text-xs sm:text-sm">{{ $profile->nama_desa }}</p>
            </div>
            <div class="md:col-span-2 text-center md:text-left">
                <div class="mb-4">
                    <h2 class="section-title">Sambutan Kepala Desa</h2>
                    <div class="section-divider mx-auto md:mx-0"></div>
                </div>
                <p class="text-gray-600 text-sm sm:text-base leading-relaxed">
                    {{ \Illuminate\Support\Str::limit($profile->sambutan_kepala_desa, 450) }}
                </p>
                <a href="{{ route('profil.tentang') }}" class="inline-flex items-center gap-2 mt-5 text-secondary hover:text-primary font-semibold text-sm transition-colors group">
                    Selengkapnya mengenai Profil Desa
                    <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" 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>
        </div>
    </div>
</section>
@endif

{{-- STATISTIK --}}
<section class="py-14 sm:py-20 bg-bg-soft">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10 sm:mb-12">
            <h2 class="section-title">Data Desa dalam Angka</h2>
            <div class="section-divider mx-auto"></div>
            <p class="section-subtitle">Gambaran demografis dan wilayah Desa Suka Baru</p>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            <div class="stat-card group">
                <div class="stat-number">{{ number_format($statistic->jumlah_penduduk) }}</div>
                <div class="stat-label">Total Penduduk</div>
            </div>
            <div class="stat-card group">
                <div class="stat-number">{{ number_format($statistic->jumlah_kk) }}</div>
                <div class="stat-label">Kepala Keluarga</div>
            </div>
            <div class="stat-card group">
                <div class="stat-number">{{ $statistic->jumlah_dusun }}</div>
                <div class="stat-label">Dusun</div>
            </div>
            <div class="stat-card group">
                <div class="stat-number">{{ $statistic->jumlah_rt }}</div>
                <div class="stat-label">RT</div>
            </div>
        </div>
        <div class="text-center mt-8">
            <a href="{{ route('data-desa') }}" class="btn-secondary text-sm sm:text-base px-6 py-3 shadow-sm">Lihat Data Lengkap & Grafik</a>
        </div>
    </div>
</section>

{{-- POTENSI DESA --}}
@if($potentials->count() > 0)
<section class="py-14 sm:py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row sm:items-end justify-between mb-10 gap-4">
            <div>
                <h2 class="section-title">Potensi Desa</h2>
                <div class="section-divider"></div>
                <p class="section-subtitle">Kekayaan, komoditas unggulan, dan destinasi Desa Suka Baru</p>
            </div>
            <a href="{{ route('potensi') }}" class="btn-secondary hidden sm:inline-flex self-start sm:self-auto shadow-xs">Lihat Semua Potensi</a>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($potentials as $pot)
            <a href="{{ route('potensi.show', $pot->id) }}" class="card group flex flex-col h-full bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300">
                <!-- Frame Foto Rapi dengan Border Inset -->
                <div class="p-2 bg-gray-50/80 border-b border-gray-100 rounded-t-2xl">
                    <div class="aspect-[4/3] overflow-hidden rounded-xl bg-blue-50 relative border border-gray-200/70 shadow-xs">
                        @if($pot->foto_url)
                            <img src="{{ $pot->foto_url }}" alt="{{ $pot->nama }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
                        @else
                            <div class="w-full h-full flex items-center justify-center bg-blue-50 text-blue-300">
                                <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2h1.5a2.5 2.5 0 002.5-2.5V11a2 2 0 012-2h1.065M12 2a10 10 0 100 20 10 10 0 000-20z"/></svg>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="p-5 flex-1 flex flex-col justify-between">
                    <div>
                        <span class="badge badge-blue mb-2.5">{{ $pot->kategori_label }}</span>
                        <h3 class="font-bold text-text-main text-base group-hover:text-secondary transition-colors">{{ $pot->nama }}</h3>
                        <p class="text-gray-500 text-xs sm:text-sm mt-1.5 line-clamp-3 leading-relaxed">{{ \Illuminate\Support\Str::limit($pot->deskripsi, 110) }}</p>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
        <div class="text-center mt-8 sm:hidden">
            <a href="{{ route('potensi') }}" class="btn-secondary w-full justify-center">Lihat Semua Potensi</a>
        </div>
    </div>
</section>
@endif

{{-- BERITA TERBARU --}}
@if($latestPosts->count() > 0)
<section class="py-14 sm:py-20 bg-bg-soft">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row sm:items-end justify-between mb-10 gap-4">
            <div>
                <h2 class="section-title">Berita Terbaru</h2>
                <div class="section-divider"></div>
                <p class="section-subtitle">Informasi dan kegiatan terkini Desa Suka Baru</p>
            </div>
            <a href="{{ route('berita.index') }}" class="btn-secondary hidden sm:inline-flex self-start sm:self-auto shadow-xs">Semua Berita</a>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            @foreach($latestPosts as $post)
            <a href="{{ route('berita.show', $post->slug) }}" class="card group block h-full flex flex-col bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300">
                <!-- Frame Foto Berita Rapi -->
                <div class="p-2 bg-gray-50/80 border-b border-gray-100 rounded-t-2xl">
                    <div class="aspect-[16/9] overflow-hidden rounded-xl bg-blue-50 relative border border-gray-200/70 shadow-xs">
                        @if($post->foto_url)
                            <img src="{{ $post->foto_url }}" alt="{{ $post->judul }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
                        @else
                            <div class="w-full h-full flex items-center justify-center bg-blue-100 text-blue-300">
                                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                        @endif
                    </div>
                </div>
                <div class="p-5 flex-1 flex flex-col justify-between">
                    <div>
                        <p class="text-[11px] sm:text-xs text-gray-400 mb-2 font-medium flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            {{ $post->tanggal->translatedFormat('d F Y') }}
                        </p>
                        <h3 class="font-bold text-text-main text-sm sm:text-base group-hover:text-secondary transition-colors line-clamp-2 leading-snug">{{ $post->judul }}</h3>
                        <p class="text-gray-500 text-xs sm:text-sm mt-2 line-clamp-2 leading-relaxed">{{ $post->excerpt }}</p>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
        <div class="text-center mt-8 sm:hidden">
            <a href="{{ route('berita.index') }}" class="btn-secondary w-full justify-center">Semua Berita</a>
        </div>
    </div>
</section>
@endif

{{-- GALERI --}}
@if($galleries->count() > 0)
<section class="py-14 sm:py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10 sm:mb-12">
            <h2 class="section-title">Galeri Desa</h2>
            <div class="section-divider mx-auto"></div>
            <p class="section-subtitle">Dokumentasi kegiatan dan potensi Desa Suka Baru</p>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4">
            @foreach($galleries as $photo)
            <a href="{{ $photo->foto_url }}" class="glightbox p-2 bg-white rounded-2xl border border-gray-200/80 shadow-xs hover:shadow-xl transition-all duration-300 group block"
               data-gallery="gallery-home" data-description="{{ $photo->judul }}">
                <div class="aspect-square overflow-hidden rounded-xl bg-blue-50 relative border border-gray-100">
                    @if($photo->foto_url)
                        <img src="{{ $photo->foto_url }}" alt="{{ $photo->judul }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
                    @else
                        <div class="w-full h-full flex items-center justify-center bg-blue-100 text-blue-400">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        </div>
                    @endif
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- CTA PETA --}}
<section class="py-14 sm:py-20 bg-primary">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h2 class="text-2xl sm:text-4xl font-extrabold text-white mb-3 sm:mb-4">Jelajahi Peta Desa Suka Baru</h2>
        <p class="text-blue-200 text-sm sm:text-base mb-8 max-w-2xl mx-auto font-light leading-relaxed">Temukan lokasi kantor desa, fasilitas umum, objek wisata PLG Sebelat, dan titik-titik penting lainnya secara interaktif.</p>
        <a href="{{ route('peta') }}" class="inline-flex items-center justify-center gap-2 bg-white text-primary font-semibold text-sm sm:text-base px-8 py-3.5 rounded-xl hover:bg-blue-50 transition-all shadow-xl hover:shadow-2xl w-full sm:w-auto">
            <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 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/></svg>
            Buka Peta Interaktif
        </a>
    </div>
</section>

@endsection
