<?php $__env->startSection('title', 'Profil Desa - Desa Cemara'); ?>

<?php $__env->startSection('content'); ?>

<!-- Hero Banner -->
<div class="mt-1 hero-section h-64 md:h-80 flex items-center justify-center relative overflow-hidden">
    <img src="<?php echo e(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">
                        <?php echo $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">
                        <?php if($profil && $profil->misi): ?>
                            <?php $__currentLoopData = explode("\n", $profil->misi); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $misiItem): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <?php 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><?php echo e(trim($misiItem)); ?></span>
                                </li>
                                <?php endif; ?>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php 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>
                        <?php 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="<?php echo e($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">
                            <?php echo $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">
                            <?php echo $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"><?php echo e($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"><?php echo e($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"><?php echo e($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"><?php echo e($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"><?php echo e($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> <?php echo e($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> <?php echo e($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> <?php echo e($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> <?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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="<?php echo e($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">

            <?php $__currentLoopData = $potensiDesa; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="bg-white rounded-xl shadow-md overflow-hidden border border-blue-100 hover:shadow-lg transition">
                <img src="<?php echo e(asset ('storage/' . $item->image)); ?>" alt="<?php echo e($item->title); ?>" class="w-full h-48 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-blue-900 mb-2"><?php echo e($item->title); ?></h3>
                    <p class="text-gray-700"><?php echo e($item->description); ?></p>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


        </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 -->
<?php $__env->stopSection(); ?>

<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>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\web desa\sisteminformasi-desa-laravel-blade-main\resources\views/pages/profildesa.blade.php ENDPATH**/ ?>