@{
    Layout = "_Layout";

    ViewData["Title"] = "Amdal - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Analisis Mengenai Dampak Lingkungan untuk menilai dan meminimalkan dampak negatif proyek terhadap lingkungan hidup.";
    ViewData["Keywords"] = "Amdal, Analisis Mengenai Dampak Lingkungan, Kajian Lingkungan, Izin Lingkungan, Dokumen Lingkungan, UKL-UPL, RKL-RPL, Studi Kelayakan Lingkungan, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Amdal - Analisis Mengenai Dampak Lingkungan | Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Layanan Amdal untuk analisis dampak lingkungan proyek pembangunan. Konsultasi dokumen lingkungan, izin lingkungan, dan studi kelayakan lingkungan di DKI Jakarta.";
    ViewData["TwitterTitle"] = "Amdal - Analisis Mengenai Dampak Lingkungan | Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Layanan Amdal untuk analisis dampak lingkungan proyek pembangunan. Konsultasi dokumen lingkungan, izin lingkungan, dan studi kelayakan lingkungan di DKI Jakarta.";

    // Breadcumb
    ViewData["BreadcrumbText"] = "AMDAL";
    ViewData["TitleBeforeHighlight"] = "ANALISIS MENGENAI";
    ViewData["TitleHighlight"] = "DAMPAK LINGKUNGAN";
}

<!-- 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 AMDAL</h2>
        <p class="text-gray-600 max-w-2xl mx-auto leading-relaxed">
            Analisis Mengenai Dampak Lingkungan untuk menilai dan meminimalkan dampak negatif proyek terhadap lingkungan hidup
        </p>
    </div>

    <!-- Services Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Pengumuman AMDAL -->
        <div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
                    <i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="badge-info"></i>
                </div>
                <h5 class="font-semibold text-lg mb-3 text-gray-800">Pengumuman AMDAL</h5>
                <p class="text-gray-600 text-sm mb-4 leading-relaxed">Informasi terkini mengenai pengumuman dan pemberitahuan AMDAL</p>
                <a href="https://lingkunganhidup.jakarta.go.id/files/amdal/PengumumanAMDAL_PMIKramat081122.pdf" target="_blank" class="block">
                    <button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg cursor-pointer">
                        Lihat Detail
                    </button>
                </a>
            </div>
        </div>

        <!-- Konsultasi Online Amdal -->
        <div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
                    <i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="video"></i>
                </div>
                <h5 class="font-semibold text-lg mb-3 text-gray-800">Konsultasi Online</h5>
                <p class="text-gray-600 text-sm mb-4 leading-relaxed">Layanan konsultasi AMDAL secara online untuk kemudahan akses</p>
                <a href="https://lingkunganhidup.jakarta.go.id/files/amdal/PengumumanAMDAL_PMIKramat081122.pdf" target="_blank" class="block">
                    <button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg">
                        Mulai Konsultasi
                    </button>
                </a>
            </div>
        </div>

        <!-- Form Registrasi Konsultasi Tatap Muka -->
        <div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
                    <i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="users"></i>
                </div>
                <h5 class="font-semibold text-lg mb-3 text-gray-800">Konsultasi Tatap Muka</h5>
                <p class="text-gray-600 text-sm mb-4 leading-relaxed">Registrasi untuk konsultasi langsung dengan tim ahli</p>
                <a href="#" class="block">
                    <button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg">
                        Daftar Sekarang
                    </button>
                </a>
            </div>
        </div>

        <!-- Jadwal Pembahasan Dokumen Lingkungan -->
        <div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
                    <i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="calendar-days"></i>
                </div>
                <h5 class="font-semibold text-lg mb-3 text-gray-800">Jadwal Pembahasan</h5>
                <p class="text-gray-600 text-sm mb-4 leading-relaxed">Timeline pembahasan dokumen lingkungan yang sedang berlangsung</p>
                <a href="https://docs.google.com/spreadsheets/d/11hbR_vXeeKlBH1dT8flvyCzxiiVSwIFkngO-4ANAVAg/edit?gid=0#gid=0" target="_blank" class="block">
                    <button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg">
                        Lihat Jadwal
                    </button>
                </a>
            </div>
        </div>

        <!-- Proses Persetujuan Lingkungan -->
        <div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
                    <i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="clipboard-check"></i>
                </div>
                <h5 class="font-semibold text-lg mb-3 text-gray-800">Proses Persetujuan Lingkungan</h5>
                <p class="text-gray-600 text-sm mb-4 leading-relaxed">Status dan tahapan Persetujuan Dokumen Lingkungan</p>
                <a href="https://docs.google.com/spreadsheets/d/19d28Jre-0iC-KPOGzgWlPkP-aGctGP8NUcZ96M81VKE/edit?gid=1567129330#gid=1567129330" target="_blank" class="block">
                    <button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg">
                        Cek Status
                    </button>
                </a>
            </div>
        </div>

        <!-- FAQ -->
        <div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
                    <i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="help-circle"></i>
                </div>
                <h5 class="font-semibold text-lg mb-3 text-gray-800">FAQ</h5>
                <p class="text-gray-600 text-sm mb-4 leading-relaxed">Pertanyaan yang sering diajukan seputar layanan AMDAL</p>
                <a href="#" class="block">
                    <button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg">
                        Lihat FAQ
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>