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

    <section class="program-list-section fade-in" style="padding: 2rem 0 4rem 0; background-color: #ffffff;">
        <div class="container">
            <h2 class="section-title fade-up" style="text-align: left; margin-top: 0; font-size: 2rem;">Programs</h2>
            <div class="row">
                <?php foreach ($programs as $index => $program): ?>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="program-card-wrapper scale-in" style="border: 1px solid #e0e0e0; border-radius: 5px; overflow: hidden; transition: box-shadow 0.3s ease; transition-delay: <?php echo $index * 0.1; ?>s;">
                        <img src="<?php echo (strpos($program['image'], 'http') === 0) ? $program['image'] : BASE_URL . '/' . ltrim($program['image'], '/'); ?>" alt="<?php echo $program['name']; ?>" style="width: 100%; height: 220px; object-fit: cover;">
                        <div style="padding: 1.5rem;">
                            <h3 style="font-size: 1.25rem; font-weight: 700; color: #1e3a5f; margin-bottom: 0.75rem; line-height: 1.3;"><?php echo $program['name']; ?></h3>
                            <p style="color: #4a6fa5; font-size: 0.9rem; margin-bottom: 0.75rem;"><?php echo $program['duration']; ?></p>
                            <hr style="border-color: #eee; margin: 1rem 0;">
                            <p style="color: #1e3a5f; font-weight: 600; margin-bottom: 1rem;"><?php echo $program['price']; ?></p>
                            <a href="<?php echo BASE_URL; ?>/program/detail/<?php echo $program['id']; ?>" style="background-color: #e55a2b; color: white; border: none; padding: 0.75rem; width: 100%; border-radius: 5px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; display: block; text-align: center; text-decoration: none;">View Details</a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </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;">
                <p class="fade-up" style="color: #4a6fa5; font-weight: 600; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem;">Our Partner</p>
                <h2 class="fade-up" style="font-size: 2.5rem; font-weight: 800; color: #1e3a5f; margin-bottom: 3.5rem; transition-delay: 0.1s;">Global Science & Technology Partners</h2>
                <div class="partners-grid" 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/fitalenta.png" alt="fitalenta" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/wakaf.png" alt="wakaf" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/unla.png" alt="unla" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/sma.jpg" alt="sma" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/smpp.png" alt="smp" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/sd.png" alt="SD" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/seno.png" alt="seno" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/hikmah.png" alt="hikmah" style="height: 60px; width: auto;">
                    </div>
                    <div style="opacity: 0.75;">
                        <img src="<?php echo BASE_URL; ?>/assets/images/percikan.png" alt="percikan" style="height: 60px; width: auto;">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        @media (max-width: 991.98px) {
            .partners-grid {
                gap: 1.5rem !important;
            }
            .partners-grid img {
                height: 40px !important;
            }
            .program-list-section h2 {
                font-size: 1.75rem !important;
                margin-top: 0 !important;
            }
        }
    </style>
    <footer class="footer-section fade-in" style="padding: 5rem 0; background-color: #ffffff;">
        <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" style="font-size: 1.5rem; font-weight: 700; color: #1e3a5f; margin-bottom: 1.5rem;">Contact Us</h3>
                    <div class="footer-contact" style="color: #4a6fa5; font-size: 1rem; line-height: 1.7;">
                        <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" style="font-size: 1.5rem; font-weight: 700; color: #1e3a5f; margin-bottom: 1.5rem;">Follow Our Journey</h3>
                    <div class="social-icons" style="display: flex; gap: 1rem; margin-bottom: 1.5rem;">
                        <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" style="color: #4a6fa5; font-size: 0.9rem; line-height: 1.6;">
                        © 2026 Stemspark.id All rights reserved. Empowering the next generation of Indonesian innovators through science, coding, and research exploration.
                    </p>
                </div>
            </div>
        </div>
    </footer>

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