<?php
    // gallery.php
    // Page Title: Gallery | WADATA Skills Acquisition Centre
    // Description: Explore our photo gallery showcasing student activities, training sessions, facilities, events, and success stories at WADATA Skills Acquisition Centre.
    // Author: WADATA Development Team
    // Version: 1.0

    // Gallery data array for easy maintenance and scalability
    $gallery_categories = [
        'all' => 'All Photos',
        'ict' => 'ICT & Graphics',
        'tailoring' => 'Fashion & Tailoring',
        'catering' => 'Culinary Arts',
        'beauty' => 'Beauty & Salon',
        'craft' => 'Hand Craft',
        'counseling' => 'Counseling',
        'facilities' => 'Facilities',
        'events' => 'Events & Graduation'
    ];

    $gallery_images = [
        [
            'id' => 1,
            'title' => 'ICT Lab Training Session',
            'description' => 'Students learning web development in our modern ICT lab',
            'category' => 'ict',
            'image' => './assets/img/ict01.jpg',
            'thumbnail' => './assets/img/ict01-.jpg',
            'date' => '2025-02-15',
            'featured' => true,
            'tags' => ['training', 'computers', 'students']
        ],
        [
            'id' => 2,
            'title' => 'Graphics Design Workshop',
            'description' => 'Creative session on Adobe Photoshop and Illustrator',
            'category' => 'ict',
            'image' => './assets/img/ict01-.jpg',
            'thumbnail' => './assets/img/ict01-.jpg',
            'date' => '2025-02-10',
            'featured' => false,
            'tags' => ['design', 'creative', 'software']
        ],
        [
            'id' => 3,
            'title' => 'Fashion Design Studio',
            'description' => 'Students working on garment construction projects',
            'category' => 'tailoring',
            'image' => './assets/img/tailoring-.jpg',
            'thumbnail' => './assets/img/tailoring-.jpg',
            'date' => '2025-02-18',
            'featured' => true,
            'tags' => ['fashion', 'sewing', 'design']
        ],
        [
            'id' => 4,
            'title' => 'Traditional Attire Making',
            'description' => 'Mastering traditional Nigerian fashion designs',
            'category' => 'tailoring',
            'image' => './assets/img/tailoring-.jpg',
            'thumbnail' => './assets/img/tailoring-.jpg',
            'date' => '2025-02-05',
            'featured' => false,
            'tags' => ['traditional', 'cultural', 'fashion']
        ],
        [
            'id' => 5,
            'title' => 'Professional Cooking Class',
            'description' => 'Students learning professional culinary techniques',
            'category' => 'catering',
            'image' => './assets/img/catering-.jpg',
            'thumbnail' => './assets/img/catering-.jpg',
            'date' => '2025-02-20',
            'featured' => true,
            'tags' => ['cooking', 'culinary', 'food']
        ],
        [
            'id' => 6,
            'title' => 'Baking and Pastry Session',
            'description' => 'Creating delicious pastries in our modern kitchen',
            'category' => 'catering',
            'image' => './assets/img/catering-.jpg',
            'thumbnail' => './assets/img/catering-.jpg',
            'date' => '2025-02-12',
            'featured' => false,
            'tags' => ['baking', 'pastry', 'desserts']
        ],
        [
            'id' => 7,
            'title' => 'Beauty Salon Training',
            'description' => 'Students practicing hairstyling techniques',
            'category' => 'beauty',
            'image' => './assets/img/saloon-.jpg',
            'thumbnail' => './assets/img/saloon-.jpg',
            'date' => '2025-02-22',
            'featured' => true,
            'tags' => ['hair', 'beauty', 'salon']
        ],
        [
            'id' => 8,
            'title' => 'Makeup Artistry Class',
            'description' => 'Professional makeup application techniques',
            'category' => 'beauty',
            'image' => './assets/img/saloon-.jpg',
            'thumbnail' => './assets/img/saloon-.jpg',
            'date' => '2025-02-17',
            'featured' => false,
            'tags' => ['makeup', 'cosmetics', 'beauty']
        ],
        [
            'id' => 9,
            'title' => 'Handcraft Workshop',
            'description' => 'Creative arts and crafts session',
            'category' => 'craft',
            'image' => './assets/img/handcraft.jpg',
            'thumbnail' => './assets/img/handcraft.jpg',
            'date' => '2025-02-19',
            'featured' => true,
            'tags' => ['craft', 'art', 'creative']
        ],
        [
            'id' => 10,
            'title' => 'Beadwork and Accessories',
            'description' => 'Students creating traditional beadwork',
            'category' => 'craft',
            'image' => './assets/img/handcraft.jpg',
            'thumbnail' => './assets/img/handcraft.jpg',
            'date' => '2025-02-08',
            'featured' => false,
            'tags' => ['beads', 'accessories', 'traditional']
        ],
        [
            'id' => 11,
            'title' => 'Counseling Session',
            'description' => 'Group guidance and counseling session',
            'category' => 'counseling',
            'image' => './assets/img/counseling.jpg',
            'thumbnail' => './assets/img/counseling.jpg',
            'date' => '2025-02-14',
            'featured' => false,
            'tags' => ['counseling', 'guidance', 'support']
        ],
        [
            'id' => 12,
            'title' => 'Marriage Guidance Workshop',
            'description' => 'Workshop on family and relationship building',
            'category' => 'counseling',
            'image' => './assets/img/counseling.jpg',
            'thumbnail' => './assets/img/counseling.jpg',
            'date' => '2025-02-07',
            'featured' => true,
            'tags' => ['marriage', 'family', 'counseling']
        ],
        [
            'id' => 13,
            'title' => 'Main Lecture Hall',
            'description' => 'Spacious lecture hall with modern AV equipment',
            'category' => 'facilities',
            'image' => './assets/img/lecturehall.jpg',
            'thumbnail' => './assets/img/lecturehall.jpg',
            'date' => '2025-01-25',
            'featured' => true,
            'tags' => ['lecture', 'classroom', 'facility']
        ],
        [
            'id' => 14,
            'title' => 'Computer Lab Overview',
            'description' => 'Panoramic view of our ICT laboratory',
            'category' => 'facilities',
            'image' => './assets/img/ict01.jpg',
            'thumbnail' => './assets/img/ict01-.jpg',
            'date' => '2025-01-20',
            'featured' => true,
            'tags' => ['lab', 'computers', 'facility']
        ],
        [
            'id' => 15,
            'title' => 'Graduation Ceremony 2024',
            'description' => 'Annual graduation and certificate presentation',
            'category' => 'events',
            'image' => './assets/img/lecturehall.jpg',
            'thumbnail' => './assets/img/lecturehall.jpg',
            'date' => '2024-12-10',
            'featured' => true,
            'tags' => ['graduation', 'ceremony', 'event']
        ],
        [
            'id' => 16,
            'title' => 'Skills Exhibition Day',
            'description' => 'Students showcasing their projects and creations',
            'category' => 'events',
            'image' => './assets/img/lecturehall.jpg',
            'thumbnail' => './assets/img/lecturehall.jpg',
            'date' => '2024-11-15',
            'featured' => false,
            'tags' => ['exhibition', 'projects', 'showcase']
        ]
    ];

    // Get unique years from images
    $years = array_unique(array_map(function($item) {
        return date('Y', strtotime($item['date']));
    }, $gallery_images));
    rsort($years);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Primary Meta Tags -->
    <title>Gallery | WADATA Skills Acquisition Centre</title>
    <meta name="title" content="Gallery | WADATA Skills Acquisition Centre">
    <meta name="description" content="Browse through our gallery featuring student activities, training sessions, modern facilities, cultural events, and graduation ceremonies at WADATA Skills Acquisition Centre.">
    <meta name="keywords" content="WADATA gallery, skills training photos, vocational education images, student activities, graduation photos, ICT lab, fashion studio, culinary arts, beauty salon, handcraft, counseling sessions">
    <meta name="author" content="WADATA Skills Acquisition Centre">
    <meta name="robots" content="index, follow">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://wadata.edu.ng/gallery.php">
    <meta property="og:title" content="Gallery | WADATA Skills Acquisition Centre">
    <meta property="og:description" content="Explore our photo gallery showcasing the vibrant life and activities at WADATA Skills Acquisition Centre.">
    <meta property="og:image" content="./assets/img/gallery-og.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://wadata.edu.ng/gallery.php">
    <meta property="twitter:title" content="Gallery | WADATA Skills Acquisition Centre">
    <meta property="twitter:description" content="Explore our photo gallery showcasing the vibrant life and activities at WADATA Skills Acquisition Centre.">
    <meta property="twitter:image" content="./assets/img/gallery-og.jpg">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="./assets/img/logo.png">
    <link rel="apple-touch-icon" href="./assets/img/logo.png">
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">
    
    <!-- Google Fonts - Inter & Poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- Lightbox2 for image gallery -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="./assets/css/style.css">
    <!-- Gallery Page Specific CSS -->
    <link rel="stylesheet" href="./assets/css/gallery.css">
</head>
<body>
    <!-- Include Navigation -->
    <?php 
    $current_page = basename($_SERVER['PHP_SELF']);
    include './component/nav.php'; 
    ?>

    <!-- Gallery Hero Section -->
    <section class="gallery-hero">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title" data-aos="fade-up">
                    <span>Explore Our</span>
                    Photo Gallery
                </h1>
                <div class="hero-breadcrumb" data-aos="fade-up" data-aos-delay="100">
                    <a href="./index"><i class="fas fa-home"></i> Home</a>
                    <i class="fas fa-chevron-right"></i>
                    <span class="text-white-50">Gallery</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Stats -->
    <section class="gallery-stats">
        <div class="container">
            <div class="stat-grid">
                <div class="stat-item" data-aos="fade-up">
                    <div class="stat-number"><?php echo count($gallery_images); ?>+</div>
                    <div class="stat-label">Photos</div>
                </div>
                <div class="stat-item" data-aos="fade-up" data-aos-delay="100">
                    <div class="stat-number"><?php echo count($gallery_categories) - 1; ?></div>
                    <div class="stat-label">Categories</div>
                </div>
                <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
                    <div class="stat-number"><?php echo count(array_filter($gallery_images, function($img) { return $img['featured']; })); ?></div>
                    <div class="stat-label">Featured</div>
                </div>
                <div class="stat-item" data-aos="fade-up" data-aos-delay="300">
                    <div class="stat-number">2025</div>
                    <div class="stat-label">Latest Update</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Filter Section -->
    <section class="gallery-filter-section">
        <div class="container">
            <div class="filter-container" data-aos="fade-up">
                <?php foreach($gallery_categories as $key => $label): ?>
                <button class="filter-btn <?php echo $key === 'all' ? 'active' : ''; ?>" data-filter="<?php echo $key; ?>">
                    <?php
                    // Add icons for categories
                    $icon = 'fa-image';
                    switch($key) {
                        case 'all': $icon = 'fa-th-large'; break;
                        case 'ict': $icon = 'fa-laptop-code'; break;
                        case 'tailoring': $icon = 'fa-cut'; break;
                        case 'catering': $icon = 'fa-utensils'; break;
                        case 'beauty': $icon = 'fa-magic'; break;
                        case 'craft': $icon = 'fa-paint-brush'; break;
                        case 'counseling': $icon = 'fa-heart'; break;
                        case 'facilities': $icon = 'fa-building'; break;
                        case 'events': $icon = 'fa-calendar-alt'; break;
                    }
                    ?>
                    <i class="fas <?php echo $icon; ?>"></i> <?php echo $label; ?>
                </button>
                <?php endforeach; ?>
            </div>
            <div class="filter-info" data-aos="fade-up" data-aos-delay="50">
                <span id="visible-count"><?php echo count($gallery_images); ?></span> photos displayed out of <span id="total-count"><?php echo count($gallery_images); ?></span> total
            </div>
        </div>
    </section>

    <!-- Featured Section (Carousel) -->
    <section class="featured-section" id="featured">
        <div class="container">
            <div class="featured-header" data-aos="fade-up">
                <span class="featured-subtitle">Editor's Pick</span>
                <h2 class="featured-title">Featured Moments</h2>
                <p>Handpicked highlights from our gallery</p>
            </div>

            <div class="featured-carousel owl-carousel owl-theme" data-aos="fade-up" data-aos-delay="100">
                <?php 
                $featured_images = array_filter($gallery_images, function($img) { return $img['featured']; });
                foreach($featured_images as $featured): 
                ?>
                <div class="featured-card">
                    <a href="<?php echo $featured['image']; ?>" data-lightbox="featured" data-title="<?php echo htmlspecialchars($featured['title']); ?>">
                        <img src="<?php echo $featured['thumbnail']; ?>" alt="<?php echo htmlspecialchars($featured['title']); ?>" loading="lazy">
                    </a>
                    <div class="featured-card-content">
                        <h3><?php echo htmlspecialchars($featured['title']); ?></h3>
                        <p><?php echo htmlspecialchars($featured['description']); ?></p>
                        <small><i class="fas fa-calendar"></i> <?php echo date('F j, Y', strtotime($featured['date'])); ?></small>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Main Gallery Grid -->
    <section class="gallery-grid-section">
        <div class="container">
            <div class="gallery-grid" id="gallery-grid">
                <?php foreach($gallery_images as $index => $image): ?>
                <div class="gallery-card-modern gallery-item" data-category="<?php echo $image['category']; ?>" data-aos="fade-up" data-aos-delay="<?php echo ($index % 10) * 50; ?>">
                    <?php if($image['featured']): ?>
                    <div class="featured-badge">
                        <i class="fas fa-star"></i> Featured
                    </div>
                    <?php endif; ?>
                    
                    <img src="<?php echo $image['thumbnail']; ?>" alt="<?php echo htmlspecialchars($image['title']); ?>" class="gallery-image-modern" loading="lazy">
                    
                    <a href="<?php echo $image['image']; ?>" data-lightbox="gallery" data-title="<?php echo htmlspecialchars($image['title']); ?>" class="gallery-zoom-icon">
                        <i class="fas fa-search-plus"></i>
                    </a>
                    
                    <div class="gallery-card-overlay">
                        <span class="gallery-card-category">
                            <?php echo $gallery_categories[$image['category']]; ?>
                        </span>
                        <h3 class="gallery-card-title"><?php echo htmlspecialchars($image['title']); ?></h3>
                        <p class="gallery-card-description"><?php echo htmlspecialchars($image['description']); ?></p>
                        <div class="gallery-card-meta">
                            <span><i class="fas fa-calendar"></i> <?php echo date('M d, Y', strtotime($image['date'])); ?></span>
                            <span><i class="fas fa-tag"></i> <?php echo implode(', ', array_slice($image['tags'], 0, 2)); ?></span>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- Load More Button (hidden by default, shown via JS if needed) -->
            <div class="load-more-container" id="load-more-container" style="display: none;">
                <button class="btn-load-more" id="load-more-btn">
                    Load More <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- Video Gallery Section -->
    <section class="video-section" id="videos">
        <div class="container">
            <div class="section-header text-center" data-aos="fade-up">
                <span class="section-subtitle">Watch</span>
                <h2 class="section-title">Video Gallery</h2>
                <div class="section-divider" role="presentation"></div>
                <p class="section-description">Experience WADATA through video testimonials and facility tours</p>
            </div>

            <div class="video-grid">
                <!-- Video 1 -->
                <div class="video-card" data-aos="fade-up">
                    <div class="video-thumbnail">
                        <img src="./assets/img/ict01.jpg" alt="WADATA ICT Lab Tour" loading="lazy">
                        <div class="play-button" data-bs-toggle="modal" data-bs-target="#videoModal1">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3>ICT Lab Virtual Tour</h3>
                        <p>Explore our state-of-the-art computer laboratory</p>
                        <small><i class="fas fa-clock"></i> 2:30 min</small>
                    </div>
                </div>

                <!-- Video 2 -->
                <div class="video-card" data-aos="fade-up" data-aos-delay="100">
                    <div class="video-thumbnail">
                        <img src="./assets/img/tailoring-.jpg" alt="Fashion Studio Tour" loading="lazy">
                        <div class="play-button" data-bs-toggle="modal" data-bs-target="#videoModal2">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3>Fashion Design Studio</h3>
                        <p>See where creativity meets fashion</p>
                        <small><i class="fas fa-clock"></i> 3:15 min</small>
                    </div>
                </div>

                <!-- Video 3 -->
                <div class="video-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="video-thumbnail">
                        <img src="./assets/img/catering-.jpg" alt="Culinary Kitchen Tour" loading="lazy">
                        <div class="play-button" data-bs-toggle="modal" data-bs-target="#videoModal3">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3>Professional Kitchen</h3>
                        <p>Behind the scenes of our culinary arts program</p>
                        <small><i class="fas fa-clock"></i> 2:45 min</small>
                    </div>
                </div>

                <!-- Video 4 -->
                <div class="video-card" data-aos="fade-up" data-aos-delay="300">
                    <div class="video-thumbnail">
                        <img src="./assets/img/saloon-.jpg" alt="Beauty Salon Tour" loading="lazy">
                        <div class="play-button" data-bs-toggle="modal" data-bs-target="#videoModal4">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3>Beauty & Wellness Center</h3>
                        <p>Tour our modern salon facilities</p>
                        <small><i class="fas fa-clock"></i> 2:20 min</small>
                    </div>
                </div>

                <!-- Video 5 -->
                <div class="video-card" data-aos="fade-up" data-aos-delay="400">
                    <div class="video-thumbnail">
                        <img src="./assets/img/handcraft.jpg" alt="Craft Workshop Tour" loading="lazy">
                        <div class="play-button" data-bs-toggle="modal" data-bs-target="#videoModal5">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3>Creative Craft Workshop</h3>
                        <p>Discover the art of handcraft</p>
                        <small><i class="fas fa-clock"></i> 2:10 min</small>
                    </div>
                </div>

                <!-- Video 6 -->
                <div class="video-card" data-aos="fade-up" data-aos-delay="500">
                    <div class="video-thumbnail">
                        <img src="./assets/img/lecturehall.jpg" alt="Graduation Ceremony" loading="lazy">
                        <div class="play-button" data-bs-toggle="modal" data-bs-target="#videoModal6">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <h3>2024 Graduation Highlights</h3>
                        <p>Celebrating our graduates' success</p>
                        <small><i class="fas fa-clock"></i> 4:30 min</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-5" style="background: var(--light);">
        <div class="container text-center" data-aos="fade-up">
            <h2 class="mb-4" style="color: var(--primary);">Want to See More?</h2>
            <p class="mb-4 fs-5" style="color: #6c757d;">Visit us in person or follow our social media for daily updates and new photos.</p>
            <div>
                <a href="./contact" class="btn btn-lg" style="background: var(--accent); color: white; border-radius: 50px; padding: 12px 40px; margin: 0 10px;">
                    <i class="fas fa-calendar-alt me-2"></i> Schedule a Visit
                </a>
                <a href="#" class="btn btn-lg" style="background: var(--primary); color: white; border-radius: 50px; padding: 12px 40px; margin: 0 10px;">
                    <i class="fab fa-instagram me-2"></i> Follow Us
                </a>
            </div>
        </div>
    </section>

    <!-- Video Modal 1 -->
    <div class="modal fade gallery-modal" id="videoModal1" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent">
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/demo1" title="ICT Lab Tour" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Modal 2 -->
    <div class="modal fade gallery-modal" id="videoModal2" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent">
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/demo2" title="Fashion Studio Tour" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Modal 3 -->
    <div class="modal fade gallery-modal" id="videoModal3" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent">
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/demo3" title="Culinary Kitchen Tour" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Modal 4 -->
    <div class="modal fade gallery-modal" id="videoModal4" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent">
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/demo4" title="Beauty Salon Tour" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Modal 5 -->
    <div class="modal fade gallery-modal" id="videoModal5" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent">
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/demo5" title="Craft Workshop Tour" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Modal 6 -->
    <div class="modal fade gallery-modal" id="videoModal6" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent">
                <div class="modal-body p-0">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/demo6" title="Graduation Ceremony" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <?php include './component/footer.php'; ?>

    <!-- Back to Top Button -->
    <button class="back-to-top" id="backToTop" aria-label="Back to top" title="Back to top">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M12 20V4M12 4L18 10M12 4L6 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

    <script>
        (function($){
            $(function(){
                // Initialize AOS
                AOS.init({
                    duration: 800,
                    offset: 50,
                    once: true,
                    easing: 'ease-in-out'
                });

                // Initialize Owl Carousel for featured section
                $('.featured-carousel').owlCarousel({
                    loop: true,
                    margin: 20,
                    nav: true,
                    dots: true,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    responsive: {
                        0: { items: 1 },
                        768: { items: 2 },
                        1200: { items: 3 }
                    },
                    navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>']
                });

                // Gallery Filtering
                $('.filter-btn').on('click', function() {
                    const filterValue = $(this).data('filter');
                    $('.filter-btn').removeClass('active');
                    $(this).addClass('active');

                    if (filterValue === 'all') {
                        $('.gallery-item').show();
                        $('#visible-count').text($('.gallery-item').length);
                    } else {
                        $('.gallery-item').each(function() {
                            const category = $(this).data('category');
                            if (category === filterValue) $(this).show(); else $(this).hide();
                        });
                        $('#visible-count').text($('.gallery-item[data-category="' + filterValue + '"]').length);
                    }

                    AOS.refresh();
                });

                // Lightbox configuration
                if (typeof lightbox !== 'undefined' && lightbox.option) {
                    lightbox.option({
                        'resizeDuration': 200,
                        'wrapAround': true,
                        'albumLabel': 'Image %1 of %2',
                        'fadeDuration': 300,
                        'imageFadeDuration': 300,
                        'showImageNumberLabel': true
                    });
                }

                // Navbar scroll effect and back-to-top visibility
                function handleScrollEffects() {
                    if ($(window).scrollTop() > 50) $('.navbar').addClass('scrolled'); else $('.navbar').removeClass('scrolled');
                    if ($(window).scrollTop() > 300) $('#backToTop').addClass('show'); else $('#backToTop').removeClass('show');
                }

                $(window).on('scroll', handleScrollEffects);
                handleScrollEffects();

                // Back to top
                $('#backToTop').on('click', function(e) {
                    e.preventDefault();
                    $('html, body').animate({ scrollTop: 0 }, 500);
                });

                // Load More functionality (demo)
                let currentItems = $('.gallery-item:visible').length;
                const totalItems = $('.gallery-item').length;

                $('#load-more-btn').on('click', function() {
                    alert('In a production environment, this would load more images from the server. Currently showing all ' + totalItems + ' images.');
                });

                // Video modal play/pause (demo)
                $('.play-button').on('click', function() {
                    console.log('Video modal triggered');
                });

                // Smooth scroll for anchor links
                $('a[href^="#"]').not('[href="#"]').on('click', function(e) {
                    e.preventDefault();
                    const target = $(this.getAttribute('href'));
                    if (target.length) {
                        $('html, body').animate({ scrollTop: target.offset().top - 100 }, 800);
                    }
                });

                // Lazy loading for images (native)
                if ('loading' in HTMLImageElement.prototype) {
                    const images = document.querySelectorAll('img[loading="lazy"]');
                    images.forEach(img => { img.src = img.dataset.src || img.src; });
                }

                // Image error handling
                $('img').on('error', function() { $(this).attr('src', './assets/img/placeholder.png'); });

                // Form submission prevention (demo)
                $('form').on('submit', function(e) { e.preventDefault(); alert('Thank you for your interest! This is a demo form. Please contact us directly for inquiries.'); });

                // Dynamic year for copyright
                const yearElements = document.querySelectorAll('.current-year');
                yearElements.forEach(el => { el.textContent = new Date().getFullYear(); });

                // Gallery item click handler
                $('.gallery-card-modern').on('click', function(e) {
                    if (!$(e.target).closest('a').length) $(this).find('.gallery-zoom-icon').trigger('click');
                });

                // Keyboard navigation for gallery
                $(document).on('keydown', function(e) { if (e.key === 'Escape') $('.modal').modal('hide'); });

                // Responsive grid adjustment on window resize
                let resizeTimer;
                $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { AOS.refresh(); }, 250); });

                // Initialize tooltips
                try {
                    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function(tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); });
                } catch (e) {
                    // ignore if bootstrap not available
                }

                // Masonry layout for featured section (optional enhancement)
                function applyMasonry() {
                    if ($(window).width() > 768) $('.gallery-grid').addClass('masonry'); else $('.gallery-grid').removeClass('masonry');
                }

                applyMasonry();
                $(window).on('resize', applyMasonry);
            });
        })(jQuery);
    </script>
</body>
</html>