@{
    Layout = "_Layout";

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

    // Breadcumb
    ViewData["BreadcrumbText"] = "Perjanjian Kinerja Pemerintah";
    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="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
                <!-- Accordion Item 1 -->
                <div class="border border-gray-200 rounded-xl overflow-hidden">
                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-cyan-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion1')">
                        <div class="flex items-center space-x-3">
                            <i class="text-orange-600" data-lucide="book-open"></i>
                            <h3 class="text-lg font-semibold text-gray-800">Definisi & Dasar Hukum</h3>
                            <p></p>
                        </div>
                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon1"></i>
                    </button>
                    <div id="accordion1" class="hidden px-6 py-4 bg-white">
                        <p class="text-gray-700 leading-relaxed text-md mb-6">
                           Berdasarkan Peraturan Gubernur Daerah Khusus Ibukota Jakarta Nomor 121 Tahun 2020, Tentang Penyelenggaraan Sistem Akuntabilitas Kinerja Instansi Pemerintah
                        </p>
                        <div class="grid gap-3">
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                                    <p class="text-gray-700 text-sm">Sistem Akuntabilitas Kinerja Instansi Pemerintah yang selanjutnya disingkat SAKIP adalah rangkaian sistematik dari berbagai aktivitas, alat, dan prosedur yang dirancang untuk tujuan penetapan dan pengukuran, pengumpulan data, pengklasifikasian, pengikhtisaran, dan pelaporan kinerja pada instansi pemerintah, dalam rangka pertanggungjawaban dan peningkatan kinerja instansi pemerintah.</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                                    <p class="text-gray-700 text-sm">Indikator Kinerja adalah ukuran keberhasilan yang akan dicapai dari kinerja program dan kegiatan yang telah direncanakan.</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                                    <p class="text-gray-700 text-sm">Indikator Kinerja Utama adalah ukuran keberhasilan organisasi/ unit/ pegawai dalam mencapai sasaran sebagai penjabaran tugas dan fungsi organisasi/unit/pegawai.</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
                                    <p class="text-gray-700 text-sm">Perjanjian Kinerja adalah lembar/ dokumen yang berisikan penugasan dari pimpinan instansi yang lebih tinggi kepada pimpinan instansi yang lebih rendah untuk melaksanakan program/kegiatan yang disertai dengan indikator kinerja utama.</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
                                    <p class="text-gray-700 text-sm">Perencanaan Kinerja adalah merupakan proses penyusunan rencana kinerja sebagai penjabaran dari sasaran dan program yang telah ditetapkan dalam rencana stratejik, yang dilaksanakan oleh instansi pemerintah melalui berbagai kegiatan tahunan.</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
                                    <p class="text-gray-700 text-sm">Pengukuran Kinerja adalah proses pengumpulan, analisis, dan/ atau pelaporan informasi mengenai kinerja organisasi dalam proses ini, organisasi menetapkan parameter hasil untuk dicapai oleh program, investasi, dan akuisisi yang dilakukan.</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
                                    <p class="text-gray-700 text-sm">Laporan Kinerja adalah ikhtisar yang menjelaskan secara ringkas dan lengkap tentang evaluasi dan analisa capaian kinerja yang disusun berdasarkan rencana kerja yang ditetapkan dalam rangka pelaksanaan Anggaran Pendapatan dan Belanja Daerah.</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
                                <div class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
                                    <p class="text-gray-700 text-sm">Pegawai Negeri Sipil yang selanjutnya disingkat PNS adalah PNS yang bertugas pada PD/UKPD atau yang ditugaskan Gubernur di luar PD/UKPD</p>
                                </div>
                            </div>
                        </div>
                        <div class="mt-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border-l-4 border-blue-500">
                            <p class="text-sm font-semibold text-blue-800 mb-2">Sumber:</p>
                            <p class="text-sm text-blue-700">PERGUB NO.121 TAHUN 2020 Tentang Penyelenggaraan SAKIP</p>
                        </div>
                    </div>
                </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">PERJANJIAN KINERJA PEMERINTAH</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">PERJANJIAN KINERJA PEMERINTAH</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">PERJANJIAN KINERJA PEMERINTAH</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>

    <register-block dynamic-section="scripts" key="jsPerjanjianKinerja">
    <script>
        function toggleAccordion(accordionId) {
            const accordion = document.getElementById(accordionId);
            const icon = document.getElementById('icon' + accordionId.slice(-1));
            
            if (accordion.classList.contains('hidden')) {
                accordion.classList.remove('hidden');
                icon.style.transform = 'rotate(180deg)';
            } else {
                accordion.classList.add('hidden');
                icon.style.transform = 'rotate(0deg)';
            }
        }
    </script>
</register-block>