<?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>Struktur organisasi | Smk Budiniah 2</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="footer.css">
    <style>
    *{
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
    }

    body{
        font-family: 'Courier New', Courier, monospace;
        background: #ffffff;
    }
    
    .struktur {
        width: 100%;
        background: #eef5ff;         
        padding: 60px 0 120px;          
        text-align: center;
    }

    .struktur h1 {
        font-size: 40px;
        font-weight: bold;
        color: #2a2a2a;
    }

    .struktur-sekolah {
        margin: -80px auto 40px auto;    
        background: #fff;
        padding: 30px;
        border-radius: 15px;
        max-width: 1100px;
        max-height: 600px;

        display: grid;
        grid-template-columns: 70% 30%;
        gap: 20px;

        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        position: relative;
        z-index: 10;
    }

    .bagian-teks {
        background: #fff;
        border-radius: 10px;
        line-height: 1.6;
    }
    .bagian-teks img{
        width:100%;
        height: auto;
    }

    p {
        margin-bottom: 15px;
        text-align: justify;
    }

    ol {
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .kepala-sekolah {
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        color: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .principal-photo {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        border: 3px solid #fff;
        object-fit: cover;
    }

    .kepala-sekolah h3 {
        margin: 10px 0;
        font-size: 18px;
        font-weight: bold;
    }

    .kepala-sekolah p {
        margin: 5px 0;
        font-size: 14px;
        opacity: 0.9;
    }

    @media (max-width: 768px) {
        .struktur-sekolah {
            grid-template-columns: 1fr;
            margin: -50px 20px 20px 20px;
            padding: 20px;
            max-height: none;
            height: auto;
        }
    }

    /* Initial states for animations */
    .bagian-teks {
        opacity: 0;
        transform: translateY(100px);
        transition: all 1s ease-out;
    }

    .bagian-teks.slide-in-from-bottom {
        opacity: 1;
        transform: translateY(0);
    }

    .kepala-sekolah {
        opacity: 0;
        transform: translateY(-100px);
        transition: all 1s ease-out;
    }

    .kepala-sekolah.slide-in-from-top {
        opacity: 1;
        transform: translateY(0);
    }
</style>
</head>
<body>

<?php require 'navbar.php'; ?>
<div class="struktur">
    <h1 style="text-transform: capitalize;">struktur organisasi</h1>
</div>
<div class="struktur-sekolah">
    <?php 
    $query = "SELECT * FROM tb_struktur_sekolah";
    $result = mysqli_query($host,$query);
    $row = mysqli_fetch_assoc($result);
    ?>

    <div class="bagian-teks">
        <img src="upload/<?php echo $row['gambar']; ?>" alt="">
    </div>
    <div class="kepala-sekolah">
        <?php
        $query = mysqli_query($host, "SELECT gambar_guru, nama_guru FROM tb_guru WHERE jabatan = 'kepalasekolah'");
        $row = mysqli_fetch_assoc($query);
        ?>
        <img src="upload/<?php echo $row['gambar_guru']; ?>" alt="Kepala Sekolah" class="principal-photo">
        <h3><?php echo $row['nama_guru']; ?></h3>
        <p>- Kepala Sekolah -</p>
    </div>
</div>
    

<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('bagian-teks')) {
                        entry.target.classList.add('slide-in-from-bottom');
                    } else if (entry.target.classList.contains('kepala-sekolah')) {
                        entry.target.classList.add('slide-in-from-top');
                    }
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        // Observe the elements
        const bagianTeks = document.querySelector('.bagian-teks');
        const kepalaSekolah = document.querySelector('.kepala-sekolah');

        if (bagianTeks) observer.observe(bagianTeks);
        if (kepalaSekolah) observer.observe(kepalaSekolah);
    });
</script>
<?php require 'footer.php'; ?>
</body>
</html>

