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

    <section class="hero-section fade-in">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 fade-in-left" style="transition-delay: 0.2s;">
                    <h1 class="hero-title" ><?php echo $title; ?></h1>
                    <p class="hero-text"><?php echo $description; ?></p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="https://whatsapp.com/channel/0029VaxfGWgBlHpe4725d21Y" target="_blank" class="btn-primary-custom" style="text-decoration: none;">Gabung Komunitas</a>
                        <a href="<?php echo BASE_URL; ?>/jurnal" class="btn-outline-custom" style="text-decoration: none;">Lihat Karya Kami</a>
                    </div>
                    <div class="decorative-lines">
                        <div class="line"></div>
                        <div class="line"></div>
                    </div>
                </div>
                <div class="col-lg-6 mt-5 mt-lg-0 fade-in-right" style="transition-delay: 0.4s;">
                    <div class="hero-image">
                        <img src="assets/images/1.jpg" alt="STEM Education">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="programs-section fade-in">
        <div class="container">
            <div class="text-center">
                <h2 class="section-title fade-up">Cultivating Tomorrow's Innovators</h2>
                <p class="section-description fade-up" style="transition-delay: 0.1s;">
                    Kami percaya bahwa setiap anak memiliki potensi menjadi problem solver dunia.<br>
                    Misi kami adalah membimbing generasi muda menjadi inovator, peneliti, dan pemimpin masa depan <br>
                    melalui pendekatan Coding, Sains Terapan, dan Riset Berbasis Proyek. Di sini, anak belajar bukan untuk 
                    sekadar nilai — tetapi untuk solusi.
                </p>
            </div>
            <div class="row mt-5">
                <div class="col-lg-4 col-md-6 scale-in" style="transition-delay: 0.1s;">
                    <div class="program-card">
                        <img src="assets/images/19.jpg" alt="Coding & Robotika">
                        <h3>Coding & Robotika</h3>
                        <p>Belajar membangun aplikasi, game, hingga robot sederhana dengan kurikulum bertahap dan aplikatif.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 scale-in" style="transition-delay: 0.2s;">
                    <div class="program-card">
                        <img src="assets/images/3.jpg" alt="Research & Innovation">
                        <h3>Research & Innovation</h3>
                        <p>Anak dibimbing membuat proyek penelitian orisinal yang bisa dipublikasikan dan dilombakan secara internasional.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mx-auto scale-in" style="transition-delay: 0.3s;">
                    <div class="program-card">
                        <img src="assets/images/4.jpg" alt="Applied Math & Science">
                        <h3>Applied Math & Science</h3>
                        <p>Matematika dan sains bukan hanya teori — tetapi alat berpikir untuk menyelesaikan masalah nyata.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="gallery-section fade-in">
        <div class="container">
            <div class="text-start mb-5">
                <h2 class="section-title fade-up">Innovation Gallery</h2>
                <p class="section-description mb-0 fade-up" style="text-align: left; max-width: 700px; margin-left: 0; transition-delay: 0.1s;">
                    Saksikan generasi inovator Indonesia berikutnya saat mereka menghadapi tantangan dunia nyata melalui sains, coding, dan proyek riset kreatif.
                </p>
            </div>
            <div class="gallery-grid">
                <a href="<?php echo BASE_URL; ?>/jurnal" class="gallery-item scale-in" style="transition-delay: 0.1s; text-decoration: none;">
                    <img src="assets/images/1.jpg" alt="Robotics & AI Research">
                    <div class="gallery-caption">Robotics & AI Research</div>
                </a>
                <a href="<?php echo BASE_URL; ?>/jurnal" class="gallery-item scale-in" style="transition-delay: 0.2s; text-decoration: none;">
                    <img src="assets/images/mikro.jpeg" alt="Renewable Energy Study">
                    <div class="gallery-caption">Renewable Energy Study</div>
                </a>
                <a href="<?php echo BASE_URL; ?>/jurnal" class="gallery-item scale-in" style="transition-delay: 0.3s; text-decoration: none;">
                    <img src="assets/images/eskul3.jpeg" alt="International Coding Achievement">
                    <div class="gallery-caption">International Coding Achievement</div>
                </a>
                <a href="<?php echo BASE_URL; ?>/resource" class="gallery-item scale-in" style="transition-delay: 0.4s; text-decoration: none;">
                    <img src="assets/images/22.webp" alt="Digital Research Library">
                    <div class="gallery-caption">Digital Research Library</div>
                </a>
            </div>
        </div>
    </section>

    <section class="parents-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 fade-in-left">
                    <div class="parents-card">
                        <h2 class="parents-title">Empowering Your Child's Innovation Journey</h2>
                        <p class="parents-text">
                            Kami membekali orang tua dengan alat, pengetahuan, dan sumber daya yang dibutuhkan untuk mendukung inovator muda. 
                            Akses perpustakaan digital terkurasi berisi riset sains, jelajahi platform STEM interaktif, 
                            serta temukan panduan yang dirancang untuk menumbuhkan rasa ingin tahu dan eksplorasi ilmiah di rumah.
                        </p>
                        <div>
                            <span class="tag-pill">Worksheet</span>
                            <span class="tag-pill">Digital Library</span>
                            <span class="tag-pill">Parent Guides</span>
                        </div>
                        <a href="<?php echo BASE_URL; ?>/resource" class="btn-resources" style="text-decoration: none; display: inline-block;">Access All Resources</a>
                    </div>
                </div>
                <div class="col-lg-7 fade-in-right">
                    <div class="parents-image-wrapper">
                        <img src="assets/images/mom.jpg" alt="Parent and Child Learning">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="cta-section fade-in">
        <div class="container">
            <div class="text-center">
                <h2 class="cta-title fade-up">Fuel Their Brilliance</h2>
                <p class="cta-text fade-up" style="transition-delay: 0.1s;">
                    Berdayakan anak Anda untuk berinovasi, bereksplorasi, dan berprestasi melalui program STEM kelas dunia kami. 
                    Bergabunglah bersama generasi pemikir dan kreator Indonesia berikutnya hari ini.
                </p>
                <div class="cta-buttons fade-up" style="transition-delay: 0.2s;">
                    <a href="<?php echo BASE_URL; ?>/program" class="btn-cta-outline" style="text-decoration: none;">Explore Programs</a>
                    <a href="https://wa.me/6285179545415" target="_blank" class="btn-cta-outline" style="text-decoration: none;">Request Info</a>
                </div>
            </div>
        </div>
    </section>

    <section class="impact-section fade-in">
        <div class="container">
            <svg class="map-background" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
                <path d="M100,100 L200,80 L250,120 L300,100 L350,150 L400,120 L450,180 L500,150 L550,200 L600,180 L650,220 L700,200 L750,250 L700,280 L650,260 L600,300 L550,280 L500,320 L450,300 L400,340 L350,320 L300,350 L250,330 L200,360 L150,340 L100,370 L50,350 L80,300 L50,250 L80,200 L50,150 Z" fill="#94a3b8" opacity="0.5"/>
                <rect x="600" y="200" width="100" height="80" fill="#ff6b35"/>
                <rect x="100" y="150" width="80" height="60" fill="#ffd93d"/>
                <circle cx="550" cy="150" r="8" fill="#1e3a5f"/>
                <circle cx="620" cy="170" r="8" fill="#ff6b35"/>
                <circle cx="680" cy="160" r="8" fill="#ffd93d"/>
            </svg>
            <div class="text-center">
                <h2 class="impact-title fade-up">Our Impact</h2>
                <p class="impact-subtitle fade-up" style="transition-delay: 0.1s;">And still counting</p>
            </div>
            <div class="impact-cards">
                <div class="impact-card orange scale-in" style="transition-delay: 0.1s;">
                    <div class="impact-icon">📱</div>
                    <div class="impact-number">30+</div>
                    <div class="impact-label">App Projects</div>
                </div>
                <div class="impact-card navy scale-in" style="transition-delay: 0.2s;">
                    <div class="impact-icon">🤖</div>
                    <div class="impact-number">14+</div>
                    <div class="impact-label">Published Jurnal</div>
                </div>
                <div class="impact-card light-blue scale-in" style="transition-delay: 0.3s;">
                    <div class="impact-icon">🏆</div>
                    <div class="impact-number">35</div>
                    <div class="impact-label">Int'l Awards</div>
                </div>
                <div class="impact-card yellow scale-in" style="transition-delay: 0.4s;">
                    <div class="impact-icon">🔬</div>
                    <div class="impact-number">10+</div>
                    <div class="impact-label">Scholarship Given</div>
                </div>
                <div class="impact-card blue scale-in" style="transition-delay: 0.5s;">
                    <div class="impact-icon">👥</div>
                    <div class="impact-number">100+</div>
                    <div class="impact-label">Young Leaders</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>

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