<!-- Program Section -->
<section class="py-20 px-5 bg-white">
    <div class="max-w-7xl mx-auto">
        <!-- Header Features Section -->
        <div class="text-center mb-8">
            <h2 class="text-4xl font-semibold text-gray-800 pb-6 inline-block relative">
                Program Desa Kami
                <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-[0.20rem] bg-gray-300"></span>
            </h2>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">
            <!-- Program Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <!-- Card 1 - Light Blue -->
                <div class="bg-[#E9F1FC] text-gray-800 p-6 rounded-3xl shadow-lg flex flex-col justify-between">
                    <div>
                        <h3 class="text-lg font-bold mb-3 leading-tight">
                            Realisasi Pembuatan dan Penempatan Sarana Air Bersih
                        </h3>
                        <p class="text-sm leading-tight mb-4">
                            Akses terhadap air bersih dan sanitasi yang layak adalah hak dasar manusia dan kunci
                            utama peningkatan kualitas hidup.
                        </p>
                        <div class="flex items-center gap-2 mb-2">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">Rp 200.000.000</span>
                        </div>
                        <div class="flex items-center gap-2 mb-4">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">2025</span>
                        </div>
                    </div>
                    <button
                        class="bg-[#FDB913] hover:bg-yellow-500 text-gray-800 px-6 py-2 rounded-2xl text-sm font-semibold transition w-full">
                        Direncanakan
                    </button>
                </div>

                <!-- Card 2 - Blue -->
                <div class="bg-[#003d82] text-white p-6 rounded-3xl shadow-lg flex flex-col justify-between">
                    <div>
                        <h3 class="text-lg font-bold mb-3 leading-tight">
                            Pembangunan Gudang real estate BUMDES
                        </h3>
                        <p class="text-sm leading-tight mb-4">
                            Penguatan Badan Usaha Milik Desa sebagai mesin ekonomi desa (misalnya, unit usaha
                            wisata, unit usaha pengolahan sampah, unit usaha penyewaan alat pertanian).
                        </p>
                        <div class="flex items-center gap-2 mb-2">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">Rp 200.000.000</span>
                        </div>
                        <div class="flex items-center gap-2 mb-4">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">2025</span>
                        </div>
                    </div>
                    <button
                        class="bg-[#FDB913] hover:bg-yellow-500 text-gray-800 px-6 py-2 rounded-2xl text-sm font-semibold transition w-full">
                        Direncanakan
                    </button>
                </div>

                <!-- Card 3 - Blue -->
                <div class="bg-[#003d82] text-white p-6 rounded-3xl shadow-lg flex flex-col justify-between">
                    <div>
                        <h3 class="text-lg font-bold mb-3 leading-tight">
                            Realisasi Pembuatan dan Penempatan Sarana Air Bersih
                        </h3>
                        <p class="text-sm leading-tight mb-4">
                            Akses terhadap air bersih dan sanitasi yang layak adalah hak dasar manusia dan kunci
                            utama peningkatan kualitas hidup. Di wilayah sasaran program ini, masyarakat masih
                            menghadapi kendala signifikan
                        </p>
                        <div class="flex items-center gap-2 mb-2">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">Rp 200.000.000</span>
                        </div>
                        <div class="flex items-center gap-2 mb-4">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">2025</span>
                        </div>
                    </div>
                    <button
                        class="bg-[#FDB913] hover:bg-yellow-500 text-gray-800 px-6 py-2 rounded-2xl text-sm font-semibold transition w-full">
                        Direncanakan
                    </button>
                </div>

                <!-- Card 4 - Light Blue -->
                <div class="bg-[#E9F1FC] text-gray-800 p-6 rounded-3xl shadow-lg flex flex-col justify-between">
                    <div>
                        <h3 class="text-lg font-bold mb-3 leading-tight">
                            Realisasi Pembuatan dan Penempatan Sarana Air Bersih
                        </h3>
                        <p class="text-sm leading-tight mb-4">
                            Akses terhadap air bersih dan sanitasi yang layak adalah hak dasar manusia dan kunci
                            utama peningkatan kualitas hidup. Di wilayah sasaran program ini, masyarakat masih
                            menghadapi kendala signifikan
                        </p>
                        <div class="flex items-center gap-2 mb-2">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">Rp 200.000.000</span>
                        </div>
                        <div class="flex items-center gap-2 mb-4">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"
                                    fill="currentColor" />
                            </svg>
                            <span class="text-sm font-semibold">2025</span>
                        </div>
                    </div>
                    <button
                        class="bg-[#FDB913] hover:bg-yellow-500 text-gray-800 px-6 py-2 rounded-2xl text-sm font-semibold transition w-full">
                        Direncanakan
                    </button>
                </div>
            </div>

            <!-- Program Details -->
            <div class="bg-gray-50 p-10 rounded-3xl">
                <span
                    class="inline-block bg-[#FDB913] text-gray-800 px-4 py-1 rounded-2xl text-sm font-semibold mb-4">
                    Desa Wisata
                </span>
                <h2 class="text-2xl lg:text-3xl font-bold mb-5 text-gray-800 leading-tight">
                    Harmoni Alam dan Budaya di Kaki Gunung Baung
                </h2>
                <p class="text-base leading-tight text-gray-600 mb-6">
                    Visi kami adalah menjadi kawasan wisata
                    pedesaan yang menjadi percontohan dalam pembangunan pariwisata berkelanjutan, dengan fokus pada
                    konservasi alam, pelestarian seni budaya, dan peningkatan kesejahteraan masyarakat
                </p>
                <ul class="space-y-2 mb-6">
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>Peraih Indonesia Sustainable Tourism Award (ISTA) 2019</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>300 Besar Anugerah Desa Wisata Indonesia (ADWI)</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>Green Rafting / Arung Jeram</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3">●</span>
                        <span>Air Terjun Coban Baung</span>
                    </li>
                    <li class="flex items-center text-gray-800 text-base">
                        <span class="mr-3 mt-1">●</span>
                        <span>Baung Camp & Camping Ground</span>
                    </li>
                </ul>
                <div class="relative h-60 mb-4">
                    <div
                        class="absolute z-20 left-12 top-16 w-60 h-48 rounded-2xl overflow-hidden shadow-2xl transform hover:scale-105 transition-transform duration-300">
                        <img src="{{ asset('assets/program-1.png') }}" alt="program-1"
                            class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-linear-to-t from-black/10 to-transparent"></div>
                    </div>
                    <div
                        class="absolute z-10 right-12 top-0 w-60 h-48 rounded-2xl overflow-hidden shadow-2xl transform hover:scale-105 transition-transform duration-300">
                        <img src="{{ asset('assets/program-2.png') }}" alt="program-2"
                            class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-linear-to-t from-black/10 to-transparent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
