@{
    ViewData["Title"] = "Beranda";
}

<!-- Hero Section -->
<section class="relative min-h-screen bg-cover bg-center overflow-hidden" style="background-image: url('/images/bg-landing-page-header.png');">
    <!-- Background overlay -->
    <div class="absolute inset-0 bg-black/50"></div>

    <!-- Hero Content -->
    <div class="relative z-10 flex items-end min-h-screen px-4 lg:px-28 pt-28 pb-48">
        <div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-20">
            <div class="flex justify-start items-center gap-8 w-full">
                <div class="max-w-[800px] pr-10 flex flex-col justify-start items-start gap-8">
                    <div class="flex flex-col justify-start items-start gap-8 w-full">
                        <!-- Badge -->
                        <div class="px-4 py-2 bg-green-50 rounded-3xl flex justify-center items-center gap-2">
                            <div class="w-4 h-4 relative">
                                <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-900 rounded-full"></div>
                            </div>
                            <div class="text-green-900 text-base font-bold font-jakarta">Portal Resmi</div>
                        </div>

                        <!-- Main Title -->
                        <div class="flex flex-col justify-start items-start gap-2 w-full">
                            <h1 class="text-white hero-title font-bold font-jakarta w-full">
                                e-Bank Sampah Jakarta
                            </h1>
                            <p class="text-white text-base sm:text-lg font-medium font-jakarta leading-7 w-full">
                                Program dari Dinas Lingkungan Hidup Provinsi Jakarta
                            </p>
                        </div>
                    </div>

                    <!-- CTA Buttons -->
                    <div class="flex flex-col sm:flex-row justify-start items-start gap-4">
                        <button class="btn-custom px-8 py-3 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors">
                            <span class="text-white text-base font-semibold font-jakarta">Pendaftaran Nasabah</span>
                            <div class="w-5 h-5 relative">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </div>
                        </button>
                        <button class="btn-custom px-8 py-3 bg-white/10 hover:bg-white/20 rounded-full border border-gray-300 flex justify-center items-center gap-2 transition-colors">
                            <span class="text-white text-base font-semibold font-jakarta">Pendaftaran Bank Sampah</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section class="px-4 lg:px-28 py-24 bg-gray-50">
    <div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-20">
        <div class="flex flex-col lg:flex-row justify-start items-center gap-20 w-full">
            <!-- Image Section -->
            <div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
                <div class="w-60 h-60 absolute bottom-0 left-0 bg-green-800 rounded-full"></div>
                <img class="w-80 h-80 lg:w-96 lg:h-96 absolute top-12 left-10 rounded-full object-cover" src="/images/trash-rounded.png" alt="Bank Sampah Image" />
                <div class="w-48 h-48 absolute top-1/2 right-10 lg:right-20 bg-white rounded-full shadow-lg flex items-center justify-center">
                    <img class="w-36 h-36" src="/images/logo.png" alt="Logo" />
                </div>
            </div>

            <!-- Content Section -->
            <div class="flex-1 flex flex-col justify-start items-start gap-8">
                <div class="flex flex-col justify-start items-start gap-4 w-full">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
                        </div>
                        <div class="text-green-800 text-base font-bold font-jakarta">Tentang Kami</div>
                    </div>

                    <div class="flex flex-col justify-start items-start gap-6 w-full">
                        <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">e-Bank Sampah</h2>
                        <p class="text-slate-700 text-lg font-normal font-jakarta leading-7">
                            e-Bank Sampah adalah sebuah platform digital berbasis website yang menghimpun data dan informasi mengenai aktivitas di Bank Sampah Induk (BSI) dan Bank Sampah Unit (BSU).
                        </p>
                        <p class="text-slate-700 text-base font-normal font-jakarta leading-normal">
                            Website ini bertujuan mempermudah nasabah, BSI, dan BSU dalam melakukan pencatatan dan pemantauan transaksi yang terjadi di Bank Sampah. e-Bank Sampah juga memberikan informasi mengenai regulasi Bank Sampah, aktivitas Bank Sampah yang menarik dan bermanfaat sehingga dapat menginspirasi pegiat Bank Sampah lainnya. Di dalam E-Bank Sampah, masyarakat dapat juga mendapatkan informasi mengenai daftar lokasi Bank Sampah yang aktif melakukan pengumpulan sampah.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Publications Section -->
<section class="px-4 lg:px-28 py-24 bg-gray-100">
    <div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-20">
        <div class="flex flex-col justify-start items-start gap-14 w-full">
            <div class="flex flex-col justify-start items-start gap-8 w-full">
                <div class="flex flex-col justify-start items-start gap-4 w-full">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-green-800 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-white rounded-full"></div>
                        </div>
                        <div class="text-white text-base font-bold font-jakarta">Posting Terkini</div>
                    </div>
                    <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Publikasi</h2>
                </div>
            </div>

            <!-- Articles Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
                <!-- Article 1 -->
                <article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
                    <img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-01.png" alt="Article Image" />
                    <div class="flex flex-col justify-start items-start gap-2 w-full">
                        <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
                        </h3>
                        <p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
                            JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah sampah dan bertransaksi di bank sampah.
                        </p>
                    </div>
                    <div class="pt-1 pb-1 flex justify-start items-start w-full">
                        <a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
                            <span class="text-base font-semibold font-jakarta">Selengkapnya</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    </div>
                </article>

                <!-- Article 2 -->
                <article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
                    <img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-02.png" alt="Article Image" />
                    <div class="flex flex-col justify-start items-start gap-2 w-full">
                        <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
                            Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta
                        </h3>
                        <p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
                            JAKARTA — Menteri Lingkungan Hidup, Hanif Faisol Nurofiq, mendukung penuh langkah Pemerintah Provinsi DKI Jakarta untuk menerapkan Retribusi Pelayanan Kebersihan mulai 1 Januari 2025. Dukungan ini disampaikan Menteri Hanif dalam acara "Kolaborasi Bersih Sampah Jakarta - Indonesia Bersih" yang berlangsung di Hutan Kota GBK, Jakarta, Minggu (17/11).
                        </p>
                    </div>
                    <div class="pt-1 pb-1 flex justify-start items-start w-full">
                        <a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
                            <span class="text-base font-semibold font-jakarta">Selengkapnya</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    </div>
                </article>

                <!-- Article 3 -->
                <article class="p-5 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-4">
                    <img class="w-full h-64 rounded-lg object-cover" src="/images/publikasi/image-03.png" alt="Article Image" />
                    <div class="flex flex-col justify-start items-start gap-2 w-full">
                        <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">
                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
                        </h3>
                        <p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
                            JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah sampah dan bertransaksi di bank sampah.
                        </p>
                    </div>
                    <div class="pt-1 pb-1 flex justify-start items-start w-full">
                        <a href="#" class="flex justify-center items-center gap-2 text-green-800 hover:text-green-700 transition-colors">
                            <span class="text-base font-semibold font-jakarta">Selengkapnya</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>

<!-- Regulations Section -->
<section class="px-4 lg:px-28 py-24 bg-white">
    <div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-12">
        <div class="flex flex-col lg:flex-row justify-start items-center gap-12 w-full">
            <!-- Content Section -->
            <div class="flex-1 flex flex-col justify-start items-start gap-8">
                <div class="flex flex-col justify-start items-start gap-4 w-full">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
                        </div>
                        <div class="text-green-800 text-base font-bold font-jakarta">Peraturan</div>
                    </div>

                    <div class="flex flex-col justify-start items-start gap-6 w-full">
                        <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Regulasi Terkait</h2>

                        <!-- Regulation Items -->
                        <div class="flex flex-col justify-start items-start gap-4 w-full">
                            <!-- Regulation 1 -->
                            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                <div class="flex justify-start items-start gap-6 w-full">
                                    <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                        <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Permen LHK No 14/2021</h3>
                                        <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
                                            Perturan Menteri Lingkungan Hidup Nomor 14 Tahun 2021
                                        </p>
                                    </div>
                                    <div class="h-14 rounded-full flex flex-col justify-center items-center">
                                        <svg class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                                        </svg>
                                    </div>
                                </div>
                                <p class="text-slate-700 text-base font-normal font-jakarta leading-normal w-full">
                                    Peraturan Gubernur Nomor 77 Tahun 2020 mengatur tentang pengelolaan sampah dari sumbernya melalui peran aktif warga di tingkat RT dan RW, dengan tujuan mengurangi volume sampah yang masuk ke TPA.
                                </p>
                                <div class="flex justify-start items-start gap-2 w-full flex-wrap">
                                    <div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                                        <div class="w-4 h-4 relative">
                                            <div class="w-3 h-3 absolute top-[1px] left-[2px] bg-green-800 rounded-full"></div>
                                        </div>
                                        <span class="text-green-800 text-sm font-bold font-jakarta">Ditetapkan: 13 Juli 2020</span>
                                    </div>
                                    <div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                                        <div class="w-4 h-4 relative">
                                            <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
                                        </div>
                                        <span class="text-green-800 text-sm font-bold font-jakarta">Status: Berlaku</span>
                                    </div>
                                    <div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                                        <div class="w-4 h-4 relative">
                                            <div class="w-3 h-3 absolute top-[1.5px] left-[2px] bg-green-800 rounded-full"></div>
                                        </div>
                                        <span class="text-green-800 text-sm font-bold font-jakarta">Unduh PDF</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Regulation 2 -->
                            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                <div class="flex justify-start items-start gap-6 w-full">
                                    <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                        <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Pergub DKI Jakarta No. 77/2020</h3>
                                        <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
                                            Peraturan Gubernur Provinsi KDI Jakarta Nomor 77 Tahun 2020
                                        </p>
                                    </div>
                                    <div class="h-14 rounded-full flex flex-col justify-center items-center">
                                        <svg class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <!-- Regulation 3 -->
                            <div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                <div class="flex justify-start items-start gap-6 w-full">
                                    <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                        <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Pergub DKI Jakarta No 33/2021</h3>
                                        <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
                                            Peraturan Gubernur Provinsi KDI Jakarta Nomor 33 Tahun 2021
                                        </p>
                                    </div>
                                    <div class="h-14 rounded-full flex flex-col justify-center items-center">
                                        <svg class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Image Section -->
            <div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
                <div class="w-60 h-[552px] absolute top-0 right-0 bg-green-800"></div>
                <img class="w-80 h-[552px] lg:w-96 lg:h-[552px] absolute top-0 right-10 object-cover" src="/images/regulasi.png" alt="Regulation Image" />
                <div class="w-48 h-48 absolute bottom-[176px] left-[30px] bg-white shadow-lg flex items-center justify-center">
                    <img class="w-32 h-32" src="/images/logo.png" alt="Regulation Logo" />
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Location Map Section -->
<section class="p-4 lg:p-28 bg-gray-100">
    <div class="max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-10">
        <div class="flex flex-col justify-start items-start gap-8 w-full">
            <div class="flex flex-col justify-start items-start gap-4 w-full">
                <!-- Badge -->
                <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                    <div class="w-4 h-4 relative">
                        <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
                    </div>
                    <div class="text-green-800 text-base font-bold font-jakarta">Bank Sampah</div>
                </div>
                <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Lokasi Bank Sampah</h2>
            </div>
        </div>

        <!-- Map Container -->
        <div class="relative h-[400px] lg:h-[624px] w-full flex justify-center items-start gap-4">
            <div class="flex-1 h-full p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
                <!-- Map placeholder with markers -->
                <div class="w-full flex-1 relative bg-gray-200 rounded-lg overflow-hidden">
                    <img class="w-full h-full object-cover" src="/images/maps.png" alt="Jakarta Map" />

                    <!-- Map Markers -->
                    <div class="absolute inset-0">
                        <!-- Sample markers positioned across Jakarta -->
                        <div class="absolute top-[30%] left-[15%] p-2 bg-green-800 rounded-full map-marker">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                        </div>
                        <div class="absolute top-[25%] left-[35%] p-2 bg-green-800 rounded-full map-marker">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                        </div>
                        <div class="absolute top-[40%] left-[50%] p-2 bg-green-800 rounded-full map-marker">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                        </div>
                        <div class="absolute top-[55%] left-[25%] p-2 bg-green-800 rounded-full map-marker">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                        </div>
                        <div class="absolute top-[35%] left-[70%] p-2 bg-green-800 rounded-full map-marker">
                            <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                            </svg>
                        </div>
                        <!-- More markers can be added here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Help Desk Section -->
<section class="px-4 lg:px-28 py-24 bg-gray-50">
    <div class="w-full max-w-[1280px] mx-auto flex flex-col justify-center items-start gap-20">
        <div class="flex flex-col lg:flex-row justify-start items-center gap-20 w-full">
            <!-- Image Section -->
            <div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
                <div class="w-60 h-60 absolute bottom-0 left-0 bg-green-800 rounded-full"></div>
                <img class="w-80 h-80 lg:w-96 lg:h-96 absolute bottom-12 right-20 rounded-full object-cover" src="/images/call-center.png" alt="Help Desk Image" />
                <div class="w-48 h-48 absolute top-1/2 right-0 lg:right-0 bg-white rounded-full shadow-lg flex items-center justify-center">
                    <img class="w-36 h-36" src="/images/logo.png" alt="Help Desk Logo" />
                </div>
            </div>

            <!-- Content Section -->
            <div class="flex-1 flex flex-col justify-start items-start gap-8">
                <div class="flex flex-col justify-start items-start gap-4 w-full">
                    <!-- Badge -->
                    <div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
                        <div class="w-4 h-4 relative">
                            <div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
                        </div>
                        <div class="text-green-800 text-base font-bold font-jakarta">Ada kendala terkait Bank Sampah?</div>
                    </div>

                    <div class="flex flex-col justify-start items-start gap-6 w-full">
                        <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Hubungi Help Desk kami</h2>

                        <!-- Contact Grid -->
                        <div class="flex flex-col lg:flex-row justify-start items-start gap-6 w-full">
                            <!-- Left Column -->
                            <div class="flex-1 flex flex-col justify-start items-start gap-4">
                                <!-- Admin 1 -->
                                <div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                    <div class="flex justify-start items-center gap-6 w-full">
                                        <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                            <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 1</h3>
                                            <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
                                        </div>
                                        <button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
                                            <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <!-- Admin 3 -->
                                <div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                    <div class="flex justify-start items-center gap-6 w-full">
                                        <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                            <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 3</h3>
                                            <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
                                        </div>
                                        <button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
                                            <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <!-- Admin 5 -->
                                <div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                    <div class="flex justify-start items-center gap-6 w-full">
                                        <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                            <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 5</h3>
                                            <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
                                        </div>
                                        <button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
                                            <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Right Column -->
                            <div class="flex-1 flex flex-col justify-start items-start gap-4">
                                <!-- Admin 2 -->
                                <div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                    <div class="flex justify-start items-center gap-6 w-full">
                                        <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                            <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 2</h3>
                                            <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
                                        </div>
                                        <button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
                                            <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <!-- Admin 4 -->
                                <div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                    <div class="flex justify-start items-center gap-6 w-full">
                                        <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                            <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 4</h3>
                                            <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
                                        </div>
                                        <button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
                                            <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <!-- Admin 6 -->
                                <div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
                                    <div class="flex justify-start items-center gap-6 w-full">
                                        <div class="flex-1 flex flex-col justify-start items-start gap-0.5">
                                            <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 6</h3>
                                            <p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
                                        </div>
                                        <button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
                                            <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Contact Info -->
                <div class="w-full">
                    <p class="text-slate-700 text-base font-jakarta">
                        <span class="font-semibold">Atau dapat langsung menghubungi:</span><br/>
                        <span class="font-normal">Bidang Pengurangan dan Penanganan Sampah<br/>
                        Dinas Lingkungan Hidup Provinsi DKI Jakarta<br/>
                        Jl. Mandala V Cililitan Kramatjati Jakarta Timur</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

@section Scripts {
    <script>
        // Smooth scrolling untuk anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });

        // Animation on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in');
                }
            });
        }, observerOptions);

        // Observe all sections
        document.querySelectorAll('section').forEach(section => {
            observer.observe(section);
        });
    </script>
}