@extends('layouts.app')

@section('content')
    {{-- ===== HERO SECTION (PREMIUM) ===== --}}
    <section id="beranda" class="relative min-h-screen flex items-center justify-center overflow-hidden bg-slate-950">
        {{-- Background Image --}}
        <div class="absolute inset-0">
            <img src="{{ asset('images/hero_premium.png') }}" alt="Pemandangan Desa Sumbersari" class="w-full h-full object-cover opacity-80" loading="eager">
            <div class="absolute inset-0 bg-gradient-to-b from-slate-950/80 via-slate-950/40 to-slate-950"></div>
        </div>

        {{-- Decorative Glow --}}
        <div class="absolute top-[20%] left-[10%] w-[30rem] h-[30rem] bg-emerald-500/10 rounded-full blur-[120px] animate-float-slow"></div>
        <div class="absolute bottom-[10%] right-[10%] w-[40rem] h-[40rem] bg-amber-500/10 rounded-full blur-[150px] animate-float"></div>

        {{-- Content --}}
        <div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-32 pb-20">
            <div class="inline-flex items-center gap-3 px-5 py-2 rounded-full glass border border-white/10 mb-10 fade-up backdrop-blur-xl">
                <span class="flex h-2.5 w-2.5 rounded-full bg-amber-400 animate-pulse shadow-[0_0_10px_rgba(251,191,36,0.8)]"></span>
                <span class="text-xs font-bold text-amber-200/90 uppercase tracking-[0.3em]">Warisan Nusantara</span>
            </div>

            <h1 class="text-6xl sm:text-7xl md:text-9xl font-black text-transparent bg-clip-text bg-gradient-to-b from-white via-white/90 to-white/50 tracking-tighter mb-8 leading-[0.85] fade-up stagger-1 drop-shadow-2xl">
                Desa <br> Sumbersari
            </h1>

            <p class="text-xl sm:text-2xl text-slate-300/80 max-w-3xl mx-auto mb-14 font-light leading-relaxed fade-up stagger-2">
                Eksklusivitas alam pegunungan yang berpadu dengan kearifan lokal. Menghadirkan kesejahteraan dan harmoni abadi.
            </p>

            <div class="flex flex-col sm:flex-row gap-6 justify-center items-center fade-up stagger-3">
                <a href="#potensi" class="w-full sm:w-auto px-10 py-5 rounded-full bg-white text-slate-950 font-black text-lg hover:scale-105 hover:shadow-[0_0_40px_rgba(255,255,255,0.3)] transition-all duration-500 flex items-center justify-center gap-3">
                    Eksplorasi Mahakarya
                    <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.5" d="M19 9l-7 7-7-7"></path></svg>
                </a>
            </div>
        </div>

        {{-- Scroll Indicator --}}
        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-3 opacity-50 hover:opacity-100 transition-opacity duration-300">
            <span class="text-[10px] text-white uppercase tracking-[0.3em] font-bold">Discover</span>
            <div class="w-px h-16 bg-gradient-to-b from-white/0 via-white to-white/0 animate-pulse"></div>
        </div>
    </section>

    {{-- ===== PROFIL SECTION (PREMIUM) ===== --}}
    <section id="profil" class="py-32 bg-slate-900 relative overflow-hidden">
        {{-- Background Orbs --}}
        <div class="absolute top-[20%] left-0 w-[40rem] h-[40rem] bg-blue-900/10 rounded-full blur-[150px] -translate-x-1/2"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="flex flex-col lg:flex-row gap-16 items-center">
                {{-- Text Content --}}
                <div class="flex-1 fade-right">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="h-px w-12 bg-blue-500/50"></div>
                        <span class="text-xs font-bold text-blue-400 tracking-[0.3em] uppercase">Mengenal Lebih Dekat</span>
                    </div>
                    <h2 class="text-5xl md:text-6xl font-black text-white tracking-tight mb-8">Profil <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400">Sumbersari.</span></h2>
                    
                    <p class="text-slate-400 text-lg leading-relaxed mb-10 font-light">
                        Terletak di lereng pegunungan, Desa Sumbersari merupakan perpaduan harmonis antara keindahan alam yang asri dan kearifan budaya lokal yang terus dijaga kelestariannya secara turun-temurun.
                    </p>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 mb-10">
                        <div class="glass p-8 rounded-[2rem] border border-white/5 hover:border-blue-500/30 transition-colors duration-500 group">
                            <div class="w-14 h-14 bg-blue-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-500/20 group-hover:scale-110 transition-all duration-300">
                                <svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </div>
                            <h4 class="text-white font-bold text-2xl mb-3">Visi Terpadu</h4>
                            <p class="text-base text-slate-500 font-light leading-relaxed">Mewujudkan desa yang mandiri, sejahtera, dan inovatif dengan menjunjung tinggi nilai gotong royong.</p>
                        </div>
                        <div class="glass p-8 rounded-[2rem] border border-white/5 hover:border-emerald-500/30 transition-colors duration-500 group">
                            <div class="w-14 h-14 bg-emerald-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-emerald-500/20 group-hover:scale-110 transition-all duration-300">
                                <svg class="w-7 h-7 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                            </div>
                            <h4 class="text-white font-bold text-2xl mb-3">Misi Berkelanjutan</h4>
                            <p class="text-base text-slate-500 font-light leading-relaxed">Meningkatkan kualitas infrastruktur, pelayanan publik, dan pemberdayaan ekonomi masyarakat desa.</p>
                        </div>
                    </div>
                </div>

                {{-- Image/Stats Content --}}
                <div class="flex-1 relative fade-left w-full">
                    <div class="relative rounded-[3rem] overflow-hidden glass border border-white/10 aspect-square shadow-2xl">
                        <img src="{{ asset('images/hero_premium.png') }}" alt="Profil Desa" class="w-full h-full object-cover opacity-40 mix-blend-overlay">
                        
                        {{-- Stats Overlay --}}
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent flex flex-col justify-end p-12">
                            <div class="grid grid-cols-2 gap-8">
                                <div>
                                    <p class="text-5xl font-black text-white mb-2"><span data-counter="1500" data-suffix="+">0</span></p>
                                    <p class="text-[11px] font-bold uppercase tracking-widest text-slate-400">Populasi Penduduk</p>
                                </div>
                                <div>
                                    <p class="text-5xl font-black text-white mb-2"><span data-counter="45" data-suffix=" Ha">0</span></p>
                                    <p class="text-[11px] font-bold uppercase tracking-widest text-slate-400">Luas Wilayah</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Floating Badge --}}
                    <div class="absolute -top-8 -right-4 md:-right-8 bg-slate-950 rounded-3xl p-6 shadow-2xl animate-float border border-white/10 backdrop-blur-md">
                        <div class="flex items-center gap-5">
                            <div class="w-14 h-14 bg-emerald-500/10 rounded-2xl flex items-center justify-center border border-emerald-500/20">
                                <svg class="w-7 h-7 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path></svg>
                            </div>
                            <div>
                                <p class="text-white font-black text-xl leading-tight tracking-tight">Desa <br><span class="text-emerald-400">Mandiri</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ===== POTENSI SECTION (PREMIUM) ===== --}}
    <section id="potensi" class="py-32 bg-slate-950 relative overflow-hidden">
        {{-- Background Elements --}}
        <div class="absolute top-0 right-0 w-[50rem] h-[50rem] bg-emerald-900/20 rounded-full blur-[150px] -translate-y-1/2 translate-x-1/3"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            {{-- Section Header --}}
            <div class="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-8">
                <div class="fade-up">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="h-px w-12 bg-amber-500/50"></div>
                        <span class="text-xs font-bold text-amber-500 tracking-[0.3em] uppercase">Kekayaan Lokal</span>
                    </div>
                    <h2 class="text-5xl md:text-6xl font-black text-white tracking-tight">Potensi <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-400">Terbaik.</span></h2>
                </div>
                <p class="text-slate-400 max-w-md text-lg fade-up stagger-1 font-light leading-relaxed">Warisan alam dan budaya yang dijaga turun-temurun, menjadi fondasi kemakmuran Sumbersari.</p>
            </div>

            @php
                $fallbackImages = [
                    asset('images/potensi_agriculture.png'),
                    asset('images/potensi_crafts.png'),
                    asset('images/potensi_tourism.png'),
                ];
            @endphp

            {{-- Cards Grid --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                @forelse($potensis as $index => $item)
                    <div class="group rounded-[2rem] bg-slate-900 border border-slate-800 overflow-hidden flex flex-col h-[450px] fade-up stagger-{{ $index + 1 }} shadow-2xl hover:border-emerald-500/50 hover:shadow-[0_0_40px_rgba(16,185,129,0.1)] transition-all duration-500">
                        {{-- Image Background --}}
                        <div class="relative h-56 overflow-hidden bg-slate-800 shrink-0">
                            <img
                                src="{{ $item->gambar ? asset('storage/' . $item->gambar) : ($fallbackImages[$index % 3] ?? $fallbackImages[0]) }}"
                                alt="{{ $item->judul }}"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                                loading="lazy"
                            >
                        </div>

                        {{-- Content --}}
                        <div class="p-8 flex flex-col flex-1 bg-slate-900 relative">
                            <span class="inline-block px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[10px] font-bold text-emerald-400 uppercase tracking-widest mb-4 w-max">Potensi Desa</span>
                            <h3 class="text-2xl font-bold text-white mb-3 group-hover:text-emerald-400 transition-colors">{{ $item->judul }}</h3>
                            <p class="text-slate-400 leading-relaxed text-sm line-clamp-3">
                                {{ strip_tags($item->deskripsi) }}
                            </p>
                        </div>
                    </div>
                @empty
                    <div class="col-span-1 md:col-span-3 fade-up">
                        <div class="glass rounded-[3rem] border border-white/10 p-24 text-center">
                            <div class="w-20 h-20 bg-white/5 rounded-full border border-white/10 flex items-center justify-center mx-auto mb-6">
                                <svg class="w-10 h-10 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                            </div>
                            <p class="text-slate-400 text-lg font-light tracking-wide">Data potensi eksklusif sedang dalam tahap penyusunan.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>



@endsection
