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

    <section class="jurnal-section fade-in" style="padding: 2rem 0; background-color: #ffffff;">
        <div class="container">
            <h1 class="fade-up" style="text-align: left; margin-top: 0; font-size: 3rem; font-weight: 800; color: #1e3a5f; line-height: 1.1;">E-Library Jurnal</h1>
            <p class="fade-up" style="text-align: left; margin-bottom: 3rem; max-width: 800px; color: #4a6fa5; font-size: 1.25rem; line-height: 1.7; transition-delay: 0.1s;">
                Koleksi digital hasil riset dan inovasi siswa-siswi Stemspark yang terdokumentasi secara profesional dalam jurnal ilmiah.<br>
                A professional digital library showcasing scientific research and documented innovations developed by Stemspark students.
            </p>
            
            <div style="margin-bottom: 4rem;">
                <button style="background-color: #1e3a5f; color: white; border: none; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 600; margin-right: 1rem; margin-bottom: 1rem; cursor: pointer; font-size: 1rem;">Semua</button>
                <button style="background-color: #8ecae6; color: #1e3a5f; border: none; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 600; margin-right: 1rem; margin-bottom: 1rem; cursor: pointer; font-size: 1rem;">Biologi</button>
                <button style="background-color: #8ecae6; color: #1e3a5f; border: none; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 600; margin-right: 1rem; margin-bottom: 1rem; cursor: pointer; font-size: 1rem;">Teknologi</button>
                <button style="background-color: #8ecae6; color: #1e3a5f; border: none; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 600; margin-right: 1rem; margin-bottom: 1rem; cursor: pointer; font-size: 1rem;">Sosial</button>
            </div>
            
            <div class="slider-container" id="jurnalSliderContainer">
                <div class="slider-wrapper" id="jurnalSliderWrapper">
                    <?php foreach ($journals as $index => $journal): ?>
                    <div class="jurnal-item">
                        <div class="jurnal-card scale-in" style="background: linear-gradient(135deg, #f0f4ff 0%, #e6ebff 100%); border-radius: 30px; padding: 1.5rem; height: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.08); display: flex; flex-direction: column; transition-delay: <?php echo $index * 0.1; ?>s;">
                            <span style="font-size: 0.8rem; font-weight: 700; color: #1e3a5f; letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-bottom: 1.25rem;"><?php echo $journal['category']; ?></span>
                            <h3 style="font-size: 1.5rem; font-weight: 800; color: #1e3a5f; margin-bottom: 1rem; line-height: 1.2;"><?php echo $journal['title']; ?></h3>
                            <p style="font-size: 0.95rem; color: #4a6fa5; margin-bottom: 1.75rem;">Penulis: <?php echo $journal['author']; ?></p>
                            <p style="color: #4a6fa5; font-size: 1.1rem; line-height: 1.7; margin-bottom: 3rem; flex-grow: 1;"><?php echo $journal['description']; ?></p>
                            <div style="text-align: center;">
                                <a href="<?php echo BASE_URL; ?>/jurnal/detail/<?php echo $journal['id']; ?>" style="color: #1e3a5f; font-weight: 700; text-decoration: none; font-size: 1rem;">Baca Jurnal</a>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="slider-dots" id="jurnalSliderDots"></div>
        </div>
    </section>

    <style>
        section {
            padding: 6rem 0;
        }
        .achievements-section-custom {
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .achievements-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(248, 249, 255, 0.45) 0%, rgba(232, 238, 248, 0.45) 100%);
        }
        .achievement-card-custom {
            background: white;
            border-radius: 40px;
            padding: 4rem 2rem;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            flex: 0 0 100%;
            max-width: 100%;
            margin: 0 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            scroll-snap-align: center;
        }
        .achievement-image-custom {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 2rem auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border : 3px solid #FF9D23;
            
        }
        .achievement-image-custom.silver {
            border: 3px solid #BFC9D1;
        }
        .achievement-image-custom.bronze {
            border: 3px solid #FF6B35;
        }
        .achievement-image-custom img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .achievement-name-custom {
            font-size: 1.5rem;
            font-weight: 800;
            color: #1e3a5f;
            margin-bottom: 1rem;
            line-height: 1.2;
            min-height: 3.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .achievement-role-custom {
            color: #ff3b5c;
            font-weight: 800;
            font-size: 0.8rem;
            margin-bottom: 2rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1.4;
            min-height: 2.4rem;
        }
        .achievement-school-custom {
            color: #4a6fa5;
            font-size: 0.95rem;
            font-weight: 600;
            line-height: 1.5;
        }
        .achievements-cards-section {
            background-color: #f0f4ff;
            position: relative;
        }
        .partners-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
        }
        .footer-section {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
        .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; /* Space for scrollbar if any */
            }
            .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);
        }
        .jurnal-item {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 1rem;
            display: flex;
            scroll-snap-align: center;
        }
        @media (max-width: 767.98px) {
            .jurnal-item {
                flex: 0 0 85%; /* Peek next card */
                max-width: 85%;
            }
        }
        @media (min-width: 768px) {
            .jurnal-item {
                flex: 0 0 50%;
                max-width: 50%;
            }
            .achievement-card-custom {
                flex: 0 0 50%;
                max-width: 50%;
                padding: 2.5rem;
            }
        }
        @media (min-width: 992px) {
            .jurnal-item {
                flex: 0 0 33.333%;
                max-width: 33.333%;
            }
            .achievement-card-custom {
                flex: 0 0 33.333%;
                max-width: 33.333%;
            }
        }
        @media (max-width: 767.98px) {
            .jurnal-card {
                padding: 1.5rem !important;
            }
            .jurnal-card h3 {
                font-size: 1.5rem !important;
            }
            .achievement-card-custom {
                flex: 0 0 85%; /* Peek next card */
                max-width: 85%;
                padding: 2rem 1rem;
            }
            .achievement-name-custom {
                font-size: 1.25rem;
                min-height: auto;
            }
            h1 {
                font-size: 2.5rem !important;
            }
            h2 {
                font-size: 2rem !important;
            }
            .slider-container {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 1rem; /* Space for scrollbar if any */
            }
            .slider-container::-webkit-scrollbar {
                display: none;
            }
            .slider-wrapper {
                transition: none;
                transform: none !important;
            }
            /* Make partner logos responsive */
            .partners-grid {
                gap: 1.5rem !important;
            }
            .partners-grid img {
                height: 40px !important;
            }
        }
    </style>

    <section class="achievements-section-custom fade-in" style="background-image: url('<?php echo BASE_URL; ?>/assets/images/18.jpg');">
        <div class="achievements-overlay"></div>
        <div class="container" style="position: relative; z-index: 1;">
            <div style="text-align: center; margin-bottom: 4rem; ">
                <h2 class="fade-up" style="font-size: 4rem; font-weight: 800; color: #1e3a5f; margin-bottom: 1.5rem; line-height: 1.1;">Global<br>Achievements</h2>
                <p class="fade-up" style="color: #4a6fa5; font-size: 1.25rem; line-height: 1.7; max-width: 800px; margin: 0 auto; transition-delay: 0.1s; font-weight:600;">
                    Stemspark merayakan setiap inovasi brilian siswa yang berhasil meraih penghargaan di kancah internasional, membuktikan kecanggihan riset <br> muda Indonesia.<br>
                </p>
                <p class="fade-up" style="color: #4a6fa5; font-size: 1.25rem; line-height: 1.7; max-width: 800px; margin: 0 auto; transition-delay: 0.1s;">
                    Stemspark celebrates the brilliant student innovations that have earned accolades internationally, demonstrating the excellence of Indonesia's youth research.</p>
            </div>
        </div>
    </section>

    <section class="achievements-cards-section fade-in">
        <div class="container">
            <div style="text-align: center; margin-bottom: 3rem;">
                <h2 class="fade-up" style="font-size: 2.5rem; font-weight: 800; color: #1e3a5f; margin-bottom: 0.5rem;">Coding Competition Winner</h2>
            </div>
            <div class="slider-container" id="codingSliderContainer">
                <div class="slider-wrapper" id="codingSliderWrapper">
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.1s;">
                        <div class="achievement-image-custom">
                            <img src="<?php echo BASE_URL; ?>/assets/images/10.jpeg" alt="Zia Shadra Sahasrara">
                        </div>
                        <h3 class="achievement-name-custom">Zia Shadra Sahasrara</h3>
                        <p class="achievement-role-custom">WICE - IT and Robotics - Gold Medalist</p>
                        <p class="achievement-school-custom">Sekolah Murid Merdeka - Hub Mortadinata, Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.2s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/17.jpeg" alt="Reza Makarim Nashiri">
                        </div>
                        <h3 class="achievement-name-custom">Reza Makarim Nashiri</h3>
                        <p class="achievement-role-custom">STEM Olympiad - Tech and Eng - Silver Medalist</p>
                        <p class="achievement-school-custom">Sekolah Murid Merdeka - Hub Mortadinata, Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.4s;">
                        <div class="achievement-image-custom ">
                            <img src="<?php echo BASE_URL; ?>/assets/images/raufal.jpeg" alt="Raufal Nabhan Wahyu">
                        </div>
                        <h3 class="achievement-name-custom">Raufal Nabhan Wahyu</h3>
                        <p class="achievement-role-custom">Coding Olimpiad 2026 - Gold Medalist</p>
                        <p class="achievement-school-custom">SD UPI Laboratory Elementary School, Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.5s;">
                        <div class="achievement-image-custom bronze">
                            <img src="<?php echo BASE_URL; ?>/assets/images/carisa.jpeg" alt="Carisa Elmira Kurniawan">
                        </div>
                        <h3 class="achievement-name-custom">Carisa Elmira Kurniawan</h3>
                        <p class="achievement-role-custom">Coding Olimpiad 2026 - Bronze Medalist</p>
                        <p class="achievement-school-custom">SMP Negeri 3 Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.5s;">
                        <div class="achievement-image-custom bronze">
                            <img src="<?php echo BASE_URL; ?>/assets/images/zaky.jpeg" alt="Dzaky Muhammad Safiq">
                        </div>
                        <h3 class="achievement-name-custom">Dzaky Muhammad Safiq</h3>
                        <p class="achievement-role-custom">Coding Olimpiad 2026 - Bronze Medalist</p>
                        <p class="achievement-school-custom">Alfa Centauri Senior High School Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.5s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/dhio.jpeg" alt="Dhio Athaa Sutisna">
                        </div>
                        <h3 class="achievement-name-custom">Dhio Athaa Sutisna</h3>
                        <p class="achievement-role-custom">Coding Olimpiad 2026 - Bronze Medalist</p>
                        <p class="achievement-school-custom">SMP Laboratorium Percontohan Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.5s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/radit.jpeg" alt="Radityanandra Adrian">
                        </div>
                        <h3 class="achievement-name-custom">Radityanandra Adrian</h3>
                        <p class="achievement-role-custom">Coding Olimpiad 2026 - Bronze Medalist</p>
                        <p class="achievement-school-custom">SMP Laboratorium Percontohan Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.5s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/azahro.jpeg" alt="Azzahro Rawayan Jati">
                        </div>
                        <h3 class="achievement-name-custom">Azzahro Rawayan Jati</h3>
                        <p class="achievement-role-custom">Coding Olimpiad 2026 - Silver Medalist</p>
                        <p class="achievement-school-custom">Percikan Iman Boarding School Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.5s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/syfa.jpeg" alt="Azzahra Syfa Kamilah">
                        </div>
                        <h3 class="achievement-name-custom">Azzahra Syfa Kamilah</h3>
                        <p class="achievement-role-custom">Coding Olimpiad 2026 - Silver Medalist</p>
                        <p class="achievement-school-custom">SMP Negri 1 Purbolinggo Lampung</p>
                    </div>
                </div>
            </div>
            <div class="slider-dots" id="codingSliderDots"></div>
        </div>
    </section>

    <section class="achievements-cards-section fade-in" style="padding-top: 0;">
        <div class="container">
            <div style="text-align: center; margin-bottom: 3rem;">
                <h2 class="fade-up" style="font-size: 2.5rem; font-weight: 800; color: #1e3a5f; margin-bottom: 0.5rem;">Research Competition Winner</h2>
            </div>
            <div class="slider-container" id="researchSliderContainer">
                <div class="slider-wrapper" id="researchSliderWrapper">
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.3s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/zia.jpeg" alt="Zia Shadra Sahasrara">
                        </div>
                        <h3 class="achievement-name-custom">Zia Shadra Sahasrara</h3>
                        <p class="achievement-role-custom">IRPRO 2025 - Research - Silver Medalist</p>
                        <p class="achievement-school-custom">Sekolah Murid Merdeka (SMM), Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.3s;">
                        <div class="achievement-image-custom">
                            <img src="<?php echo BASE_URL; ?>/assets/images/zia.jpeg" alt="Zia Shadra Sahasrara">
                        </div>
                        <h3 class="achievement-name-custom">Zia Shadra Sahasrara</h3>
                        <p class="achievement-role-custom">WICE 2025 - Reseach - Gold Medalist</p>
                        <p class="achievement-school-custom">Sekolah Murid Merdeka (SMM), Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.3s;">
                        <div class="achievement-image-custom">
                            <img src="<?php echo BASE_URL; ?>/assets/images/zelda.jpeg" alt="Zelda Farah Nurfitri">
                        </div>
                        <h3 class="achievement-name-custom">Zelda Farah Nurfitri</h3>
                        <p class="achievement-role-custom">WICE 2025 - Reseach - Gold Medalist</p>
                        <p class="achievement-school-custom">SMP UPI Laboratory Elementary School, Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.3s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/16.jpeg" alt="Jiro Aliifio Wirjawan">
                        </div>
                        <h3 class="achievement-name-custom">Jiro Aliifio Wirjawan</h3>
                        <p class="achievement-role-custom">WICE 2025 - Reseach - Silver Medalist</p>
                        <p class="achievement-school-custom">SMP UPI Laboratory Elementary School, Bandung</p>
                    </div>
                    <div class="achievement-card-custom scale-in" style="transition-delay: 0.3s;">
                        <div class="achievement-image-custom silver">
                            <img src="<?php echo BASE_URL; ?>/assets/images/16.jpeg" alt="Mahija Bregas Dary Abiyyu">
                        </div>
                        <h3 class="achievement-name-custom">Mahija Bregas Dary Abiyyu</h3>
                        <p class="achievement-role-custom">WICE 2025 - Reseach - Silver Medalist</p>
                        <p class="achievement-school-custom">SMP UPI Laboratory Elementary School, Bandung</p>
                    </div>
                </div>
            </div>
            <div class="slider-dots" id="researchSliderDots"></div>
        </div>
    </section>

    <section class="partners-section fade-in" style="background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);">
        <div class="container">
            <div style="text-align: center;">
                <p style="color: #4a6fa5; font-weight: 600; font-size: 2.5rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem;">Awardee From</p>
                <h2 style="font-size: 2.5rem; font-weight: 800; color: #1e3a5f; margin-bottom: 3.5rem;"></h2>
                <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 5rem; align-items: center;">
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/wice.jpg" alt="WICE" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/world.png" alt="Youth Innovation" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/iysa.png" alt="IYSA" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/jsto.png" alt="SS" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/inter.png" alt="STEM Competition" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/osn.jpg" alt="STEM Competition" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/ombn.png" alt="STEM Competition" style="height: 90px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/opsi.png" alt="STEM Competition" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/AISEEF.png" alt="STEM Competition" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/IICYMS.png" alt="STEM Competition" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/IRPRO.png" alt="STEM Competition" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/coding.png" alt="Coding Olympiad" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/wec.png" alt="WEC" style="height: 90px; width: auto;">
                    </div>
                    
                </div>
            </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 to initialize achievement sliders
            function initAchievementSlider(containerId, wrapperId, dotsId) {
                const container = document.getElementById(containerId);
                const wrapper = document.getElementById(wrapperId);
                const dotsContainer = document.getElementById(dotsId);
                const cards = wrapper ? wrapper.querySelectorAll('.achievement-card-custom') : [];
                
                if (!container || !wrapper || !dotsContainer || cards.length === 0) return;

                let currentIndex = 0;
                let isDragging = false;
                let startX = 0;
                
                function getCardsPerView() {
                    if (window.innerWidth >= 992) return 3;
                    if (window.innerWidth >= 768) return 2;
                    return 1;
                }
                
                let cardsPerView = getCardsPerView();
                
                function createDots() {
                    dotsContainer.innerHTML = '';
                    const totalSlides = Math.ceil(cards.length / cardsPerView);
                    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 cardWidth = 100 / cardsPerView;
                    const offset = currentIndex * cardWidth * cardsPerView;
                    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(cards.length / cardsPerView);
                    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(cards.length / cardsPerView);
                    currentIndex = (currentIndex + 1) % totalSlides;
                    updateSlider();
                }
                
                function prevSlide() {
                    const totalSlides = Math.ceil(cards.length / cardsPerView);
                    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                    updateSlider();
                }
                
                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';
                    }
                });
                
                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', () => {
                    cardsPerView = getCardsPerView();
                    currentIndex = 0;
                    createDots();
                    updateSlider();
                });
                
                createDots();
                updateSlider();
            }

            // Journal Slider Logic (Top Section)
            function initJournalSlider() {
                const jurnalWrapper = document.getElementById('jurnalSliderWrapper');
                const jurnalContainer = document.getElementById('jurnalSliderContainer');
                const jurnalDots = document.getElementById('jurnalSliderDots');
                const jurnalCards = jurnalWrapper ? jurnalWrapper.querySelectorAll('.jurnal-item') : [];
                
                if (!jurnalContainer || !jurnalWrapper || !jurnalDots || jurnalCards.length === 0) return;

                let jurnalIndex = 0;
                let jurnalCardsPerView = getJurnalCardsPerView();
                let isJurnalDragging = false;
                let jurnalStartX = 0;
                
                function getJurnalCardsPerView() {
                    if (window.innerWidth >= 992) return 3;
                    if (window.innerWidth >= 768) return 2;
                    return 1;
                }
                
                function createJurnalDots() {
                    jurnalDots.innerHTML = '';
                    const totalSlides = Math.ceil(jurnalCards.length / jurnalCardsPerView);
                    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', () => goToJurnalSlide(i));
                        jurnalDots.appendChild(dot);
                    }
                }
                
                function updateJurnalSlider() {
                    const cardWidth = 100 / jurnalCardsPerView;
                    const offset = jurnalIndex * cardWidth * jurnalCardsPerView;
                    jurnalWrapper.style.transform = `translateX(-${offset}%)`;
                    
                    const dots = jurnalDots.querySelectorAll('.slider-dot');
                    dots.forEach((dot, index) => {
                        dot.classList.toggle('active', index === jurnalIndex);
                    });
                }
                
                function goToJurnalSlide(index) {
                    const totalSlides = Math.ceil(jurnalCards.length / jurnalCardsPerView);
                    jurnalIndex = Math.max(0, Math.min(index, totalSlides - 1));
                    
                    if (window.innerWidth < 768) {
                        const slideWidth = jurnalContainer.offsetWidth * 0.85; // matches 85% flex-basis
                        jurnalContainer.scrollLeft = jurnalIndex * slideWidth;
                    } else {
                        updateJurnalSlider();
                    }
                }
                
                // Add scroll listener for mobile to update dots
                jurnalContainer.addEventListener('scroll', () => {
                    if (window.innerWidth < 768) {
                        const slideWidth = jurnalContainer.offsetWidth * 0.85;
                        const newIndex = Math.round(jurnalContainer.scrollLeft / slideWidth);
                        if (newIndex !== jurnalIndex) {
                            jurnalIndex = newIndex;
                            const dots = jurnalDots.querySelectorAll('.slider-dot');
                            dots.forEach((dot, index) => {
                                dot.classList.toggle('active', index === jurnalIndex);
                            });
                        }
                    }
                });

                function nextJurnalSlide() {
                    const totalSlides = Math.ceil(jurnalCards.length / jurnalCardsPerView);
                    jurnalIndex = (jurnalIndex + 1) % totalSlides;
                    updateJurnalSlider();
                }
                
                function prevJurnalSlide() {
                    const totalSlides = Math.ceil(jurnalCards.length / jurnalCardsPerView);
                    jurnalIndex = (jurnalIndex - 1 + totalSlides) % totalSlides;
                    updateJurnalSlider();
                }
                
                jurnalContainer.addEventListener('mousedown', (e) => {
                    if (window.innerWidth < 768) return;
                    isJurnalDragging = true;
                    jurnalStartX = e.pageX - jurnalContainer.offsetLeft;
                    jurnalWrapper.style.transition = 'none';
                });
                
                jurnalContainer.addEventListener('mouseleave', () => {
                    if (window.innerWidth < 768) return;
                    if (isJurnalDragging) {
                        isJurnalDragging = false;
                        jurnalWrapper.style.transition = 'transform 0.5s ease-in-out';
                        updateJurnalSlider();
                    }
                });
                
                jurnalContainer.addEventListener('mouseup', () => {
                    if (window.innerWidth < 768) return;
                    if (isJurnalDragging) {
                        isJurnalDragging = false;
                        jurnalWrapper.style.transition = 'transform 0.5s ease-in-out';
                        updateJurnalSlider();
                    }
                });
                
                jurnalContainer.addEventListener('mousemove', (e) => {
                    if (window.innerWidth < 768) return;
                    if (!isJurnalDragging) return;
                    e.preventDefault();
                    const x = e.pageX - jurnalContainer.offsetLeft;
                    const walk = (x - jurnalStartX) * 2;
                    
                    if (walk < -50) {
                        nextJurnalSlide();
                        isJurnalDragging = false;
                        jurnalWrapper.style.transition = 'transform 0.5s ease-in-out';
                    } else if (walk > 50) {
                        prevJurnalSlide();
                        isJurnalDragging = false;
                        jurnalWrapper.style.transition = 'transform 0.5s ease-in-out';
                    }
                });
                
                jurnalContainer.addEventListener('touchstart', (e) => {
                    if (window.innerWidth < 768) return;
                    isJurnalDragging = true;
                    jurnalStartX = e.touches[0].pageX - jurnalContainer.offsetLeft;
                    jurnalWrapper.style.transition = 'none';
                });
                
                jurnalContainer.addEventListener('touchend', () => {
                    if (window.innerWidth < 768) return;
                    if (isJurnalDragging) {
                        isJurnalDragging = false;
                        jurnalWrapper.style.transition = 'transform 0.5s ease-in-out';
                        updateJurnalSlider();
                    }
                });
                
                jurnalContainer.addEventListener('touchmove', (e) => {
                    if (window.innerWidth < 768) return;
                    if (!isJurnalDragging) return;
                    const x = e.touches[0].pageX - jurnalContainer.offsetLeft;
                    const walk = (x - jurnalStartX) * 2;
                    
                    if (walk < -50) {
                        nextJurnalSlide();
                        isJurnalDragging = false;
                        jurnalWrapper.style.transition = 'transform 0.5s ease-in-out';
                    } else if (walk > 50) {
                        prevJurnalSlide();
                        isJurnalDragging = false;
                        jurnalWrapper.style.transition = 'transform 0.5s ease-in-out';
                    }
                });
                
                window.addEventListener('resize', () => {
                    jurnalCardsPerView = getJurnalCardsPerView();
                    jurnalIndex = 0;
                    createJurnalDots();
                    updateJurnalSlider();
                });
                
                createJurnalDots();
                updateJurnalSlider();
            }

            // Initialize all sliders
            initJournalSlider();
            initAchievementSlider('codingSliderContainer', 'codingSliderWrapper', 'codingSliderDots');
            initAchievementSlider('researchSliderContainer', 'researchSliderWrapper', 'researchSliderDots');
        });
    </script>
<?php require_once __DIR__ . '/../partials/footer.php'; ?>