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

<div id="mega-menu-3" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
    <div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
        <a href="@Url.Action("DIKPLHD", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="database"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">DIKPLH</div>
                <p class="text-sm text-gray-500">Data dan Informasi Kinerja Pengelolaan Lingkungan Hidup.</p>
            </div>
        </a>
        <a href="@Url.Action("Peraturan", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="book-open"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Peraturan</div>
                <p class="text-sm text-gray-500">Regulasi terkait lingkungan hidup.</p>
            </div>
        </a>
        <a href="@Url.Action("LaporanKualitasAir", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="waves"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Laporan Kualitas Air</div>
                <p class="text-sm text-gray-500">Informasi tentang kualitas air.</p>
            </div>
        </a>
        <a href="@Url.Action("LaporanKeuangan", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="dollar-sign"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Laporan Keuangan</div>
                <p class="text-sm text-gray-500">Transparansi anggaran DLH.</p>
            </div>
        </a>
        <a href="@Url.Action("Kajian", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="search"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Kajian</div>
                <p class="text-sm text-gray-500">Kajian ilmiah terkait lingkungan.</p>
            </div>
        </a>
        <a href="@Url.Action("KeanekaragamanHayati", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="leaf"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Keanekaragaman Hayati</div>
                <p class="text-sm text-gray-500">Data flora dan fauna di wilayah setempat.</p>
            </div>
        </a>
        <a href="@Url.Action("GasRumahKaca", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="cloud"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Gas Rumah Kaca</div>
                <p class="text-sm text-gray-500">Data terkait emisi gas rumah kaca.</p>
            </div>
        </a>
        <a href="@Url.Action("KLHS", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="clipboard-check"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">KLHS</div>
                <p class="text-sm text-gray-500">Kajian Lingkungan Hidup Strategis.</p>
            </div>
        </a>
        <a href="@Url.Action("MonitoringEmisi", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="factory"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Monitoring Emisi Sumber Tidak Bergerak</div>
                <p class="text-sm text-gray-500">Data emisi dari sumber tetap seperti industri.</p>
            </div>
        </a>
        <a href="@Url.Action("LaporanKualitasUdara", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="wind"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">Laporan Kualitas Udara</div>
                <p class="text-sm text-gray-500">Hasil pemantauan kualitas udara.</p>
            </div>
        </a>
        <a href="@Url.Action("IKLH", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="bar-chart"></i></div>
            <div>
                <div class="font-medium text-gray-900 hover:text-orange-700">IKLH</div>
                <p class="text-sm text-gray-500">Indeks Kualitas Lingkungan Hidup.</p>
            </div>
        </a>
    </div>
</div>