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

    <style>
        .about-section {
            padding: 6rem 0;
            background-color: #ffffff;
        }
        .about-image-left {
            border-radius: 0 0 100px 0;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
            margin-top:-75px;
            margin-right: -5rem;
        }
        .about-image-right {
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            position: relative;
            
        }
        .about-image-left img,
        .about-image-right img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .about-title-small {
            color: #4a6fa5;
            font-size: 3rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-top: -4rem;
            margin-left: -10rem;
        }
        .about-heading {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e3a5f;
            margin-bottom: 1rem;
            margin-left: -7rem;
        }
        .about-heading2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e3a5f;
            margin-bottom: 1rem;
            
        }
        .about-text {
            color: #1e3a5f;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
            margin-left: -7rem;
        }
        .about-text2 {
            color: #1e3a5f;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
            
        }
        .mentors-section {
            padding: 6rem 0;
            background-color: #f0f4ff;
        }
        .mentor-title-small {
            color: #1e3a5f;
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
            margin-bottom: 0.5rem;
        }
        .mentor-description {
            color: #1e3a5f;
            font-size: 0.9rem;
            text-align: center;
            margin-bottom: 4rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .mentor-card {
            background-color: white;
            border-radius: 40px;
            overflow: hidden;
            transition: transform 0.3s ease;
            flex: 0 0 100%;
            max-width: 100%;
            margin: 0 1rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            scroll-snap-align: center;
        }
        .mentor-card:hover {
            transform: translateY(-10px);
        }
        @media (max-width: 767.98px) {
            .mentor-card {
                flex: 0 0 85%;
                max-width: 85%;
            }
        }
        .mentor-image {
            width: 100%;
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        .mentor-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .mentor-info {
            padding: 2rem 1.5rem;
            text-align: center;
            background-color: white;
        }
        .mentor-name {
            font-size: 0.9rem;
            font-weight: 700;
            color: #4a6fa5;
            margin-bottom: 1rem;
            min-height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mentor-role {
            font-size: 0.75rem;
            font-weight: 800;
            color: #ff3b5c;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .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);
        }
        @media (min-width: 768px) {
            .mentor-card {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }
        @media (min-width: 992px) {
            .mentor-card {
                flex: 0 0 25%;
                max-width: 25%;
            }
        }
        @media (max-width: 991.98px) {
            .about-image-right {
                top: 0;
                margin-top: 2rem;
            }
            .about-image-left {
                margin-top: 0;
                margin-right: 0;
                border-radius: 30px;
            }
            .about-title-small {
                margin-top: 2rem;
                margin-left: 0;
                font-size: 1.75rem;
            }
            .about-heading, .about-text {
                margin-left: 0;
            }
        }
    </style>

    <section class="about-section fade-in" style="padding-top: 2rem;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0 fade-in-left">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="about-image-left">
                                <img src="<?php echo BASE_URL; ?>/assets/images/11.jpg" alt="STEM Classroom">
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="col-lg-6 fade-in-right">
                    <div class="about-title-small fade-up">Our Story & Mission</div>
                    <div class="about-heading fade-up" style="transition-delay: 0.1s;">Our Story</div>
                    <p class="about-text fade-up" style="transition-delay: 0.2s;">
                        Stemspark Indonesia lahir dari visi untuk memantik rasa ingin tahu dan menumbuhkan inovasi kelas dunia bagi generasi muda Indonesia. Kami menyediakan lingkungan belajar praktis (hands-on) di mana coding, robotika, dan sains terapan berpadu untuk mencetak para pemecah masalah masa depan.
                    </p>
                    <div class="about-heading2 fade-up" style="transition-delay: 0.3s;">Our Mission</div>
                    <p class="about-text2 fade-up" style="transition-delay: 0.4s;">
                        Menjadi jembatan bagi siswa yang memiliki passion untuk menjadi inovator dengan membimbing dan menuntun ide mereka menjadi realita.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="mentors-section fade-in">
        <div class="container">
            <div class="mentor-title-small fade-up">Meet the Mentors</div>
            <p class="mentor-description fade-up" style="transition-delay: 0.1s;">
                Membimbing generasi inovator Indonesia berikutnya melalui semangat, keahlian, dan pendampingan yang dipersonalisasi.
            </p>
            <div class="slider-container" id="mentorSliderContainer">
                <div class="slider-wrapper" id="mentorSliderWrapper">
                    <div class="mentor-card scale-in" style="transition-delay: 0.1s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/fany.jpeg" alt="Fani Aprina">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Fani Aprina, S.T</div>
                            <div class="mentor-role">Founder & Lead Mentor</div>
                        </div>
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.2s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/ali.jpeg" alt="ALI AHMADI, S.T., M.T., CEH, SPM, CEI">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">ALI AHMADI, S.T., M.T., CEH, SPM, CEI</div>
                            <div class="mentor-role">Founder & Lead Mentor</div>
                        </div>
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.2s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/10.jpeg" alt="Yuraditha Aurelia Putri">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Yuraditha Aurelia Putri, S.KOM</div>
                            <div class="mentor-role">Research & Coding Mentor</div>
                        </div>
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.3s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/ica.jpeg" alt="Suci Damayanti">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Suci Damayanti</div>
                            <div class="mentor-role">Research & Science Mentor</div>
                        </div>
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/icha.jpeg" alt="Liesna Nurul W">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Liesna Nurul W</div>
                            <div class="mentor-role">Research & Math Mentor</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/erin.jpeg" alt="Prof. Dr. apt. Nyi Mekar Saptarini, S.Si., M.Si.">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Prof. Dr. apt. Nyi Mekar Saptarini, S.Si., M.Si.</div>
                            <div class="mentor-role">Research Farmasi</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/wawa.jpeg" alt="Wanda Ediviani, M.T (wawa)">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Wanda Ediviani, M.T (wawa)</div>
                            <div class="mentor-role">IELTS Mentor and SAT Bahasa Inggris </div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/revi.jpeg" alt="Revi Muharam Fadli">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Revi Muharam Fadli, M.T</div>
                            <div class="mentor-role">research mentor for IoT and electronics</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/ian.png" alt="Muhammad Andrian">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Muhammad Andrian</div>
                            <div class="mentor-role">Coding Mentor</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/fadli.jpeg" alt="Liesna Nurul W">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Fadlika Lalinsya Putra</div>
                            <div class="mentor-role">Coding Mentor</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/rifki.jpeg" alt="rifky dzalbarry">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">rifky dzalbarry</div>
                            <div class="mentor-role">Coding Mentor</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/sandra.png" alt="Sandra Armayanti">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Sandra Armayanti</div>
                            <div class="mentor-role">Coding Mentor</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/nabil.jpeg" alt="Nabilah Fitriani Awaliyah">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Nabilah Fitriani Awaliyah</div>
                            <div class="mentor-role">Coding Mentor</div>
                        </div>
                        
                    </div>
                    <div class="mentor-card scale-in" style="transition-delay: 0.4s;">
                        <div class="mentor-image">
                            <img src="<?php echo BASE_URL; ?>/assets/images/8.jpg" alt="Liesna Nurul W">
                        </div>
                        <div class="mentor-info">
                            <div class="mentor-name">Azin</div>
                            <div class="mentor-role">Spec Olimpiade Matematika</div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="slider-dots" id="mentorSliderDots"></div>
        </div>
    </section>

    <!--<section class="maps-section fade-in" style="padding: 6rem 0; background-color: #ffffff;">
        <div class="container">
            <div class="text-center mb-4">
                <h2 class="section-title fade-up" style="font-size: 2.5rem; font-weight: 700; color: #1e3a5f; margin-bottom: 1rem;">Our Location</h2>
            </div>
            <div style="border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.1);">
                <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3960.667726798742!2d107.60891587475698!3d-6.914744267655508!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68e661102299d5%3A0x3f03f77a49e8c0a7!2sJl.%20Ganesha%20No.%207%2C%20Lebak%20Siliwangi%2C%20Kec.%20Coblong%2C%20Kota%20Bandung%2C%20Jawa%20Barat%2040132!5e0!3m2!1sid!2sid!4v1746000000000!5m2!1sid!2sid" 
                    width="100%" 
                    height="500" 
                    style="border:0;" 
                    allowfullscreen="" 
                    loading="lazy" 
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
            <div style="text-align: center; margin-top: 2rem;">
                <p style="color: #4a6fa5; font-size: 1.1rem; line-height: 1.7;">
                    <strong>Jl. Ganesha No. 7, Lb. Siliwangi, Bandung, Jawa Barat 40132, Indonesia</strong>
                </p>
            </div>
        </div>
    </section>-->

    <section class="booking-section fade-in" style="padding: 6rem 0; background-color: #ffffff;">
        <div class="container">
            <div style="text-align: center;">
                <h2 class="fade-up" style="color: #1e3a5f; font-size: 30px; font-weight: 500; margin-bottom: 2rem;">
                    Register for a Trial Class / Daftar Kelas Uji Coba
                </h2>
                <p class="fade-up" style="color: #4a6fa5; font-size: 1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; transition-delay: 0.1s;">
                    Bergabunglah dengan komunitas STEM kami!
                    <br>
                    Daftarkan anak Anda untuk kelas uji coba hari ini dan tumbuhkan rasa ingin tahu mereka.
                </p>
                <a href="https://wa.me/6285179545415" target="_blank" class="fade-up" style="display: inline-block; background-color: #ff6b35; color: white; border: none; padding: 1.25rem 4rem; border-radius: 5px; font-weight: 700; font-size: 1.5rem; text-decoration: none; transition: all 0.3s ease; transition-delay: 0.2s;">
                    BOOK NOW ➤
                </a>
            </div>
        </div>
    </section>

    <section class="partners-section fade-in" style="padding: 5rem 0; background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);">
        <div class="container">
            <div style="text-align: center;">
                <div class="text-center mb-5">
                    <h2 class="section-title" style="font-size: 2rem; font-weight: 700; color: #1e3a5f; margin-bottom: 1rem;">Stesmpark Is A Part Of : Fitalenta</h2>
                </div>
                <div class="partners-grid" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; align-items: center;">
                    <div style="opacity: 0.9; flex: 0 1 auto;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/logo.jpg" alt="STEMSPARK" class="partner-logo-large">
                    </div>
                    <div style="opacity: 0.9; flex: 0 1 auto;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/fitalenta.png" alt="Fitalenta" class="partner-logo-large">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .partner-logo-large {
            height: 150px;
            width: auto;
            max-width: 100%;
            object-fit: contain;
            transition: height 0.3s ease;
        }
        @media (max-width: 767.98px) {
            .partner-logo-large {
                height: 80px;
            }
            .partners-grid {
                gap: 1.5rem !important;
            }
            .section-title {
                font-size: 1.5rem !important;
            }
        }
    </style>

    <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() {
            const sliderWrapper = document.getElementById('mentorSliderWrapper');
            const sliderContainer = document.getElementById('mentorSliderContainer');
            const sliderDots = document.getElementById('mentorSliderDots');
            const cards = sliderWrapper.querySelectorAll('.mentor-card');
            
            let currentIndex = 0;
            let cardsPerView = getCardsPerView();
            let isDragging = false;
            let startX = 0;
            let scrollLeft = 0;
            
            function getCardsPerView() {
                if (window.innerWidth >= 992) return 4;
                if (window.innerWidth >= 768) return 2;
                return 1;
            }
            
            function createDots() {
                sliderDots.innerHTML = '';
                const totalSlides = Math.ceil(cards.length / cardsPerView);
                for (let i = 0; i < totalSlides; i++) {
                    const dot = document.createElement('button');
                    dot.className = 'slider-dot' + (i === 0 ? ' active' : '');
                    dot.addEventListener('click', () => goToSlide(i));
                    sliderDots.appendChild(dot);
                }
            }
            
            function updateSlider() {
                const cardWidth = 100 / cardsPerView;
                const offset = currentIndex * cardWidth * cardsPerView;
                sliderWrapper.style.transform = `translateX(-${offset}%)`;
                
                const dots = sliderDots.querySelectorAll('.slider-dot');
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentIndex);
                });
            }
            
            function goToSlide(index) {
                const totalSlides = Math.ceil(cards.length / cardsPerView);
                currentIndex = Math.max(0, Math.min(index, totalSlides - 1));
                
                if (window.innerWidth < 768) {
                    const slideWidth = sliderContainer.offsetWidth * 0.85; // matches 85% flex-basis
                    sliderContainer.scrollLeft = currentIndex * slideWidth;
                } else {
                    updateSlider();
                }
            }
            
            // Add scroll listener for mobile to update dots
            sliderContainer.addEventListener('scroll', () => {
                if (window.innerWidth < 768) {
                    const slideWidth = sliderContainer.offsetWidth * 0.85;
                    const newIndex = Math.round(sliderContainer.scrollLeft / slideWidth);
                    if (newIndex !== currentIndex) {
                        currentIndex = newIndex;
                        const dots = sliderDots.querySelectorAll('.slider-dot');
                        dots.forEach((dot, index) => {
                            dot.classList.toggle('active', index === currentIndex);
                        });
                    }
                }
            });

            function nextSlide() {
                const totalSlides = Math.ceil(cards.length / cardsPerView);
                currentIndex = (currentIndex + 1) % totalSlides;
                updateSlider();
            }
            
            function prevSlide() {
                const totalSlides = Math.ceil(cards.length / cardsPerView);
                currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                updateSlider();
            }
            
            sliderContainer.addEventListener('mousedown', (e) => {
                if (window.innerWidth < 768) return;
                isDragging = true;
                startX = e.pageX - sliderContainer.offsetLeft;
                scrollLeft = currentIndex;
                sliderWrapper.style.transition = 'none';
            });
            
            sliderContainer.addEventListener('mouseleave', () => {
                if (window.innerWidth < 768) return;
                if (isDragging) {
                    isDragging = false;
                    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
                }
            });
            
            sliderContainer.addEventListener('mouseup', () => {
                if (window.innerWidth < 768) return;
                if (isDragging) {
                    isDragging = false;
                    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
                }
            });
            
            sliderContainer.addEventListener('mousemove', (e) => {
                if (window.innerWidth < 768) return;
                if (!isDragging) return;
                e.preventDefault();
                const x = e.pageX - sliderContainer.offsetLeft;
                const walk = (x - startX) * 2;
                
                if (walk < -50) {
                    nextSlide();
                    isDragging = false;
                    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
                } else if (walk > 50) {
                    prevSlide();
                    isDragging = false;
                    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
                }
            });
            
            sliderContainer.addEventListener('touchstart', (e) => {
                if (window.innerWidth < 768) return;
                isDragging = true;
                startX = e.touches[0].pageX - sliderContainer.offsetLeft;
                scrollLeft = currentIndex;
                sliderWrapper.style.transition = 'none';
            });
            
            sliderContainer.addEventListener('touchend', () => {
                if (window.innerWidth < 768) return;
                if (isDragging) {
                    isDragging = false;
                    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
                }
            });
            
            sliderContainer.addEventListener('touchmove', (e) => {
                if (window.innerWidth < 768) return;
                if (!isDragging) return;
                const x = e.touches[0].pageX - sliderContainer.offsetLeft;
                const walk = (x - startX) * 2;
                
                if (walk < -50) {
                    nextSlide();
                    isDragging = false;
                    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
                } else if (walk > 50) {
                    prevSlide();
                    isDragging = false;
                    sliderWrapper.style.transition = 'transform 0.5s ease-in-out';
                }
            });
            
            window.addEventListener('resize', () => {
                cardsPerView = getCardsPerView();
                currentIndex = 0;
                createDots();
                updateSlider();
            });
            
            createDots();
            updateSlider();
        });
    </script>
<?php require_once __DIR__ . '/../partials/footer.php'; ?>
