@extends('layouts.app')

@section('title', 'Profil Desa - Desa Cemara')

@section('content')

<!-- Hero Banner -->
<div class="mt-1 hero-section h-64 md:h-80 flex items-center justify-center relative overflow-hidden">
    <img src="{{ asset('images/hero-desa.png') }}" alt="Profil Desa Cemara" class="absolute inset-0 w-full h-full object-cover">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-900/85 via-blue-900/60 to-blue-900/40"></div>
    <div class="text-center px-4 relative z-10">
        <h2 class="text-2xl md:text-4xl font-bold text-white mb-3 drop-shadow-lg">Profil Desa Cemara</h2>
        <p class="text-lg text-blue-100 max-w-2xl mx-auto drop-shadow">Membangun desa yang sejahtera, mandiri, berbudaya dan berdaya saing</p>
    </div>
</div>

<!-- Main Content -->
<main class="container mx-auto px-4 py-12">
    <!-- Profil Desa Section -->
    <section class="mb-16 fade-in">
        <h2 class="text-3xl font-bold text-blue-900 mb-8 text-center relative pb-4">
            Profil Desa
            <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-blue-900 rounded-full"></span>
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Visi Misi -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
                <div class="bg-blue-900 px-6 py-4">
                    <h3 class="text-xl font-semibold text-white flex items-center">
                        <i data-feather="target" class="mr-2"></i> Visi & Misi
                    </h3>
                </div>
                <div class="p-6">
                    <h4 class="text-lg font-semibold text-blue-900 mb-3">Visi Desa</h4>
                    <div class="text-gray-700 mb-6 font-medium">
                        {!! $profil?->visi ?? '"Mewujudkan Desa Cemara yang mandiri, berbudaya, dan sejahtera dalam bingkai gotong royong"' !!}
                    </div>

                    <h4 class="text-lg font-semibold text-blue-900 mb-3">Misi Desa</h4>
                    <ul class="space-y-2 text-gray-700">
                        @if($profil && $profil->misi)
                            @foreach(explode("\n", $profil->misi) as $misiItem)
                                @if(trim($misiItem))
                                <li class="flex items-start">
                                    <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                    <span>{{ trim($misiItem) }}</span>
                                </li>
                                @endif
                            @endforeach
                        @else
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>Meningkatkan kualitas sumber daya manusia.</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>Mengembangkan ekonomi kreatif berbasis lokal.</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>Melestarikan budaya dan kearifan lokal.</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-2 mt-1 flex-shrink-0"></i>
                                <span>Membangun infrastruktur berkelanjutan.</span>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>

            <!-- Sejarah Desa -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
                <div class="bg-blue-900 px-6 py-4">
                    <h3 class="text-xl font-semibold text-white flex items-center">
                        <i data-feather="book" class="mr-2"></i> Sejarah Desa
                    </h3>
                </div>
                <div class="p-6">
                    <div class="mb-6">
                        <img src="{{ $profil?->sejarah_image ? asset('storage/' . $profil->sejarah_image) : asset('images/sejarah-desa.png') }}" alt="Sejarah Desa" class="w-full h-48 object-cover rounded-lg mb-4">
                        <div class="text-gray-700">
                            {!! $profil?->sejarah ?? 'Desa Cemara berdiri pada tahun 1923 dengan nama awal "Dukuh Rukun". Desa ini terbentuk dari penyatuan tiga padukuhan kecil yang saling berdekatan. Pada masa kemerdekaan, desa ini menjadi salah satu basis perjuangan di wilayah ini.' !!}
                        </div>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <h4 class="text-lg font-semibold text-blue-900 mb-2">Asal Usul Nama</h4>
                        <div class="text-gray-700">
                            {!! $profil?->sejarah_asal_usul ?? 'Nama "Cemara" diresmikan pada tahun 1985, menggambarkan keragaman budaya dan harmonisasi masyarakat yang terdiri dari berbagai latar belakang etnis yang hidup rukun.' !!}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Data Umum -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
                <div class="bg-blue-900 px-6 py-4">
                    <h3 class="text-xl font-semibold text-white flex items-center">
                        <i data-feather="info" class="mr-2"></i> Data Umum
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm text-blue-600">Luas Wilayah</p>
                            <p class="text-xl font-bold text-blue-900">{{ $profil?->luas_wilayah ?? '12.5 Km²' }}</p>
                        </div>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm text-blue-600">Jumlah Penduduk</p>
                            <p class="text-xl font-bold text-blue-900">{{ $profil?->jumlah_penduduk ?? '805 Jiwa' }}</p>
                        </div>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm text-blue-600">Jumlah Kepala Keluarga</p>
                            <p class="text-xl font-bold text-blue-900">{{ $profil?->jumlah_kk ?? '252 KK' }}</p>
                        </div>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm text-blue-600">Jumlah RT</p>
                            <p class="text-xl font-bold text-blue-900">{{ $profil?->jumlah_rt ?? '6' }}</p>
                        </div>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm text-blue-600">Jumlah Dusun</p>
                            <p class="text-xl font-bold text-blue-900">{{ $profil?->jumlah_dusun ?? '2' }}</p>
                        </div>
                    </div>

                    <div class="mt-6">
                        <h4 class="text-lg font-semibold text-blue-900 mb-3">Batas Wilayah</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-center">
                                <i data-feather="compass" class="text-blue-500 mr-2"></i>
                                <span><span class="font-medium">Utara:</span> {{ $profil?->batas_utara ?? 'Desa Lubuk Lancang' }}</span>
                            </li>
                            <li class="flex items-center">
                                <i data-feather="compass" class="text-blue-500 mr-2"></i>
                                <span><span class="font-medium">Timur:</span> {{ $profil?->batas_timur ?? 'Desa Sukaraja' }}</span>
                            </li>
                            <li class="flex items-center">
                                <i data-feather="compass" class="text-blue-500 mr-2"></i>
                                <span><span class="font-medium">Selatan:</span> {{ $profil?->batas_selatan ?? 'Desa Talang Ipuh' }}</span>
                            </li>
                            <li class="flex items-center">
                                <i data-feather="compass" class="text-blue-500 mr-2"></i>
                                <span><span class="font-medium">Barat:</span> {{ $profil?->batas_barat ?? 'Desa Durian Daun' }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Struktur Organisasi Desa Section -->
    <section class="py-16 px-4 max-w-7xl mx-auto">
        <h2 class="center text-3xl font-bold text-blue-900 mb-12 text-center relative">
            Struktur Organisasi Pemerintahan<br>Desa Cemara
            <span class="absolute bottom-[-10px] left-1/2 transform -translate-x-1/2 w-24 h-1 bg-blue-600 rounded-full"></span>
        </h2>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100 p-8">
            <!-- Kepala Desa -->
            <div class="flex flex-col items-center justify-center mb-16">
                <div class="w-40 h-40 rounded-full overflow-hidden border-4 border-blue-900 mb-5 shadow-lg">
                    <img src="{{ $profil?->kades_image ? asset('storage/' . $profil->kades_image) : asset('images/gambar.jpeg') }}" alt="Kepala Desa" class="w-full h-full object-cover">
                </div>
                <h3 class="text-2xl font-bold text-blue-900 px-6 py-3 bg-blue-50 rounded-lg">Kepala Desa</h3>
            </div>

            <!-- Level Kedua -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
                <div class="text-center">
                    <div class="w-28 h-28 rounded-full overflow-hidden border-3 border-blue-600 mx-auto mb-4 shadow-md">
                        <img src="{{ $profil?->sekdes_image ? asset('storage/' . $profil->sekdes_image) : asset('images/gambar.jpeg') }}" alt="Sekretaris Desa" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Sekretaris Desa</h4>
                </div>

                <div class="text-center">
                    <div class="w-28 h-28 rounded-full overflow-hidden border-3 border-blue-600 mx-auto mb-4 shadow-md">
                        <img src="{{ $profil?->kaur_keuangan_image ? asset('storage/' . $profil->kaur_keuangan_image) : asset('images/gambar.jpeg') }}" alt="Kepala Urusan Keuangan" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Kepala Urusan Keuangan</h4>
                </div>

                <div class="text-center">
                    <div class="w-28 h-28 rounded-full overflow-hidden border-3 border-blue-600 mx-auto mb-4 shadow-md">
                        <img src="{{ $profil?->kaur_perencanaan_image ? asset('storage/' . $profil->kaur_perencanaan_image) : asset('images/gambar.jpeg') }}" alt="Kepala Urusan Perencanaan" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Kepala Urusan Perencanaan</h4>
                </div>

                <div class="text-center">
                    <div class="w-28 h-28 rounded-full overflow-hidden border-3 border-blue-600 mx-auto mb-4 shadow-md">
                        <img src="{{ $profil?->kaur_tu_image ? asset('storage/' . $profil->kaur_tu_image) : asset('images/gambar.jpeg') }}" alt="Kepala Urusan Tata Usaha" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Kepala Urusan Tata Usaha</h4>
                </div>
            </div>

            <!-- Level Ketiga -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
                <div class="text-center">
                    <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-blue-400 mx-auto mb-3 shadow-md">
                        <img src="{{ $profil?->kasi_pemerintahan_image ? asset('storage/' . $profil->kasi_pemerintahan_image) : asset('images/gambar.jpeg') }}" alt="Kepala Seksi Pemerintahan" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Kepala Seksi Pemerintahan</h4>
                </div>

                <div class="text-center">
                    <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-blue-400 mx-auto mb-3 shadow-md">
                        <img src="{{ $profil?->kasi_kesejahteraan_image ? asset('storage/' . $profil->kasi_kesejahteraan_image) : asset('images/gambar.jpeg') }}" alt="Kepala Seksi Kesejahteraan" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Kepala Seksi Kesejahteraan</h4>
                </div>

                <div class="text-center">
                    <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-blue-400 mx-auto mb-3 shadow-md">
                        <img src="{{ $profil?->kasi_pelayanan_image ? asset('storage/' . $profil->kasi_pelayanan_image) : asset('images/gambar.jpeg') }}" alt="Kepala Seksi Pelayanan" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Kepala Seksi Pelayanan</h4>
                </div>
            </div>

            <!-- BPD -->
            <div class="flex flex-col items-center justify-center mb-16">
                <div class="w-28 h-28 rounded-full overflow-hidden border-3 border-blue-500 mx-auto mb-4 shadow-md">
                    <img src="{{ $profil?->ketua_bpd_image ? asset('storage/' . $profil->ketua_bpd_image) : asset('images/gambar.jpeg') }}" alt="Ketua BPD" class="w-full h-full object-cover">
                </div>
                <h4 class="text-xl font-semibold text-blue-900">Badan Permusyawaratan Desa (BPD)</h4>
            </div>

            <!-- Kadus -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="text-center">
                    <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-gray-400 mx-auto mb-3 shadow-md">
                        <img src="{{ $profil?->kadus_1_image ? asset('storage/' . $profil->kadus_1_image) : asset('images/gambar.jpeg') }}" alt="Ketua Dusun I" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Ketua Dusun I</h4>
                </div>

                <div class="text-center">
                    <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-gray-400 mx-auto mb-3 shadow-md">
                        <img src="{{ $profil?->kadus_2_image ? asset('storage/' . $profil->kadus_2_image) : asset('images/gambar.jpeg') }}" alt="Ketua Dusun II" class="w-full h-full object-cover">
                    </div>
                    <h4 class="text-lg font-semibold text-blue-900">Ketua Dusun II</h4>
                </div>
            </div>
        </div>
    </section>
    <!-- Potensi Desa Section -->
    <section class="mb-16 fade-in">
        <h2 class="text-3xl font-bold text-blue-900 mb-8 text-center relative pb-4">
            Potensi Desa
            <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-blue-600 rounded-full"></span>
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

            @foreach ( $potensiDesa as $item )
            <div class="bg-white rounded-xl shadow-md overflow-hidden border border-blue-100 hover:shadow-lg transition">
                <img src="{{ asset ('storage/' . $item->image) }}" alt="{{ $item->title }}" class="w-full h-48 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-blue-900 mb-2">{{ $item->title }}</h3>
                    <p class="text-gray-700">{{ $item->description }}</p>
                </div>
            </div>
            @endforeach


        </div>
    </section>

    <!-- Peta Desa Section -->
    <section class="mb-20 fade-in">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-blue-900 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 shadow-lg">
                <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>
    </section>
</main>

<!-- Footer -->
@endsection

<script>
    feather.replace();

    // Animasi scroll
    document.addEventListener('DOMContentLoaded', function() {
        const sections = document.querySelectorAll('section');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fadeIn');
                }
            });
        }, {
            threshold: 0.1
        });

        sections.forEach(section => {
            section.classList.add('opacity-0', 'transition-opacity', 'duration-500');
            observer.observe(section);
        });

        // Tambahkan class ketika muncul di viewport
        const animateFadeIn = () => {
            sections.forEach(section => {
                const sectionTop = section.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;

                if (sectionTop < windowHeight * 0.75) {
                    section.classList.remove('opacity-0');
                    section.classList.add('animate-fadeIn');
                }
            });
        };

        window.addEventListener('scroll', animateFadeIn);
        animateFadeIn(); // Jalankan sekali saat load
    });
</script>

</html>