<?php
// facilities.php
// Page Title: Our Facilities | WADATA Skills Acquisition Centre
// Description: Explore our world-class facilities including modern ICT labs, fashion studios, culinary kitchens, and more.
// Author: WADATA Development Team
// Version: 1.0
?>
<!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>Our Facilities | WADATA Skills Acquisition Centre</title>
    <meta name="title" content="Our Facilities | WADATA Skills Acquisition Centre">
    <meta name="description" content="Explore our world-class facilities including modern ICT labs, fashion studios, culinary kitchens, beauty salons, and creative workshops. State-of-the-art equipment and professional learning environment.">
    <meta name="keywords" content="WADATA facilities, ICT lab, fashion studio, culinary kitchen, beauty salon, craft workshop, training center, vocational facilities, skill acquisition center, modern learning environment">
    <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/facilities.php">
    <meta property="og:title" content="Our Facilities | WADATA Skills Acquisition Centre">
    <meta property="og:description" content="Experience training in our state-of-the-art facilities equipped with modern tools and technology for practical skill development.">
    <meta property="og:image" content="./assets/img/facilities-og.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://wadata.edu.ng/facilities.php">
    <meta property="twitter:title" content="Our Facilities | WADATA Skills Acquisition Centre">
    <meta property="twitter:description" content="Experience training in our state-of-the-art facilities equipped with modern tools and technology for practical skill development.">
    <meta property="twitter:image" content="./assets/img/facilities-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">
    <!-- Facilities Page Specific CSS -->
    <link rel="stylesheet" href="./assets/css/facilities.css">

</head>
<body>
    <!-- Include Navigation -->
    <?php 
    $current_page = basename($_SERVER['PHP_SELF']);
    include './component/nav.php'; 
    ?>

    <!-- Facilities Hero Section -->
    <section class="facilities-hero">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title" data-aos="fade-up">
                    <span>Discover Our</span>
                    World-Class Facilities
                </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">Facilities</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Facility Stats Bar -->
    <section class="facility-stats-bar">
        <div class="container">
            <div class="stat-grid">
                <div class="stat-block" data-aos="fade-up">
                    <div class="stat-value">8</div>
                    <div class="stat-label">Modern Facilities</div>
                    <div class="stat-desc">Specialized training centers</div>
                </div>
                <div class="stat-block" data-aos="fade-up" data-aos-delay="100">
                    <div class="stat-value">200+</div>
                    <div class="stat-label">Equipment Units</div>
                    <div class="stat-desc">State-of-the-art tools</div>
                </div>
                <div class="stat-block" data-aos="fade-up" data-aos-delay="200">
                    <div class="stat-value">24/7</div>
                    <div class="stat-label">Access</div>
                    <div class="stat-desc">For enrolled students</div>
                </div>
                <div class="stat-block" data-aos="fade-up" data-aos-delay="300">
                    <div class="stat-value">100%</div>
                    <div class="stat-label">Practical Training</div>
                    <div class="stat-desc">Hands-on learning environment</div>
                </div>
            </div>
        </div>
    </section>

    <!-- ICT & Computer Lab -->
    <section class="facility-section" id="ict-lab">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">01. Digital Excellence</span>
                <h2 class="facility-main-title">ICT & Computer Lab</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">State-of-the-art computing facility equipped with modern hardware and software for comprehensive digital skills training.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-8" data-aos="fade-right">
                    <div class="modern-facility-card">
                        <div class="facility-media">
                            <img src="./assets/img/ict01.jpg" alt="WADATA ICT Lab - Modern Computer Facility" loading="lazy">
                            <div class="facility-badge">Featured Facility</div>
                            <div class="facility-overlay">
                                <div class="facility-overlay-content">
                                    <h4>Quick Tour</h4>
                                    <p>Click to view more images of our ICT lab</p>
                                    <div class="facility-stats-mini">
                                        <span><i class="fas fa-desktop"></i> 50 Workstations</span>
                                        <span><i class="fas fa-wifi"></i> 1Gbps Internet</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="facility-content">
                            <h3>Advanced Computing Hub</h3>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Main Campus, 2nd Floor</span>
                            <ul class="facility-features">
                                <li><i class="fas fa-check-circle"></i> 50 high-performance Dell workstations with latest specifications</li>
                                <li><i class="fas fa-check-circle"></i> Licensed software including Adobe Creative Cloud, Microsoft Office, and development tools</li>
                                <li><i class="fas fa-check-circle"></i> 1Gbps dedicated fiber internet connection</li>
                                <li><i class="fas fa-check-circle"></i> Interactive smartboard and projection system</li>
                                <li><i class="fas fa-check-circle"></i> 24/7 access for enrolled students</li>
                                <li><i class="fas fa-check-circle"></i> Ergonomic furniture and proper ventilation</li>
                            </ul>
                            <div class="facility-capacity">
                                <i class="fas fa-users"></i> Capacity: 50 Students per session
                            </div>
                            <div class="mt-4">
                                <a href="./assets/img/ict01.jpg" data-lightbox="ict-lab" data-title="ICT Lab - Main Work Area" class="btn-facility me-2">
                                    <i class="fas fa-search"></i> View Gallery
                                </a>
                                <a href="./ict.php" class="btn-facility">
                                    <i class="fas fa-arrow-right"></i> Related Programs
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-left">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/ict01-.jpg" alt="ICT Lab - Server Room" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Server & Network Room</h4>
                                    <p>Enterprise-grade networking equipment and servers for hands-on IT infrastructure training.</p>
                                    <a href="./assets/img/ict01-.jpg" data-lightbox="ict-lab" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/ict01.jpg" alt="ICT Lab - Training Session" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Training in Progress</h4>
                                    <p>Students engaged in practical web development session.</p>
                                    <a href="./assets/img/ict01.jpg" data-lightbox="ict-lab" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Fashion & Tailoring Studio -->
    <section class="facility-section" id="fashion-studio">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">02. Creative Fashion</span>
                <h2 class="facility-main-title">Fashion & Tailoring Studio</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">Professional fashion design studio equipped with industrial machines and modern facilities for comprehensive garment construction training.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-4" data-aos="fade-right">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/tailoring-.jpg" alt="Fashion Studio - Industrial Machines" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Industrial Machines</h4>
                                    <p>30 industrial sewing machines including overlock, embroidery, and buttonholer.</p>
                                    <a href="./assets/img/tailoring-.jpg" data-lightbox="fashion-studio" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/tailoring-.jpg" alt="Fashion Studio - Cutting Tables" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Spacious Cutting Area</h4>
                                    <p>Large cutting tables with proper lighting and measuring tools.</p>
                                    <a href="./assets/img/tailoring-.jpg" data-lightbox="fashion-studio" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8" data-aos="fade-left">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 400px;">
                            <img src="./assets/img/tailoring-.jpg" alt="WADATA Fashion Studio - Main Work Area" loading="lazy">
                            <div class="facility-badge">Industry Standard</div>
                        </div>
                        <div class="facility-content">
                            <h3>Professional Fashion Design Studio</h3>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Creative Arts Building, Ground Floor</span>
                            <ul class="facility-features">
                                <li><i class="fas fa-check-circle"></i> 30 industrial sewing machines (Juki, Brother brands)</li>
                                <li><i class="fas fa-check-circle"></i> 4 overlock machines and 2 embroidery machines</li>
                                <li><i class="fas fa-check-circle"></i> Spacious cutting tables with professional measuring tools</li>
                                <li><i class="fas fa-check-circle"></i> Fabric library with 500+ sample materials</li>
                                <li><i class="fas fa-check-circle"></i> Fitting rooms with full-length mirrors</li>
                                <li><i class="fas fa-check-circle"></i> Pattern drafting and grading equipment</li>
                                <li><i class="fas fa-check-circle"></i> Steam irons and professional pressing tables</li>
                            </ul>
                            <div class="facility-capacity">
                                <i class="fas fa-users"></i> Capacity: 40 Students per session
                            </div>
                            <div class="mt-4">
                                <a href="./assets/img/tailoring-.jpg" data-lightbox="fashion-studio" data-title="Fashion Studio - Main Area" class="btn-facility me-2">
                                    <i class="fas fa-search"></i> View Gallery
                                </a>
                                <a href="./tailoring.php" class="btn-facility">
                                    <i class="fas fa-arrow-right"></i> Related Programs
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Culinary Arts Kitchen -->
    <section class="facility-section" id="culinary-kitchen">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">03. Culinary Excellence</span>
                <h2 class="facility-main-title">Culinary Arts Kitchen</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">Professional-grade kitchen facility designed for hands-on culinary training with commercial equipment and food safety standards.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-8" data-aos="fade-right">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 400px;">
                            <img src="./assets/img/catering-.jpg" alt="WADATA Culinary Kitchen - Professional Training Facility" loading="lazy">
                            <div class="facility-badge">Commercial Grade</div>
                        </div>
                        <div class="facility-content">
                            <h3>Professional Training Kitchen</h3>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Hospitality Building, 1st Floor</span>
                            <ul class="facility-features">
                                <li><i class="fas fa-check-circle"></i> 15 fully-equipped cooking stations with gas and electric hobs</li>
                                <li><i class="fas fa-check-circle"></i> Commercial ovens, grills, and deep fryers</li>
                                <li><i class="fas fa-check-circle"></i> Professional refrigeration and cold storage</li>
                                <li><i class="fas fa-check-circle"></i> Bakery section with industrial mixers and proofers</li>
                                <li><i class="fas fa-check-circle"></i> Food safety compliant surfaces and ventilation</li>
                                <li><i class="fas fa-check-circle"></i> Complete set of professional cookware and utensils</li>
                                <li><i class="fas fa-check-circle"></i> Demonstration area with mirror and camera system</li>
                            </ul>
                            <div class="facility-capacity">
                                <i class="fas fa-users"></i> Capacity: 30 Students per session
                            </div>
                            <div class="mt-4">
                                <a href="./assets/img/catering-.jpg" data-lightbox="culinary" data-title="Culinary Kitchen - Main Cooking Area" class="btn-facility me-2">
                                    <i class="fas fa-search"></i> View Gallery
                                </a>
                                <a href="./catering.php" class="btn-facility">
                                    <i class="fas fa-arrow-right"></i> Related Programs
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-left">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/catering-.jpg" alt="Culinary Kitchen - Bakery Section" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Bakery Section</h4>
                                    <p>Dedicated area for bread and pastry training with professional ovens.</p>
                                    <a href="./assets/img/catering-.jpg" data-lightbox="culinary" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/catering-.jpg" alt="Culinary Kitchen - Cold Kitchen" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Cold Kitchen</h4>
                                    <p>Temperature-controlled area for cold food preparation and plating.</p>
                                    <a href="./assets/img/catering-.jpg" data-lightbox="culinary" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Beauty Salon & Makeup Studio -->
    <section class="facility-section" id="beauty-salon">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">04. Beauty & Wellness</span>
                <h2 class="facility-main-title">Beauty Salon & Makeup Studio</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">Modern salon facility equipped for comprehensive beauty and wellness training with professional stations and products.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-4" data-aos="fade-right">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/saloon-.jpg" alt="Beauty Salon - Hair Styling Stations" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Hair Styling Area</h4>
                                    <p>12 professional styling stations with mirrors and equipment.</p>
                                    <a href="./assets/img/saloon-.jpg" data-lightbox="beauty" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/saloon-.jpg" alt="Beauty Salon - Makeup Studio" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Makeup Studio</h4>
                                    <p>Professional makeup stations with lighting and mirrors.</p>
                                    <a href="./assets/img/saloon-.jpg" data-lightbox="beauty" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8" data-aos="fade-left">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 400px;">
                            <img src="./assets/img/saloon-.jpg" alt="WADATA Beauty Salon - Main Studio" loading="lazy">
                            <div class="facility-badge">Professional Studio</div>
                        </div>
                        <div class="facility-content">
                            <h3>Complete Beauty Training Facility</h3>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Wellness Center, 2nd Floor</span>
                            <ul class="facility-features">
                                <li><i class="fas fa-check-circle"></i> 12 professional hair styling stations with hydraulic chairs</li>
                                <li><i class="fas fa-check-circle"></i> 8 makeup stations with Hollywood mirrors and LED lighting</li>
                                <li><i class="fas fa-check-circle"></i> Professional hair wash basins and treatment area</li>
                                <li><i class="fas fa-check-circle"></i> Sterilization equipment and sanitation stations</li>
                                <li><i class="fas fa-check-circle"></i> Extensive product collection for training</li>
                                <li><i class="fas fa-check-circle"></i> Nail care station with ventilation</li>
                                <li><i class="fas fa-check-circle"></i> Facial and skincare treatment beds</li>
                            </ul>
                            <div class="facility-capacity">
                                <i class="fas fa-users"></i> Capacity: 25 Students per session
                            </div>
                            <div class="mt-4">
                                <a href="./assets/img/saloon-.jpg" data-lightbox="beauty" data-title="Beauty Salon - Main Studio" class="btn-facility me-2">
                                    <i class="fas fa-search"></i> View Gallery
                                </a>
                                <a href="./makeup.php" class="btn-facility">
                                    <i class="fas fa-arrow-right"></i> Related Programs
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Hand Craft & Creative Workshop -->
    <section class="facility-section" id="craft-workshop">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">05. Creative Arts</span>
                <h2 class="facility-main-title">Hand Craft & Creative Workshop</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">Inspiring space for traditional and modern crafts, equipped with tools and materials for various creative disciplines.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-8" data-aos="fade-right">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 400px;">
                            <img src="./assets/img/handcraft.jpg" alt="WADATA Craft Workshop - Creative Space" loading="lazy">
                            <div class="facility-badge">Creative Hub</div>
                        </div>
                        <div class="facility-content">
                            <h3>Multipurpose Creative Workshop</h3>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Creative Arts Building, 2nd Floor</span>
                            <ul class="facility-features">
                                <li><i class="fas fa-check-circle"></i> Dedicated areas for beadwork, weaving, and textile arts</li>
                                <li><i class="fas fa-check-circle"></i> Woodworking and carving tools and workbenches</li>
                                <li><i class="fas fa-check-circle"></i> Ceramics and pottery section with kiln</li>
                                <li><i class="fas fa-check-circle"></i> Painting and drawing studio with natural light</li>
                                <li><i class="fas fa-check-circle"></i> Material storage and organization systems</li>
                                <li><i class="fas fa-check-circle"></i> Recycling art station for sustainable crafts</li>
                                <li><i class="fas fa-check-circle"></i> Exhibition space for student work</li>
                            </ul>
                            <div class="facility-capacity">
                                <i class="fas fa-users"></i> Capacity: 35 Students per session
                            </div>
                            <div class="mt-4">
                                <a href="./assets/img/handcraft.jpg" data-lightbox="craft" data-title="Craft Workshop - Main Area" class="btn-facility me-2">
                                    <i class="fas fa-search"></i> View Gallery
                                </a>
                                <a href="./craft.php" class="btn-facility">
                                    <i class="fas fa-arrow-right"></i> Related Programs
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-left">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/handcraft.jpg" alt="Craft Workshop - Pottery Section" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Pottery Section</h4>
                                    <p>Wheel throwing and hand-building area with kiln.</p>
                                    <a href="./assets/img/handcraft.jpg" data-lightbox="craft" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="modern-facility-card">
                                <div class="facility-media" style="height: 200px;">
                                    <img src="./assets/img/handcraft.jpg" alt="Craft Workshop - Exhibition Space" loading="lazy">
                                </div>
                                <div class="facility-content">
                                    <h4>Student Gallery</h4>
                                    <p>Display area showcasing outstanding student creations.</p>
                                    <a href="./assets/img/handcraft.jpg" data-lightbox="craft" class="btn-facility btn-sm">View</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Lecture Hall & Seminar Rooms -->
    <section class="facility-section" id="lecture-hall">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">06. Academic Excellence</span>
                <h2 class="facility-main-title">Lecture Hall & Seminar Rooms</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">Modern lecture facilities equipped with audio-visual technology for effective theoretical instruction and presentations.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-4" data-aos="fade-right">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 250px;">
                            <img src="./assets/img/lecturehall.jpg" alt="Main Lecture Hall" loading="lazy">
                        </div>
                        <div class="facility-content">
                            <h4>Main Lecture Hall</h4>
                            <p>200-seat capacity with professional AV system and smart board.</p>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Academic Block</span>
                            <a href="./assets/img/lecturehall.jpg" data-lightbox="lecture" class="btn-facility btn-sm mt-3">View</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4" data-aos="fade-up">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 250px;">
                            <img src="./assets/img/lecturehall.jpg" alt="Seminar Room A" loading="lazy">
                        </div>
                        <div class="facility-content">
                            <h4>Seminar Room A</h4>
                            <p>50-seat capacity for workshops and group discussions.</p>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> 1st Floor</span>
                            <a href="./assets/img/lecturehall.jpg" data-lightbox="lecture" class="btn-facility btn-sm mt-3">View</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4" data-aos="fade-left">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 250px;">
                            <img src="./assets/img/lecturehall.jpg" alt="Conference Room" loading="lazy">
                        </div>
                        <div class="facility-content">
                            <h4>Executive Conference Room</h4>
                            <p>Boardroom style for 20 people with video conferencing.</p>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> 2nd Floor</span>
                            <a href="./assets/img/lecturehall.jpg" data-lightbox="lecture" class="btn-facility btn-sm mt-3">View</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Counseling Center -->
    <section class="facility-section" id="counseling">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">07. Student Support</span>
                <h2 class="facility-main-title">Guidance & Counseling Center</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">Private and comfortable spaces dedicated to student well-being, career guidance, and personal development.</p>
            </div>

            <div class="row g-4">
                <div class="col-lg-6" data-aos="fade-right">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 300px;">
                            <img src="./assets/img/counseling.jpg" alt="Counseling Center - Private Room" loading="lazy">
                        </div>
                        <div class="facility-content">
                            <h4>Private Counseling Rooms</h4>
                            <p>6 soundproof rooms for confidential sessions with professional counselors.</p>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Wellness Wing</span>
                            <a href="./assets/img/counseling.jpg" data-lightbox="counseling" class="btn-facility btn-sm mt-3">View</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="modern-facility-card">
                        <div class="facility-media" style="height: 300px;">
                            <img src="./assets/img/counseling.jpg" alt="Counseling Center - Group Therapy" loading="lazy">
                        </div>
                        <div class="facility-content">
                            <h4>Group Therapy Room</h4>
                            <p>Comfortable space for group sessions and workshops.</p>
                            <span class="facility-location"><i class="fas fa-map-marker-alt"></i> Wellness Wing</span>
                            <a href="./assets/img/counseling.jpg" data-lightbox="counseling" class="btn-facility btn-sm mt-3">View</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Virtual Tour CTA -->
    <section class="virtual-tour">
        <div class="container">
            <div class="tour-content" data-aos="fade-up">
                <div class="tour-icon">
                    <i class="fas fa-vr-cardboard"></i>
                </div>
                <h2 class="tour-title">Take a Virtual Tour</h2>
                <p class="tour-text">Experience our facilities from anywhere in the world. Explore our campus through our immersive 360° virtual tour.</p>
                <a href="#" class="btn-tour"><i class="fas fa-play-circle me-2"></i> Start Virtual Tour</a>
            </div>
        </div>
    </section>

    <!-- Student Testimonials -->
    <section class="facility-testimonials">
        <div class="container">
            <div class="facility-header" data-aos="fade-up">
                <span class="facility-subtitle">Student Experiences</span>
                <h2 class="facility-main-title">What Our Students Say About Our Facilities</h2>
                <div class="facility-divider"></div>
                <p class="facility-desc">Hear from our students about how our facilities enhanced their learning experience.</p>
            </div>

            <div class="testimonial-grid">
                <div class="testimonial-item" data-aos="fade-up">
                    <div class="facility-testimonial-quote">"The ICT lab is incredible! With 50 high-performance computers and 1Gbps internet, I was able to learn web development without any limitations. The smart boards make lessons engaging and easy to follow."</div>
                    <div class="testimonial-author">
                        <img src="./assets/img/testimonial.jpeg" alt="Ibrahim Yakubu Ibrahim" class="author-img" loading="lazy">
                        <div class="author-info">
                            <h4>Ibrahim Yakubu Ibrahim</h4>
                            <p>ICT & Graphics Design</p>
                        </div>
                    </div>
                </div>

                <div class="testimonial-item" data-aos="fade-up" data-aos-delay="100">
                    <div class="facility-testimonial-quote">"The fashion studio is a dream come true! Industrial machines, spacious cutting tables, and a fabric library – everything I needed to master tailoring. The equipment is well-maintained and professional grade."</div>
                    <div class="testimonial-author">
                        <img src="./assets/img/testimonial.jpeg" alt="Aisha Mohammed" class="author-img" loading="lazy">
                        <div class="author-info">
                            <h4>Aisha Mohammed</h4>
                            <p>Fashion & Tailoring</p>
                        </div>
                    </div>
                </div>

                <div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
                    <div class="facility-testimonial-quote">"Training in a professional kitchen prepared me for the real world. We use the same equipment as top hotels. The instructors ensure we understand both the art and science of cooking in this amazing facility."</div>
                    <div class="testimonial-author">
                        <img src="./assets/img/testimonial.jpeg" alt="Michael Okafor" class="author-img" loading="lazy">
                        <div class="author-info">
                            <h4>Michael Okafor</h4>
                            <p>Culinary Arts</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="facility-cta">
        <div class="container">
            <div class="cta-content" data-aos="fade-up">
                <h2 class="cta-title">Experience Our Facilities Firsthand</h2>
                <p class="cta-text">Schedule a campus tour and see our world-class facilities in person. Meet our instructors and discover why WADATA is the right choice for your skill development journey.</p>
                <div>
                    <a href="./contact.php" class="btn-cta"><i class="fas fa-calendar-alt me-2"></i> Schedule a Tour</a>
                    <a href="./register.php" class="btn-cta-outline"><i class="fas fa-user-plus me-2"></i> Enroll Now</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 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>
        // Initialize AOS
        AOS.init({
            duration: 800,
            offset: 50,
            once: true,
            easing: 'ease-in-out'
        });

        // Navbar scroll effect
        $(window).on('scroll', function() {
            if ($(window).scrollTop() > 50) {
                $('.navbar').addClass('scrolled');
            } else {
                $('.navbar').removeClass('scrolled');
            }

            // Back to top button visibility
            if ($(window).scrollTop() > 300) {
                $('#backToTop').addClass('show');
            } else {
                $('#backToTop').removeClass('show');
            }
        });

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

        // Lightbox configuration
        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true,
            'albumLabel': 'Image %1 of %2',
            'fadeDuration': 300,
            'imageFadeDuration': 300
        });

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

        // Facility card hover effect enhancement
        $('.modern-facility-card').on('mouseenter', function() {
            $(this).find('.facility-overlay').css('transform', 'translateY(0)');
        }).on('mouseleave', function() {
            $(this).find('.facility-overlay').css('transform', 'translateY(100%)');
        });

        // Form submission prevention for 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.');
        });

        // Stat counter animation
        function animateStats() {
            $('.stat-value').each(function() {
                const $this = $(this);
                const value = $this.text().replace('+', '');
                
                if (!isNaN(value) && value > 0) {
                    $this.prop('Counter', 0).animate({
                        Counter: value
                    }, {
                        duration: 2000,
                        easing: 'swing',
                        step: function(now) {
                            if (now % 1 === 0) {
                                $this.text(Math.ceil(now) + ($this.text().includes('+') ? '+' : ''));
                            }
                        }
                    });
                }
            });
        }

        // Trigger stats animation when in viewport
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animateStats();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

        observer.observe(document.querySelector('.facility-stats-bar'));

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

        // Dynamic year in copyright (if needed)
        document.addEventListener('DOMContentLoaded', function() {
            const yearElements = document.querySelectorAll('.current-year');
            yearElements.forEach(el => {
                el.textContent = new Date().getFullYear();
            });
        });
    </script>
</body>
</html>