@{
    ViewData["Title"] = "Helpdesk";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!-- Hero Section -->
<section id="home" class="relative bg-cover bg-center overflow-hidden bg-black">
    <!-- Background overlay -->
    <div class="absolute inset-0 bg-black/50"></div>

    <!-- Hero Content -->
    <div class="relative z-10 flex items-center min-h-96 px-4 lg:px-28 py-20">
        <div class="w-full max-w-7xl mx-auto flex flex-col justify-center items-center gap-20">
            <div class="flex justify-center items-center gap-8 w-full">
                <div class="max-w-[800px] pr-10 flex flex-col justify-center items-center gap-8">
                    <div class="flex flex-col justify-center items-center gap-8 w-full">

                        <!-- Main Title -->
                        <div class="flex flex-col justify-center items-center gap-2 w-full">
                            <h1 class="text-white text-5xl text-center font-semibold font-jakarta w-full">
                                Help Desk
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="panduan_video" class="px-4 lg:px-28 py-24 bg-white">
    <div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-12">
        <!-- Content Section -->
        <div class="flex flex-col justify-start items-start gap-4 w-full">
            <!-- Regulation Items -->
            <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">
                    Panduan Video
                </h2>

            <!-- Cards -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-10 justify-between">
                <div class="card bg-base-100 relative group">
                    <figure class="relative">
                        <img src="/images/publikasi/image-02.png"
                            alt="Kumpulkan"
                            class="brightness-100 transition duration-300 group-hover:blur-sm" />

                        <!-- Tombol Play -->
                        <a href="#"
                        class="absolute inset-0 flex items-center justify-center">
                            <div class="bg-black/50 hover:bg-black/60 transition rounded-full p-4">
                                <i class="ph ph-play text-white text-4xl"></i>
                            </div>
                        </a>
                    </figure>

                    <div class="card-body">
                        <h2 class="card-title text-center">
                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
                        </h2>
                    </div>
                </div>
                <div class="card bg-base-100 relative group">
                    <figure class="relative">
                        <img src="/images/publikasi/image-02.png"
                            alt="Kumpulkan"
                            class="brightness-100 transition duration-300 group-hover:blur-sm" />

                        <!-- Tombol Play -->
                        <a href="#"
                        class="absolute inset-0 flex items-center justify-center">
                            <div class="bg-black/50 hover:bg-black/60 transition rounded-full p-4">
                                <i class="ph ph-play text-white text-4xl"></i>
                            </div>
                        </a>
                    </figure>

                    <div class="card-body">
                        <h2 class="card-title text-center">
                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
                        </h2>
                    </div>
                </div>
                <div class="card bg-base-100 relative group">
                    <figure class="relative">
                        <img src="/images/publikasi/image-02.png"
                            alt="Kumpulkan"
                            class="brightness-100 transition duration-300 group-hover:blur-sm" />

                        <!-- Tombol Play -->
                        <a href="#"
                        class="absolute inset-0 flex items-center justify-center">
                            <div class="bg-black/50 hover:bg-black/60 transition rounded-full p-4">
                                <i class="ph ph-play text-white text-4xl"></i>
                            </div>
                        </a>
                    </figure>

                    <div class="card-body">
                        <h2 class="card-title text-center">
                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
                        </h2>
                    </div>
                </div>
                <div class="card bg-base-100 relative group">
                    <figure class="relative">
                        <img src="/images/publikasi/image-02.png"
                            alt="Kumpulkan"
                            class="brightness-100 transition duration-300 group-hover:blur-sm" />

                        <!-- Tombol Play -->
                        <a href="#"
                        class="absolute inset-0 flex items-center justify-center">
                            <div class="bg-black/50 hover:bg-black/60 transition rounded-full p-4">
                                <i class="ph ph-play text-white text-4xl"></i>
                            </div>
                        </a>
                    </figure>

                    <div class="card-body">
                        <h2 class="card-title text-center">
                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="unduh_panduan" class="px-4 lg:px-28 py-24 bg-white">
    <div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-12">
        <!-- Content Section -->
        <div class="flex flex-col justify-start items-start gap-4 w-full">
            <!-- Regulation Items -->
            <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">
                    Unduh Panduan
                </h2>
                <div class="w-full bg-gray-100 rounded-xl p-6 flex items-center justify-between border border-gray-300 transition hover:bg-black hover:text-white hover:border-white group">
                    <!-- Kiri -->
                    <div>
                        <h3 class="text-xl font-bold group-hover:text-white">
                            Pergub DKI Jakarta No. 77/2020
                        </h3>
                        <p class="text-gray-600 group-hover:text-gray-200">
                            Peraturan Gubernur Provinsi DKI Jakarta Nomor 77 Tahun 2020
                        </p>
                    </div>

                    <!-- Kanan -->
                    <a href="#"
                    class="btn bg-black text-white rounded-full px-5 py-2 flex items-center gap-2">
                        <i class="ph ph-download-simple text-lg"></i>
                        Unduh PDF
                    </a>
                </div>
                <div class="w-full bg-gray-100 rounded-xl p-6 flex items-center justify-between border border-gray-300 transition hover:bg-black hover:text-white hover:border-white group">
                    <!-- Kiri -->
                    <div>
                        <h3 class="text-xl font-bold group-hover:text-white">
                            Pergub DKI Jakarta No. 77/2020
                        </h3>
                        <p class="text-gray-600 group-hover:text-gray-200">
                            Peraturan Gubernur Provinsi DKI Jakarta Nomor 77 Tahun 2020
                        </p>
                    </div>

                    <!-- Kanan -->
                    <a href="#"
                    class="btn bg-black text-white rounded-full px-5 py-2 flex items-center gap-2">
                        <i class="ph ph-download-simple text-lg"></i>
                        Unduh PDF
                    </a>
                </div>
                <div class="w-full bg-gray-100 rounded-xl p-6 flex items-center justify-between border border-gray-300 transition hover:bg-black hover:text-white hover:border-white group">
                    <!-- Kiri -->
                    <div>
                        <h3 class="text-xl font-bold group-hover:text-white">
                            Pergub DKI Jakarta No. 77/2020
                        </h3>
                        <p class="text-gray-600 group-hover:text-gray-200">
                            Peraturan Gubernur Provinsi DKI Jakarta Nomor 77 Tahun 2020
                        </p>
                    </div>

                    <!-- Kanan -->
                    <a href="#"
                    class="btn bg-black text-white rounded-full px-5 py-2 flex items-center gap-2">
                        <i class="ph ph-download-simple text-lg"></i>
                        Unduh PDF
                    </a>
                </div>
                
            </div>
            
        </div>
    </div>
</section>

<section id="faq" class="px-4 lg:px-28 py-24 bg-gray-50">
    <div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-12">
        <!-- Content Section -->
        <div class="flex flex-col justify-start items-start gap-4 w-full">
            <!-- Regulation Items -->
            <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">
                    Frequentyl Ask Question (FAQ)
                </h2>

                <div class="bg-base-100 border-base-300 collapse border collapse-arrow">
                    <input type="checkbox" class="peer" />
                    
                    <div class="collapse-title">
                        <span class="font-bold text-xl">Permen LHK No 14/2021</span>
                        <p class="text-gray-500">
                            Perturan Menteri Lingkungan Hidup Nomor 14 Tahun 2021
                        </p>
                    </div>

                    <div class="collapse-content">
                        <p>
                            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>
                </div>

                <div class="bg-base-100 border-base-300 collapse collapse-close border collapse-arrow">
                    <div class="collapse-title peer-checked:bg-neutral peer-checked:text-neutral-content">
                        <span class="font-bold text-xl">Pergub DKI Jakarta No. 77/2020</span>
                        <p class="text-gray-500 peer-checked:text-white">
                            Peraturan Gubernur Provinsi KDI Jakarta Nomor 77 Tahun 2020
                        </p>
                    </div>
                </div>

                <div class="bg-base-100 border-base-300 collapse collapse-close border collapse-arrow">
                    <div class="collapse-title peer-checked:bg-neutral peer-checked:text-neutral-content">
                        <span class="font-bold text-xl">Pergub DKI Jakarta No 33/2021</span>
                        <p class="text-gray-500 peer-checked:text-white">
                            Peraturan Gubernur Provinsi KDI Jakarta Nomor 33 Tahun 2021
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>