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

    <section class="blog-section fade-in" style="padding: 4rem 0; background-color: #ffffff;">
        <div class="container">
            <div style="text-align: center; margin-bottom: 3rem;">
                <span style="color: #ff3b5c; font-weight: 600; font-size: 0.875rem;">All Posts</span>
            </div>

            <div class="row g-4" style="justify-content: center;">
                <?php foreach ($posts as $index => $post): ?>
                <div class="col-lg-4 col-md-6 col-sm-12" style="display: flex;">
                    <div class="blog-card scale-in" style="background: white; border-radius: 10px; overflow: hidden; border: 1px solid #eee; width: 100%; display: flex; flex-direction: column; transition-delay: <?php echo $index * 0.1; ?>s;">
                        <div class="blog-image" style="position: relative; flex-shrink: 0;">
                            <img src="<?php echo $post['image']; ?>" alt="<?php echo $post['title']; ?>" style="width: 100%; height: 240px; object-fit: cover;">
                        </div>
                        <div class="blog-content" style="padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1;">
                            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-shrink: 0;">
                                <div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #666;">
                                    <span>🌻</span>
                                    <span><?php echo $post['author']; ?></span>
                                    <span>•</span>
                                    <span><?php echo $post['date']; ?></span>
                                    <span>•</span>
                                    <span><?php echo $post['read_time']; ?></span>
                                </div>
                                <span style="color: #999;">⋮</span>
                            </div>
                            <h3 style="font-size: 1.25rem; font-weight: 700; color: #1e3a5f; margin-bottom: 1rem; line-height: 1.4; flex-shrink: 0; min-height: 3.5rem;"><?php echo $post['title']; ?></h3>
                            <p style="color: #4a6fa5; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1;"><?php echo $post['excerpt']; ?></p>
                            <div style="display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eee; padding-top: 1rem; flex-shrink: 0;">
                                <div style="display: flex; gap: 1rem; color: #666;">
                                    <button class="view-btn" data-post="<?php echo $index; ?>" style="background: none; border: none; cursor: pointer; font-size: 1rem; display: flex; align-items: center; gap: 0.25rem;">
                                        <span class="view-icon">👁️</span>
                                        <span class="view-count">0</span>
                                    </button>
                                    <button class="comment-btn" data-post="<?php echo $index; ?>" style="background: none; border: none; cursor: pointer; font-size: 1rem; display: flex; align-items: center; gap: 0.25rem;">
                                        <span class="comment-icon">💬</span>
                                        <span class="comment-count">0</span>
                                    </button>
                                </div>
                                <button class="like-btn" data-post="<?php echo $index; ?>" style="background: none; border: none; cursor: pointer; font-size: 1.25rem; color: #ff6b35;">
                                    <span class="heart-icon">♡</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const likeButtons = document.querySelectorAll('.like-btn');
            const viewButtons = document.querySelectorAll('.view-btn');
            const commentButtons = document.querySelectorAll('.comment-btn');

            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const heartIcon = this.querySelector('.heart-icon');
                    if (heartIcon.textContent === '♡') {
                        heartIcon.textContent = '❤️';
                        heartIcon.style.transform = 'scale(1.2)';
                        setTimeout(() => {
                            heartIcon.style.transform = 'scale(1)';
                        }, 200);
                    } else {
                        heartIcon.textContent = '♡';
                    }
                });
            });

            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const countSpan = this.querySelector('.view-count');
                    let count = parseInt(countSpan.textContent);
                    count++;
                    countSpan.textContent = count;
                    this.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 150);
                });
            });

            commentButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const countSpan = this.querySelector('.comment-count');
                    let count = parseInt(countSpan.textContent);
                    count++;
                    countSpan.textContent = count;
                    this.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 150);
                    alert('Fitur komentar akan segera tersedia!');
                });
            });
        });
    </script>

    <footer class="footer-section fade-in" style="padding-top: 5rem; background-color: #ffffff;">
        <div class="container">
            <div class="row align-items-start" style="align-items: flex-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">
                        <p><strong>Stemspark Indonesia</strong></p>
                        <p>Jl. Ganesha No. 7, Lb. Siliwangi,</p>
                        <p>Bandung, Jawa Barat 40132</p>
                        <p>Indonesia</p>
                        <p style="margin-top: 1rem;">E: sparks.stem@gmail.com</p>
                        <p>T: +62 851-7954-5415</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: 0.75rem; margin-bottom: 2rem;">
                        <a href="#" class="social-icon facebook" style="width: 40px; height: 40px; border-radius: 50%; background-color: #1877f2; color: white; display: flex; align-items: center; justify-content: center;">
                            <span>f</span>
                        </a>
                        <a href="#" class="social-icon instagram" style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; display: flex; align-items: center; justify-content: center;">
                            <span>📷</span>
                        </a>
                        <a href="#" class="social-icon youtube" style="width: 40px; height: 40px; border-radius: 50%; background-color: #ff0000; color: white; display: flex; align-items: center; justify-content: center;">
                            <span>▶</span>
                        </a>
                        <a href="#" class="social-icon" style="width: 40px; height: 40px; border-radius: 50%; background-color: #1e3a5f; color: white; display: flex; align-items: center; justify-content: center;">
                            <span>❌</span>
                        </a>
                        <a href="#" class="social-icon linkedin" style="width: 40px; height: 40px; border-radius: 50%; background-color: #0a66c2; color: white; display: flex; align-items: center; justify-content: center;">
                            <span>in</span>
                        </a>
                        <a href="#" class="social-icon tiktok" style="width: 40px; height: 40px; border-radius: 50%; background-color: #000; color: white; display: flex; align-items: center; justify-content: center;">
                            <span>🎵</span>
                        </a>
                    </div>
                    <p class="footer-copyright" style="color: #4a6fa5; font-size: 0.9rem;">
                        © 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'; ?>
