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

<div id="mega-menu-3" 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 - 6 items -->
        <div class="grid grid-cols-2 md:grid-cols-6 gap-4">
            <a href="@Url.Action("DIKPLHD", "Publikasi")" 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">DIKPLH</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data dan Informasi Kinerja Pengelolaan Lingkungan Hidup</p>
            </a>
            
            <a href="@Url.Action("Peraturan", "Publikasi")" 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="book-open"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Peraturan</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Regulasi terkait lingkungan hidup</p>
            </a>
            
            <a href="@Url.Action("LaporanKualitasAir", "Publikasi")" 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="waves"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Laporan Kualitas Air</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Informasi tentang kualitas air</p>
            </a>
            
            <a href="@Url.Action("LaporanKeuangan", "Publikasi")" 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="dollar-sign"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Laporan Keuangan</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Transparansi anggaran DLH</p>
            </a>
            
            <a href="@Url.Action("Kajian", "Publikasi")" 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="search"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Kajian</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kajian ilmiah terkait lingkungan</p>
            </a>
            
            <a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" 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">Keanekaragaman Hayati</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data flora dan fauna di wilayah setempat</p>
            </a>
        </div>

        <!-- Second row - 6 items -->
        <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mt-4">
            <a href="@Url.Action("GasRumahKaca", "Publikasi")" 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="cloud"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Gas Rumah Kaca</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data terkait emisi gas rumah kaca</p>
            </a>
            
            <a href="@Url.Action("KLHS", "Publikasi")" 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="clipboard-check"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">KLHS</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Kajian Lingkungan Hidup Strategis</p>
            </a>
            
            <a href="@Url.Action("MonitoringEmisi", "Publikasi")" 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="factory"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Monitoring Emisi</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data emisi dari sumber tetap seperti industri</p>
            </a>
            
            <a href="@Url.Action("LaporanKualitasUdara", "Publikasi")" 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="wind"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Laporan Kualitas Udara</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Hasil pemantauan kualitas udara</p>
            </a>
            
            <a href="@Url.Action("IKLH", "Publikasi")" 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="bar-chart"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">IKLH</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Indeks Kualitas Lingkungan Hidup</p>
            </a>
            
            <a href="@Url.Action("DataTambahan", "Publikasi")" 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="chart-line"></i>
                </div>
                <div class="font-medium text-gray-900 group-hover:text-orange-700 transition-colors duration-300 mb-1">Data Lainnya</div>
                <p class="text-xs text-gray-500 group-hover:text-gray-600 leading-tight">Data publikasi tambahan</p>
            </a>
        </div>
    </div>
</div>

<script>
// Define mobile template for Publikasi Data menu
window.publikasiDataMobileContent = `
    <div class="grid grid-cols-2 gap-2 p-4 border-t border-orange-100">
        <a href="@Url.Action("DIKPLHD", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="database"></i>
            <span class="text-xs font-medium text-gray-900 text-center">DIKPLHD</span>
        </a>
        <a href="@Url.Action("Peraturan", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="book-open"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Peraturan</span>
        </a>
        <a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="waves"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Kualitas Air</span>
        </a>
        <a href="@Url.Action("LaporanKeuangan", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="dollar-sign"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Lap. Keuangan</span>
        </a>
        <a href="@Url.Action("Kajian", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="search"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Kajian</span>
        </a>
        <a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="leaf"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Keanekaragaman</span>
        </a>
        <a href="@Url.Action("GasRumahKaca", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="cloud"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Gas Rumah Kaca</span>
        </a>
        <a href="@Url.Action("KLHS", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="clipboard-check"></i>
            <span class="text-xs font-medium text-gray-900 text-center">KLHS</span>
        </a>
        <a href="@Url.Action("LaporanKualitasUdara", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="wind"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Kualitas Udara</span>
        </a>
        <a href="@Url.Action("IKLH", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="bar-chart"></i>
            <span class="text-xs font-medium text-gray-900 text-center">IKLH</span>
        </a>
        <a href="@Url.Action("MonitoringEmisi", "Publikasi")" class="flex flex-col items-center p-3 bg-gradient-to-br from-orange-50 to-orange-100 rounded-lg hover:from-orange-100 hover:to-orange-200 transition-all duration-300 active:scale-95">
            <i class="w-5 h-5 text-orange-600 mb-1" data-lucide="factory"></i>
            <span class="text-xs font-medium text-gray-900 text-center">Mon. Emisi</span>
        </a>
    </div>
`;
</script>