<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WADATA Skills Acquisition Center | Where Skills Shape the Future</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" 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">
    
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <!-- 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">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    <?php include './component/nav.php' ?>
    <!-- Hero Section -->
    <section id="home" class="hero" aria-label="Hero section" data-section="home">
        <div class="hero-slider" id="heroSlider" role="region" aria-label="Featured content">
            <!-- Single static slide with video -->
            <div class="hero-slide active" data-index="0">
                <div class="slide-media">
                    <video autoplay muted loop playsinline>
                        <source src="./assets/vid/ict00.MOV" type="video/mp4">
                        <!-- Fallback image if video doesn't load -->
                        <img src="" alt="WADATA Skills Center">
                    </video>
                </div>
                <div class="slide-content">
                    <h1 class="slide-title">Where Skills Shape the Future</h1>
                    <h2 class="slide-subtitle">Empowering Talent Through Practical Training</h2>
                    <p class="slide-description">A collaborative learning hub where ambition meets opportunity</p>
                    <div class="hero-buttons">
                        <a href="#programs" class="btn btn-primary btn-lg me-2 mb-3">Explore Programs</a>
                        <a href="#contact" class="btn btn-outline-light btn-lg mb-3">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Scroll Indicator -->
        <a href="#about" class="scroll-indicator" aria-label="Scroll to about section">
            <span class="scroll-text">Scroll Down</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M12 4V20M12 20L18 14M12 20L6 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </a>
    </section>

    <!-- About Section -->
    <section id="about" class="section about-section" aria-labelledby="about-heading" data-section="about">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header text-center">
                <span class="section-subtitle">Who We Are</span>
                <h2 id="about-heading" class="section-title">Redefining Skills Acquisition</h2>
                <div class="section-divider" role="presentation"></div>
            </div>
            
            <!-- About Content -->
            <div class="about-content">
                <div class="row g-5">
                    <!-- Left Column: Stats & Text -->
                    <div class="col-lg-6" data-aos="fade-right">
                        <!-- Statistics Cards -->
                        <div class="about-stats glass-card">
                            <div class="stat-item">
                                <span class="stat-number" data-count="5000">0</span>
                                <span class="stat-label">Graduates</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" data-count="100">0</span>
                                <span class="stat-label">Expert Mentors</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" data-count="50">0</span>
                                <span class="stat-label">Programs</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" data-count="30">0</span>
                                <span class="stat-label">Countries</span>
                            </div>
                        </div>
                        
                        <!-- About Text -->
                        <div class="about-text">
                            <p class="lead">At WADATA Skills Acquisition Center, we believe that practical skills are the currency of the future. Our mission is to democratize access to quality technical and vocational education, empowering learners (males & Females) with the competencies needed to excel in the digital economy.</p>
                            
                            <!-- Features Mini Cards -->
                            <div class="about-features">
                                <div class="feature-mini glass-card">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                        <path d="M20 7L9 18L4 13" stroke="#FF6A00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <span>Industry-aligned curriculum</span>
                                </div>
                                <div class="feature-mini glass-card">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                        <path d="M20 7L9 18L4 13" stroke="#FF6A00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <span>Hands-on project-based learning</span>
                                </div>
                                <div class="feature-mini glass-card">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                        <path d="M20 7L9 18L4 13" stroke="#FF6A00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <span>Global certification</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Right Column: Media Grid -->
                    <div class="col-lg-6" data-aos="fade-left">
                        <div class="about-media">
                            <div class="media-grid">
                                <div class="grid-item large">
                                    <img src="./assets/img/ict01.jpg" alt="Students collaborating in modern lab" class="lazyload">
                                </div>
                                <div class="grid-item">
                                    <img src="./assets/img/saloon-.jpg" alt="Instructor helping student" class="lazyload">
                                </div>
                                <div class="grid-item">
                                    <img src="./assets/img/catering-.jpg" alt="Modern training equipment" class="lazyload">
                                </div>
                            </div>
                            
                            <!-- Experience Badge -->
                            <div class="experience-badge glass-card">
                                <span class="years">4+</span>
                                <span class="text">Years of<br>Excellence</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Mission & Values Section -->
    <section id="mission-vision" class="section mission-section" aria-labelledby="mission-heading" data-section="mission" data-aos="zoom-in">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header text-center">
                <span class="section-subtitle">Our Foundation</span>
                <h2 id="mission-heading" class="section-title">Mission, Vision & Values</h2>
                <div class="section-divider" role="presentation"></div>
                <p class="section-description">Guided by purpose, driven by excellence — discover what stands at the core of WADATA.</p>
            </div>

            <!-- Mission & Vision Cards -->
            <div class="row g-4 mb-5">
                <!-- Mission Card -->
                <div class="col-lg-6">
                    <div class="mission-card h-100">
                        <div class="mission-icon">
                            <i class="fas fa-bullseye"></i>
                        </div>
                        <h3>Our Mission</h3>
                        <p>To democratize access to quality technical and vocational education by providing industry-aligned, hands-on training that empowers individuals (males & females) with practical skills, fostering entrepreneurship and self-reliance in the digital economy.</p>
                        <div class="mission-stats">
                            <div class="mission-stat">
                                <span class="stat-number">1000+</span>
                                <span class="stat-label">Lives Impacted</span>
                            </div>
                            <div class="mission-stat">
                                <span class="stat-number">95%</span>
                                <span class="stat-label">Graduate Employment</span>
                            </div>
                        </div>
                        
                    </div>
                </div>

                <!-- Vision Card -->
                <div class="col-lg-6">
                    <div class="mission-card h-100">
                        <div class="mission-icon">
                            <i class="fas fa-eye"></i>
                        </div>
                        <h3>Our Vision</h3>
                        <p>To become Africa's leading skills acquisition center, recognized globally for producing competent, innovative, and entrepreneurial graduates who transform their communities and drive economic growth through practical expertise.</p>
                        <div class="vision-badge">
                            <span>Leading Skills Hub by 2030</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Core Values -->
            <div class="values-container">
                <h3 class="text-center mb-4">Core Values That Guide Us</h3>
                <div class="row g-4">
                    <!-- Value 1: Excellence -->
                    <div class="col-lg-3 col-md-6 col-6">

                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-crown"></i>
                            </div>
                            <h4>Excellence</h4>
                            <p>We pursue the highest standards in training, curriculum, and graduate outcomes.</p>
                        </div>

                    </div>

                    <!-- Value 2: Innovation -->
                    <div class="col-lg-3 col-md-6 col-6">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                            <h4>Innovation</h4>
                            <p>We embrace modern teaching methods and stay ahead of industry trends.</p>
                        </div>
                    </div>

                    <!-- Value 3: Integrity -->
                    <div class="col-lg-3 col-md-6 col-6">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-hand-holding-heart"></i>
                            </div>
                            <h4>Integrity</h4>
                            <p>We operate with transparency, honesty, and ethical responsibility.</p>
                        </div>
                    </div>

                    <!-- Value 4: Inclusion -->
                    <div class="col-lg-3 col-md-6 col-6">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <h4>Inclusion</h4>
                            <p>We provide equal opportunities for all genders and backgrounds to learn and grow.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section id="gallery" class="section gallery-section" aria-labelledby="gallery-heading" data-section="gallery">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header text-center">
                <span class="section-subtitle">Our Gallery</span>
                <h2 id="gallery-heading" class="section-title">Moments at WADATA</h2>
                <div class="section-divider" role="presentation"></div>
                <p class="section-description">Take a visual tour of our center, events, and student activities.</p>
            </div>

            <div class="slider-wrapper">
                <button class="slider-btn prev-btn">&#10094;</button>
                <button class="slider-btn next-btn">&#10095;</button>

                <div class="slider-track">
                    <!-- 1. ICT / GRAPHICS DESIGN -->
                    <div class="gallery-card">
                        <div class="gallery-image">
                            <img src="./assets/img/ict01-.jpg" alt="ICT and Graphics Design Training at WADATA Skills Center" class="img-fluid">
                            <div class="gallery-overlay">
                                <div class="gallery-info">
                                    <h5>ICT & Graphics Design Unit</h5>
                                    <p>Digital Skills • Web • Design • 2025</p>
                                    <a href="#" class="gallery-zoom" data-bs-toggle="modal" data-bs-target="#galleryModal1">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 2. TAILORING SECTION -->
                    <div class="gallery-card">
                        <div class="gallery-image">
                            <img src="./assets/img/tailoring-.jpg" alt="Tailoring and Fashion Design Training at WADATA" class="img-fluid">
                            <div class="gallery-overlay">
                                <div class="gallery-info">
                                    <h5>Tailoring & Fashion Design</h5>
                                    <p>Garment Making • Pattern Drafting</p>
                                    <a href="#" class="gallery-zoom" data-bs-toggle="modal" data-bs-target="#galleryModal2">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 3. CATERING SECTION -->
                    <div class="gallery-card">
                        <div class="gallery-image">
                            <img src="./assets/img/catering-.jpg" alt="Catering and Culinary Training Program" class="img-fluid">
                            <div class="gallery-overlay">
                                <div class="gallery-info">
                                    <h5>Catering & Culinary Arts</h5>
                                    <p>Professional Cooking • Baking • Event Catering</p>
                                    <a href="#" class="gallery-zoom" data-bs-toggle="modal" data-bs-target="#galleryModal3">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 4. SALOON & MAKE-UP -->
                    <div class="gallery-card">
                        <div class="gallery-image">
                            <img src="./assets/img/saloon-.jpg" alt="Salon and Make-up Artistry Training" class="img-fluid">
                            <div class="gallery-overlay">
                                <div class="gallery-info">
                                    <h5>Saloon & Make-Up Artistry</h5>
                                    <p>Hair Styling • Beauty Therapy • Cosmetics</p>
                                    <a href="#" class="gallery-zoom" data-bs-toggle="modal" data-bs-target="#galleryModal4">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 5. HAND CRAFT & CREATIVITY -->
                    <div class="gallery-card">
                        <div class="gallery-image">
                            <img src="./assets/img/handcraft.jpg" alt="Hand Craft and Creative Skills Training" class="img-fluid">
                            <div class="gallery-overlay">
                                <div class="gallery-info">
                                    <h5>Hand Craft & Creativity</h5>
                                    <p>Creative Arts • DIY • Craft Production</p>
                                    <a href="#" class="gallery-zoom" data-bs-toggle="modal" data-bs-target="#galleryModal5">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 6. MARRIAGE GUIDANCE & COUNSELING -->
                    <div class="gallery-card">
                        <div class="gallery-image">
                            <img src="./assets/img/counseling.jpg" alt="Marriage Guidance and Counseling Sessions" class="img-fluid">
                            <div class="gallery-overlay">
                                <div class="gallery-info">
                                    <h5>Marriage Guidance & Counseling</h5>
                                    <p>Family Life • Relationship Coaching • Mentorship</p>
                                    <a href="#" class="gallery-zoom" data-bs-toggle="modal" data-bs-target="#galleryModal6">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 7. LECTURE HALL -->
                    <div class="gallery-card">
                        <div class="gallery-image">
                            <img src="./assets/img/lecturehall.jpg" alt="Lecture Hall and Training Sessions at WADATA Skills Center" class="img-fluid">
                            <div class="gallery-overlay">
                                <div class="gallery-info">
                                    <h5>Modern Lecture Hall</h5>
                                    <p>Interactive Learning • Workshops • Seminars</p>
                                    <a href="#" class="gallery-zoom" data-bs-toggle="modal" data-bs-target="#galleryModal7">
                                        <i class="fas fa-search-plus"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

     <!-- Programs Section -->
    <section id="programs" class="section programs-section" aria-labelledby="programs-heading" data-section="programs">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header text-center">
                <span class="section-subtitle">Our Programs</span>
                <h2 id="programs-heading" class="section-title">Transform Your Future</h2>
                <div class="section-divider" role="presentation"></div>
                <p class="section-description">Choose from our industry-leading programs designed to equip you with practical, in-demand skills for global opportunities.</p>
            </div>

            <div class="row g-3 g-lg-4">
                <!-- ICT & Graphics (icon) -->
                <div class="col-6 col-md-4 col-lg-4">
                    <div class="program-card">
                        <div class="program-icon-big"><i class="fas fa-laptop-code"></i></div>
                        <h3>ICT & Graphics</h3>
                        <p>Web, UI/UX, Adobe, digital marketing</p>
                        <a href="#" class="program-tag">Enroll</a>
                    </div>
                </div>
                <!-- Tailoring (icon) -->
                <div class="col-6 col-md-4 col-lg-4">
                    <div class="program-card">
                        <div class="program-icon-big"><i class="fas fa-cut"></i></div>
                        <h3>Fashion & Tailoring</h3>
                        <p>Pattern making, garment construction</p>
                        <a href="#" class="program-tag">Enroll</a>
                    </div>
                </div>
                <!-- Catering (icon) -->
                <div class="col-6 col-md-4 col-lg-4">
                    <div class="program-card">
                        <div class="program-icon-big"><i class="fas fa-utensils"></i></div>
                        <h3>Culinary Arts</h3>
                        <p>Professional cooking, baking, catering</p>
                        <a href="#" class="program-tag">Enroll</a>
                    </div>
                </div>
                <!-- Makeup (icon) -->
                <div class="col-6 col-md-4 col-lg-4">
                    <div class="program-card">
                        <div class="program-icon-big"><i class="fas fa-magic"></i></div>
                        <h3>Makeup & Salon</h3>
                        <p>Hair, makeup, skincare, salon mgt</p>
                        <a href="#" class="program-tag">Enroll</a>
                    </div>
                </div>
                <!-- Hand Craft (icon) -->
                <div class="col-6 col-md-4 col-lg-4">
                    <div class="program-card">
                        <div class="program-icon-big"><i class="fas fa-paint-brush"></i></div>
                        <h3>Hand Craft</h3>
                        <p>Beadwork, decor, recycling art</p>
                        <a href="#" class="program-tag">Enroll</a>
                    </div>
                </div>
                <!-- Marriage Guidance (icon) -->
                <div class="col-6 col-md-4 col-lg-4">
                    <div class="program-card">
                        <div class="program-icon-big"><i class="fas fa-heart"></i></div>
                        <h3>Marriage Guidance</h3>
                        <p>Counseling, conflict resolution</p>
                        <a href="#" class="program-tag">Enroll</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Facilities Section -->
    <section id="facilities" class="section facilities-section" aria-labelledby="facilities-heading" data-section="facilities">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header text-center">
                <span class="section-subtitle">Our Facilities</span>
                <h2 id="facilities-heading" class="section-title">World-Class Learning Environment</h2>
                <div class="section-divider" role="presentation"></div>
                <p class="section-description">Experience training in modern, well-equipped facilities designed for optimal learning and creativity.</p>
            </div>

            <div class="row g-3">
                <!-- Lecture hall (real image: ict01-.jpg) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/ict01-.jpg" alt="Lecture hall" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>Lecture Hall</h3>
                            <p><i class="fas fa-users"></i> 200 seats, smart boards</p>
                        </div>
                    </div>
                </div>
                <!-- ICT Lab (real image: ict01.jpg) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/ict01.jpg" alt="ICT Lab" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>ICT Lab</h3>
                            <p><i class="fas fa-desktop"></i> 50 workstations, 1Gbps</p>
                        </div>
                    </div>
                </div>
                <!-- Fashion Studio (real image: tailoring-.jpg) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/tailoring-.jpg" alt="Fashion Studio" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>Fashion Studio</h3>
                            <p><i class="fas fa-tshirt"></i> 30 industrial machines</p>
                        </div>
                    </div>
                </div>
                <!-- Culinary Kitchen (real image: catering-.jpg) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/catering-.jpg" alt="Culinary Kitchen" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>Culinary Kitchen</h3>
                            <p><i class="fas fa-utensils"></i> 15 pro workstations</p>
                        </div>
                    </div>
                </div>
                <!-- Beauty Salon (real image: saloon-.jpg) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/saloon-.jpg" alt="Beauty Salon" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>Beauty Salon</h3>
                            <p><i class="fas fa-cut"></i> 12 styling stations</p>
                        </div>
                    </div>
                </div>
                <!-- Craft Workshop (real image: handcraft.jpg) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/handcraft.jpg" alt="Craft Workshop" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>Craft Workshop</h3>
                            <p><i class="fas fa-paint-brush"></i> 20+ craft types</p>
                        </div>
                    </div>
                </div>
                <!-- Counseling Center (real image: counseling.jpg) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/counseling.jpg" alt="Counseling" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>Counseling</h3>
                            <p><i class="fas fa-heart"></i> 6 private rooms</p>
                        </div>
                    </div>
                </div>
                <!-- Library (use lecturehall.jpg as fallback or any, we'll use ict01-.jpg again) -->
                <div class="col-6 col-md-3">
                    <div class="facility-card">
                        <img src="./assets/img/ict01-.jpg" alt="Library" class="facility-img" loading="lazy">
                        <div class="facility-overlay">
                            <h3>Library</h3>
                            <p><i class="fas fa-book"></i> 5000+ books, digital</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section id="testimonials" class="section testimonials-section" aria-labelledby="testimonials-heading" data-section="testimonials">
        <div class="container">
            <!-- Section Header -->
            <div class="section-header text-center">
                <span class="section-subtitle">Testimonials</span>
                <h2 id="testimonials-heading" class="section-title">Success Stories</h2>
                <div class="section-divider" role="presentation"></div>
                <p class="section-description">Hear from our graduates who are making waves locally and globally.</p>
            </div>

            <!-- Testimonial Slider Container -->
            <div class="testimonial-slider-container">
                <div class="testimonial-slider-wrapper">
                    <div class="testimonial-slider-track">
                        <!-- Testimonial 1 -->
                        <div class="testimonial-card">
                            <div class="testimonial-quote">"</div>
                            <div class="testimonial-content">
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <p>"WADATA transformed my life. After completing the ICT program, I now work remotely as a web designer for international clients. The practical training was invaluable."</p>
                                <div class="testimonial-author">
                                    <img src="./assets/img/testimonial.jpeg" alt="Ibrahim Yakubu Ibrahim">
                                    <div class="author-info">
                                        <h4>Ibrahim Yakubu Ibrahim</h4>
                                        <p>ICT & Graphics Design</p>
                                        <span class="graduation-year">Class of 2024</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonial 2 -->
                        <div class="testimonial-card">
                            <div class="testimonial-quote">"</div>
                            <div class="testimonial-content">
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <p>"The tailoring program gave me the skills to start my own fashion brand. Today, I employ 5 people and export to Europe. The business mentorship was game-changing."</p>
                                <div class="testimonial-author">
                                    <img src="./assets/img/testimonial.jpeg" alt="Michael Okafor">
                                    <div class="author-info">
                                        <h4>Michael Okafor</h4>
                                        <p>Tailoring & Fashion Design</p>
                                        <span class="graduation-year">Class of 2023</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonial 3 -->
                        <div class="testimonial-card">
                            <div class="testimonial-quote">"</div>
                            <div class="testimonial-content">
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <p>"From catering student to executive chef at a 5-star hotel – that's my journey thanks to WADATA. The hands-on training and industry connections opened doors I never imagined."</p>
                                <div class="testimonial-author">
                                    <img src="./assets/img/testimonial.jpeg" alt="Aisha Mohammed">
                                    <div class="author-info">
                                        <h4>Aisha Mohammed</h4>
                                        <p>Catering & Culinary Arts</p>
                                        <span class="graduation-year">Class of 2022</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Testimonial 4 -->
                        <div class="testimonial-card">
                            <div class="testimonial-quote">"</div>
                            <div class="testimonial-content">
                                <div class="testimonial-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <p>"The makeup artistry course was exceptional. I now run my own successful salon and train other young women. WADATA gave me the confidence to pursue my dreams."</p>
                                <div class="testimonial-author">
                                    <img src="./assets/img/testimonial.jpeg" alt="Fatima Bello">
                                    <div class="author-info">
                                        <h4>Fatima Bello</h4>
                                        <p>Makeup & Saloon</p>
                                        <span class="graduation-year">Class of 2024</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Navigation Buttons -->
                <button class="testimonial-nav prev" aria-label="Previous testimonial">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="testimonial-nav next" aria-label="Next testimonial">
                    <i class="fas fa-chevron-right"></i>
                </button>
                
                <!-- Dots/Indicators -->
                <div class="testimonial-dots"></div>
            </div>
        </div>
    </section>

    <!-- ========== NEWSLETTER CALL-TO-ACTION (replaces old contact section) ========== -->
    <section id="newsletter-cta" class="section contact-section" style="background: var(--light); padding: 60px 0;">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8">
                    <span class="section-subtitle" style="color: var(--accent);">Stay Connected</span>
                    <h2 class="section-title" style="font-size: 2.2rem; color: var(--primary);">Subscribe to Our Newsletter</h2>
                    <div class="section-divider" style="margin: 20px auto;"></div>
                    <p class="lead mb-4" style="color: var(--gray-700);">Get the latest updates on new programs, events, and success stories delivered straight to your inbox.</p>
                    
                    <!-- Compact Newsletter Form -->
                    <form class="row g-2 justify-content-center">
                        <div class="col-md-7 col-12">
                            <input type="email" class="form-control form-control-lg" placeholder="Your email address" required style="border-radius: 50px; padding: 0.75rem 1.5rem;">
                        </div>
                        <div class="col-md-auto col-12">
                            <button type="submit" class="btn btn-lg" style="background: var(--accent); color: white; border-radius: 50px; padding: 0.75rem 2rem; font-weight: 600; border: none;">Subscribe <i class="fas fa-paper-plane ms-2"></i></button>
                        </div>
                        <div class="col-12 mt-3">
                            <small style="color: var(--gray-600);">No spam, unsubscribe anytime.</small>
                        </div>
                    </form>
                </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>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- AOS Animation Library -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <script>
        // Initialize AOS
        AOS.init({
            duration: 400,
            offset: 20,
            once: true,
            disable: false, 
            startEvent: 'DOMContentLoaded',
            initClassName: 'aos-init',
            animatedClassName: 'aos-animate',
            useClassNames: false,
            disableMutationObserver: false,
            throttleDelay: 99, // Better performance on mobile
        });

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

        // 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 - 86 // Adjust for navbar height
                }, 400);
            }
        });

        // Video play/pause handling (optional)
        const heroVideo = document.querySelector('.hero-slide video');
        if (heroVideo) {
            heroVideo.play().catch(function(error) {
                console.log("Video autoplay failed:", error);
            });
        }

        const track = document.querySelector('.slider-track');
        const nextBtn = document.querySelector('.next-btn');
        const prevBtn = document.querySelector('.prev-btn');
        let position = 0;

        function getCardWidth() {
            return document.querySelector('.gallery-card').offsetWidth;
        }

        nextBtn.addEventListener('click', () => {
            const cardWidth = getCardWidth();
            const maxScroll = track.scrollWidth - document.querySelector('.slider-wrapper').offsetWidth;

            position += cardWidth;

            if (position > maxScroll) {
                position = 0; // reset
            }

            track.style.transform = `translateX(-${position}px)`;
        });

        prevBtn.addEventListener('click', () => {
            const cardWidth = getCardWidth();

            position -= cardWidth;

            if (position < 0) {
                position = 0;
            }

            track.style.transform = `translateX(-${position}px)`;
        });

                // Back to top button
        const backToTop = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });

        backToTop.addEventListener('click', (e) => {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Form submission (prevent default for demo)
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                alert('Thank you for your interest! This is a demo form.');
            });
        });

        // Gallery slider improvements
        if (track && nextBtn && prevBtn) {
            let cardWidth = getCardWidth();
            
            window.addEventListener('resize', () => {
                cardWidth = getCardWidth();
                position = 0;
                track.style.transform = `translateX(0)`;
            });

            nextBtn.addEventListener('click', () => {
                const maxScroll = track.scrollWidth - document.querySelector('.slider-wrapper').offsetWidth;
                position += cardWidth;
                if (position > maxScroll) position = 0;
                track.style.transform = `translateX(-${position}px)`;
            });

            prevBtn.addEventListener('click', () => {
                position -= cardWidth;
                if (position < 0) position = 0;
                track.style.transform = `translateX(-${position}px)`;
            });
        }

        // Animate statistics when in viewport
        const statNumbers = document.querySelectorAll('.stat-number[data-count]');
        
        const animateStats = (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const stat = entry.target;
                    const target = parseInt(stat.getAttribute('data-count'));
                    let current = 0;
                    const increment = target / 50;
                    
                    const updateStat = () => {
                        current += increment;
                        if (current < target) {
                            stat.textContent = Math.floor(current);
                            requestAnimationFrame(updateStat);
                        } else {
                            stat.textContent = target;
                        }
                    };
                    
                    updateStat();
                    observer.unobserve(stat);
                }
            });
        };

        const statObserver = new IntersectionObserver(animateStats, {
            threshold: 0.5
        });

        statNumbers.forEach(stat => statObserver.observe(stat));

        // Testimonial Slider
        document.addEventListener('DOMContentLoaded', function() {
            const sliderTrack = document.querySelector('.testimonial-slider-track');
            const prevBtn = document.querySelector('.testimonial-nav.prev');
            const nextBtn = document.querySelector('.testimonial-nav.next');
            const dotsContainer = document.querySelector('.testimonial-dots');
            
            if (!sliderTrack || !prevBtn || !nextBtn) return;
            
            const cards = document.querySelectorAll('.testimonial-slider-track .testimonial-card');
            let currentIndex = 0;
            let cardWidth = 0;
            let visibleCards = getVisibleCards();
            
            // Create dots
            function createDots() {
                dotsContainer.innerHTML = '';
                const totalSlides = Math.ceil(cards.length / visibleCards);
                
                for (let i = 0; i < totalSlides; i++) {
                    const dot = document.createElement('button');
                    dot.classList.add('testimonial-dot');
                    dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
                    dot.addEventListener('click', () => {
                        goToSlide(i);
                    });
                    dotsContainer.appendChild(dot);
                }
                
                updateDots();
            }
            
            // Update active dot
            function updateDots() {
                const dots = document.querySelectorAll('.testimonial-dot');
                const activeDotIndex = Math.floor(currentIndex / visibleCards);
                
                dots.forEach((dot, index) => {
                    if (index === activeDotIndex) {
                        dot.classList.add('active');
                    } else {
                        dot.classList.remove('active');
                    }
                });
            }
            
            // Get number of visible cards based on screen width
            function getVisibleCards() {
                if (window.innerWidth <= 768) {
                    return 1;
                } else if (window.innerWidth <= 992) {
                    return 2;
                } else {
                    return 3;
                }
            }
            
            // Calculate card width including gap
            function updateCardWidth() {
                const firstCard = cards[0];
                if (firstCard) {
                    const cardStyles = window.getComputedStyle(firstCard);
                    const cardMargin = parseFloat(cardStyles.marginRight) || 0;
                    cardWidth = firstCard.offsetWidth + cardMargin;
                }
            }
            
            // Go to specific slide
            function goToSlide(index) {
                const maxIndex = cards.length - visibleCards;
                currentIndex = Math.min(Math.max(index * visibleCards, 0), maxIndex);
                updateSlider();
            }
            
            // Update slider position
            function updateSlider() {
                const maxIndex = cards.length - visibleCards;
                currentIndex = Math.min(Math.max(currentIndex, 0), maxIndex);
                
                const translateX = -(currentIndex * cardWidth);
                sliderTrack.style.transform = `translateX(${translateX}px)`;
                
                updateDots();
            }
            
            // Next slide
            function nextSlide() {
                const maxIndex = cards.length - visibleCards;
                if (currentIndex < maxIndex) {
                    currentIndex++;
                } else {
                    currentIndex = 0; // Loop back to start
                }
                updateSlider();
            }
            
            // Previous slide
            function prevSlide() {
                const maxIndex = cards.length - visibleCards;
                if (currentIndex > 0) {
                    currentIndex--;
                } else {
                    currentIndex = maxIndex; // Loop to end
                }
                updateSlider();
            }
            
            // Handle window resize
            function handleResize() {
                visibleCards = getVisibleCards();
                updateCardWidth();
                createDots();
                
                // Adjust current index if needed
                const maxIndex = cards.length - visibleCards;
                if (currentIndex > maxIndex) {
                    currentIndex = maxIndex;
                }
                
                updateSlider();
            }
            
            // Initialize slider
            function initSlider() {
                updateCardWidth();
                createDots();
                
                // Add event listeners
                nextBtn.addEventListener('click', nextSlide);
                prevBtn.addEventListener('click', prevSlide);
                window.addEventListener('resize', handleResize);
                
                // Touch support for mobile
                let touchStartX = 0;
                let touchEndX = 0;
                
                sliderTrack.addEventListener('touchstart', (e) => {
                    touchStartX = e.touches[0].clientX;
                }, { passive: true });
                
                sliderTrack.addEventListener('touchend', (e) => {
                    touchEndX = e.changedTouches[0].clientX;
                    const difference = touchStartX - touchEndX;
                    
                    if (Math.abs(difference) > 50) { // Minimum swipe distance
                        if (difference > 0) {
                            nextSlide(); // Swipe left
                        } else {
                            prevSlide(); // Swipe right
                        }
                    }
                }, { passive: true });
                
                // Auto-play (optional - uncomment if you want auto-sliding)
                // let autoplayInterval = setInterval(nextSlide, 5000);
                // 
                // // Pause autoplay on hover
                // sliderTrack.addEventListener('mouseenter', () => {
                //     clearInterval(autoplayInterval);
                // });
                // 
                // sliderTrack.addEventListener('mouseleave', () => {
                //     autoplayInterval = setInterval(nextSlide, 5000);
                // });
            }
            
            // Start slider
            initSlider();
        });
    </script>
</body>
</html>
