@{
    Layout = "_Layout";

    ViewData["Title"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Tupoksi Bidang, Suku Dinas dan UPT, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Tupoksi Bidang, Suku Dinas dan UPT ";
    ViewData["TitleBeforeHighlight"] = "Tupoksi Bidang,";
    ViewData["TitleHighlight"] = "Suku Dinas dan UPT";
}
    <!-- 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="rounded-3xl overflow-hidden">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @* <!-- Pergub Card 1 -->
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
                        <div class="flex items-start">
                        <div class="bg-green-100 p-3 rounded-lg">
                            <i class="w-6 h-6 text-green-600" data-lucide="file-text"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg text-gray-800">Dinas Lingkungan Hidup</h3>
                            <p class="text-sm text-gray-600 mt-1">Pergub No. 284 Tahun 2016 Tentang Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
                            <div class="mt-3"></div>
                            <span class="inline-block bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 284 TAHUN 2016</span>
                            </div>
                        </div>
                    </div>

                    <!-- Pergub Card 2 -->
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
                        <div class="flex items-start">
                        <div class="bg-blue-100 p-3 rounded-lg">
                            <i class="w-6 h-6 text-blue-600" data-lucide="droplets"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg text-gray-800">Unit Pelaksana Kebersihan Badan Air</h3>
                            <p class="text-sm text-gray-600 mt-1">Pergub No. 399 Tahun 2016 Tentang Unit Pelaksana Kebersihan Badan Air</p>
                            <div class="mt-3">
                            <span class="inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 399 TAHUN 2016</span>
                            </div>
                        </div>
                        </div>
                    </div>

                    <!-- Pergub Card 3 -->
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
                        <div class="flex items-start">
                        <div class="bg-purple-100 p-3 rounded-lg">
                            <i class="w-6 h-6 text-purple-600" data-lucide="flask-conical"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg text-gray-800">Unit Laboratorium Lingkungan Hidup</h3>
                            <p class="text-sm text-gray-600 mt-1">Pergub No. 398 Tahun 2016 Tentang Unit Laboratorium Lingkungan Hidup Daerah</p>
                            <div class="mt-3">
                            <span class="inline-block bg-purple-100 text-purple-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 398 TAHUN 2016</span>
                            </div>
                        </div>
                        </div>
                    </div>

                    <!-- Pergub Card 4 -->
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
                        <div class="flex items-start">
                        <div class="bg-amber-100 p-3 rounded-lg">
                            <i class="w-6 h-6 text-amber-600" data-lucide="recycle"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg text-gray-800">Unit Pengelola Sampah Terpadu</h3>
                            <p class="text-sm text-gray-600 mt-1">Pergub No. 400 Tahun 2016 Tentang Unit Pengelola Sampah Terpadu</p>
                            <div class="mt-3">
                            <span class="inline-block bg-amber-100 text-amber-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 400 TAHUN 2016</span>
                            </div>
                        </div>
                        </div>
                    </div> *@

                    <!-- Pergub Card 5 -->
                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1 md:col-span-2">
                        <div class="flex items-start">
                        <div class="bg-teal-100 p-3 rounded-lg">
                            <i class="w-6 h-6 text-teal-600" data-lucide="landmark"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-lg text-gray-800">Organisasi dan Tata Kerja Perangkat Daerah</h3>
                            <p class="text-sm text-gray-600 mt-1">Pergub No. 57 Tahun 2022 Tentang Organisasi dan Tata Kerja Perangkat Daerah</p>
                            <div class="mt-3 flex flex-wrap gap-2">
                            <span class="inline-block bg-teal-100 text-teal-800 text-xs font-semibold px-3 py-1 rounded-full">Naskah Komprehensif Pergub No. 57 Tahun 2022</span>
                            <span class="inline-block bg-teal-100 text-teal-800 text-xs font-semibold px-3 py-1 rounded-full">Lamp XVI SOTK DLH Pergub No. 57 Tahun 2022</span>
                            </div>
                        </div>
                        </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 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-md font-black text-green-600 mt-1">Naskah Komprehensif Pergub No. 57 Tahun 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>

                <!-- 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 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-md font-black text-green-600 mt-1">Lamp XVI SOTK DLH Pergub No. 57 Tahun 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>