@{
    Layout = "_Layout";

        ViewData["Title"] = "Bulky Waste - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["Description"] = "Layanan pengelolaan sampah besar";
        ViewData["Keywords"] = "Bulky Waste, Sampah Besar, Pengelolaan Sampah, Daur Ulang, Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["OgTitle"] = "Bulky Waste - Layanan Pengelolaan Sampah Besar | Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["OgDescription"] = "Layanan Bulky Waste untuk pengelolaan sampah besar. Solusi pengolahan sampah rumah tangga berukuran besar, furniture bekas, dan barang besar lainnya di DKI Jakarta.";
        ViewData["TwitterTitle"] = "Bulky Waste - Layanan Pengelolaan Sampah Besar | Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["TwitterDescription"] = "Layanan Bulky Waste untuk pengelolaan sampah besar. Solusi pengolahan sampah rumah tangga berukuran besar, furniture bekas, dan barang besar lainnya di DKI Jakarta.";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Bulky Waste";
    ViewData["TitleBeforeHighlight"] = "Layanan Pengelolaan";
    ViewData["TitleHighlight"] = "Sampah Besar";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

<div class="container mx-auto max-w-6xl py-8">

    <!-- Hero Section -->
    <div class="text-center py-8">
        <h2 class="text-3xl font-bold text-gray-800 mb-4">Layanan Bulky Waste</h2>
        <p class="text-gray-600 max-w-2xl mx-auto leading-relaxed">
            Layanan pengelolaan sampah besar untuk mengurangi dampak lingkungan dari limbah rumah tangga berukuran besar.
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        <div class="lg:col-span-12">
            <div class="relative bg-gradient-to-br from-orange-500 via-orange-600 to-red-500 rounded-2xl p-8 text-white overflow-hidden">
                <div class="absolute inset-0 opacity-10">
                    <svg class="w-full h-full" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                                <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" opacity="0.3"/>
                            </pattern>
                        </defs>
                        <rect width="100%" height="100%" fill="url(#grid)"/>
                    </svg>
                </div>
                
                <div class="relative flex flex-col lg:flex-row lg:items-center justify-between">
                    <div class="lg:flex-1 mb-6 lg:mb-0">
                        <div class="flex items-center mb-4">
                            <div class="bg-white/20 backdrop-blur-sm rounded-full p-3 mr-4">
                                <i data-lucide="star" class="w-8 h-8"></i>
                            </div>
                            <h3 class="text-2xl font-bold">Halo Sahabat Lingkungan! 👋</h3>
                        </div>
                        <p class="text-lg leading-relaxed text-white/90">
                            Punya sampah berukuran besar? Kami siap membantu Anda mengelolanya dengan tepat dan ramah lingkungan.
                        </p>
                    </div>
                    <div class="lg:ml-8">
                        <a href="https://docs.google.com/forms/d/e/1FAIpQLSe960f7Ll5PZPuADP5zdGTfTTHQemvUMXoy62wGO9v40eR5gw/viewform" target="_blank" class="group">
                            <button class="bg-white text-orange-600 px-8 py-4 rounded-xl font-semibold text-lg hover:bg-gray-50 transition-all duration-300 transform hover:scale-105 shadow-xl hover:shadow-2xl flex items-center">
                                <span>Daftar Sekarang</span>
                                <i data-lucide="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Criteria Section -->
        <div class="lg:col-span-6">
            <div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 h-full">
                <div class="flex items-center mb-6">
                    <div class="bg-oren rounded-xl p-3 mr-4">
                        <i data-lucide="user-round" class="w-8 h-8 text-white"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800">Kriteria Pemohon</h2>
                </div>
                <div class="space-y-4">
                    <div class="flex items-center p-4 bg-orange-50 rounded-xl border-l-4 border-orange-500">
                        <div class="bg-orange-500 rounded-full p-2 mr-4">
                            <i data-lucide="id-card" class="w-5 h-5 text-white"></i>
                        </div>
                        <span class="font-medium text-gray-700">Warga DKI Jakarta (dibuktikan dengan KTP)</span>
                    </div>
                    <div class="flex items-center p-4 bg-orange-50 rounded-xl border-l-4 border-orange-500">
                        <div class="bg-orange-500 rounded-full p-2 mr-4">
                            <i data-lucide="user" class="w-5 h-5 text-white"></i>
                        </div>
                        <span class="font-medium text-gray-700">Perorangan (bukan instansi)</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-6">
            <div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 h-full">
                <div class="flex items-center mb-6">
                    <div class="bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl p-3 mr-4">
                        <i data-lucide="check-circle" class="w-8 h-8 text-white"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800">Kriteria Pra Kondisi</h2>
                </div>
                <div class="space-y-4">
                    <div class="flex items-center p-4 bg-green-50 rounded-xl border-l-4 border-green-500">
                        <div class="bg-green-500 rounded-full p-2 mr-4">
                            <i data-lucide="ruler" class="w-5 h-5 text-white"></i>
                        </div>
                        <span class="font-medium text-gray-700">Dimensi sampah maksimal 2 x 3 x 1.5 m</span>
                    </div>
                    <div class="flex items-center p-4 bg-green-50 rounded-xl border-l-4 border-green-500">
                        <div class="bg-green-500 rounded-full p-2 mr-4">
                            <i data-lucide="wrench" class="w-5 h-5 text-white"></i>
                        </div>
                        <span class="font-medium text-gray-700">Dalam kondisi sudah dibongkar</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Waste Types Section -->
        <div class="lg:col-span-6">
            <div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100">
                <div class="flex items-center mb-8">
                    <div class="bg-oren rounded-xl p-3 mr-4">
                        <i data-lucide="trash-2" class="w-8 h-8 text-white"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800">Jenis Sampah yang Dilayani</h2>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
                        <div class="flex flex-col items-center text-center gap-3">
                            <div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="bed" class="w-6 h-6"></i>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm">Tempat tidur / Kasur</span>
                        </div>
                    </div>
                    
                    <div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
                        <div class="flex flex-col items-center text-center gap-3">
                            <div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="archive" class="w-6 h-6"></i>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm">Rak / Cabinet / Lemari</span>
                        </div>
                    </div>
                    
                    <div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
                        <div class="flex flex-col items-center text-center gap-3">
                            <div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="shopping-cart" class="w-6 h-6"></i>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm">Troli / Gerobak</span>
                        </div>
                    </div>
                    
                    <div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
                        <div class="flex flex-col items-center text-center gap-3">
                            <div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="sofa" class="w-6 h-6"></i>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm">Kursi / Sofa / Bangku</span>
                        </div>
                    </div>
                    
                    <div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
                        <div class="flex flex-col items-center text-center gap-3">
                            <div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="table" class="w-6 h-6"></i>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm">Meja Makan</span>
                        </div>
                    </div>
                    
                    <div class="group bg-gradient-to-br from-orange-50 to-red-50 border-2 border-orange-200 rounded-xl p-3 hover:border-orange-400 transition-all duration-300 hover:shadow-lg">
                        <div class="flex flex-col items-center text-center gap-3">
                            <div class="bg-oren text-white rounded-full w-12 h-12 flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i data-lucide="bike" class="w-6 h-6"></i>
                            </div>
                            <span class="font-semibold text-gray-800 text-sm">Sepeda</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Process Section -->
        <div class="lg:col-span-6">
            <div class="bg-white rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 border border-gray-100 h-full">
                <div class="flex items-center mb-8">
                    <div class="bg-gradient-to-br from-teal-500 to-cyan-500 rounded-xl p-3 mr-4">
                        <i data-lucide="repeat" class="w-8 h-8 text-white"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800">Proses Penjemputan</h2>
                </div>
                <div class="space-y-6">
                    <div class="flex items-center p-4 bg-teal-50 rounded-xl border-l-4 border-teal-500">
                        <div class="bg-teal-500 rounded-full p-2 mr-4 mt-1">
                            <i data-lucide="map-pin" class="w-5 h-5 text-white"></i>
                        </div>
                        <span class="font-medium text-gray-700 leading-relaxed">Petugas akan menjemput sampah langsung ke lokasi Anda</span>
                    </div>
                    <div class="flex items-center p-4 bg-teal-50 rounded-xl border-l-4 border-teal-500">
                        <div class="bg-teal-500 rounded-full p-2 mr-4 mt-1">
                            <i data-lucide="form-input" class="w-5 h-5 text-white"></i>
                        </div>
                        <span class="font-medium text-gray-700 leading-relaxed">Pendaftaran dapat dilakukan dengan mengisi Google Form</span>
                    </div>
                </div>
            </div>
        </div>
    </div></div>