<?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>detail kepala sekolah | 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;
    }
    
    .kepsek {
        width: 100%;
        background: #eef5ff;         
        padding: 60px 0 120px;          
        text-align: center;
    }

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

    .kepala-sekolah {
        margin: -80px auto 40px auto;    
        background: #fff;
        padding: 30px;
        border-radius: 15px;
        max-width: 900px;

        display: grid;
        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;
    }

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

    ol {
        margin-left: 20px;
        margin-bottom: 20px;
    }


    
    @media (max-width: 768px) {
        .kepala-sekolah {
            grid-template-columns: 1fr;
            margin: -50px 20px 20px 20px;
            padding: 20px;
        }
    }
</style>
</head>
<body>

<?php require 'navbar.php'; ?>
<?php
$query_kepsek = "SELECT nama_guru FROM tb_guru WHERE jabatan = 'kepalasekolah'";
$result_kepsek = mysqli_query($host, $query_kepsek);
$row_kepsek = mysqli_fetch_assoc($result_kepsek);
$nama_kepsek = htmlspecialchars($row_kepsek['nama_guru']);

$query_paragraf = "SELECT * FROM tb_katakata_kepsek";
$result_paragraf = mysqli_query($host, $query_paragraf);
$row_paragraf = mysqli_fetch_assoc($result_paragraf);
$paragraf1 = htmlspecialchars($row_paragraf['paragraf_1']);
$paragraf2 = htmlspecialchars($row_paragraf['paragraf_2']);
$paragraf3 = htmlspecialchars($row_paragraf['paragraf_3']);
$paragraf4 = htmlspecialchars($row_paragraf['paragraf_4']);
$paragraf = htmlspecialchars($row_paragraf['paragraf_5']);
?>
<div class="kepsek">
    <h1><?php echo $nama_kepsek; ?>, M.PD</h1>
</div>
<div class="kepala-sekolah">
    <div class="bagian-teks">
        <h2>Assalamuakaikum Wr. Br.</h2>

        <h3>Kata sambutan</h3>

        <?php if (!empty($paragraf1)): ?>
        <p><?php echo $paragraf1; ?></p>
        <?php endif; ?>

        <?php if (!empty($paragraf2)): ?>
        <p><?php echo $paragraf2; ?></p>
        <?php endif; ?>

        <?php if (!empty($paragraf3)): ?>
        <p><?php echo $paragraf3; ?></p>
        <?php endif; ?>

        <?php if (!empty($paragraf4)): ?>
        <p><?php echo $paragraf3; ?></p>
        <?php endif; ?>

        <?php if (!empty($paragraf5)): ?>
        <p><?php echo $paragraf3; ?></p>
        <?php endif; ?>

        <h2>Wassalamualaikum Wr. Br</h2>
    </div>
</div>
<footer>
    <?php require 'footer.php' ?>
</footer>

<script>
    // Intersection Observer for slide-in animation
    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');
                    }
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        // Observe the element
        const bagianTeks = document.querySelector('.bagian-teks');
        if (bagianTeks) observer.observe(bagianTeks);
    });
</script>
</body>
</html>

