<?php include 'koneksi.php'; ?>
<!DOCTYPE html>
<html lang="en">
    <head><link rel="icon" href="upload/bn2.png" type="image/png">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Prestasi | Smk Budiniah 2</title>
        <style>
            body{
                margin:0;
                font-family: 'Times New Roman', Times, serif;
            }
            body a{
                cursor: pointer;
            }
            .hero-caption{
                display: flex;
                flex-direction: column;
                align-items: left;
                justify-content: left;
                text-align: left;
                margin: 10% 0 5% 0;
                padding-left: 5%;
                padding-right: 5%;
            }
            .hero-caption h1{
                font-size: 60px;
                font-weight: 700;
            }
            .hero-caption p{
                margin: 0 0 20px 0;
                max-width: 300px;
                line-height: 1.6;
                font-weight: 500;
                color: #666;
            }
            .list-prestasi{
                padding-left: 5%;
                padding-right: 5%;
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
            }
            .prestasi-card{
                border: 1px solid #ddd;
                border-radius: 8px;
                overflow: hidden;
                width: calc(33.333% - 20px);
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                transition: transform 0.2s;
            }
            .prestasi-card:hover{
                transform: translateY(-5px);
            }
            .image-card img{
                width: 100%;
                height: 200px;
                object-fit: cover;
            }
            .card-content{
                padding: 15px;
            }
            .teks-kecil{
                font-size: 12px;
                color: #b8860b;
                margin-bottom: 10px;
            }
        </style>
</head>
<body>
    <?php require 'navbar.php'; ?>
    <div class="hero-caption">
        <h1 style="font-family: 'Times New Roman', Times, serif;">Prestasi</h1>
        <p>Sebuah dokumentasi dari berbagai jenis prestasi yang berhasil diraih di Sekolah kami.</p>
    </div>
    <div class="list-prestasi">
        <?php 
        $query = "SELECT * FROM tb_prestasi";
        $result = mysqli_query($host,$query);
        if ($row && mysqli_num_rows($result) > 0){
            while ($row = mysqli_fetch_assoc($result)){
                $kejuaraan = htmlspecialchars($row['kejuaraan_dari']);
                $judul = htmlspecialchars($row['nama_prestasi']);
                $deskripsi = htmlspecialchars($row['deskripsi']);
                $imgSrc = !empty($row['gambar_prestasi']) ? "upload/" . htmlspecialchars($row['gambar_prestasi']) : "upload/default.jpg";
                echo "<div class='prestasi-card'>";
                echo "<a href='detail_prestasi.php?id_prestasi=" . $row['id_prestasi'] . "'>";
                echo "<div class='image-card'>";
                echo "<img src='" . $imgSrc . "' alt='" . $judul . "'>";
                echo "</div>";
                echo "</a>";
                echo "<div class='card-content'>";
                echo "<p class='teks-kecil'>kejuaraan dari ". $kejuaraan . "</p>";
                echo "<h2>" . $judul . "</h2>";
                echo "<p class='deskripsi'> " . $deskripsi . "</p>";
                echo "</div>";
                echo "</div>";
            }
        }
        ?>
    </div>



    <?php require 'footer.php'; ?>

    <script>
        // Intersection Observer for slide-in animations
        document.addEventListener('DOMContentLoaded', function() {
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        if (entry.target.classList.contains('hero-caption')) {
                            entry.target.classList.add('slide-in-from-bottom');
                        } else if (entry.target.classList.contains('prestasi-card')) {
                            // Add staggered animation for cards
                            const cards = document.querySelectorAll('.prestasi-card');
                            cards.forEach((card, index) => {
                                setTimeout(() => {
                                    card.classList.add('slide-in-from-right');
                                }, index * 300); // 300ms delay between each card
                            });
                        }
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            // Observe the elements
            const heroCaption = document.querySelector('.hero-caption');
            const prestasiCards = document.querySelectorAll('.prestasi-card');

            if (heroCaption) observer.observe(heroCaption);
            prestasiCards.forEach(card => observer.observe(card));
        });
    </script>
</body>
</html>

