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

    <style>
        .detail-section {
            padding: 4rem 0;
            background-color: #ffffff;
            margin-top:-4rem;
        }
        .back-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: #1e3a5f;
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            margin-bottom: 2rem;
            transition: all 0.3s ease;
            
        }
        .back-button:hover {
            background-color: #0f1f3a;
            color: white;
        }
        .detail-card {
            background-color: white;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.08);
        }
        .detail-image {
            width: 100%;
            aspect-ratio: 3/4;
            overflow: hidden;
        }
        .detail-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .detail-content {
            padding: 2rem;
        }
        .program-category {
            display: inline-block;
            background-color: #e8eef8;
            color: #1e3a5f;
            padding: 0.5rem 1rem;
            border-radius: 30px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .program-name {
            font-size: 2.5rem;
            font-weight: 800;
            color: #1e3a5f;
            margin-bottom: 1rem;
            line-height: 1.2;
        }
        .program-price {
            font-size: 2rem;
            font-weight: 800;
            color: #ff3b5c;
            margin-bottom: 1.5rem;
        }
        .program-meta {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            padding: 1.5rem;
            background-color: #f8f9ff;
            border-radius: 20px;
            margin-bottom: 2rem;
        }
        .meta-item {
            display: flex;
            flex-direction: column;
        }
        .meta-label {
            font-size: 0.875rem;
            color: #4a6fa5;
            margin-bottom: 0.25rem;
        }
        .meta-value {
            font-size: 1rem;
            font-weight: 600;
            color: #1e3a5f;
        }
        .description-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e3a5f;
            margin-bottom: 1rem;
        }
        .description-text {
            color: #4a6fa5;
            font-size: 1.1rem;
            line-height: 1.7;
        }
        @media (max-width: 991.98px) {
            .program-name {
                font-size: 2rem;
            }
            .program-meta {
                grid-template-columns: 1fr;
            }
            .detail-section {
                margin-top: 0 !important;
            }
        }
    </style>

    <section class="detail-section fade-in" style="padding: 2rem 0 4rem 0; background-color: #ffffff;">
        <div class="container">
            <a href="<?php echo BASE_URL; ?>/program" class="back-button">
                ← Kembali ke Katalog
            </a>
            <div class="detail-card">
                <div class="row g-0">
                    <div class="col-lg-5 fade-in-left">
                        <div class="detail-image">
                            <img src="<?php echo (strpos($program['image'], 'http') === 0) ? $program['image'] : BASE_URL . '/' . ltrim($program['image'], '/'); ?>" alt="<?php echo $program['name']; ?>">
                        </div>
                    </div>
                    <div class="col-lg-7 fade-in-right">
                        <div class="detail-content">
                            <div class="program-category"><?php echo $program['category']; ?></div>
                            <h1 class="program-name"><?php echo $program['name']; ?></h1>
                            <div class="program-price"><?php echo $program['price']; ?></div>
                            <div class="program-meta">
                                <div class="meta-item">
                                    <span class="meta-label">Modul</span>
                                    <span class="meta-value"><?php echo $program['modul']; ?></span>
                                </div>
                                <div class="meta-item">
                                    <span class="meta-label">Durasi</span>
                                    <span class="meta-value"><?php echo $program['duration']; ?></span>
                                </div>
                                <div class="meta-item">
                                    <span class="meta-label">ID Program</span>
                                    <span class="meta-value"><?php echo $program['code']; ?></span>
                                </div>
                            </div>
                            <div class="description-title">Deskripsi Program</div>
                            <p class="description-text"><?php echo $program['description']; ?></p>
                            <div style="margin-top: 2rem; text-align: center;">
                                <a href="https://wa.me/6285179545415" target="_blank" style="display: inline-block; background-color: #ff6b35; color: white; border: none; padding: 1rem 3rem; border-radius: 30px; font-weight: 700; font-size: 1.25rem; text-decoration: none; transition: all 0.3s ease;">
                                    JOIN NOW
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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/@stemsparkindonesia" 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'; ?>
