@using InfiniLore.Lucide
@addTagHelper *, InfiniLore.Lucide

<div id="mega-menu-4" class="hidden absolute left-0 w-full bg-white shadow-xl border-t border-orange-200 transition-all duration-300 z-40">
    <div class="max-w-7xl mx-auto px-4 py-6">
        <!-- First row - 4 items -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="@Url.Action("Amdal", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="leaf"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">AMDAL</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Analisis Dampak Lingkungan</p>
            </a>
            
            <a href="https://ewaste.dinaslhdki.id/" target="_blank" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="smartphone"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Penjemputan e-Waste</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Layanan pengumpulan sampah elektronik</p>
            </a>
            
            <a href="@Url.Action("Lab", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="flask-conical"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Uji Sampel Laboratorium</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pengujian kualitas lingkungan hidup</p>
            </a>
            
            <a href="@Url.Action("BusToilet", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="bus"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Bus Toilet</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Fasilitas toilet keliling untuk kegiatan umum</p>
            </a>
        </div>

        <!-- Second row - 4 items -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
            <a href="https://bpsrw.dinaslhdki.id/" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="database"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">BPS-RW</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Basis data lingkungan hidup tingkat Rukun Warga</p>
            </a>
            
            <a href="@Url.Action("BulkyWaste", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Bulky Waste</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Layanan khusus pengangkutan sampah besar</p>
            </a>
            
            <a href="@Url.Action("Ppid", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="file-text"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">PPID</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Pejabat Pengelola Informasi dan Dokumentasi</p>
            </a>
            
            <a href="@Url.Action("Whistleblowing", "Layanan")" class="flex flex-col items-center p-4 rounded-lg hover:bg-orange-50 transition-all duration-300 group text-center">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center shadow group-hover:scale-110 transition-transform duration-300 mb-3">
                    <i class="w-6 h-6 text-white" data-lucide="alert-triangle"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Whistleblowing System</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Sarana pelaporan pelanggaran terkait lingkungan</p>
            </a>
        </div>
    </div>
</div>

<script>
// Define mobile template for Layanan section
window.layananMobileContent = `
    <div class="space-y-3 max-h-[60vh] overflow-y-auto pb-4" style="scrollbar-width: thin; scrollbar-color: #f97316 #f3f4f6;">
        <a href="@Url.Action("Amdal", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="leaf"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">AMDAL</span>
                <p class="text-sm text-gray-600">Analisis Dampak Lingkungan</p>
            </div>
        </a>
        <a href="https://ewaste.dinaslhdki.id/" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="smartphone"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">Penjemputan e-Waste</span>
                <p class="text-sm text-gray-600">Layanan pengumpulan sampah elektronik</p>
            </div>
        </a>
        <a href="@Url.Action("Lab", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="flask-conical"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">Uji Sampel Laboratorium</span>
                <p class="text-sm text-gray-600">Pengujian kualitas lingkungan hidup</p>
            </div>
        </a>
        <a href="@Url.Action("BusToilet", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="bus"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">Bus Toilet</span>
                <p class="text-sm text-gray-600">Fasilitas toilet keliling untuk kegiatan umum</p>
            </div>
        </a>
        <a href="https://banksampah.jakarta.go.id/" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="database"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">Bank Sampah</span>
                <p class="text-sm text-gray-600">Platform digital untuk data aktivitas Bank Sampah Induk dan Unit</p>
            </div>
        </a>
        <a href="@Url.Action("BulkyWaste", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="trash-2"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">Bulky Waste</span>
                <p class="text-sm text-gray-600">Layanan khusus pengangkutan sampah besar</p>
            </div>
        </a>
        <a href="@Url.Action("Ppid", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="file-text"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">PPID</span>
                <p class="text-sm text-gray-600">Pejabat Pengelola Informasi dan Dokumentasi</p>
            </div>
        </a>
        <a href="@Url.Action("Whistleblowing", "Layanan")" class="flex items-center gap-4 p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="w-6 h-6 text-white" data-lucide="alert-triangle"></i>
            </div>
            <div>
                <span class="font-medium text-gray-900">Whistleblowing System</span>
                <p class="text-sm text-gray-600">Sarana pelaporan pelanggaran terkait lingkungan</p>
            </div>
        </a>
    </div>
`;
</script>