<?php require_once __DIR__ . '/../partials/header.php'; ?>

    <style>
        .resource-hero {
            padding: 6rem 0;
            background: linear-gradient(135deg, #1e3a5f 0%, #0f1f3a 100%);
            color: white;
            text-align: center;
        }
        .resource-hero h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
        }
        .resource-hero p {
            font-size: 1.25rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
        }
        .resource-section {
            padding: 6rem 0;
        }
        .section-title-custom {
            font-size: 2.5rem;
            font-weight: 800;
            color: #1e3a5f;
            margin-bottom: 1rem;
            text-align: center;
        }
        .section-subtitle-custom {
            color: #4a6fa5;
            font-size: 1.1rem;
            margin-bottom: 3rem;
            max-width: 700px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
        .resource-card {
            background: white;
            border-radius: 30px;
            padding: 1.5rem;
            height: 100%;
            box-shadow: 0 10px 40px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            border: 1px solid #f0f4ff;
            display: flex;
            flex-direction: column;
        }
        .resource-icon {
            width: 100%;
            height: 280px;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            overflow: hidden;
        }
        .resource-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .resource-card h3 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1e3a5f;
            margin-bottom: 1rem;
        }
        .resource-card p {
            color: #4a6fa5;
            line-height: 1.6;
            margin-bottom: 2rem;
            flex-grow: 1;
        }
        .btn-download {
            display: inline-block;
            background-color: #ff6b35;
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 15px;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
            text-align: center;
        }
        .btn-download:hover {
            background-color: #e55a2b;
            color: white;
            transform: scale(1.05);
        }
        .bg-light-blue {
            background-color: #f8f9ff;
        }
        .slider-container {
            position: relative;
            overflow: hidden;
            cursor: grab;
        }
        @media (max-width: 767.98px) {
            .slider-container {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 1rem;
            }
            .slider-container::-webkit-scrollbar {
                display: none;
            }
        }
        .slider-container:active {
            cursor: grabbing;
        }
        .slider-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        @media (max-width: 767.98px) {
            .slider-wrapper {
                transition: none;
                transform: none !important;
            }
        }
        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            margin-top: 2rem;
        }
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #8ecae6;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .slider-dot.active {
            background-color: #1e3a5f;
            transform: scale(1.2);
        }
        .resource-item {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 1rem;
            display: flex;
            scroll-snap-align: center;
        }
        @media (max-width: 767.98px) {
            .resource-item {
                flex: 0 0 85%;
                max-width: 85%;
            }
        }
        @media (min-width: 768px) {
            .resource-item {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }
        @media (min-width: 992px) {
            .resource-item {
                flex: 0 0 33.333%;
                max-width: 33.333%;
            }
        }
        @media (max-width: 767.98px) {
            .resource-hero h1 {
                font-size: 2.5rem;
            }
            .section-title-custom {
                font-size: 2rem;
            }
            .resource-card {
                padding: 1rem !important;
            }
            .resource-card h3 {
                font-size: 1.5rem !important;
            }
            .resource-icon {
                height: 200px;
            }
            /* Make sure sliders are scrollable on mobile */
            .slider-container {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 1rem;
            }
            .slider-container::-webkit-scrollbar {
                display: none;
            }
            .slider-wrapper {
                transition: none;
                transform: none !important;
            }
        }
    </style>

    <section class="resource-hero fade-in" style="padding: 3rem 0;">
        <div class="container">
            <h1 class="fade-up">Resource Center</h1>
            <p class="fade-up" style="transition-delay: 0.1s;">Temukan berbagai sumber daya digital, worksheet, dan panduan untuk mendukung perjalanan inovasi anak Anda di rumah.</p>
        </div>
    </section>

    <!-- Digital Library & Reading Resources -->
    <section class="resource-section fade-in">
        <div class="container">
            <h2 class="section-title-custom fade-up">Digital Library & Reading Resources</h2>
            <p class="section-subtitle-custom fade-up" style="transition-delay: 0.1s;">Akses koleksi bacaan sains dan teknologi terkurasi untuk memperluas wawasan inovator muda.</p>
            
            <div class="slider-container" id="librarySliderContainer">
                <div class="slider-wrapper" id="librarySliderWrapper">
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/3.jpg" alt="Jurnal Bioteknologi">
                            </div>
                            <h3>Project Gutenberg</h3>
                            <p>Cocok untuk usia 12+ yang ingin membaca novel klasik inggris dan literatur dunia secara gratis.<br> Kekhasan : 
                            <ul>
                                <li>Koleksi ribuan buku klasik public domain</li>
                                <li>Gratis tanpa biaya</li>
                                <li>Bisa memberikan donasi untuk mendukung proyek</li>
                                <li>Cocok untuk pembelajaran sastra, sejarah, dan reading habit</li>
                            </ul>
                            </p>
                            <a href="https://www.gutenberg.org/?utm_source=chatgpt.com" class="btn-download">Buka Perpustakaan</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/19.jpg" alt="E-Book Robotika">
                            </div>
                            <h3> Let's Read Asia</h3>
                            <p>Platform cerita anak usia 3+ dengan fokus STEM, karakter, dan social emotional learning.<br> Kekhasan : 
                            <ul>
                                <li>Banyak cerita bergambar untuk anak</li>
                                <li>Bisa diubah ke berbagai bahasa termasuk Bahasa Indonesia & Inggris</li>
                                <li>Buku dapat di-download</li>
                                <li>Cocok untuk homeschooling dan literacy corner</li>
                            </ul>
                            </p>
                            <a href="https://www.letsreadasia.org/?utm_source=chatgpt.com" class="btn-download">Buka Perpustakaan</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/4.jpg" alt="Coding Guide">
                            </div>
                            <h3>StoryWeaver</h3>
                            <p>Perpustakaan digital anak untuk belajar bahasa Inggris dan membaca bertahap.<br> Kekhasan : 
                            <ul>
                                <li>Buku sesuai level kemampuan bahasa anak</li>
                                <li>Cocok untuk usia 3+</li>
                                <li>Banyak ilustrasi menarik</li>
                                <li>Tersedia versi gratis dan fitur tambahan/pro</li>
                                <li>Mendukung multilingual learning</li>
                            </ul>
                            </p>
                            <a href="https://storyweaver.org.in/en?utm_source=chatgpt.com" class="btn-download">Buka Perpustakaan</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/1.jpg" alt="Space Science">
                            </div>
                            <h3>JSTOR</h3>
                            <p>Digital library akademik untuk remaja usia 12+ dan pembelajar mendalam.<br> Kekhasan : 
                            <ul>
                                <li>Banyak jurnal, artikel akademik, dan buku</li>
                                <li>Fokus pada isu sosial, budaya, sejarah, dan negara</li>
                                <li>Cocok untuk riset, diskusi kritis, dan project learning</li>
                                <li>Sebagian konten gratis, sebagian perlu akses institusi</li>
                            </ul>
                            </p>
                            <a href="https://www.jstor.org/?utm_source=chatgpt.com" class="btn-download">Buka Perpustakaan</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/1.jpg" alt="Space Science">
                            </div>
                            <h3>BookTrust Storybooks</h3>
                            <p>Platform cerita anak usia 3+ untuk membangun minat baca dan perkembangan emosi anak.<br> Kekhasan : 
                            <ul>
                                <li>Cerita interaktif dan ramah anak</li>
                                <li>Mendukung perkembangan social emotional skill</li>
                                <li>Banyak ilustrasi menarik</li>
                                <li>Cocok untuk read aloud dan bonding orang tua-anak</li>
                                <li>Beberapa fitur memerlukan akses/sign in</li>
                            </ul>
                            </p>
                            <a href="https://www.booktrust.org.uk/books-and-reading/have-some-fun/storybooks-and-games/?utm_source=chatgpt.com" class="btn-download">Buka Perpustakaan</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-dots" id="librarySliderDots"></div>
        </div>
    </section>

    <!-- Worksheet & Printable Resources -->
    <section class="resource-section bg-light-blue fade-in">
        <div class="container">
            <h2 class="section-title-custom fade-up">Worksheet & Printable Resources</h2>
            <p class="section-subtitle-custom fade-up" style="transition-delay: 0.1s;">Latihan praktis dan proyek eksperimen yang bisa dicetak untuk dikerjakan di mana saja.</p>
            
            <div class="slider-container" id="worksheetSliderContainer">
                <div class="slider-wrapper" id="worksheetSliderWrapper">
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/21.webp" alt="STEM Challenge">
                            </div>
                            <h3>WorksheetWorks</h3>
                            <p>Worksheet custom untuk matematika, bahasa Inggris, geografi, dan template belajar.<br> Kekhasan : 
                            <ul>
                                <li>Bisa membuat worksheet sendiri</li>
                                <li>Langsung print-ready</li>
                                <li>Cocok untuk guru dan homeschooler</li>
                                <li>Fleksibel untuk berbagai level</li>
                            </ul>
                            </p>
                            <a href="https://www.worksheetworks.com/?utm_source=chatgpt.com" class="btn-download">Unduh Worksheet</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/20.webp" alt="Experiment Log">
                            </div>
                            <h3>Education.com</h3>
                            <p>Worksheet dan educational games untuk Pre-K sampai Grade 8.<br> Kekhasan : 
                            <ul>
                                <li>Banyak game interaktif</li>
                                <li>Fokus matematika dasar dan Englis language</li>
                                <li>Materi tersusun berdasarkan level</li>
                                <li>Visual menarik dan ramah anak</li>
                            </ul>
                            </p>
                            <a href="https://www.education.com/?utm_source=chatgpt.com" class="btn-download">Education.com</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/22.webp" alt="Math Puzzle">
                            </div>
                            <h3>Liveworksheets</h3>
                            <p>Worksheet interaktif dan colorful untuk berbagai mata pelajaran hingga Grade 12.<br> Kekhasan : 
                            <ul>
                                <li>Bisa dikerjakan online</li>
                                <li>Banyak worksheet printable</li>
                                <li>Materi lengkap : Math, Science, Social Studies, English</li>
                                <li>Cocok untuk blended learning</li>
                            </ul>
                            </p>
                            <a href="https://www.liveworksheets.com/search-worksheets?utm_source=chatgpt.com" class="btn-download">Unduh Liveworksheets</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/11.jpg" alt="Science Quiz">
                            </div>
                            <h3>STEM Education Works</h3>
                            <p>Worksheet dan lesson STEM dengan langkah kegiatan yang jelas.<br> Kekhasan : 
                            <ul>
                                <li>Fokus STEM project</li>
                                <li>Banyak pilihan tema eksperimen</li>
                                <li>Cocok untuk inquiry learning</li>
                                <li>Mendukung project based learning</li>
                            </ul>
                            </p>
                            <a href="https://stemeducationworks.com/free-stem-lessons-worksheets/?utm_source=chatgpt.com" class="btn-download">Unduh STEM Education Works</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/11.jpg" alt="Science Quiz">
                            </div>
                            <h3>Coloring Squared</h3>
                            <p>Latihan KABATAKU dengan pendekatan fun art activity<br> Kekhasan : 
                            <ul>
                                <li>Math coloring worksheet</li>
                                <li>Belajar sambil mewarnai</li>
                                <li>Cocok untuk driling matematika dasar</li>
                                <li>Membantu fokus dan motorik halus anak</li>
                            </ul>
                            </p>
                            <a href="https://coloringsquared.com/free-coloring-pages-math-for-kids/math-fact-coloring-pages/?utm_source=chatgpt.com" class="btn-download">Unduh Coloring Squared</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/11.jpg" alt="Science Quiz">
                            </div>
                            <h3>Abby the Pup</h3>
                            <p>Worksheet terstruktur untuk Pre-K hingga Grade 1.<br> Kekhasan : 
                            <ul>
                                <li>Materi matematika, English, dan reading story</li>
                                <li>Tinggal download dan print</li>
                                <li>Struktur latihan bertahap</li>
                                <li>Visual sederhana dan dipahami</li>
                            </ul>
                            </p>
                            <a href="https://www.abbythepup.com/?utm_source=chatgpt.com" class="btn-download">Unduh Abby the Pup</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/11.jpg" alt="Science Quiz">
                            </div>
                            <h3>K5 Learning</h3>
                            <p>Worksheet Matematika untuk pemahaman konsep dan driling.<br> Kekhasan : 
                            <ul>
                                <li>Banyak latihan bertingkat</li>
                                <li>Fokus numerasi dasar</li>
                                <li>Cocok untuk penguatan konsep matematika</li>
                                <li>Materi sistematis</li>
                            </ul>
                            </p>
                            <a href="https://www.k5learning.com/free-math-worksheets?utm_source=chatgpt.com" class="btn-download">Unduh K5 Learning</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/11.jpg" alt="Science Quiz">
                            </div>
                            <h3>Kiddo Worksheets</h3>
                            <p>Worksheet Matematika dasar dengan bantuan visual dan gambar.<br> Kekhasan : 
                            <ul>
                                <li>Visual membantu pemahaman konsep</li>
                                <li>Cocok untuk early learner</li>
                                <li>Banyak printable gratis</li>
                                <li>Ramah untuk anak yang belajar visual</li>
                            </ul>
                            </p>
                            <a href="https://www.kiddoworksheets.com/maths/?utm_source=chatgpt.com" class="btn-download">Unduh Kiddo Worksheets</a>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="slider-dots" id="worksheetSliderDots"></div>
        </div>
    </section>

    <!-- Parent Guides -->
    <section class="resource-section fade-in">
        <div class="container">
            <h2 class="section-title-custom fade-up">Parent Guides</h2>
            <p class="section-subtitle-custom fade-up" style="transition-delay: 0.1s;">Panduan praktis bagi orang tua dalam mendampingi tumbuh kembang minat STEM anak.</p>
            
            <div class="slider-container" id="parentSliderContainer">
                <div class="slider-wrapper" id="parentSliderWrapper">
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/12.jpg" alt="Mindset Inovator">
                            </div>
                            <h3>Membangun Mindset Inovator</h3>
                            <p>Tips berkomunikasi dengan anak untuk merangsang rasa ingin tahu dan keberanian mencoba hal baru.</p>
                            <a href="#" class="btn-download">Baca Panduan</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/11.jpg" alt="Digital Safety">
                            </div>
                            <h3>Keamanan Digital untuk Anak</h3>
                            <p>Panduan bagi orang tua untuk memastikan lingkungan belajar online yang aman bagi anak.</p>
                            <a href="#" class="btn-download">Baca Panduan</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/1.jpg" alt="International Competition">
                            </div>
                            <h3>Panduan Kompetisi Internasional</h3>
                            <p>Informasi mengenai berbagai ajang prestasi STEM dunia dan cara mempersiapkannya.</p>
                            <a href="#" class="btn-download">Baca Panduan</a>
                        </div>
                    </div>
                    <div class="resource-item">
                        <div class="resource-card">
                            <div class="resource-icon">
                                <img src="<?php echo BASE_URL; ?>/assets/images/19.jpg" alt="Home Learning Environment">
                            </div>
                            <h3>Creating Home Lab</h3>
                            <p>Tips sederhana menyiapkan pojok eksperimen yang aman dan inspiratif di dalam rumah.</p>
                            <a href="#" class="btn-download">Baca Panduan</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-dots" id="parentSliderDots"></div>
        </div>
    </section>

    <footer class="footer-section fade-in">
        <div class="container">
            <div class="row align-items-start">
                <div class="col-lg-4 mb-4 mb-lg-0 fade-in-left" style="transition-delay: 0.1s;">
                    <div class="footer-logo">
                        <img src="<?php echo BASE_URL; ?>/assets/images/logo.jpg" alt="Stemspark Logo" style="height: 50%; width:50%">
                    </div>
                </div>
                <div class="col-lg-4 mb-4 mb-lg-0 fade-in" style="transition-delay: 0.2s;">
                    <h3 class="footer-title">Contact Us</h3>
                    <div class="footer-contact">
                       <p><strong>Stemspark Indonesia</strong><br>Jl. Ganesha No. 7, Lb. Siliwangi,<br>Bandung, Jawa Barat 40132 Indonesia</p>
                        
                        <p style="margin-top: 1rem;">E: sparks.stem@gmail.com <br>T: +62 851-7954-5415</p>
                        <p></p>
                    </div>
                </div>
                <div class="col-lg-4 fade-in-right" style="transition-delay: 0.3s;">
                    <h3 class="footer-title">Follow Our Journey</h3>
                    <div class="social-icons">
                        
                        <a href="https://www.instagram.com/stemspark.id/" target="_blank" class="social-icon instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="https://www.youtube.com/@STEM_SPARK" target="_blank" class="social-icon youtube">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="https://www.tiktok.com/@stemspark.id" target="_blank" class="social-icon tiktok">
                            <i class="fab fa-tiktok"></i>
                        </a>
                        <a href="https://www.linkedin.com/company/stemspark-indonesia" target="_blank" class="social-icon linkedin">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                    <p class="footer-copyright">
                        © 2026 Stemspark.id All rights reserved. Empowering the next generation of Indonesian innovators through science, coding, and research exploration.
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function initSlider(containerId, wrapperId, dotsId) {
                const container = document.getElementById(containerId);
                const wrapper = document.getElementById(wrapperId);
                const dotsContainer = document.getElementById(dotsId);
                const items = wrapper.querySelectorAll('.resource-item');
                
                let currentIndex = 0;
                let isDragging = false;
                let startX = 0;
                
                function getItemsPerView() {
                    if (window.innerWidth >= 992) return 3;
                    if (window.innerWidth >= 768) return 2;
                    return 1;
                }
                
                let itemsPerView = getItemsPerView();
                
                function createDots() {
                    dotsContainer.innerHTML = '';
                    const totalSlides = Math.ceil(items.length / itemsPerView);
                    if (totalSlides <= 1) return;
                    
                    for (let i = 0; i < totalSlides; i++) {
                        const dot = document.createElement('button');
                        dot.className = 'slider-dot' + (i === 0 ? ' active' : '');
                        dot.addEventListener('click', () => goToSlide(i));
                        dotsContainer.appendChild(dot);
                    }
                }
                
                function updateSlider() {
                    const slideWidth = 100 / itemsPerView;
                    const offset = currentIndex * slideWidth * itemsPerView;
                    wrapper.style.transform = `translateX(-${offset}%)`;
                    
                    const dots = dotsContainer.querySelectorAll('.slider-dot');
                    dots.forEach((dot, index) => {
                        dot.classList.toggle('active', index === currentIndex);
                    });
                }
                
                function goToSlide(index) {
                    const totalSlides = Math.ceil(items.length / itemsPerView);
                    currentIndex = Math.max(0, Math.min(index, totalSlides - 1));
                    
                    if (window.innerWidth < 768) {
                        const slideWidth = container.offsetWidth * 0.85; // matches 85% flex-basis
                        container.scrollLeft = currentIndex * slideWidth;
                    } else {
                        updateSlider();
                    }
                }
                
                // Add scroll listener for mobile to update dots
                container.addEventListener('scroll', () => {
                    if (window.innerWidth < 768) {
                        const slideWidth = container.offsetWidth * 0.85;
                        const newIndex = Math.round(container.scrollLeft / slideWidth);
                        if (newIndex !== currentIndex) {
                            currentIndex = newIndex;
                            const dots = dotsContainer.querySelectorAll('.slider-dot');
                            dots.forEach((dot, index) => {
                                dot.classList.toggle('active', index === currentIndex);
                            });
                        }
                    }
                });

                function nextSlide() {
                    const totalSlides = Math.ceil(items.length / itemsPerView);
                    currentIndex = (currentIndex + 1) % totalSlides;
                    updateSlider();
                }
                
                function prevSlide() {
                    const totalSlides = Math.ceil(items.length / itemsPerView);
                    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                    updateSlider();
                }
                
                // Drag Events
                container.addEventListener('mousedown', (e) => {
                    if (window.innerWidth < 768) return;
                    isDragging = true;
                    startX = e.pageX - container.offsetLeft;
                    wrapper.style.transition = 'none';
                });
                
                container.addEventListener('mouseleave', () => {
                    if (window.innerWidth < 768) return;
                    if (isDragging) {
                        isDragging = false;
                        wrapper.style.transition = 'transform 0.5s ease-in-out';
                        updateSlider();
                    }
                });
                
                container.addEventListener('mouseup', () => {
                    if (window.innerWidth < 768) return;
                    if (isDragging) {
                        isDragging = false;
                        wrapper.style.transition = 'transform 0.5s ease-in-out';
                        updateSlider();
                    }
                });
                
                container.addEventListener('mousemove', (e) => {
                    if (window.innerWidth < 768) return;
                    if (!isDragging) return;
                    e.preventDefault();
                    const x = e.pageX - container.offsetLeft;
                    const walk = (x - startX) * 2;
                    
                    if (walk < -50) {
                        nextSlide();
                        isDragging = false;
                        wrapper.style.transition = 'transform 0.5s ease-in-out';
                    } else if (walk > 50) {
                        prevSlide();
                        isDragging = false;
                        wrapper.style.transition = 'transform 0.5s ease-in-out';
                    }
                });
                
                // Touch Events
                container.addEventListener('touchstart', (e) => {
                    if (window.innerWidth < 768) return;
                    isDragging = true;
                    startX = e.touches[0].pageX - container.offsetLeft;
                    wrapper.style.transition = 'none';
                });
                
                container.addEventListener('touchend', () => {
                    if (window.innerWidth < 768) return;
                    if (isDragging) {
                        isDragging = false;
                        wrapper.style.transition = 'transform 0.5s ease-in-out';
                        updateSlider();
                    }
                });
                
                container.addEventListener('touchmove', (e) => {
                    if (window.innerWidth < 768) return;
                    if (!isDragging) return;
                    const x = e.touches[0].pageX - container.offsetLeft;
                    const walk = (x - startX) * 2;
                    
                    if (walk < -50) {
                        nextSlide();
                        isDragging = false;
                        wrapper.style.transition = 'transform 0.5s ease-in-out';
                    } else if (walk > 50) {
                        prevSlide();
                        isDragging = false;
                        wrapper.style.transition = 'transform 0.5s ease-in-out';
                    }
                });
                
                window.addEventListener('resize', () => {
                    itemsPerView = getItemsPerView();
                    currentIndex = 0;
                    createDots();
                    updateSlider();
                });
                
                createDots();
                updateSlider();
            }
            
            initSlider('librarySliderContainer', 'librarySliderWrapper', 'librarySliderDots');
            initSlider('worksheetSliderContainer', 'worksheetSliderWrapper', 'worksheetSliderDots');
            initSlider('parentSliderContainer', 'parentSliderWrapper', 'parentSliderDots');
        });
    </script>

<?php require_once __DIR__ . '/../partials/footer.php'; ?>