@{
    Layout = "_Layout";

    ViewData["Title"] = "Bus Toilet - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Layanan Bus Toilet untuk mendukung acara dan kegiatan di DKI Jakarta dengan fasilitas lengkap dan modern";
    ViewData["Keywords"] = "Bus Toilet, Toilet Portable, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Bus Toilet - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Layanan Bus Toilet untuk mendukung acara dan kegiatan di DKI Jakarta dengan fasilitas lengkap dan modern";
    ViewData["TwitterTitle"] = "Bus Toilet - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Layanan Bus Toilet untuk mendukung acara dan kegiatan di DKI Jakarta dengan fasilitas lengkap dan modern";


    // Breadcumb
    ViewData["BreadcrumbText"] = "Bus Toilet";
    ViewData["TitleBeforeHighlight"] = "Bus";
    ViewData["TitleHighlight"] = "Toilet";
}
    <!-- Breadcumb -->
    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

    <div class="container mx-auto max-w-6xl md:px-0 px-4 py-8">
        <!-- Hero Section -->
        <div class="text-center py-8">
            <h2 class="text-3xl font-bold text-gray-800 mb-4">Layanan Bus Toilet</h2>
            <p class="text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Dinas Lingkungan Hidup Provinsi DKI Jakarta menyediakan layanan Bus Toilet untuk mendukung berbagai acara dan kegiatan di wilayah DKI Jakarta. Bus toilet ini dilengkapi dengan fasilitas modern dan lengkap untuk memberikan kenyamanan maksimal bagi pengguna, termasuk AC, exhaust fan, wastafel, dan berbagai fasilitas pendukung lainnya.
            </p>
        </div>


        <!-- Service Information Cards -->
        <div class="grid md:grid-cols-3 gap-6 mb-12">
            <!-- How to Request -->
            <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                <div class="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-4">
                    <i class="w-6 h-6 text-blue-600" data-lucide="clipboard-list"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-3">Cara Memperoleh Layanan</h3>
                <p class="text-gray-600 mb-4">Menyampaikan surat tertulis (satu minggu sebelum penyelenggaraan acara) kepada:</p>
                <div class="bg-gray-50 p-3 rounded-lg">
                    <p class="text-sm font-semibold text-gray-800">Kepala Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
                    <p class="text-sm text-gray-600">Jl. Mandala V No. 67, Cililitan<br>Jakarta Timur</p>
                </div>
            </div>

            <!-- Service Cost -->
            <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                <div class="flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mb-4">
                    <i class="w-6 h-6 text-green-600" data-lucide="circle-dollar-sign"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-3">Biaya Layanan</h3>
                <p class="text-gray-600 mb-4">Berdasarkan Peraturan Daerah Provinsi DKI Jakarta Nomor 1 Tahun 2015 Tentang Retribusi Daerah:</p>
                <div class="bg-amber-50 border-l-4 border-amber-400 p-4 rounded">
                    <p class="font-semibold text-amber-800">Retribusi Per Unit/Hari:</p>
                    <p class="text-lg font-bold text-amber-900">Rp 400.000,00</p>
                    <p class="text-sm text-amber-700">(empat ratus ribu rupiah)</p>
                </div>
            </div>

            <!-- Service Hours -->
            <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
                <div class="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mb-4">
                    <i class="w-6 h-6 text-purple-600" data-lucide="clock"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-3">Jam Pelayanan</h3>
                <div class="flex items-center mb-4">
                    <svg class="w-5 h-5 text-yellow-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-lg font-semibold text-gray-800">Pukul 07.30 - 15.00 WIB</span>
                </div>
                <p class="text-sm text-gray-500">* Berlaku untuk pengajuan surat permohonan</p>
            </div>
        </div>

        <!-- Facilities Section -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Fasilitas Bus Toilet VIP</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-center hover:bg-blue-100 transition-colors">
                    <i class="w-8 h-8 text-blue-600 mx-auto mb-2" data-lucide="air-vent"></i>
                    <span class="text-sm font-medium text-blue-800">Air Conditioner (AC)</span>
                </div>
                <div class="bg-green-50 border border-green-200 rounded-lg p-4 text-center hover:bg-green-100 transition-colors">
                    <i class="w-8 h-8 text-green-600 mx-auto mb-2" data-lucide="fan"></i>
                    <span class="text-sm font-medium text-green-800">Exhaust Fan</span>
                </div>
                <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 text-center hover:bg-purple-100 transition-colors">
                    <i class="w-8 h-8 text-purple-600 mx-auto mb-2" data-lucide="toilet"></i>
                    <span class="text-sm font-medium text-purple-800">Kloset Duduk</span>
                </div>
                <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4 text-center hover:bg-indigo-100 transition-colors">
                    <i class="w-8 h-8 text-indigo-600 mx-auto mb-2" data-lucide="toilet"></i>
                    <span class="text-sm font-medium text-indigo-800">Urinoir</span>
                </div>
                <div class="bg-cyan-50 border border-cyan-200 rounded-lg p-4 text-center hover:bg-cyan-100 transition-colors">
                    <i class="w-8 h-8 text-cyan-600 mx-auto mb-2" data-lucide="droplets"></i>
                    <span class="text-sm font-medium text-cyan-800">Wastafel</span>
                </div>
                <div class="bg-pink-50 border border-pink-200 rounded-lg p-4 text-center hover:bg-pink-100 transition-colors">
                    <i class="w-8 h-8 text-pink-600 mx-auto mb-2" data-lucide="wind"></i>
                    <span class="text-sm font-medium text-pink-800">Mesin Pengering Tangan</span>
                </div>
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-center hover:bg-yellow-100 transition-colors">
                    <i class="w-8 h-8 text-yellow-600 mx-auto mb-2" data-lucide="file-text"></i>
                    <span class="text-sm font-medium text-yellow-800">Tissue</span>
                </div>
                <div class="bg-teal-50 border border-teal-200 rounded-lg p-4 text-center hover:bg-teal-100 transition-colors">
                    <i class="w-8 h-8 text-teal-600 mx-auto mb-2" data-lucide="soap-dispenser-droplet"></i>
                    <span class="text-sm font-medium text-teal-800">Sabun Cuci Tangan</span>
                </div>
            </div>
        </section>

        <!-- Service Areas -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Wilayah Layanan</h2>
            <div class="grid md:grid-cols-5 gap-4">
                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition-shadow">
                    <svg class="w-6 h-6 text-red-500 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-800">Jakarta Pusat</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition-shadow">
                    <svg class="w-6 h-6 text-red-500 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-800">Jakarta Utara</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition-shadow">
                    <svg class="w-6 h-6 text-red-500 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-800">Jakarta Barat</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition-shadow">
                    <svg class="w-6 h-6 text-red-500 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-800">Jakarta Selatan</span>
                </div>
                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center hover:shadow-md transition-shadow">
                    <svg class="w-6 h-6 text-red-500 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-800">Jakarta Timur</span>
                </div>
            </div>
        </section>

        <!-- Past Events -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Telah Melayani Event</h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Asian Games 2018</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Asian Para Games 2018</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">HUT KORPASUS 2019 ke-67</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Pameran INACRAFT - JICC 2019</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Festival Palang Pintu Kemang</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Markas Komando Korps Marinir</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Bawaslu Provinsi DKI Jakarta</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">MRT - Jakarta</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Mabes TNI Cilangkap</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Komite Intelijen Daerah - DKI Jakarta</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6">
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Komisi Pemilihan Umum - Debat Capres/Cawapres 2019</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Pangkalan Skadron 45 Lanud Halim Perdana Kusuma</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Departemen Luar Negeri</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Departemen Dalam Negeri</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Monumen Nasional (Monas)</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Taman Marga Satwa Ragunan</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Kawasan Kota Tua, Jakarta Barat</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Kartini Run</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Pameran Flora dan Fauna - Lapangan Banteng</span>
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="text-gray-700">Dan Event Lainnya</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

    </div>