@{
    Layout = "~/Views/Website/Shared/_Layout.cshtml";
    ViewData["Title"] = "Jasa Pengolahan Sampah";
}

<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">Pengolahan Sampah</span>
            </nav>
        </div>
        
        <div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
            <div class="flex-1 text-center max-w-xl md:text-left">
                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Jasa Pengolahan Sampah</h1>
                <p class="text-lg text-white mb-4">Solusi pengelolaan sampah sesuai Pergub DKI Jakarta untuk kawasan permukiman, komersial, dan industri.</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.svg")" alt="Usaha Pesapakawan" class="w-52 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">Izin Usaha Pengolahan Sampah</h2>
                    <p class="text-gray-700 leading-relaxed mb-6">
                        Dalam melaksanakan kegiatan usaha pengolahan sampah, badan usaha yang melakukan usaha pengolahan sampah wajib memiliki izin usaha pengolahan sampah. Jenis izin yang diterbitkan sesuai dengan <span class="font-semibold text-blue-600">Peraturan Gubernur Nomor 47 Tahun 2017</span> tentang Petunjuk Pelaksanaan Pelayanan Terpadu Satu Pintu, adapun jenis izin pengangkutan sampah yaitu Izin Usaha Pengelolaan Sampah.
                    </p>
                    <p class="text-gray-700 leading-relaxed">
                        Mekanisme perolehan Izin Usaha didaftarkan melalui Unit Pengelola Penanaman Modal dan Pelayanan Terpadu Satu Pintu Kota (UP PMPTSP Kota). Adapun formulir dan kelengkapan dokumen sesuai dengan ketentuan yang diatur oleh UP PMPTSP Kota. Setelah berkas administrasi dinyatakan lengkap dan lolos verifikasi, maka dilanjutkan dengan pengecekan/survey terhadap lokasi dan teknologi pengolahan sampah yang diajukan dalam proses permohonan izin.
                    </p>
                </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">Alur Permohonan Izin</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="flex justify-center mb-8">
                <img src="@Url.Content("~/website/images/alur_jasa.png")" class="rounded-2xl border border-gray-200 shadow-lg max-w-full h-auto" alt="Gambaran Alur">
            </div>
            <div class="bg-gradient-to-r from-blue-50 to-cyan-50 border-l-4 border-blue-500 p-6 rounded-r-xl">
                <p class="text-gray-700 leading-relaxed">
                    Pelaksanaan survey dimaksud dilakukan bersama-sama oleh Tim Teknis Bersama yang terdiri dari unsur UP PMPTSP Kota dan Dinas Lingkungan Hidup. Izin akan diterbitkan apabila telah memenuhi persyaratan administrasi dan hasil survey telah disetujui atau dinyatakan sesuai persyaratan teknis oleh Tim Teknis Bersama.
                </p>
            </div>
        </div>

        <div class="bg-white rounded-2xl p-8 mb-7 border border-gray-200">
            <div class="flex items-center gap-4 mb-6">
                <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="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>
                <div>
                    <h3 class="text-2xl font-bold text-gray-900">Teknologi Pengolahan</h3>
                    <p class="text-gray-600">Teknologi yang diizinkan untuk pengolahan sampah</p>
                </div>
            </div>
            <p class="text-gray-700 leading-relaxed mb-6">
                Dalam pelaksanaan survey/pengecekan lokasi dan teknologi pengolahan sampah, dilakukan pemeriksaan kesesuaian persyaratan teknis yang diatur dalam <span class="font-semibold text-blue-600">SK Kepala Dinas Lingkungan Hidup Nomor 374 Tahun 2017</span> tentang Persyaratan Teknis Izin Usaha Pengelolaan Sampah.
            </p>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-200">
                    <h4 class="font-bold text-blue-900 mb-3">Teknologi Fisik</h4>
                    <p class="text-blue-800 text-sm">Pengurangan ukuran, pemadatan, pemisahan magnetis, masa-jenis, dan optik</p>
                </div>
                <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl border border-green-200">
                    <h4 class="font-bold text-green-900 mb-3">Teknologi Biologi</h4>
                    <p class="text-green-800 text-sm">Pengolahan aerobik dan/atau anaerobik seperti pengomposan dan biogasifikasi</p>
                </div>
                <div class="bg-gradient-to-br from-orange-50 to-red-50 p-6 rounded-xl border border-orange-200">
                    <h4 class="font-bold text-orange-900 mb-3">Teknologi Termal</h4>
                    <p class="text-orange-800 text-sm">Gasifikasi, pirolisis, plasma dan insenerasi</p>
                </div>
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl border border-purple-200">
                    <h4 class="font-bold text-purple-900 mb-3">Teknologi Lainnya</h4>
                    <p class="text-purple-800 text-sm">Teknologi lain atau gabungan dari beberapa macam teknologi</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-6">
                    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Persyaratan Umum</h3>
                    </div>
                </div>
                <div class="space-y-4">
                    <div class="bg-gradient-to-r from-gray-50 to-slate-50 p-4 rounded-xl border border-gray-200">
                        <ul class="text-gray-700 space-y-2 text-sm">
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Pemohon wajib berbadan usaha</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Melampirkan deskripsi dari lokasi kegiatan dengan tata letak (layout) di lokasi kegiatan dan terhadap bangunan sekelilingnya</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Papan nama yang mudah terlihat dengan tulisan "Fasilitas Pengolahan Sampah Non B3" yang dipasang pada unit/bangunan pengolah sampah</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Melampirkan dokumen rencana pengolahan sampah yang menjelaskan jenis, karakteristik, jumlah, komposisi dan asal/sumber sampah yang akan diolah</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Melampirkan dokumen studi kelayakan</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Melampirkan dokumen lingkungan (Amdal/UKL-UPL) dan izin lingkungan atau SPPL (Surat Pernyataan Pengelolaan Lingkungan)</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Umur truk sampah pada saat pendaftaran maksimal 6 tahun, dengan masa berlaku izin minimal 1 tahun dan maksimal 3 tahun</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Melampirkan DED/detailed engineering design fasilitas pengolahan sampah</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Memiliki fasilitas pendukung berupa peralatan/instalasi pengendalian pencemaran lingkungan (air dan/atau udara)</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Melampirkan Standar Operasional Prosedur (SOP)</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Memiliki Alat Pelindung Diri (APD) untuk petugas</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Memiliki alat perlengkapan peralatan tanggap darurat</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Melampirkan Izin Gangguan – Tempat Usaha Berdasarkan Undang-Undang Gangguan (UUG/HO)</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">✓</span>
                                <span>Memiliki fasilitas pendukung: ruang pemilahan dan bak penampung air lindi</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl p-8 border border-gray-200">
                <div class="flex items-center gap-4 mb-6">
                    <div class="bg-gradient-to-br from-orange-500 to-red-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="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>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900">Persyaratan Khusus</h3>
                    </div>
                </div>
                <div class="space-y-4">
                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-xl border border-blue-200">
                        <h4 class="font-bold text-blue-900 mb-2">Teknologi Fisik</h4>
                        <p class="text-blue-800 text-sm">Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m²</p>
                    </div>
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl border border-green-200">
                        <h4 class="font-bold text-green-900 mb-2">Teknologi Biologi</h4>
                        <ul class="text-green-800 text-sm space-y-1">
                            <li>• Kapasitas minimal 10 ton/hari atau luas >200 m²</li>
                            <li>• Wajib memenuhi baku mutu kebauan</li>
                            <li>• Wajib memenuhi baku mutu air lindi</li>
                        </ul>
                    </div>
                    <div class="bg-gradient-to-r from-orange-50 to-red-50 p-4 rounded-xl border border-orange-200">
                        <h4 class="font-bold text-orange-900 mb-2">Teknologi Termal</h4>
                        <ul class="text-orange-800 text-sm space-y-1">
                            <li>• Insinerasi: minimal 8000°C</li>
                            <li>• Pirolisis: minimal 4000°C</li>
                            <li>• Gasifikasi: minimal 7000°C</li>
                            <li>• Plasma: minimal 5000°C</li>
                            <li>• Wajib memenuhi baku mutu emisi</li>
                        </ul>
                    </div>
                    <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl border border-purple-200">
                        <h4 class="font-bold text-purple-900 mb-2">Teknologi Lainnya</h4>
                        <ul class="text-purple-800 text-sm space-y-1">
                            <li>• Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m2</li>
                            <li>• Wajib memenuhi persyaratan khusus pada semua jenis teknologi yang digunakan</li>
                            <li>• Memenuhi baku mutu lingkungan</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-2xl p-8 mb-7">
            <div class="flex items-center gap-4 mb-6">
                <div class="bg-green-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-green-800">Kewajiban Setelah Memperoleh Izin</h3>
            </div>
            <p class="text-green-700 mb-6 leading-relaxed">
                Setelah memperoleh Izin Usaha Pengelolaan Sampah, penyedia jasa pengolahan sampah wajib melaporkan izinnya kepada Dinas Lingkungan Hidup Provinsi DKI Jakarta untuk melakukan pendaftaran/registrasi secara online melalui website ini.
            </p>
            <div class="bg-white p-6 rounded-xl border border-green-200 shadow-sm">
                <h4 class="font-bold text-green-900 mb-4">Penyedia jasa pengolahan sampah wajib melakukan:</h4>
                <div class="grid md:grid-cols-3 gap-4">
                    <div class="bg-green-100 p-4 rounded-lg text-center">
                        <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">1</div>
                        <p class="text-green-800 text-sm font-semibold">Pendaftaran sebagai penyedia jasa yang teregistrasi</p>
                    </div>
                    <div class="bg-green-100 p-4 rounded-lg text-center">
                        <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">2</div>
                        <p class="text-green-800 text-sm font-semibold">Melaporkan kontrak kerjasama pengolahan sampah</p>
                    </div>
                    <div class="bg-green-100 p-4 rounded-lg text-center">
                        <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">3</div>
                        <p class="text-green-800 text-sm font-semibold">Melaporkan hasil kegiatan pengolahan sampah</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>