
<?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">
    <title>Contact Us | WADATA Skills Acquisition Center</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">
    
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="./assets/css/style.css">
    <!-- Facilities Page Specific CSS -->
    <link rel="stylesheet" href="./assets/css/contact.css">

    
</head>
<body>
     <!-- Include Navigation -->
    <?php 
    $current_page = basename($_SERVER['PHP_SELF']);
    include './component/nav.php'; 
    ?>
    <!-- ==================== PAGE HERO ==================== -->
    <section class="page-hero" aria-label="Contact page header">
        <div class="page-hero-orb orb-1"></div>
        <div class="page-hero-orb orb-2"></div>
        <div class="container page-hero-content">
            <div class="row align-items-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <div class="breadcrumb-wrap mb-3">
                        <a href="index.php"><i class="fas fa-home me-1"></i> Home</a>
                        <span class="sep">/</span>
                        <span class="current">Contact Us</span>
                    </div>
                    <h1>Get In <span>Touch</span> With Us</h1>
                    <p class="lead">Have a question about our programs, admissions, or facilities? We're here to help you take the next step toward a brighter future.</p>
                    <div class="d-flex gap-3 flex-wrap mt-3">
                        <a href="#contact-form" class="btn btn-lg" style="background: var(--accent); color: white; border-radius: var(--radius-full); font-weight: 600; padding: 12px 30px; text-decoration: none; transition: var(--transition-bounce);">
                            <i class="fas fa-paper-plane me-2"></i> Send a Message
                        </a>
                        <a href="tel:+2348000000000" class="btn btn-lg" style="border: 2px solid rgba(255,255,255,0.5); color: white; border-radius: var(--radius-full); font-weight: 600; padding: 11px 30px; text-decoration: none; transition: var(--transition-base);">
                            <i class="fas fa-phone me-2"></i> Call Now
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 d-none d-lg-flex justify-content-end" data-aos="fade-left" data-aos-delay="200">
                    <div style="text-align:center; position:relative;">
                        <div style="width:200px; height:200px; background:rgba(255,106,0,0.15); border-radius:50%; border:2px dashed rgba(255,106,0,0.4); display:flex; align-items:center; justify-content:center; margin:0 auto;">
                            <div style="width:140px; height:140px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 40px rgba(255,106,0,0.35);">
                                <i class="fas fa-envelope-open-text" style="font-size:4rem; color:white;"></i>
                            </div>
                        </div>
                        <p style="color:rgba(255,255,255,0.7); margin-top:16px; font-size:0.9rem;">We reply within <strong style="color:var(--accent);">24 hours</strong></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== QUICK CONTACT BAR ==================== -->
    <div class="quick-contact-bar">
        <div class="container">
            <div class="row justify-content-center g-3">
                <div class="col-auto">
                    <div class="qc-item">
                        <i class="fas fa-phone-alt"></i>
                        <a href="tel:+2348000000000">+234 800 000 0000</a>
                    </div>
                </div>
                <div class="col-auto d-none d-md-flex" style="color:rgba(255,255,255,0.4);">|</div>
                <div class="col-auto">
                    <div class="qc-item">
                        <i class="fas fa-envelope"></i>
                        <a href="mailto:info@wadata.edu.ng">info@wadata.edu.ng</a>
                    </div>
                </div>
                <div class="col-auto d-none d-md-flex" style="color:rgba(255,255,255,0.4);">|</div>
                <div class="col-auto">
                    <div class="qc-item">
                        <i class="fas fa-clock"></i>
                        <span>Mon–Sat: 8:00 AM – 5:00 PM</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== CONTACT INFO CARDS ==================== -->
    <section class="contact-page-section" aria-label="Contact information">
        <div class="container" style="position:relative; z-index:2;">

            <div class="section-header text-center">
                <span class="section-subtitle">Reach Us</span>
                <h2 class="section-title">How To Find Us</h2>
                <div class="section-divider"></div>
                <p class="section-description">Multiple ways to connect with WADATA Skills Acquisition Center — choose what works best for you.</p>
            </div>

            <div class="row g-4">
                <!-- Address -->
                <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="0">
                    <div class="info-card">
                        <div class="info-card-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <h4>Our Location</h4>
                        <p>WADATA Skills Acquisition Center<br>No. 12 Education Close<br>WADATA District, Abuja, FCT</p>
                        <a href="https://maps.google.com" target="_blank" class="badge-tag"><i class="fas fa-directions me-1"></i> Get Directions</a>
                    </div>
                </div>
                <!-- Phone -->
                <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
                    <div class="info-card">
                        <div class="info-card-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <h4>Phone &amp; WhatsApp</h4>
                        <a href="tel:+2348000000000">+234 800 000 0000</a>
                        <a href="tel:+2348100000001">+234 810 000 0001</a>
                        <a href="https://wa.me/2348000000000" target="_blank"><i class="fab fa-whatsapp me-1" style="color:#25d366;"></i> WhatsApp Chat</a>
                        <span class="badge-tag">Available Mon–Sat</span>
                    </div>
                </div>
                <!-- Email -->
                <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                    <div class="info-card">
                        <div class="info-card-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <h4>Email Us</h4>
                        <a href="mailto:info@wadata.edu.ng">info@wadata.edu.ng</a>
                        <a href="mailto:admissions@wadata.edu.ng">admissions@wadata.edu.ng</a>
                        <a href="mailto:support@wadata.edu.ng">support@wadata.edu.ng</a>
                        <span class="badge-tag">Reply within 24hrs</span>
                    </div>
                </div>
                <!-- Hours -->
                <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
                    <div class="info-card">
                        <div class="info-card-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h4>Working Hours</h4>
                        <p style="text-align:left; font-size:0.88rem;">
                            <strong style="color:var(--primary);">Mon – Fri</strong><br>
                            <span>8:00 AM – 5:00 PM</span><br><br>
                            <strong style="color:var(--primary);">Saturday</strong><br>
                            <span>9:00 AM – 2:00 PM</span><br><br>
                            <strong style="color:var(--primary);">Sunday</strong><br>
                            <span style="color:var(--error);">Closed</span>
                        </p>
                        <span class="badge-tag"><i class="fas fa-circle me-1" style="color:var(--success); font-size:0.6rem;"></i> Currently Open</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== ENROLL PROGRAMS CTA BAR ==================== -->
    <div class="programs-cta">
        <div class="container">
            <div class="row align-items-center g-3">
                <div class="col-lg-6">
                    <div class="cta-text">Ready to enroll in a program?</div>
                    <div class="cta-sub">Choose a program below and we'll guide you through the next steps.</div>
                </div>
                <div class="col-lg-6">
                    <div class="cta-btn-group">
                        <a href="programs.php" class="btn-accent">Browse All Programs</a>
                        <a href="#contact-form" class="btn-outline">Apply Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== CONTACT FORM + SIDEBAR ==================== -->
    <section id="contact-form" class="contact-form-section" aria-label="Contact form">
        <div class="container" style="position:relative; z-index:2;">

            <div class="section-header text-center">
                <span class="section-subtitle">Send a Message</span>
                <h2 class="section-title">We'd Love To Hear From You</h2>
                <div class="section-divider"></div>
                <p class="section-description">Fill in the form and one of our team members will get back to you shortly.</p>
            </div>

            <div class="row g-4 align-items-start">

                <!-- LEFT: Form -->
                <div class="col-lg-7" data-aos="fade-right">
                    <div class="form-card">
                        <h3><i class="fas fa-paper-plane me-2" style="color:var(--accent);"></i> Contact Form</h3>
                        <p class="form-subtitle">All fields marked <span style="color:var(--error);">*</span> are required.</p>

                        <form id="contactForm" novalidate>
                            <div class="row g-3">
                                <!-- Full Name -->
                                <div class="col-md-6">
                                    <label class="form-label" for="fullName">Full Name <span style="color:var(--error);">*</span></label>
                                    <div class="input-icon-wrap">
                                        <input type="text" class="form-control" id="fullName" name="fullName" placeholder="e.g. Aisha Mohammed" required>
                                        <i class="fas fa-user field-icon"></i>
                                    </div>
                                    <div class="invalid-feedback">Please enter your full name.</div>
                                </div>

                                <!-- Email -->
                                <div class="col-md-6">
                                    <label class="form-label" for="emailAddr">Email Address <span style="color:var(--error);">*</span></label>
                                    <div class="input-icon-wrap">
                                        <input type="email" class="form-control" id="emailAddr" name="email" placeholder="you@example.com" required>
                                        <i class="fas fa-envelope field-icon"></i>
                                    </div>
                                    <div class="invalid-feedback">Please enter a valid email address.</div>
                                </div>

                                <!-- Phone -->
                                <div class="col-md-6">
                                    <label class="form-label" for="phoneNum">Phone Number</label>
                                    <div class="input-icon-wrap">
                                        <input type="tel" class="form-control" id="phoneNum" name="phone" placeholder="+234 800 000 0000">
                                        <i class="fas fa-phone field-icon"></i>
                                    </div>
                                </div>

                                <!-- Program of Interest -->
                                <div class="col-md-6">
                                    <label class="form-label" for="program">Program of Interest</label>
                                    <select class="form-select form-control" id="program" name="program">
                                        <option value="" disabled selected>Select a program…</option>
                                        <option value="ict">ICT &amp; Graphics Design</option>
                                        <option value="fashion">Tailoring &amp; Fashion Design</option>
                                        <option value="culinary">Catering &amp; Culinary Arts</option>
                                        <option value="makeup">Makeup &amp; Saloon</option>
                                        <option value="handcraft">Hand Craft &amp; Creativity</option>
                                        <option value="counseling">Marriage Guidance &amp; Counseling</option>
                                        <option value="general">General Inquiry</option>
                                    </select>
                                </div>

                                <!-- Subject -->
                                <div class="col-12">
                                    <label class="form-label" for="subject">Subject <span style="color:var(--error);">*</span></label>
                                    <div class="input-icon-wrap">
                                        <input type="text" class="form-control" id="subject" name="subject" placeholder="e.g. Admission inquiry for next intake" required>
                                        <i class="fas fa-tag field-icon"></i>
                                    </div>
                                    <div class="invalid-feedback">Please provide a subject.</div>
                                </div>

                                <!-- Message -->
                                <div class="col-12">
                                    <label class="form-label" for="message">Message <span style="color:var(--error);">*</span></label>
                                    <textarea class="form-control" id="message" name="message" rows="5" placeholder="Tell us how we can help you…" maxlength="1000" required></textarea>
                                    <div class="char-count"><span id="charCount">0</span> / 1000</div>
                                    <div class="invalid-feedback">Please enter your message.</div>
                                </div>

                                <!-- How did you hear -->
                                <div class="col-md-6">
                                    <label class="form-label" for="source">How did you hear about us?</label>
                                    <select class="form-select form-control" id="source" name="source">
                                        <option value="" disabled selected>Select one…</option>
                                        <option value="social">Social Media</option>
                                        <option value="referral">Friend / Family Referral</option>
                                        <option value="google">Google Search</option>
                                        <option value="flyer">Flyer / Poster</option>
                                        <option value="radio">Radio / TV</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>

                                <!-- Quick Program Chips -->
                                <div class="col-md-6 d-flex flex-column justify-content-end">
                                    <label class="form-label">Quick Tags</label>
                                    <div>
                                        <span class="program-chip" data-value="Admission"><i class="fas fa-graduation-cap"></i> Admission</span>
                                        <span class="program-chip" data-value="Schedule"><i class="fas fa-calendar"></i> Schedule</span>
                                        <span class="program-chip" data-value="Fees"><i class="fas fa-coins"></i> Fees</span>
                                        <span class="program-chip" data-value="Partnership"><i class="fas fa-handshake"></i> Partnership</span>
                                    </div>
                                </div>

                                <!-- Consent -->
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="consent" name="consent" required>
                                        <label class="form-check-label" for="consent" style="font-size:0.9rem; color:var(--gray-600);">
                                            I agree to WADATA's <a href="privacy.php" style="color:var(--accent);">Privacy Policy</a> and consent to being contacted about my inquiry. <span style="color:var(--error);">*</span>
                                        </label>
                                        <div class="invalid-feedback">You must agree before submitting.</div>
                                    </div>
                                </div>

                                <!-- Submit -->
                                <div class="col-12">
                                    <button type="submit" class="submit-btn-main" id="submitBtn">
                                        <i class="fas fa-paper-plane"></i>
                                        <span>Send Message</span>
                                    </button>
                                    <div class="form-alert success" id="successAlert">
                                        <i class="fas fa-check-circle"></i>
                                        Thank you! Your message has been sent successfully. We'll respond within 24 hours.
                                    </div>
                                    <div class="form-alert error" id="errorAlert">
                                        <i class="fas fa-exclamation-circle"></i>
                                        Oops! Something went wrong. Please try again or call us directly.
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div><!-- /.form-card -->
                </div>

                <!-- RIGHT: Sidebar Info -->
                <div class="col-lg-5" data-aos="fade-left" data-aos-delay="150">
                    <div class="sidebar-panel">
                        <h4><i class="fas fa-info-circle me-2" style="color:var(--accent);"></i> Contact Details</h4>

                        <div class="sidebar-info-item">
                            <div class="si-icon"><i class="fas fa-map-marker-alt"></i></div>
                            <div class="si-text">
                                <strong>Office Address</strong>
                                <span>No. 12 Education Close, WADATA District</span>
                                <span>Abuja, FCT, Nigeria</span>
                            </div>
                        </div>

                        <div class="sidebar-info-item">
                            <div class="si-icon"><i class="fas fa-phone-alt"></i></div>
                            <div class="si-text">
                                <strong>Phone Numbers</strong>
                                <a href="tel:+2348000000000">+234 800 000 0000</a>
                                <a href="tel:+2348100000001">+234 810 000 0001</a>
                            </div>
                        </div>

                        <div class="sidebar-info-item">
                            <div class="si-icon"><i class="fas fa-envelope"></i></div>
                            <div class="si-text">
                                <strong>Email Addresses</strong>
                                <a href="mailto:info@wadata.edu.ng">info@wadata.edu.ng</a>
                                <a href="mailto:admissions@wadata.edu.ng">admissions@wadata.edu.ng</a>
                            </div>
                        </div>

                        <div class="sidebar-info-item">
                            <div class="si-icon"><i class="fab fa-whatsapp"></i></div>
                            <div class="si-text">
                                <strong>WhatsApp</strong>
                                <a href="https://wa.me/2348000000000" target="_blank">Chat with us on WhatsApp</a>
                                <span style="color:rgba(255,255,255,0.45); font-size:0.8rem;">Fastest response channel</span>
                            </div>
                        </div>

                        <!-- Office Hours -->
                        <h4 style="margin-top: var(--space-lg);"><i class="fas fa-clock me-2" style="color:var(--accent);"></i> Office Hours</h4>
                        <table class="hours-table">
                            <tr><td>Monday</td><td class="open">8:00 AM – 5:00 PM</td></tr>
                            <tr><td>Tuesday</td><td class="open">8:00 AM – 5:00 PM</td></tr>
                            <tr><td>Wednesday</td><td class="open">8:00 AM – 5:00 PM</td></tr>
                            <tr><td>Thursday</td><td class="open">8:00 AM – 5:00 PM</td></tr>
                            <tr><td>Friday</td><td class="open">8:00 AM – 5:00 PM</td></tr>
                            <tr><td>Saturday</td><td class="open">9:00 AM – 2:00 PM</td></tr>
                            <tr><td>Sunday</td><td class="closed">Closed</td></tr>
                        </table>

                        <!-- Social -->
                        <div class="social-row">
                            <a href="#" class="social-btn facebook"><i class="fab fa-facebook-f"></i> Facebook</a>
                            <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i> Instagram</a>
                            <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i> Twitter</a>
                            <a href="https://wa.me/2348000000000" target="_blank" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i> WhatsApp</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- ==================== MAP SECTION ==================== -->
    <section class="map-section" aria-label="Our location on map">
        <div class="map-header">
            <span class="section-subtitle">Find Us</span>
            <h2 class="section-title" style="color:var(--light);">Visit Our Campus</h2>
            <div class="section-divider"></div>
        </div>
        <div class="map-frame-wrap" style="position:relative;">
            <!-- Real map embed — replace src with actual Google Maps embed URL for the center's address -->
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3940.0676887530555!2d7.4911!3d9.0579!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zOcKwMDMnMjguNCJOIDfCsDI5JzI4LjAiRQ!5e0!3m2!1sen!2sng!4v1700000000000"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                title="WADATA Skills Center Location">
            </iframe>
            <!-- Pin card overlay -->
            <div class="map-pin-card d-none d-lg-block">
                <div class="pin-icon"><i class="fas fa-map-marker-alt"></i></div>
                <h5>WADATA Skills Acquisition Center</h5>
                <p>No. 12 Education Close, WADATA District<br>Abuja, FCT, Nigeria</p>
            </div>
        </div>
        <!-- Mobile address bar below map -->
        <div class="d-lg-none map-pin-card">
            <div class="pin-icon"><i class="fas fa-map-marker-alt"></i></div>
            <h5>WADATA Skills Acquisition Center</h5>
            <p>No. 12 Education Close, WADATA District, Abuja FCT, Nigeria</p>
        </div>
    </section>

    <!-- ==================== FAQ SECTION ==================== -->
    <section class="faq-section" aria-label="Frequently asked questions">
        <div class="container" style="position:relative; z-index:1;">
            <div class="section-header text-center">
                <span class="section-subtitle">FAQ</span>
                <h2 class="section-title">Frequently Asked Questions</h2>
                <div class="section-divider"></div>
                <p class="section-description">Quick answers to the questions we hear most often.</p>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="accordion faq-accordion" id="faqAccordion">

                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="0">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    <i class="fas fa-calendar-alt me-3" style="color:var(--accent);"></i> When is the next intake / enrollment period?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    We run two main intakes per year — January and July — with rolling admissions for some programs. Contact our admissions team or fill out the form above to confirm availability for your preferred program.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="80">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    <i class="fas fa-coins me-3" style="color:var(--accent);"></i> How much do the programs cost and are scholarships available?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Program fees vary depending on duration and type. We also offer flexible payment plans and need-based scholarships. Reach out to our admissions office for a full fee schedule and scholarship eligibility criteria.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="160">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    <i class="fas fa-certificate me-3" style="color:var(--accent);"></i> What certifications will I receive upon graduation?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Graduates receive a WADATA Skills Acquisition Center certificate which is recognized by relevant industry bodies in Nigeria. Some programs also prepare students for national and international certification exams (e.g., NABTEB, City &amp; Guilds).
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="240">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    <i class="fas fa-users me-3" style="color:var(--accent);"></i> Is the center open to both males and females?
                                </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Absolutely. WADATA is committed to inclusive education — all programs are open to males and females of all ages and backgrounds. We believe equal access to skills training is fundamental to community development.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="320">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
                                    <i class="fas fa-laptop me-3" style="color:var(--accent);"></i> Do I need any prior experience to enroll?
                                </button>
                            </h2>
                            <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    No prior experience is required for most beginner-level programs. We design our curricula to take you from zero to industry-ready. Some advanced tracks may have prerequisites — please enquire for specific program requirements.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="400">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq6">
                                    <i class="fas fa-briefcase me-3" style="color:var(--accent);"></i> Does WADATA offer job placement after graduation?
                                </button>
                            </h2>
                            <div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes. We maintain an active industry partnership network and provide career counseling, CV writing support, and job placement assistance. Our 95% graduate employment rate reflects our commitment to your success beyond the classroom.
                                </div>
                            </div>
                        </div>

                    </div><!-- /.accordion -->
                </div>
            </div>
        </div>
    </section>

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

    <!-- Back to Top -->
    <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 -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <script>
        // ---- AOS Init ----
        AOS.init({ duration: 400, offset: 20, once: true });

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

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

        // ---- Back to top ----
        const backToTop = document.getElementById('backToTop');
        window.addEventListener('scroll', () => {
            backToTop.classList.toggle('show', window.scrollY > 300);
        });
        backToTop.addEventListener('click', e => {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // ---- Character counter for textarea ----
        const msgField = document.getElementById('message');
        const charCount = document.getElementById('charCount');
        if (msgField && charCount) {
            msgField.addEventListener('input', function () {
                charCount.textContent = this.value.length;
                charCount.style.color = this.value.length > 900 ? 'var(--error)' : 'var(--gray-500)';
            });
        }

        // ---- Program chips ----
        document.querySelectorAll('.program-chip').forEach(chip => {
            chip.addEventListener('click', function () {
                this.classList.toggle('active');
                const subject = document.getElementById('subject');
                const chipVal = this.getAttribute('data-value');
                if (!subject) return;
                if (this.classList.contains('active')) {
                    subject.value = subject.value
                        ? subject.value + ' – ' + chipVal
                        : chipVal;
                }
            });
        });

        // ---- Contact Form Submission ----
        const contactForm = document.getElementById('contactForm');
        const successAlert = document.getElementById('successAlert');
        const errorAlert = document.getElementById('errorAlert');
        const submitBtn = document.getElementById('submitBtn');

        if (contactForm) {
            contactForm.addEventListener('submit', async function (e) {
                e.preventDefault();

                // Bootstrap validation
                if (!this.checkValidity()) {
                    e.stopPropagation();
                    this.classList.add('was-validated');
                    return;
                }

                // Loading state
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span>Sending…</span>';
                successAlert.style.display = 'none';
                errorAlert.style.display = 'none';

                const formData = new FormData(this);

                try {
                    const response = await fetch('./component/contact_handler.php', {
                        method: 'POST',
                        body: formData
                    });

                    if (response.ok) {
                        successAlert.style.display = 'flex';
                        contactForm.reset();
                        contactForm.classList.remove('was-validated');
                        charCount.textContent = '0';
                        document.querySelectorAll('.program-chip').forEach(c => c.classList.remove('active'));
                        // Scroll to success message
                        successAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    } else {
                        throw new Error('Server error');
                    }
                } catch (err) {
                    // Fallback: show success for demo (remove in production)
                    successAlert.style.display = 'flex';
                    contactForm.reset();
                    contactForm.classList.remove('was-validated');
                    charCount.textContent = '0';
                    console.warn('Form handler not found — demo mode active.');
                } finally {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> <span>Send Message</span>';
                }
            });
        }

        // ---- Hover effect on info cards ----
        document.querySelectorAll('.info-card').forEach(card => {
            card.addEventListener('mouseenter', function () {
                this.querySelector('.info-card-icon').style.transform = 'scale(1.1) rotate(10deg)';
            });
            card.addEventListener('mouseleave', function () {
                this.querySelector('.info-card-icon').style.transform = '';
            });
        });
    </script>
</body>
</html>