@{
    Layout = "_Layout";

    ViewData["Title"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Laporan Kinerja Instansi Pemerintahan, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Laporan Kinerja Instansi Pemerintahan";
    ViewData["TitleBeforeHighlight"] = "Laporan Kinerja";
    ViewData["TitleHighlight"] = "Instansi Pemerintahan";
}
    <!-- 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">Laporan Kinerja Instansi Pemerintah" (LKIP) pada situs Dinas Lingkungan Hidup Provinsi DKI Jakarta menyediakan informasi mengenai pencapaian kinerja instansi tersebut. LKIP memuat evaluasi terhadap program dan kegiatan yang telah dilaksanakan selama periode tertentu, serta capaian indikator kinerja utama yang ditetapkan. Dokumen ini juga mencakup analisis terhadap faktor-faktor yang mempengaruhi kinerja, baik yang mendukung maupun yang menjadi kendala, serta langkah-langkah strategis yang diambil untuk meningkatkan kinerja di masa mendatang. Dengan membaca LKIP, masyarakat dapat memahami sejauh mana Dinas Lingkungan Hidup DKI Jakarta telah mencapai target dan komitmennya dalam pengelolaan lingkungan hidup di wilayah 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">LAPORAN KINERJA INSTANSI PEMERINTAHAN</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">LAPORAN KINERJA INSTANSI PEMERINTAHAN</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">LAPORAN KINERJA INSTANSI PEMERINTAHAN</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>