@{
    Layout = "_Layout";

    ViewData["Title"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Program Anggaran, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Data Program dan Anggaran";
    ViewData["TitleBeforeHighlight"] = "Data Program";
    ViewData["TitleHighlight"] = "dan Anggaran";
}
    <!-- Breadcumb -->
    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

    <!-- Content Section -->
    <section class="container mx-auto px-6 lg:px-12 py-16">
        <div class="max-w-6xl mx-auto space-y-12">
            <div class="w-full">
                <div class="content-section">
                    <p class="text-gray-700 leading-relaxed mb-8">Halaman ini menyajikan informasi lengkap mengenai program kerja dan alokasi anggaran Dinas Lingkungan Hidup Provinsi DKI Jakarta
                        selama periode 2020-2022. Data ini mencakup rincian kegiatan strategis, penggunaan anggaran, serta capaian dalam pengelolaan lingkungan hidup. Melalui
                        transparansi ini, kami berkomitmen untuk memastikan pengelolaan sumber daya dilakukan secara akuntabel dan sesuai dengan kebutuhan pembangunan
                        berkelanjutan di Jakarta.
                    </p>
                </div>
            </div>

            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">Dokumen Terkait</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Document Card 2024 -->
                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
                        <div class="absolute top-4 right-4 z-10">
                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
                        </div>
                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
                        </div>
                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
                            <p class="text-sm font-semibold text-gray-600 tracking-wide">DATA PROGRAM DAN ANGGARAN</p>
                            <p class="text-2xl font-black text-green-600 mt-1">2024</p>
                        </div>
                    </div>
                    <div class="p-8 relative z-10">
                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
                            Download PDF
                        </a>
                    </div>
                </div>

                <!-- Document Card 2023 -->
                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
                        <div class="absolute top-4 right-4 z-10">
                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
                        </div>
                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
                        </div>
                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
                            <p class="text-sm font-semibold text-gray-600 tracking-wide">DATA PROGRAM DAN ANGGARAN</p>
                            <p class="text-2xl font-black text-green-600 mt-1">2023</p>
                        </div>
                    </div>
                    <div class="p-8 relative z-10">
                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
                            Download PDF
                        </a>
                    </div>
                </div>

                <!-- Document Card 2020-2022 -->
                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
                        <div class="absolute top-4 right-4 z-10">
                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
                        </div>
                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
                        </div>
                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
                            <p class="text-sm font-semibold text-gray-600 tracking-wide">DATA PROGRAM DAN ANGGARAN</p>
                            <p class="text-2xl font-black text-green-600 mt-1">2020-2022</p>
                        </div>
                    </div>
                    <div class="p-8 relative z-10">
                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
                            Download PDF
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </section>