<?php
include 'koneksi.php';

function limit_words($text, $limit) {
    $words = explode(' ', $text);
    if (count($words) > $limit) {
        return implode(' ', array_slice($words, 0, $limit)) . '...';
    }
    return $text;
}

function extractYouTubeVideoId($url) {
    $parsedUrl = parse_url($url);
    $host = $parsedUrl['host'] ?? '';
    $path = $parsedUrl['path'] ?? '';

    if (strpos($host, 'youtube.com') !== false) {
        // Handle youtube.com URLs
        if (isset($parsedUrl['query'])) {
            parse_str($parsedUrl['query'], $query);
            return $query['v'] ?? '';
        }
        // Handle embed URLs like https://www.youtube.com/embed/VIDEOID
        if (preg_match('#/embed/([a-zA-Z0-9_-]+)#', $path, $matches)) {
            return $matches[1];
        }
    } elseif (strpos($host, 'youtu.be') !== false) {
        // Handle youtu.be URLs like https://youtu.be/VIDEOID
        return ltrim($path, '/');
    }

    return '';
}

function getYouTubeData($url) {
    // Extract video ID from URL
    $videoId = extractYouTubeVideoId($url);
    if (!$videoId) return ['title' => 'Unknown Title', 'upload_date' => 'Unknown Date'];

    // Use YouTube Data API v3 to get video details (requires API key)
    $apiKey = 'YOUR_YOUTUBE_API_KEY'; // Replace with your actual API key
    $apiUrl = "https://www.googleapis.com/youtube/v3/videos?id=$videoId&key=$apiKey&part=snippet";
    $json = @file_get_contents($apiUrl);
    if ($json) {
        $data = json_decode($json, true);
        if (isset($data['items'][0]['snippet'])) {
            $snippet = $data['items'][0]['snippet'];
            return [
                'title' => $snippet['title'] ?? 'Unknown Title',
                'upload_date' => $snippet['publishedAt'] ?? 'Unknown Date'
            ];
        }
    }

    // Fallback to oEmbed for title if Data API fails
    $oembedUrl = "https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=$videoId&format=json";
    $json = @file_get_contents($oembedUrl);
    if ($json) {
        $data = json_decode($json, true);
        return [
            'title' => $data['title'] ?? 'Unknown Title',
            'upload_date' => 'Unknown Date'
        ];
    }
    return ['title' => 'Unknown Title', 'upload_date' => 'Unknown Date'];
}
?>
<!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>smk budiniah 2</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="icon" href="upload/bn2.png" type="image/png">
    <style>
        body{
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        body a{
            cursor:pointer;
        }
        main{
            margin: 26px 0 28px;
            padding: 14px 16px ;
            padding-left: 50px;
            padding-right: 50px;
        }
        .hero-page {
            display: flex;
            align-items: center;
            gap: 20px;
            padding-left:5%;
            padding-right:5%;
            justify-content: space-between;
        }
        .hero-content {
            width: 75%;
        }
        .hero-image {
            width: 55%;
            height:auto;
           
        }
        .hero-image img{
            border-radius: 22px;
            box-shadow: 34px 28px 0px 0px rgba(60,172,222,0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .hero-image img:hover{
            transform: scale(1.05);
            box-shadow: 40px 35px 0px 0px rgba(60,172,222,0.3);
        }
        .hero-page h2 {
            font-family: 'Times New Roman', Times, serif;
            font-size: 55px;
            width: 55%;
            font: bold;
            text-transform: capitalize;
        }
        .hero-page p{
            text-transform: capitalize;
            text-align: justify;
            width: 80%;
            max-width: 100%;
            line-height: 1.5;
            font-size: 22px;
        }
        .typing-wrap{
            font-size: 28px;
            font-family: 'Oswald', sans-serif,'times new roman'; 
            font-weight: 700;
            color: #3f3ea5ff;
            display:inline-flex;
            align-items:center;
            background: white;
            padding: 14px ;
            padding-left: 5%;
            padding-right: 5%;
            text-transform: capitalize;
        }

    .typed-text {
        white-space: nowrap;
        overflow: hidden;
        display: inline-block; /* Tambahkan ini agar properti tinggi berfungsi */
    }

    /* Tambahkan kode baru ini di bawah .typed-text */
    .typed-text::before {
        content: "\200b"; /* Zero width space (karakter hantu) */
        display: inline-block;
    }
    /* Cursor (blinking) */
    .cursor{
      width:2px;
      height:1.1em;
      background: #0f62fe;
      display:inline-block;
      animation: blink 1s steps(2,end) infinite;
      border-radius:1px;
    }
    .cursor.no-blink {
      animation: none;
      opacity: 1;
    }
    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }
    main button a{
        text-decoration: none;
    }
    .button a{
        background:linear-gradient(135deg,#0f62fe,#3f3ea5ff);
        border-radius: 22px;
        padding: 14px 16px;
        display: inline-block;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin:10px;
        transition: all 0.3s ease-in-out;
         text-decoration: none;
        color: #fff;
    }
    .button {
       margin-top:20px ;
    }
    .button a:hover{
        background: linear-gradient(135deg,#3f3ea5ff,#0f62fe);
        transform: translateY(-5%);
    }
    .hero-page img{
        width: 100%;
        height: auto;
    }

    
        .next-page {
            margin-top: 60px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 40px;
            justify-content: space-between;
            padding-left: 5%;
            padding-right: 5%;
            
        }
        .next-page .hero-img img {
            width: 80%;
            height: auto;
            border-radius: 22px;
            box-shadow: 34px 28px 0px 0px rgba(60,172,222,0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .next-page .hero-img img:hover {
            transform: scale(1.05);
            box-shadow: 40px 35px 0px 0px rgba(60,172,222,0.3);
        }
        .deskripsi-tentang {
            width: 80%;
            font-family: 'Times New Roman', Times, serif;
            font-size: 20px;
            max-width: 100%;
            padding-left: 20px;
            line-height: 1.5;
            text-align: justify;
        }
.siapa {
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5em;
}
.tentang {
    color: #333;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.5;
    font-size: 22px;
    width: 100%;
    text-align: justify;
}
.deskripsi-tentang .siapa{
    align-items: center;
    align-content: center;
}


.berita {
    margin-top: 10%;
    padding-left: 5%;
    padding-right: 5%;
}

/* Berita text animation */
.berita-content h2 {
    opacity: 0;
    transform: translateX(10%);
    transition: all 1s ease-out;
}

.berita-content p {
    opacity: 0;
    transform: translateX(10%);
    transition: all 1s ease-out;
}

.berita-content h2.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

.berita-content p.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

/* Berita cards animation */
.berita-item {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.8s ease-out;
}

.berita-item.slide-in-card {
    opacity: 1;
    transform: translateX(0);
}

.cart-berita {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 20px 0;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.cart-berita::-webkit-scrollbar {
    display: none;
}

.berita-item {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: white;
}

.berita-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.berita-item img:hover {
    transform: scale(1.05);
}

.berita-item .content {
    padding: 15px;
}

.berita-item .content h3 {
    font-size: 18px;
    margin: 0 0 10px 0;
    color: #333;
}

.berita-item .content p {
    font-size: 14px;
    color: #666;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.berita-item .date {
    font-size: 12px;
    color: #999;
}

.berita-item .read-more {
    display: inline-block;
    margin-top: 10px;
    color: #0f62fe;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s;
}

.berita-item .read-more:hover {
    color: #3f3ea5ff;
}

.indicators {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #0f62fe;
}

.indicators-dokumentasi {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.indicators-guru {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.kepala-sekolah {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 60px;
    padding-left: 5%;
    padding-right: 5%;
}

.kepala-sekolah .foto-kepsek img {
    box-shadow: 34px 28px 0px 0px rgba(60, 172, 222, 0.2);
}
.slide-in-left {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.slide-in-right {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.teks-kepsek {
    width: 35%;
}

.teks-kepsek p {
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: justify;
    margin-bottom: 0.5em;
}
.sebut-data{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40vh;
    padding: 20px;
}
.text-container{
    background: url("upload/background.jpg");
    width: 100%;
    margin-top: 10%;
    max-height:250px;
    padding: 40px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    color: white;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
}
.sebut-data{
    flex: 1;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sebut-data:not(:last-child)::after{
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
}
.nomor-stat{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 32px;
    margin-top: 10px;
    font-weight: bold;
}
.stat-label{
    font-size: 32px;
    margin-top: 10px;
    font-weight: 500;
    text-transform: uppercase;
}
.guru-guru {
        flex-direction: row;
        align-items: center;
    }

    .guru-info {
        flex: 0 0 20%;
        text-align: left;
    }

    .foto-nama {
        flex: 1;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    .foto-nama::-webkit-scrollbar {
        display: block;
    }

    .teacher-item {
        border-radius: 0;
        background: none;
        box-shadow: none;
        padding: 0;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 0 0 120px;
    }

    .teacher-item img {
        border-radius: 50% 50% 0 0; /* Oval at top */
        width: 120px;
        height: 120px;
        object-fit: cover;
    }

    .teacher-item h4 {
        margin: 10px 0 0 0;
        font-size: 16px;
        color: #333;
    }
@media (max-width: 768px) {
    text-container{
        align-items: center;
        gap: 30px;
    }
    
}
.guru-guru{
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: 5%;
    padding-right: 5%;
}
.guru-deskripsi {
    opacity: 0;
    transform: translateX(10%);
    transition: all 1s ease-out;
}

.guru-judul.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

.guru-deskripsi.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

/* Guru-guru cards animation */
.teacher-item {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.8s ease-out;
}

.teacher-item.slide-in-card {
    opacity: 1;
    transform: translateX(0);
}
.guru-info {
    width: 30%;
    display: flex;
    flex-direction: column;
}
.guru-deskripsi p{
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: justify;
    margin-bottom: 0.5em;
}
.foto-nama {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-start;
    margin-top: 20px;
    margin-left: 20px;
    overflow-x: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.foto-nama::-webkit-scrollbar {
    display: none;
}
.teacher-item {
    text-align: center;
    flex: 0 0 300px;
    border-radius: 10px;
    padding: 15px;
    scroll-snap-align: start;
}
.teacher-item img {
    width: 200px;
    height: auto;
    object-fit: cover;
    border-radius: 75% / 75%;
}
.teacher-item h4 {
    margin: 10px 0 5px 0;
    color: #333;
    text-transform: uppercase;
}
.teacher-item p {
    color: #666;
    font-size: 14px;
}
/* Desktop styles for guru-guru */
@media (min-width: 769px) {
    .guru-guru {
        flex-direction: row;
        align-items: center;
    }

    .guru-info {
        flex: 0 0 20%;
        text-align: left;
    }

    .foto-nama {
        flex: 1;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: auto;
        -ms-overflow-style: auto;
    }

    .foto-nama::-webkit-scrollbar {
        display: block;
    }

    .teacher-item {
        border-radius: 0;
        background: none;
        box-shadow: none;
        padding: 0;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 0 0 120px;
    }

    .teacher-item img {
        border-radius: 50% 50% 0 0; /* Oval at top */
        width: 120px;
        height: 120px;
        object-fit: cover;
    }

    .teacher-item h4 {
        margin: 10px 0 0 0;
        font-size: 16px;
        color: #333;
    }
}

/* Guru-guru text animation */
.guru-judul {
    opacity: 0;
    transform: translateX(10%);
    transition: all 1s ease-out;
}

.guru-deskripsi {
    opacity: 0;
    transform: translateX(10%);
    transition: all 1s ease-out;
}

.guru-judul.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

.guru-deskripsi.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

/* Guru-guru cards animation */
.teacher-item {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.8s ease-out;
}

.teacher-item.slide-in-card {
    opacity: 1;
    transform: translateX(0);
}
.guru-info {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.guru-deskripsi p{
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: justify;
    margin-bottom: 0.5em;
}
.foto-nama {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 20px;
    width: 100%;
    padding: 20px 0;
    margin-top: 0;
    margin-left: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.foto-nama::-webkit-scrollbar {
    display: none;
}
.teacher-item {
    flex: 0 0 auto;
    width: 150px;
    padding: 0;
    text-align: center;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}
.teacher-item:hover {
    transform: none;
}
.teacher-item img {
    width: 150px;
    height: 200px;
    object-fit: cover;
    border-radius: 75% / 75%;
    margin-bottom: 10px;
}
.teacher-item h4 {
    margin: 8px 0 4px 0;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
}
.teacher-item p {
    color: #666;
    font-size: 14px;
    margin: 4px 0;
}
.teacher-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.guru-indicator {
    font-size: 12px;
    color: #999;
    font-weight: bold;
    text-transform: capitalize;
    margin: 0;
}
.button-guru a{
        background:linear-gradient(135deg,#0f62fe,#3f3ea5ff);
        border-radius: 22px;
        padding: 14px 16px;
        display: inline-block;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin:10px;
        transition: all 0.3s ease-in-out;
        text-decoration: none;
        color: #fff;
        margin-top: 25%;
}
.button-guru a:hover{
        background:linear-gradient(135deg,#3f3ea5ff,#0f62fe);
        transform: translateY(-20%);
}
.dokumentasi{
    margin-top: 10%;
    padding-left: 5%;
    padding-right: 5%;
}

/* Dokumentasi text animation */
.dokumentasi-content h2 {
    opacity: 0;
    transform: translateX(10%);
    transition: all 1s ease-out;
}

.dokumentasi-content p {
    opacity: 0;
    transform: translateX(10%);
    transition: all 1s ease-out;
}

.dokumentasi-content h2.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

.dokumentasi-content p.slide-in-text {
    opacity: 1;
    transform: translateX(0);
}

/* Dokumentasi cards animation */
.video-item {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.8s ease-out;
}

.video-item.slide-in-card {
    opacity: 1;
    transform: translateX(0);
}
.card-dokumentasi {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 20px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 20px;
    background-color: #f7f7ffff;
}
.card-dokumentasi::-webkit-scrollbar {
    display: none;
}
.video-item {
    flex: 0 0 400px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background: white;
}
.video-item iframe {
    width: 100%;
    height: 225px;
    border: none;
}
.video-info {
    padding: 10px;
    text-align: center;
}
.video-date {
    color: #0f62fe;
    font-size: 14px;
    margin: 0 0 5px 0;
    font-weight: bold;
    text-align: left;
    justify-items: left;
    align-items: left;
}
.video-title {
    font-size: 18px;
    margin: 0;
    text-align: left;
    align-items: left;
    justify-items: left;
    color: #333;
}
.info-alamat{
    margin-top:10%;
    padding-left: 5%;
    padding-right: 5%;
}
.info-alamat.card {
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 20px;
}
.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}
.map-section.card, .other-info-section.card {
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 15px;
}
.other-info p {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.other-info a{
    text-decoration: underline;
    color: #333;
}
.other-info a:hover{
    color: #0f62fe;
}
.other-info p strong {
    font-weight: bold;
}
.other-info p .detail {
    color: #666;
}
.info-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.info-item i {
    margin-bottom: 5px;
}
.info-item strong {
    margin-bottom: 5px;
}

/* Info alamat animations */
.info-alamat .map-section {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-out;
}

.info-alamat .map-section.slide-in {
    opacity: 1;
    transform: translateY(0);
}

.info-alamat .info-item {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-out;
}

.info-alamat .info-item.slide-in {
    opacity: 1;
    transform: translateX(0);
}

/* Slide-in animations */
.slide-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 1s ease-out;
}

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

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

/* Initial states for hero section */
.hero-content h2,
.hero-content .typing-wrap,
.hero-content p,
.hero-content .button {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s ease-out;
}

.hero-content h2.slide-in-from-top,
.hero-content .typing-wrap.slide-in-from-top,
.hero-content p.slide-in-from-top,
.hero-content .button.slide-in-from-top {
    opacity: 1;
    transform: translateY(0);
}

.hero-image,
.next-page .hero-img {
    opacity: 0;
    transform: translateY(100px);
    transition: all 1s ease-out;
}

.hero-image.slide-in-from-bottom,
.next-page .hero-img.slide-in-from-bottom {
    opacity: 1;
    transform: translateY(0);
}

/* Initial states for deskripsi-tentang */
.deskripsi-tentang h4,
.deskripsi-tentang p {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s ease-out;
}

.deskripsi-tentang h4.slide-in-from-top,
.deskripsi-tentang p.slide-in-from-top {
    opacity: 1;
    transform: translateY(0);
}

/* Data Sekolah Section */


/* Dashboard Responsive Styles */
@media (max-width: 768px) {
    /* Hero Section */
    .hero-page {
        flex-direction: column;
        gap: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-content {
        width: 100%;
        text-align: center;
    }

    .hero-content h2 {
        font-size: 35px;
        width: 100%;
    }

    .hero-content p {
        width: 100%;
        font-size: 18px;
    }

    .hero-image {
        width: 100%;
        order: -1; /* Move image above text on mobile */
    }

    /* Next Page Section */
    .next-page {
        flex-direction: column;
        gap: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .next-page .hero-img img {
        width: 100%;
    }

    .deskripsi-tentang {
        width: 100%;
        padding-left: 0;
        text-align: center;
    }

    .deskripsi-tentang p {
        font-size: 18px;
    }

    /* Berita Section */
    .berita {
        padding-left: 10px;
        padding-right: 10px;
    }

    .berita-content h2 {
        font-size: 25px;
    }

    .berita-content p {
        font-size: 20px;
    }

    .cart-berita {
        gap: 10px;
    }

    .berita-item {
        flex: 0 0 240px;
    }

    /* Kepala Sekolah Section */
    .kepala-sekolah {
        flex-direction: column;
        gap: 20px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    .foto-kepsek img {
        width: 200px;
        height: auto;
    }

    .teks-kepsek {
        width: 100%;
    }

    .teks-kepsek p {
        font-size: 16px;
    }

    /* Guru Section */
    .guru-guru {
        flex-direction: column;
        gap: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .guru-info {
        width: 100%;
        text-align: center;
    }
    .button-guru{
        margin-top: 10px;
    }
    .guru-info h1 {
        font-size: 25px;
    }

    .foto-nama {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
        width: 100%;
        padding: 20px 0;
        margin-top: 0;
        margin-left: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .foto-nama::-webkit-scrollbar {
        display: none;
    }

    .teacher-item {
        flex: 0 0 auto;
        width: 120px;
        padding: 15px;
        text-align: center;
        border-radius: 10px;
        background: #f9f9f9;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: transform 0.3s ease;
        box-sizing: border-box;
    }

    .teacher-item:hover {
        transform: translateY(-5px);
    }

    .teacher-item img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: 10px;
    }

    .teacher-item h4 {
        font-size: 16px;
        margin: 8px 0 4px 0;
        font-weight: bold;
    }

    .teacher-item p {
        font-size: 11px;
        margin-top: 10px;
        color: #666;
        margin: 4px 0;
    }

    .guru-indicator {
        font-size: 10px;
        color: #999;
        font-weight: bold;
    }

    .indicators-guru {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 20px;
        width: 100%;
    }

    /* Dokumentasi Section */
    .dokumentasi {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dokumentasi-content h2 {
        font-size: 30px;
    }

    .dokumentasi-content p {
        font-size: 18px;
        padding-left: 0;
    }

    .card-dokumentasi {
        gap: 10px;
    }

    .video-item {
        flex: 0 0 240px;
    }

    .video-item iframe {
        width: 100%;
        height: 200px;
    }
    /* Info Alamat Section */
    .info-alamat .grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .map-section iframe {
        width: 100%;
        height: 250px;
    }
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .info-item i {
        margin-bottom: 0;
    }

    /* Data sekolah responsive adjustments */
    .text-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .text-container .data-background {
        aspect-ratio: 1;
    }

    .text-container {
        transition: none;
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .sebut-data {
        font-size: 24px;
    }

    .sebut-data p {
        font-size: 24px;
    }

    /* Main padding adjustments */
    main {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Button adjustments */
    .button a,
    .button-guru a {
        padding: 12px 20px;
        font-size: 16px;
    }

    /* Typing animation adjustments */
    .typing-wrap {
        padding: 10px;
        font-size: 20px;
    }

    p {
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .hero-content h2 {
        font-size: 28px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .deskripsi-tentang p {
        font-size: 16px;
    }

    .berita-content h2 {
        font-size: 20px;
    }

    .berita-content p {
        font-size: 18px;
    }

    .dokumentasi-content h2 {
        font-size: 25px;
    }

    .guru-info h1 {
        font-size: 22px;
    }

    .sebut-data p {
        font-size: 14px;
    }

    .cart-berita,
    .card-dokumentasi {
        gap: 10px;
    }

    .berita-item,
    .video-item {
        flex: 0 0 200px;
    }

    .teacher-item {
        flex: 0 0 100px;
    }
}
</style>
</head>
<body>
    <div class="navigasi">
    <?php require "navbar.php" ?>
    </div>
    <main>
        <div class="hero-page">
            <?php 
            $query = "SELECT * FROM deskripsi_sekolah";
            $result = mysqli_query($host, $query);
            $row = mysqli_fetch_assoc($result);
            $judul = htmlspecialchars($row['judul_selamatdatang']);
            $deskripsi = htmlspecialchars($row['paragraf_1']);
            $gambar = htmlspecialchars($row['gambar_deskripsi_sekolah']);
            if ($row){
            ?>
            <div class="hero-content">
                <h2><?php echo $judul; ?></h2>
                <div class="typing-wrap">
                    <span class="typed-text" id="typed"></span>
                    <span class="cursor" aria-hidden="true"></span>
                </div>
                <div class="paraf">
                    <p><?php echo $deskripsi; ?></p>
                </div>
                <div class="button">
                    <a href="#bawah">mulai jelajahi</a>
    </div>
</div>
            <div class="hero-image">
                <a href=""><img src="upload/<?php echo $gambar; ?>" alt="budiniah"></a>
            </div>
             <?php }else{
                echo '<p>Data tidak tersedia.</p>';
             } ?>
        </div>
        <div class="next-page" id="bawah">
            <?php 
            $query = "SELECT * FROM siapa_kami";
            $result = mysqli_query($host, $query);
            $row = mysqli_fetch_assoc($result);
            $paragraf = htmlspecialchars($row['paragraf_1']);
            $gambar = htmlspecialchars($row['gambar_tentang']);
            if ($row){
            ?>
            <div class="hero-img">
                <a href=""><img src="upload/<?php echo $gambar; ?>" alt="foto sekolah"></a>
            </div>
            <div class="deskripsi-tentang">
                <h4 class="siapa">siapa kami?</h4>
                <p class="tentang"><?php echo $paragraf; ?></p>
            </div>
            <?php }else{
                echo '<p>Data tidak tersedia.</p>';
             } ?>
        </div>
        <div class="berita">
            <div class="berita-content">
                <h2 style="color: #17408bff; border-bottom: 2px solid #0f62fe; display: flex;
  justify-content: center ; width: 30px;
  align-items: center; padding-bottom:5px;">Berita</h2>
  <p style="color: #000000ff; margin-top:10px; font-family:'Times New Roman', Times, serif; font-weight:bold; font-size: 35px; text-transform:capitalize;">berita terbaru dari smk budiniah 2</p>
        <div class="cart-berita">
            <?php
            $query = "SELECT * FROM tb_post WHERE kategori='berita' ORDER BY tanggal DESC";
            $result = mysqli_query($host, $query);
            if ($result && mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    $imgSrc = !empty($row['gambar']) ? "upload/" . htmlspecialchars($row['gambar']) : "upload/default.jpg";
                    $judul = htmlspecialchars($row['judul_post']);
                    $deskripsi = htmlspecialchars($row['deskripsi']);
                    $tanggal = date('d M Y', strtotime($row['tanggal']));
                    echo '<div class="berita-item">';
                    if ($row['jenis'] === 'foto' && !empty($row['gambar'])) {
                        echo '<a href="detail_berita.php?id=' . $row['id_post'] . '" style="text-decoration: none;"><img src="' . $imgSrc . '" alt="' . $judul . '" /></a>';
                    } elseif ($row['jenis'] === 'video' && !empty($row['iframe'])) {
                        echo '<div class="video-container">' . $row['iframe'] . '</div>';
                    } else {
                        echo '<a href="detail_berita.php?id=' . $row['id_post'] . '" style="text-decoration: none;"><img src="upload/default.jpg" alt="No Image" /></a>';
                    }
                    echo '<div class="content">';
                    echo '<a href="detail_berita.php?id=' . $row['id_post'] . '" style="text-decoration: none; color: inherit;"><h3>' . $judul . '</h3></a>';
                    echo '<p>' . limit_words($deskripsi, 20) . '</p>';
                    echo '<div class="date">' . $tanggal . '</div>';
                    echo '<a href="detail_berita.php?id=' . $row['id_post'] . '" class="read-more">Baca Selengkapnya</a>';
                    echo '</div></div>';
                }
            } else {
                echo '<p>Belum ada berita tersedia.</p>';
            }
            ?>
        </div>
        <div class="indicators"></div>
            </div>
        </div>
        <div class="kepala-sekolah">
            <?php
            $query = mysqli_query($host,"SELECT gambar_guru, nama_guru FROM tb_guru WHERE jabatan='kepalasekolah'");

            $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']);


            $result = mysqli_fetch_assoc($query);
            if ($result) {
            ?>
            <div class="foto-kepsek">
                <img src="upload/<?php echo htmlspecialchars($result['gambar_guru']); ?>" alt="kepala sekolah">
            </div>
            <div class="teks-kepsek">
                <h4 style="color:#666;">- kepala sekolah -</h4>
            <h3 style="margin-bottom: 10px;"><?php echo htmlspecialchars($result['nama_guru']); ?></h3>
            <p><?php
            $full_paragraph = '';
            if (!empty($paragraf1)) $full_paragraph .= $paragraf1 . ' ';
            if (!empty($paragraf2)) $full_paragraph .= $paragraf2 . ' ';
            if (!empty($paragraf3)) $full_paragraph .= $paragraf3 . ' ';
            if (!empty($paragraf4)) $full_paragraph .= $paragraf4 . ' ';
            if (!empty($paragraf)) $full_paragraph .= $paragraf;
            echo limit_words($full_paragraph, 100);
            ?></p>
            <a href="detail_kepsek.php" class="read-more" style="color: #02399fff; text-decoration:none; ">Baca Selengkapnya</a>
            <?php
            } else {
                echo '<p>Data kepala sekolah tidak tersedia.</p>';
            }
            ?>
            </div>
        </div>
        <div class="data-sekolah">
            <div class="text-container">
                <div class="sebut-data">
                    <p class="nomor-stat count-up" data-target="<?php $query_siswa = mysqli_query($host, "SELECT COUNT(id_siswa) as count FROM tb_siswa"); $result_siswa = mysqli_fetch_assoc($query_siswa); echo $result_siswa['count']; ?>">0</p>
                    <p class="stat-label">siswa</p>
                </div>
                <div class="sebut-data">
                    <p class="nomor-stat count-up" data-target="<?php $query_ruang = mysqli_query($host, "SELECT COUNT(id_ruang) as count FROM tb_ruang"); $result_ruang = mysqli_fetch_assoc($query_ruang); echo $result_ruang['count']; ?>">0</p>
                    <p class="stat-label">ruangan</p>
                </div>
                <div class="sebut-data">
                    <p class="nomor-stat count-up" data-target="<?php $query_jurusan = mysqli_query($host, "SELECT COUNT(id_jurusan) as count FROM tb_jurusan"); $result_jurusan = mysqli_fetch_assoc($query_jurusan); echo $result_jurusan['count']; ?>">0</p>
                    <p class="stat-label">jurusan</p>
                </div>
            </div>
        </div>
        <div class="guru-guru">
            <div class="guru-info">
                <div class="guru-judul">
                    <p>GTK</p>
                    <h1 style="text-transform: capitalize;">guru & tenaga pendidikan</h1>
                </div>
                <div class="guru-deskripsi">
                    <p>Sekolah kami memiliki banyak guru dengan berbagai jenis lulusan yang handal dan berkompeten dibidangnya masing-masing.</p>
                    <div class="button-guru">
                        <a href="guru.php">Lihat Selengkapnya</a>
                    </div>
                </div>
            </div>
            <div class="foto-nama">
            <?php
            $query = "SELECT gambar_guru, nama_guru, matapelajaran, jabatan FROM tb_guru WHERE jabatan = 'guru'";
            $result = mysqli_query($host, $query);
            if (mysqli_num_rows($result) > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    echo '<div class="teacher-item">';
                    echo '<img src="upload/' . htmlspecialchars($row['gambar_guru']) . '" alt="' . htmlspecialchars($row['nama_guru']) . '">';
                    echo '<div class="teacher-info">';
                    echo '<h4>' . htmlspecialchars($row['nama_guru']) . '</h4>';
                    echo '<span class="guru-indicator">' . htmlspecialchars($row['jabatan']) . '</span>';
                    echo '</div>';
                    echo '<p>' . htmlspecialchars($row['matapelajaran']) . '</p>';
                    echo '</div>';
                }
            } else {
                echo '<p>Tidak ada data guru tersedia.</p>';
            }
            ?>
        </div>
        <div class="indicators-guru"></div>
        </div>
        <div class="dokumentasi">
            <div class="dokumentasi-content">
                <h2 style="font-family: 'Times New Roman', Times, serif; font-size:45px;">Dokumentasi</h2>
                <p style="text-transform:capitalize; font-size:22px; padding-left: 20px; font-family: sans-serif;">dokumentasi kegiatan di smk budiniah 2</p>
            </div>
    <div class="card-dokumentasi">
        <?php
        $query = "SELECT * FROM tb_post WHERE kategori='post' ORDER BY tanggal DESC";
        $result = mysqli_query($host,$query);
        if($result && mysqli_num_rows($result) > 0){
            while ($row = mysqli_fetch_assoc($result)){
                if ($row['jenis'] === 'video' && !empty($row['iframe'])) {
                    $iframeContent = $row['iframe'];
                    if (strpos($iframeContent, '<iframe') === 0) {
                        // It's a full iframe tag, extract src
                        preg_match('/src="([^"]+)"/', $iframeContent, $matches);
                        $url = $matches[1] ?? '';
                    } else {
                        $url = $iframeContent;
                    }
                    if ($url) {
                        $data = getYouTubeData($url);
                        $title = $data['title'];
                        $tanggal = date('d M Y', strtotime($row['tanggal']));
                        $fullTitle = htmlspecialchars($title . ' - ' . $tanggal);
                        // Extract video ID and create embed URL
                        $videoId = extractYouTubeVideoId($url);
                        if ($videoId) {
                            $embedUrl = "https://www.youtube.com/embed/" . $videoId;
                            echo '<div class="video-item">';
                            echo '<iframe width="560" height="315" src="' . htmlspecialchars($embedUrl) . '" title="' . $fullTitle . '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
                            echo '<div class="video-info">';
                            echo '<p class="video-date">'. "-" . $tanggal . "-" . '</p>';
                            echo '<h3 class="video-title">' . htmlspecialchars($title) . '</h3>';
                            echo '</div>';
                            echo '</div>';
                        }
                    }
                }
            }
        } else {
            echo '<p>Belum ada dokumentasi tersedia.</p>';
        }
        ?>
    </div>
    <div class="indicators-dokumentasi"></div>
</div>
<div class="info-alamat card">
    <div class="grid-container">
        <?php
        $query = "SELECT * FROM tb_alamat";
        $result = mysqli_query($host,$query);
        $row = mysqli_fetch_assoc($result);
        $map = $row['iframe'];
        $nomor = $row['nomor_sekolahh'];
        $alamat = $row['alamat'];
        $whatsapp = $row['nomor_whatsapp'];
        $email = $row['email'];
        $instagram = $row['link_instagram'];
        $youtube = $row['link_youtube'];
        ?>
        <div class="map-section card">
            <?php echo $map; ?>
        </div>
        <div class="other-info-section card">
            <div class='other-info'>
                <?php
                if (!empty($alamat)) {
                    echo "<div class='info-item'><i class='bi bi-geo-alt-fill'></i><strong>Alamat:</strong><span class='detail'>$alamat</span></div>";
                }
                if (!empty($nomor)) {
                    echo "<div class='info-item'><i class='bi bi-telephone-fill'></i><strong>Telepon:</strong><span class='detail'>$nomor</span></div>";
                }
                if (!empty($whatsapp)) {
                    echo "<div class='info-item'><i class='bi bi-whatsapp'></i><strong>WhatsApp:</strong><span class='detail'>$whatsapp</span></div>";
                }
                if (!empty($email)) {
                    echo "<div class='info-item'><i class='bi bi-envelope-fill'></i><strong>Email:</strong><span class='detail'>$email</span></div>";
                }
                if (!empty($instagram)) {
                    echo "<div class='info-item'><i class='bi bi-instagram'></i><strong>Instagram:</strong><span class='detail'><a href='$instagram'>officialsmkbudiniah2</a></span></div>";
                }
                if (!empty($youtube)) {
                    echo "<div class='info-item'><i class='bi bi-youtube'></i><strong>YouTube:</strong><span class='detail'><a href='$youtube'>smk budiniah 2</a></span></div>";
                } else {
                    echo "<div class='info-item'>data tidak ditemukan</div>";
                }
                ?>
            </div>
        </div>
    </div>
</div>
</main>
<footer>
    <?php require 'footer.php' ?>
</footer>
</body>
<script>
    const texts = [
        "Akuntasi dan keuangan lembaga",
        "Bisnis daring dan pemasaran",
        "Rekayasa Perangkat lunak"
    ];

    const typingDelay = 50;
    const erasingDelay = 50;
    const newTextDelay = 2000;
    const betweenTextDelay = 0;

    const typedEl = document.getElementById('typed');
    const cursorEl = document.querySelector('.cursor');
    let textIndex = 0;
    let charIndex = 0;

    function stopBlink() {
        cursorEl.classList.add('no-blink');
    }

    function startBlink() {
        cursorEl.classList.remove('no-blink');
    }

    function type(){
        const current = texts[textIndex];
        if (charIndex < current.length){
            stopBlink();
            typedEl.textContent += current.charAt(charIndex);
            charIndex++;
            setTimeout(type, typingDelay);
        }else{
            startBlink();
            setTimeout(erase, newTextDelay);
        }
    }

    function erase(){
        if(charIndex > 0){
            stopBlink();
            typedEl.textContent = typedEl.textContent.slice(0, -1);
            charIndex--;
            setTimeout(erase, erasingDelay);
        }else{
            startBlink();
            textIndex = (textIndex + 1) % texts.length;
            setTimeout(type, betweenTextDelay);
        }
    }

    // Force layout stability by ensuring the container width is fixed
    typedEl.style.width = 'auto';
    typedEl.style.display = 'inline-block';

    document.addEventListener("DOMContentLoaded", function () {
        if(texts.length) setTimeout(type, 500);
    });

    function addtext(newstr){
        texts.push(newstr);
    }
    window.addtext = addtext;

    // Wipe transition on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('wipe-in');
            }
        });
    }, observerOptions);

    // Observe the sections
    const bnImgSection = document.querySelector('.bn-img');
    const isianSection = document.querySelector('.isian');

    if (bnImgSection) observer.observe(bnImgSection);
    if (isianSection) observer.observe(isianSection);


document.addEventListener('DOMContentLoaded', function() {
    const cartBerita = document.querySelector('.cart-berita');
    const indicators = document.querySelector('.indicators');
    const beritaItems = document.querySelectorAll('.berita-item');

    if (beritaItems.length > 0) {
        // Create dots
        beritaItems.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            if (index === 0) dot.classList.add('active');
            dot.addEventListener('click', () => {
                const scrollLeft = index * (beritaItems[0].offsetWidth + 20); // 20 is gap
                cartBerita.scrollTo({ left: scrollLeft, behavior: 'smooth' });
            });
            indicators.appendChild(dot);
        });

        // Update active dot on scroll
        cartBerita.addEventListener('scroll', () => {
            const scrollLeft = cartBerita.scrollLeft;
            const itemWidth = beritaItems[0].offsetWidth + 20;
            const activeIndex = Math.round(scrollLeft / itemWidth);

            document.querySelectorAll('.dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === activeIndex);
            });
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {
    const cardDokumentasi = document.querySelector('.card-dokumentasi');
    const indicatorsDokumentasi = document.querySelector('.indicators-dokumentasi');
    const videoItems = document.querySelectorAll('.video-item');

    if (videoItems.length > 0) {
        // Create dots
        videoItems.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            if (index === 0) dot.classList.add('active');
            dot.addEventListener('click', () => {
                const scrollLeft = index * (videoItems[0].offsetWidth + 20); // 20 is gap
                cardDokumentasi.scrollTo({ left: scrollLeft, behavior: 'smooth' });
            });
            indicatorsDokumentasi.appendChild(dot);
        });

        // Update active dot on scroll
        cardDokumentasi.addEventListener('scroll', () => {
            const scrollLeft = cardDokumentasi.scrollLeft;
            const itemWidth = videoItems[0].offsetWidth + 20;
            const activeIndex = Math.round(scrollLeft / itemWidth);

            indicatorsDokumentasi.querySelectorAll('.dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === activeIndex);
            });
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {
    const fotoNama = document.querySelector('.foto-nama');
    const indicatorsGuru = document.querySelector('.indicators-guru');
    const teacherItems = document.querySelectorAll('.teacher-item');

    if (teacherItems.length > 0) {
        // Create dots
        teacherItems.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            if (index === 0) dot.classList.add('active');
            dot.addEventListener('click', () => {
                const scrollLeft = index * (teacherItems[0].offsetWidth + 20); // 20 is gap
                fotoNama.scrollTo({ left: scrollLeft, behavior: 'smooth' });
            });
            indicatorsGuru.appendChild(dot);
        });

        // Update active dot on scroll
        fotoNama.addEventListener('scroll', () => {
            const scrollLeft = fotoNama.scrollLeft;
            const itemWidth = teacherItems[0].offsetWidth + 20;
            const activeIndex = Math.round(scrollLeft / itemWidth);

            indicatorsGuru.querySelectorAll('.dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === activeIndex);
            });
        });
    }
});

// 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('hero-content')) {
                    const h2 = entry.target.querySelector('h2');
                    const typingWrap = entry.target.querySelector('.typing-wrap');
                    const p = entry.target.querySelector('p');
                    const button = entry.target.querySelector('.button');
                    if (h2) h2.classList.add('slide-in-from-top');
                    if (typingWrap) typingWrap.classList.add('slide-in-from-top');
                    if (p) p.classList.add('slide-in-from-top');
                    if (button) button.classList.add('slide-in-from-top');
                } else if (entry.target.classList.contains('deskripsi-tentang')) {
                    const h4 = entry.target.querySelector('h4');
                    const p = entry.target.querySelector('p');
                    if (h4) h4.classList.add('slide-in-from-top');
                    if (p) p.classList.add('slide-in-from-top');
                } else if (entry.target.classList.contains('hero-image') || entry.target.classList.contains('hero-img')) {
                    entry.target.classList.add('slide-in-from-bottom');
                } else {
                    entry.target.classList.add('slide-in');
                }
            }
        });
    }, observerOptions);

    // Observe the elements
    const heroContent = document.querySelector('.hero-content');
    const heroImage = document.querySelector('.hero-image');
    const heroImg = document.querySelector('.next-page .hero-img');
    const deskripsiTentang = document.querySelector('.deskripsi-tentang');

    if (heroContent) observer.observe(heroContent);
    if (heroImage) observer.observe(heroImage);
    if (heroImg) observer.observe(heroImg);
    if (deskripsiTentang) observer.observe(deskripsiTentang);
});

// Berita section animation
document.addEventListener('DOMContentLoaded', function() {
    const beritaObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const beritaContent = entry.target.querySelector('.berita-content');
                if (beritaContent) {
                    beritaContent.querySelector('h2').classList.add('slide-in-text');
                    beritaContent.querySelector('p').classList.add('slide-in-text');
                }
                const beritaItems = entry.target.querySelectorAll('.berita-item');
                beritaItems.forEach((item, index) => {
                    setTimeout(() => {
                        item.classList.add('slide-in-card');
                    }, index * 200);
                });
                beritaObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    const beritaSection = document.querySelector('.berita');
    if (beritaSection) beritaObserver.observe(beritaSection);
});



// Guru-guru section animation
document.addEventListener('DOMContentLoaded', function() {
    const guruObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const guruJudul = entry.target.querySelector('.guru-judul');
                const guruDeskripsi = entry.target.querySelector('.guru-deskripsi');
                if (guruJudul) {
                    guruJudul.classList.add('slide-in-text');
                }
                if (guruDeskripsi) {
                    guruDeskripsi.classList.add('slide-in-text');
                }
                const teacherItems = entry.target.querySelectorAll('.teacher-item');
                teacherItems.forEach((item, index) => {
                    setTimeout(() => {
                        item.classList.add('slide-in-card');
                    }, index * 200);
                });
                guruObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    const guruSection = document.querySelector('.guru-guru');
    if (guruSection) guruObserver.observe(guruSection);
});

// Dokumentasi section animation
document.addEventListener('DOMContentLoaded', function() {
    const dokumentasiObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const dokumentasiContent = entry.target.querySelector('.dokumentasi-content');
                if (dokumentasiContent) {
                    dokumentasiContent.querySelector('h2').classList.add('slide-in-text');
                    dokumentasiContent.querySelector('p').classList.add('slide-in-text');
                }
                const videoItems = entry.target.querySelectorAll('.video-item');
                videoItems.forEach((item, index) => {
                    setTimeout(() => {
                        item.classList.add('slide-in-card');
                    }, index * 200);
                });
                dokumentasiObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    const dokumentasiSection = document.querySelector('.dokumentasi');
    if (dokumentasiSection) dokumentasiObserver.observe(dokumentasiSection);
});

// Data sekolah slide-in and count-up animation
document.addEventListener('DOMContentLoaded', function() {
    const dataSekolahObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const textContainer = entry.target.querySelector('.text-container');
                if (textContainer) {
                    textContainer.classList.add('slide-in');
                }
                const countUpElements = entry.target.querySelectorAll('.count-up');
                countUpElements.forEach((element, index) => {
                    setTimeout(() => {
                        animateCountUp(element);
                    }, index * 500); // Stagger the animations
                });
                dataSekolahObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px 0px 0px' });

    const dataSekolahSection = document.querySelector('.data-sekolah');
    if (dataSekolahSection) dataSekolahObserver.observe(dataSekolahSection);

    function animateCountUp(element) {
        const target = parseInt(element.getAttribute('data-target'));
        const duration = 1000; 
        const step = target / (duration / 16); // 60 FPS
        let current = 0;

        const timer = setInterval(() => {
            current += step;
            if (current >= target) {
                element.textContent = target;
                clearInterval(timer);
            } else {
                element.textContent = Math.floor(current);
            }
        }, 16);
    }
});

document.addEventListener('DOMContentLoaded', function() {
    const infoAlamatObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const mapSection = entry.target.querySelector('.map-section');
                const infoItems = entry.target.querySelectorAll('.info-item');
                if (mapSection) {
                    mapSection.classList.add('slide-in');
                }
                infoItems.forEach((item, index) => {
                    setTimeout(() => {
                        item.classList.add('slide-in');
                    }, index * 200);
                });
                infoAlamatObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    const infoAlamatSection = document.querySelector('.info-alamat');
    if (infoAlamatSection) infoAlamatObserver.observe(infoAlamatSection);
});

// Draggable functionality for foto-nama (guru section)
document.addEventListener('DOMContentLoaded', function() {
    const fotoNama = document.querySelector('.foto-nama');
    if (fotoNama) {
        let isDown = false;
        let startX;
        let scrollLeft;

        fotoNama.addEventListener('mousedown', (e) => {
            isDown = true;
            fotoNama.classList.add('active');
            startX = e.pageX - fotoNama.offsetLeft;
            scrollLeft = fotoNama.scrollLeft;
        });

        fotoNama.addEventListener('mouseleave', () => {
            isDown = false;
            fotoNama.classList.remove('active');
        });

        fotoNama.addEventListener('mouseup', () => {
            isDown = false;
            fotoNama.classList.remove('active');
        });

        fotoNama.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - fotoNama.offsetLeft;
            const walk = (x - startX) * 2; // Scroll speed multiplier
            fotoNama.scrollLeft = scrollLeft - walk;
        });
    }
});


</script>
</html>

