@{
    Layout = "~/Views/Website/Shared/_Layout.cshtml";
    ViewData["Title"] = "Usaha/Kegiatan Pesapakawan";
}

<div class="mx-auto bg-gray-50">
    <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
        
        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
                <span class="font-semibold">Usaha/Kegiatan Pesapakawan</span>
            </nav>
        </div>
        
        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
            <div class="flex-1 text-center md:text-left">
                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Usaha/Kegiatan Pesapakawan</h1>
                <p class="text-lg text-white mb-4">Pengelolaan Sampah Kawasan dan Perusahaan</p>
                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
            </div>
            <div class="flex-shrink-0 hidden md:block">
                <img src="@Url.Content("~/website/images/bg-header.webp")" alt="Usaha Pesapakawan" class="w-75 h-auto">
            </div>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 lg:px-6 z-20">
        <div class="bg-white rounded-2xl  p-8 mb-7 border border-gray-200">
            <div class="flex flex-col lg:flex-row items-start gap-6">
                <div class="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl p-4 flex-shrink-0">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="flex-1">
                    <h2 class="text-2xl font-bold text-gray-900 mb-4">Kewajiban Pengelolaan Sampah</h2>
                    <p class="text-gray-700 leading-relaxed mb-6">
                        Setiap Kawasan atau Perusahaan diwajibkan untuk melakukan pengelolaan sampah di areanya. Sebagaimana yang tertera pada <span class="font-semibold text-blue-600">Peraturan Gubernur Nomor 102 Tahun 2021 Pasal 2</span>:
                    </p>
                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 border-l-4 border-blue-500 p-6 rounded-r-xl">
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"></svg>
                                <path d="M14.017 21v-7.391c0-5.704-3.731-9.57-8.983-10.609l.949-2.004c6.249 1.235 10.034 6.777 10.034 12.613v7.391h-1.983zm-12.017 0v-7.391c0-5.704-3.748-9.57-9-10.609l.949-2.004c6.249 1.235 10.051 6.777 10.051 12.613v7.391h-2z"/>
                            </svg>
                            <p class="text-gray-800 italic font-medium"></p>
                                "Setiap penanggung jawab atau pengelola kawasan, dan/atau Perusahaan, wajib melakukan Pengelolaan Sampah di dalam area dan/atau fasilitas yang menjadi tanggung jawabnya."
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-2xl  p-8 mb-7 border border-gray-200">
            <div class="text-center mb-8">
                <h3 class="text-2xl font-bold text-gray-900 mb-3">Kawasan yang Dimaksud</h3>
                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-cyan-500 mx-auto rounded-full"></div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-xl border border-gray-200 hover:border-blue-300 transition-all duration-300 text-center">
                    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
                        </svg>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-800 mb-2">Kawasan Permukiman</h4>
                    <p class="text-sm text-gray-600">Area hunian dan kompleks perumahan</p>
                </div>
                
                <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-xl border border-gray-200 hover:border-green-300 transition-all duration-300 text-center">
                    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                        </svg>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-800 mb-2">Kawasan Komersial</h4>
                    <p class="text-sm text-gray-600">Mall, perkantoran, dan pusat bisnis</p>
                </div>
                
                <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-xl border border-gray-200 hover:border-orange-300 transition-all duration-300 text-center">
                    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                        </svg>
                    </div>
                    <h4 class="text-lg font-semibold text-gray-800 mb-2">Kawasan Industri</h4>
                    <p class="text-sm text-gray-600">Pabrik dan area manufaktur</p>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-red-50 to-pink-50 border border-red-200 rounded-2xl p-8 mb-7 ">
            <div class="flex items-center gap-4 mb-6">
                <div class="bg-red-500 rounded-full p-3">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-red-800">Sanksi Administratif</h3>
            </div>
            
            <p class="text-red-700 mb-8 leading-relaxed">
                Setiap pengelola Kawasan yang tidak melaksanakan kewajiban Pengelolaan Sampah akan dikenakan sanksi administratif berupa teguran tertulis oleh Dinas Lingkungan Hidup dan akan dipublikasikan di situs yang dikelola oleh Pemerintah Provinsi DKI Jakarta.
            </p>
            
            <div class="grid md:grid-cols-3 gap-4">
                <div class="bg-white p-6 rounded-xl border border-red-200 shadow-sm">
                    <div class="flex items-center gap-3 mb-3">
                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">1</span>
                        <span class="text-red-800 font-semibold">Teguran Pertama</span>
                    </div>
                    <p class="text-red-700 text-sm">Durasi: <strong>14 x 24 jam</strong></p>
                </div>
                
                <div class="bg-white p-6 rounded-xl border border-red-200 shadow-sm">
                    <div class="flex items-center gap-3 mb-3">
                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">2</span>
                        <span class="text-red-800 font-semibold">Teguran Kedua</span>
                    </div>
                    <p class="text-red-700 text-sm">Durasi: <strong>7 x 24 jam</strong></p>
                </div>
                
                <div class="bg-white p-6 rounded-xl border border-red-200 shadow-sm">
                    <div class="flex items-center gap-3 mb-3">
                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">3</span>
                        <span class="text-red-800 font-semibold">Teguran Ketiga</span>
                    </div>
                    <p class="text-red-700 text-sm">Durasi: <strong>3 x 24 jam</strong></p>
                </div>
            </div>
        </div>

        <div class="grid lg:grid-cols-2 gap-8 mb-7">
            <div class="bg-white rounded-2xl  p-8 border border-gray-200">
                <div class="flex items-center gap-4 mb-8">
                    <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-gray-900">Pengurangan Sampah</h3>
                        <p class="text-gray-600">Reduce, Reuse, Recycle</p>
                    </div>
                </div>
                
                <div class="space-y-6">
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl border border-green-200">
                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                            Pembatasan Timbulan Sampah
                        </h4>
                        <ul class="text-gray-700 space-y-2">
                            <li class="flex items-start gap-2">
                                <span class="text-green-500 mt-1">✓</span>
                                <span>Menyediakan sedikit mungkin kemasan/produk yang menimbulkan sampah</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-green-500 mt-1">✓</span>
                                <span>Menghindari penyediaan maupun penggunaan kemasan/produk sekali pakai</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-green-500 mt-1">✓</span>
                                <span>Menggunakan barang dan/atau kemasan yang dapat didaur ulang</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 rounded-xl border border-blue-200">
                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                            Pemanfaatan Kembali Kemasan
                        </h4>
                        <p class="text-gray-700">Memanfaatkan produk/kemasan lama untuk fungsi sama atau fungsi yang berbeda tanpa melalui proses pengolahan terlebih dahulu.</p>
                    </div>
                    
                    <div class="bg-gradient-to-r from-purple-50 to-indigo-50 p-6 rounded-xl border border-purple-200">
                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
                            <span class="w-2 h-2 bg-purple-500 rounded-full"></span>
                            Daur Ulang Sampah
                        </h4>
                        <p class="text-gray-700">Memanfaatkan sampah menjadi barang yang berguna setelah melalui proses pengolahan terlebih dahulu.</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl  p-8 border border-gray-200">
                <div class="flex items-center gap-4 mb-8">
                    <div class="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl p-4">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-gray-900">Penanganan Sampah</h3>
                        <p class="text-gray-600">Pemilahan & Pengolahan</p>
                    </div>
                </div>
                
                <div class="space-y-6">
                    <div class="bg-gradient-to-r from-gray-50 to-slate-50 p-6 rounded-xl border border-gray-200">
                        <h4 class="font-bold text-gray-900 mb-4">Pemilahan Sampah</h4>
                        <p class="text-gray-700 mb-4">Pengelompokan sampah pada wadah yang sesuai dengan jenisnya:</p>
                        
                        <div class="grid grid-cols-2 gap-3">
                            <div class="bg-green-100 p-4 rounded-lg text-center border border-green-300 hover:shadow-md transition-shadow">
                                <div class="text-2xl mb-2">🍎</div>
                                <div class="text-sm font-bold text-green-800">Mudah Terurai</div>
                                <div class="text-xs text-green-600 bg-green-200 px-2 py-1 rounded-full mt-1">Hijau</div>
                            </div>
                            <div class="bg-yellow-100 p-4 rounded-lg text-center border border-yellow-300 hover:shadow-md transition-shadow">
                                <div class="text-2xl mb-2">📦</div>
                                <div class="text-sm font-bold text-yellow-800">Daur Ulang</div>
                                <div class="text-xs text-yellow-600 bg-yellow-200 px-2 py-1 rounded-full mt-1">Kuning</div>
                            </div>
                            <div class="bg-red-100 p-4 rounded-lg text-center border border-red-300 hover:shadow-md transition-shadow">
                                <div class="text-2xl mb-2">🔋</div>
                                <div class="text-sm font-bold text-red-800">B3</div>
                                <div class="text-xs text-red-600 bg-red-200 px-2 py-1 rounded-full mt-1">Merah</div>
                            </div>
                            <div class="bg-gray-100 p-4 rounded-lg text-center border border-gray-300 hover:shadow-md transition-shadow">
                                <div class="text-2xl mb-2">🧻</div>
                                <div class="text-sm font-bold text-gray-800">Residu</div>
                                <div class="text-xs text-gray-600 bg-gray-200 px-2 py-1 rounded-full mt-1">Abu-abu</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="bg-blue-50 p-5 rounded-xl border border-blue-200 hover:shadow-md transition-shadow">
                            <h5 class="font-bold text-blue-900 mb-2 flex items-center gap-2">
                                <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                                Pengumpulan Sampah
                            </h5>
                            <p class="text-blue-800 text-sm">Pengumpulan sampah terpilah dari sumber sampah TPS atau TPS 3R</p>
                        </div>
                        
                        <div class="bg-green-50 p-5 rounded-xl border border-green-200 hover:shadow-md transition-shadow">
                            <h5 class="font-bold text-green-900 mb-2 flex items-center gap-2">
                                <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                Pengolahan Sampah
                            </h5>
                            <p class="text-green-800 text-sm">Pengolahan sampah mudah terurai dan daur ulang di lokasi sumber</p>
                        </div>
                        
                        <div class="bg-orange-50 p-5 rounded-xl border border-orange-200 hover:shadow-md transition-shadow">
                            <h5 class="font-bold text-orange-900 mb-2 flex items-center gap-2">
                                <span class="w-2 h-2 bg-orange-500 rounded-full"></span>
                                Pengangkutan Sampah
                            </h5>
                            <p class="text-orange-800 text-sm">Pengangkutan dari TPS ke fasilitas pengolahan</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-blue-600 to-cyan-600 rounded-2xl p-8 text-center border border-blue-200 mb-7 relative overflow-hidden">
            <div class="absolute inset-0" style="background-image: radial-gradient(circle at 20% 80%, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.1) 22%, transparent 22%, transparent 100%), radial-gradient(circle at 80% 20%, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.1) 25%, transparent 25%, transparent 100%), radial-gradient(circle at 40% 40%, hsla(0, 0%, 100%, 0.05) 0%, hsla(0, 0%, 100%, 0.05) 50%, transparent 50%, transparent 100%), linear-gradient(90deg, transparent 24%, hsla(0, 0%, 100%, 0.03) 25%, hsla(0, 0%, 100%, 0.03) 26%, transparent 27%, transparent 74%, hsla(0, 0%, 100%, 0.03) 75%, hsla(0, 0%, 100%, 0.03) 76%, transparent 77%, transparent), linear-gradient(0deg, transparent 24%, hsla(0, 0%, 100%, 0.03) 25%, hsla(0, 0%, 100%, 0.03) 26%, transparent 27%, transparent 74%, hsla(0, 0%, 100%, 0.03) 75%, hsla(0, 0%, 100%, 0.03) 76%, transparent 77%, transparent);"></div>
            <div class="max-w-3xl mx-auto relative z-10">
            <h3 class="text-2xl font-bold text-white mb-4">Informasi Penting</h3>
            <p class="text-blue-100 mb-6 leading-relaxed">
                Penanggung jawab atau pengelola kawasan wajib melakukan registrasi dan menyampaikan laporan Pengelolaan Sampah harian setiap bulan.
            </p>
            <p class="text-blue-200 text-sm mb-8">
                Untuk informasi lengkap, lihat <span class="font-semibold text-white">Peraturan Gubernur Nomor 102 Tahun 2021</span>
            </p>
            <div class="_df_button inline-flex items-center gap-3 bg-white text-blue-600 px-8 py-4 rounded-xl hover:bg-blue-50 transition-all duration-300 cursor-pointer font-semibold hover:scale-105" source="@Url.Content("~/website/documents/Pergub_102_2021.pdf")">
                <span>Download Peraturan Gubernur Nomor 102 Tahun 2021</span>
            </div>
            </div>
        </div>
    </div>
</div>

<register-block dynamic-section="css" key="cssUsaha">
    <link href="~/website/lib/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
    <link href="~/website/lib/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
    <style>
        .transition-colors {
            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        }
        
        ._df_button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .bg-gray-50 {
            background-color: #f9fafb;
        }
    </style>
</register-block>

<register-block dynamic-section="scripts" key="jsUsaha">
    <script src="~/website/lib/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
    <script src="~/website/lib/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>