@{
    ViewData["Title"] = "BPS-RW Jakarta - Panduan";
}

<!-- Panduan Section -->
<section class="w-full px-4 lg:px-28 xl:px-48 py-12 lg:py-18 bg-white">
    <div class="w-full mx-auto gap-10">
        <div class="inline-flex px-4 py-2 bg-primary-50 rounded-full mb-4">
            <div class="flex items-center gap-2">
                <div class="w-2 h-2 bg-primary-500 rounded-full"></div>
                <span class="text-primary-500 text-base font-semibold font-jakarta">BPS RW</span>
            </div>
        </div>
        <h1 class="text-gray-900 text-3xl lg:text-5xl font-bold font-jakarta mb-4">Panduan</h1>
        <p class="text-gray-500 text-lg font-normal font-jakarta leading-relaxed max-w-3xl">
            Di sini anda bisa melihat segala macam panduan yang berguna bagi Anda untuk mengerti cara menggunakan
            aplikasi ini dan mengelola BPS-RW.
        </p>
    </div>
</section>

<!-- Video Panduan Section -->
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
    <div class="w-full mx-auto">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-gray-900 text-2xl lg:text-3xl font-semibold font-jakarta">Video Panduan</h2>
            <div class="flex gap-3">
                <button id="videoPrevBtn"
                    class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
                    <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                        </path>
                    </svg>
                </button>
                <button id="videoNextBtn"
                    class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
                    <svg class="w-5 h-5 text-gray-700" 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>
                </button>
            </div>
        </div>

        <div class="relative overflow-hidden">
            <div id="videoCarousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out gap-5">
            </div>
        </div>
    </div>
</section>

<!-- E-Book Section -->
<section class="w-full px-4 lg:px-28 xl:px-48 pb-16 lg:pb-24 bg-gray-100">
    <div class="w-full mx-auto">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-gray-900 text-2xl lg:text-3xl font-semibold font-jakarta">E-Book</h2>
            <div class="flex gap-3">
                <button id="ebookPrevBtn"
                    class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
                    <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                        </path>
                    </svg>
                </button>
                <button id="ebookNextBtn"
                    class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
                    <svg class="w-5 h-5 text-gray-700" 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>
                </button>
            </div>
        </div>

        <div class="relative overflow-hidden">
            <div id="ebookCarousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out gap-5">
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-white">
    <div class="w-full mx-auto">
        <div class="mb-8">
            <div class="inline-flex px-4 py-2 bg-primary-50 rounded-full mb-6">
                <div class="flex items-center gap-2">
                    <div class="w-2 h-2 bg-primary-500 rounded-full"></div>
                    <span class="text-primary-500 text-base font-semibold font-jakarta">BPS RW</span>
                </div>
            </div>
            <h2 class="text-gray-900 text-3xl lg:text-5xl font-bold font-jakarta mb-4">Frequently Asked Question</h2>
            <p class="text-slate-500 text-lg font-normal font-jakarta leading-relaxed max-w-3xl">
                Temukan jawaban atas pertanyaan yang sering diajukan seputar program BPS-RW Jakarta.
            </p>
        </div>

        <div id="faqAccordion" class="space-y-0 border-t border-gray-200">
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="kontak" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
    <div class="w-full mx-auto">
        <div class="mb-10">
            <div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-2 h-2 bg-primary-700 rounded-full"></div>
                    <span class="text-primary-700 text-base font-semibold font-jakarta">Hubungi Kami</span>
                </div>
            </div>
            <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta">Informasi Kontak</h2>
        </div>

        <!-- Contact Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Phone Card -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
                <div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M18.0338 5.741C18.0677 5.61409 18.1263 5.49511 18.2063 5.39086C18.2862 5.28661 18.3859 5.19914 18.4997 5.13344C18.6134 5.06773 18.739 5.02509 18.8693 5.00794C18.9995 4.99079 19.1319 4.99948 19.2588 5.0335C21.1126 5.51718 22.804 6.4863 24.1587 7.84104C25.5135 9.19578 26.4826 10.8872 26.9663 12.741C27.0003 12.8679 27.009 13.0002 26.9918 13.1305C26.9747 13.2607 26.932 13.3863 26.8663 13.5001C26.8006 13.6138 26.7131 13.7135 26.6089 13.7935C26.5047 13.8734 26.3857 13.9321 26.2588 13.966C26.1743 13.9882 26.0873 13.9995 26 13.9997C25.7798 13.9998 25.5657 13.9272 25.391 13.7932C25.2163 13.6591 25.0907 13.4712 25.0338 13.2585C24.6395 11.7449 23.8486 10.3639 22.7428 9.2578C21.6369 8.15171 20.256 7.36059 18.7425 6.966C18.6155 6.93219 18.4964 6.87366 18.392 6.79378C18.2876 6.71389 18.2 6.61421 18.1342 6.50044C18.0683 6.38666 18.0256 6.26103 18.0084 6.13071C17.9911 6.0004 17.9998 5.86797 18.0338 5.741ZM17.7425 10.966C19.4663 11.426 20.5738 12.5347 21.0338 14.2585C21.0907 14.4712 21.2163 14.6591 21.391 14.7932C21.5657 14.9272 21.7798 14.9998 22 14.9997C22.0873 14.9995 22.1743 14.9882 22.2588 14.966C22.3857 14.9321 22.5047 14.8734 22.6089 14.7935C22.7131 14.7135 22.8006 14.6138 22.8663 14.5001C22.932 14.3863 22.9747 14.2607 22.9918 14.1305C23.009 14.0002 23.0003 13.8679 22.9663 13.741C22.3263 11.346 20.6538 9.6735 18.2588 9.0335C18.0025 8.96504 17.7295 9.00118 17.4999 9.13398C17.2703 9.26678 17.1028 9.48536 17.0344 9.74162C16.9659 9.99789 17.0021 10.2709 17.1349 10.5005C17.2677 10.7301 17.4862 10.8975 17.7425 10.966ZM26.7963 20.8072L20.9075 18.1685L20.8913 18.161C20.5856 18.0302 20.2521 17.9778 19.921 18.0083C19.5899 18.0389 19.2716 18.1515 18.995 18.336C18.9624 18.3575 18.9311 18.3809 18.9013 18.406L15.8588 20.9997C13.9313 20.0635 11.9413 18.0885 11.005 16.186L13.6025 13.0972C13.6275 13.066 13.6513 13.0347 13.6738 13.001C13.8543 12.7251 13.9638 12.4089 13.9926 12.0805C14.0214 11.752 13.9686 11.4216 13.8388 11.1185V11.1035L11.1925 5.20475C11.0209 4.80883 10.7259 4.47902 10.3515 4.26455C9.97707 4.05007 9.54333 3.96245 9.11501 4.01475C7.42122 4.23763 5.86649 5.06946 4.74118 6.35487C3.61587 7.64028 2.99695 9.29136 3.00001 10.9997C3.00001 20.9247 11.075 28.9997 21 28.9997C22.7084 29.0028 24.3595 28.3839 25.6449 27.2586C26.9303 26.1333 27.7621 24.5785 27.985 22.8847C28.0374 22.4566 27.95 22.0229 27.7357 21.6485C27.5215 21.2741 27.1919 20.979 26.7963 20.8072Z"
                            fill="white" />
                    </svg>
                </div>
                <h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Phone</h3>
                <p class="text-gray-500 text-base mb-4 leading-relaxed">Senin-Jumat, 08.00-16.00 WIB</p>
                <a href="tel:02138657455" class="text-primary-500 text-base hover:underline">(021) 3865745</a>
            </div>

            <!-- Email Card -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
                <div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M26 6H6C4.89543 6 4 6.89543 4 8V24C4 25.1046 4.89543 26 6 26H26C27.1046 26 28 25.1046 28 24V8C28 6.89543 27.1046 6 26 6Z"
                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M28 8L16 17L4 8" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </div>
                <h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Email</h3>
                <p class="text-gray-500 text-base mb-4 leading-relaxed">Respon dalam 1-2 hari kerja</p>
                <a href="mailto:sampah@jakarta.go.id"
                    class="text-primary-500 text-base hover:underline break-all">sampah@@jakarta.go.id</a>
            </div>

            <!-- Office Card -->
            <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
                <div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M29.9662 26.0004H28V12.0004C28 11.47 27.7893 10.9612 27.4142 10.5862C27.0391 10.2111 26.5304 10.0004 26 10.0004H20.5C20.3674 10.0004 20.2402 10.0531 20.1464 10.1468C20.0527 10.2406 20 10.3678 20 10.5004V26.0004H18V4.05164C18.0033 3.74012 17.9357 3.43192 17.8023 3.15039C17.6689 2.86885 17.4732 2.62136 17.23 2.42664C16.8985 2.16819 16.494 2.02075 16.0739 2.00526C15.6539 1.98978 15.2396 2.10704 14.89 2.34039L4.89 9.00039C4.61567 9.18341 4.39086 9.43143 4.23558 9.72237C4.0803 10.0133 3.99937 10.3381 4 10.6679V26.0004H2.03375C1.77533 25.9966 1.52506 26.0908 1.33327 26.264C1.14148 26.4372 1.0224 26.6767 1 26.9341C0.990918 27.0709 1.01006 27.2081 1.05623 27.3372C1.1024 27.4663 1.17462 27.5845 1.2684 27.6845C1.36218 27.7845 1.47552 27.8641 1.60137 27.9185C1.72723 27.9728 1.86291 28.0007 2 28.0004H30C30.1371 28.0007 30.2728 27.9728 30.3986 27.9185C30.5245 27.8641 30.6378 27.7845 30.7316 27.6845C30.8254 27.5845 30.8976 27.4663 30.9438 27.3372C30.9899 27.2081 31.0091 27.0709 31 26.9341C30.9776 26.6767 30.8585 26.4372 30.6667 26.264C30.4749 26.0908 30.2247 25.9966 29.9662 26.0004Z"
                            fill="white" />
                    </svg>
                </div>
                <h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Office</h3>
                <p class="text-gray-500 text-base mb-4 leading-relaxed">Dinas Lingkungan Hidup DKI Jakarta</p>
                <p class="text-primary-500 text-base">Jl. Mandala V No. 67, Cililitan, Jakarta Timur</p>
            </div>
        </div>
    </div>
</section>



<script>
    // Data Dummy
    const videos = [
        {
            youtubeId: '_vx9Lzx794o',
            title: 'Video Sosialisasi BPS RW',
            description: 'Tonton video ini untuk memahami cara kerja dan manfaat program BPS-RW.',
            thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
        },
        {
            youtubeId: '_vx9Lzx794o',
            title: 'Webinar Edukasi BPS-RW',
            description: 'Ikuti webinar ini untuk mendapatkan informasi mendalam tentang pelaksanaan program BPS-RW.',
            thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
        },
        {
            youtubeId: '_vx9Lzx794o',
            title: 'Sesi Tanya Jawab BPS-RW',
            description: 'Bergabunglah dalam sesi tanya jawab untuk menjawab segala pertanyaan mengenai BPS-RW.',
            thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
        },
        {
            youtubeId: '_vx9Lzx794o',
            title: 'Sesi Tanya Jawab BPS-RW',
            description: 'Bergabunglah dalam sesi tanya jawab untuk menjawab segala pertanyaan mengenai BPS-RW.',
            thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
        },
        {
            youtubeId: '_vx9Lzx794o',
            title: 'Sosialisasi Program BPS-RW',
            description: 'Tips mensosialisasikan program BPS-RW kepada warga',
            thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
        }
    ];

    const ebooks = [
        {
            title: 'Panduan Praktis BPS-RW',
            description: 'Simak lankah-langkah mudah dan contoh sukses penerapan BPS-RW',
            documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
        },
        {
            title: 'Pelatihan Intensif BPS-RW',
            description: 'Pelajari strategi implementasi BPS-RW yang efektif dan berkelanjutan',
            documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'

        },
        {
            title: 'Kupas Tuntas BPS-RW',
            description: 'Dapatkan jawaban dari pakar terkait pengelolaan sampah di lingkungan RW',
            documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'

        },
        {
            title: 'Forum Diskusi BPS-RW',
            description: 'Diskusi dan bertukar pikiran tentang pengelolaan sampah bersama BPS-RW',
            documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'

        },
        {
            title: 'Laporan Tahunan 2024',
            description: 'Laporan pencapaian program BPS-RW Jakarta tahun 2024',
            documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'

        }
    ];

    const faqs = [
        {
            question: 'Apa itu BPS-RW dan bagaimana cara kerjanya?',
            answer: 'BPS-RW adalah program pengelolaan sampah berbasis komunitas yang bertujuan untuk meningkatkan kesadaran dan partisipasi masyarakat dalam pengelolaan sampah yang berkelanjutan. Program ini bekerja melalui pengumpulan, pemilahan, dan pengolahan sampah di tingkat RW.'
        },

        {
            question: 'Bagaimana cara mendaftar sebagai anggota BPS-RW?',
            answer: 'Untuk mendaftar sebagai anggota BPS-RW, Anda dapat menghubungi ketua RW setempat atau mengunjungi kantor kelurahan. Anda akan diminta untuk mengisi formulir pendaftaran dan mengikuti pelatihan singkat tentang pengelolaan sampah.'
        },
        {
            question: 'Apa saja manfaat menjadi anggota BPS-RW?',
            answer: 'Menjadi anggota BPS-RW memberikan banyak manfaat, termasuk kesempatan untuk belajar tentang pengelolaan sampah yang benar, berkontribusi pada lingkungan yang lebih bersih dan sehat, serta mendapatkan insentif berupa pelatihan dan peralatan pengelolaan sampah.'
        },
        {
            question: 'Apakah ada biaya yang terkait dengan keanggotaan BPS-RW?',
            answer: "Tidak, keanggotaan BPS-RW tidak dikenakan biaya. Program ini bertujuan untuk melibatkan sebanyak mungkin masyarakat dalam pengelolaan sampah, sehingga keanggotaan bersifat sukarela dan gratis."
        },
        {
            question: 'Bagaimana cara memperbarui informasi pribadi di BPS-RW?',
            answer: 'Untuk memperbarui informasi pribadi di BPS-RW, Anda dapat menghubungi ketua RW setempat atau mengunjungi kantor kelurahan. Anda akan diminta untuk mengisi formulir perubahan data dan melampirkan dokumen pendukung jika diperlukan.'
        }
    ];

    function toggleFaq(id) {
        const content = document.getElementById(id);
        const icon = document.getElementById(id + '-icon');

        if (content.classList.contains('hidden')) {
            content.classList.remove('hidden');
            icon.classList.add('rotate-180');
        } else {
            content.classList.add('hidden');
            icon.classList.remove('rotate-180');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Render Videos
        const videoCarousel = document.getElementById('videoCarousel');
        videos.forEach(video => {
            const videoCard = `
                <div class="shrink-0 w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-15px)]">
                    <div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="relative w-full aspect-video overflow-hidden bg-gray-300" data-video-id="${video.youtubeId}">
                            <img src="${video.thumbnailUrl}" 
                                 alt="${video.title}" 
                                 class="absolute inset-0 w-full h-full object-cover video-thumbnail cursor-pointer"
                                 loading="lazy">
                            <div class="absolute inset-0 flex items-center justify-center video-play-btn cursor-pointer">
                                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M20 0C8.96 0 0 8.96 0 20C0 31.04 8.96 40 20 40C31.04 40 40 31.04 40 20C40 8.96 31.04 0 20 0ZM16 29V11L28 20L16 29Z" fill="white"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="pt-5">
                        <h3 class="text-gray-900 text-xl font-bold font-jakarta mb-2">${video.title}</h3>
                        <p class="text-gary-500 text-sm font-normal font-jakarta line-clamp-2">${video.description}</p>
                    </div>
                </div>
            `;
            videoCarousel.innerHTML += videoCard;
        });

        // E-books
        const ebookCarousel = document.getElementById('ebookCarousel');
        ebooks.forEach(ebook => {
            const ebookCard = `
                <div class="shrink-0 w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-15px)]">
                    <div class="group">
                        <div class="bg-primary-100 min-h-56 rounded-2xl p-12 mb-4 flex items-center justify-center hover:opacity-80 transition-opacity">
                           <i class="ph-fill ph-file-text text-8xl text-primary-500"></i>
                        </div>
                        <h3 class="text-gray-900 text-xl font-bold font-jakarta mb-2">${ebook.title}</h3>
                        <p class="text-gray-500 text-sm font-normal font-jakarta mb-4 line-clamp-2">${ebook.description}</p>
                        <a href="${ebook.documentUrl}" target="_blank"
                           class="block w-full px-6 py-2.5 bg-white rounded-full text-primary-700 text-base font-semibold transition-colors border border-primary-500 text-center">
                            Baca Dokumen
                        </a>
                    </div>
                </div>
            `;
            ebookCarousel.innerHTML += ebookCard;
        });

        // FAQs
        const faqAccordion = document.getElementById('faqAccordion');
        faqs.forEach((faq, index) => {
            const faqId = `faq${index + 1}`;
            const faqItem = `
                <div class="border-b border-gray-200">
                    <button onclick="toggleFaq('${faqId}')"
                        class="w-full py-6 flex justify-between items-center text-left transition-colors">
                        <h3 class="text-gray-900 text-lg lg:text-2xl font-medium font-jakarta pr-4">${faq.question}</h3>
                        <svg id="${faqId}-icon" class="w-5 h-5 text-gray-900 transform transition-transform shrink-0"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="${faqId}" class="hidden pb-6">
                        <p class="text-gray-500 text-base lg:text-lg font-normal font-jakarta leading-relaxed">
                            ${faq.answer}
                        </p>
                    </div>
                </div>
            `;
            faqAccordion.innerHTML += faqItem;
        });

        // Lazy load YouTube videos - dipindahkan setelah video cards di-render
        setTimeout(() => {
            const videoContainers = document.querySelectorAll('[data-video-id]');

            videoContainers.forEach(container => {
                const videoId = container.dataset.videoId;

                const loadVideo = () => {
                    const iframe = document.createElement('iframe');
                    iframe.className = 'absolute inset-0 w-full h-full border-0';
                    iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
                    iframe.title = 'YouTube video player';
                    iframe.frameBorder = '0';
                    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
                    iframe.allowFullscreen = true;

                    // Hide thumbnail and play button
                    const thumbnail = container.querySelector('.video-thumbnail');
                    const playBtn = container.querySelector('.video-play-btn');
                    if (thumbnail) thumbnail.classList.add('hidden');
                    if (playBtn) playBtn.classList.add('hidden');

                    container.appendChild(iframe);
                };

                const thumbnail = container.querySelector('.video-thumbnail');
                const playBtn = container.querySelector('.video-play-btn');
                
                if (thumbnail) thumbnail.addEventListener('click', loadVideo);
                if (playBtn) playBtn.addEventListener('click', loadVideo);
            });
        }, 50);

        // Video Carousel
        const carousel = document.getElementById('videoCarousel');
        const prevBtn = document.getElementById('videoPrevBtn');
        const nextBtn = document.getElementById('videoNextBtn');

        let currentIndex = 0;
        const totalVideos = videos.length;

        function getVisibleItems() {
            if (window.innerWidth >= 1024) return 4;
            if (window.innerWidth >= 768) return 2;
            return 1;
        }

        function updateCarousel() {
            const visibleItems = getVisibleItems();
            const maxIndex = totalVideos - visibleItems;

            if (currentIndex < 0) currentIndex = 0;
            if (currentIndex > maxIndex) currentIndex = maxIndex;

            const itemWidth = carousel.children[0]?.offsetWidth || 0;
            const gap = 20;
            const offset = -(currentIndex * (itemWidth + gap));

            carousel.style.transform = `translateX(${offset}px)`;

            prevBtn.disabled = currentIndex === 0;
            nextBtn.disabled = currentIndex >= maxIndex;

            prevBtn.style.opacity = currentIndex === 0 ? '0.5' : '1';
            nextBtn.style.opacity = currentIndex >= maxIndex ? '0.5' : '1';
        }

        prevBtn.addEventListener('click', function () {
            currentIndex--;
            updateCarousel();
        });

        nextBtn.addEventListener('click', function () {
            currentIndex++;
            updateCarousel();
        });

        let resizeTimeout;
        window.addEventListener('resize', function () {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function () {
                currentIndex = 0;
                updateCarousel();
            }, 250);
        });

        setTimeout(updateCarousel, 100);

        // E-Book Carousel
        const ebookCarouselEl = document.getElementById('ebookCarousel');
        const ebookPrevBtn = document.getElementById('ebookPrevBtn');
        const ebookNextBtn = document.getElementById('ebookNextBtn');

        let ebookCurrentIndex = 0;
        const totalEbooks = ebooks.length;

        function updateEbookCarousel() {
            const visibleItems = getVisibleItems();
            const maxIndex = totalEbooks - visibleItems;

            if (ebookCurrentIndex < 0) ebookCurrentIndex = 0;
            if (ebookCurrentIndex > maxIndex) ebookCurrentIndex = maxIndex;

            const itemWidth = ebookCarouselEl.children[0]?.offsetWidth || 0;
            const gap = 20;
            const offset = -(ebookCurrentIndex * (itemWidth + gap));

            ebookCarouselEl.style.transform = `translateX(${offset}px)`;

            ebookPrevBtn.disabled = ebookCurrentIndex === 0;
            ebookNextBtn.disabled = ebookCurrentIndex >= maxIndex;

            ebookPrevBtn.style.opacity = ebookCurrentIndex === 0 ? '0.5' : '1';
            ebookNextBtn.style.opacity = ebookCurrentIndex >= maxIndex ? '0.5' : '1';
        }

        ebookPrevBtn.addEventListener('click', function () {
            ebookCurrentIndex--;
            updateEbookCarousel();
        });

        ebookNextBtn.addEventListener('click', function () {
            ebookCurrentIndex++;
            updateEbookCarousel();
        });

        window.addEventListener('resize', function () {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function () {
                currentIndex = 0;
                ebookCurrentIndex = 0;
                updateCarousel();
                updateEbookCarousel();
            }, 250);
        });

        setTimeout(updateEbookCarousel, 100);
    });
</script>