<?php
// contact.php
// Page Title: Contact Us | WADATA Skills Acquisition Centre
// Description: Get in touch with WADATA Skills Acquisition Centre. Find our location, contact information, and send us a message.
// Author: WADATA Development Team
// Version: 1.0

// Initialize variables for form handling
$name = $email = $phone = $subject = $message = '';
$name_err = $email_err = $phone_err = $subject_err = $message_err = '';
$success_message = '';

// Process form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    
    // Validate name
    if (empty(trim($_POST['name']))) {
        $name_err = 'Please enter your name.';
    } else {
        $name = trim($_POST['name']);
    }
    
    // Validate email
    if (empty(trim($_POST['email']))) {
        $email_err = 'Please enter your email address.';
    } elseif (!filter_var(trim($_POST['email']), FILTER_VALIDATE_EMAIL)) {
        $email_err = 'Please enter a valid email address.';
    } else {
        $email = trim($_POST['email']);
    }
    
    // Validate phone (optional but validate if provided)
    if (!empty(trim($_POST['phone']))) {
        $phone = trim($_POST['phone']);
        // Basic phone validation - adjust regex as needed for Nigerian numbers
        if (!preg_match('/^[0-9+\-\s()]{10,20}$/', $phone)) {
            $phone_err = 'Please enter a valid phone number.';
        }
    }
    
    // Validate subject
    if (empty(trim($_POST['subject']))) {
        $subject_err = 'Please enter a subject.';
    } else {
        $subject = trim($_POST['subject']);
    }
    
    // Validate message
    if (empty(trim($_POST['message']))) {
        $message_err = 'Please enter your message.';
    } elseif (strlen(trim($_POST['message'])) < 10) {
        $message_err = 'Message must be at least 10 characters.';
    } else {
        $message = trim($_POST['message']);
    }
    
    // If no errors, process the form
    if (empty($name_err) && empty($email_err) && empty($phone_err) && empty($subject_err) && empty($message_err)) {
        
        // In a production environment, you would:
        // 1. Send email to admin
        // 2. Save to database
        // 3. Send auto-reply to user
        
        // For demo purposes, we'll just set a success message
        $success_message = 'Thank you for contacting us! We will get back to you within 24 hours.';
        
        // Clear form fields
        $name = $email = $phone = $subject = $message = '';
        
        // You can uncomment and configure this for actual email sending
        /*
        $to = "info@wadata.edu.ng";
        $headers = "From: " . $email . "\r\n";
        $headers .= "Reply-To: " . $email . "\r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=UTF-8\r\n";
        
        $email_subject = "Contact Form: " . $subject;
        
        $email_body = "
        <html>
        <body>
            <h2>New Contact Form Submission</h2>
            <p><strong>Name:</strong> {$name}</p>
            <p><strong>Email:</strong> {$email}</p>
            <p><strong>Phone:</strong> " . (!empty($phone) ? $phone : 'Not provided') . "</p>
            <p><strong>Subject:</strong> {$subject}</p>
            <p><strong>Message:</strong><br>" . nl2br($message) . "</p>
        </body>
        </html>
        ";
        
        mail($to, $email_subject, $email_body, $headers);
        */
    }
}
?>
<!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>Contact Us | WADATA Skills Acquisition Centre</title>
    <meta name="title" content="Contact Us | WADATA Skills Acquisition Centre">
    <meta name="description" content="Get in touch with WADATA Skills Acquisition Centre. Reach us by phone, email, or visit our campus in Gusau, Zamfara State. We're here to answer your questions about our programs and enrollment.">
    <meta name="keywords" content="contact WADATA, skills acquisition center Gusau, vocational training contact, Nigeria skills center, enrollment inquiries, campus location, Zamfara training center">
    <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/contact.php">
    <meta property="og:title" content="Contact Us | WADATA Skills Acquisition Centre">
    <meta property="og:description" content="Reach out to WADATA for inquiries about our programs, enrollment, partnerships, or to schedule a campus visit.">
    <meta property="og:image" content="./assets/img/contact-og.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:locale" content="en_NG">
    <meta property="og:site_name" content="WADATA Skills Acquisition Centre">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://wadata.edu.ng/contact.php">
    <meta property="twitter:title" content="Contact Us | WADATA Skills Acquisition Centre">
    <meta property="twitter:description" content="Reach out to WADATA for inquiries about our programs, enrollment, partnerships, or to schedule a campus visit.">
    <meta property="twitter:image" content="./assets/img/contact-og.jpg">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="./assets/img/logo.png">
    <link rel="apple-touch-icon" href="./assets/img/logo.png">
    <link rel="manifest" href="./manifest.json">
    
    <!-- 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">
    
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    
    <!-- Leaflet CSS for Maps (lightweight alternative to Google Maps) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="anonymous"/>
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="./assets/css/style.css">
    
    <!-- Contact Page Specific CSS -->
    <style>
    /* Contact Page Enhanced Styles */
    :root {
        --contact-primary: #0B2545;
        --contact-accent: #FF6A00;
        --contact-light: #F6F9FC;
        --contact-dark: #1a1a1a;
        --contact-success: #10b981;
        --contact-warning: #f59e0b;
        --contact-info: #3b82f6;
        --contact-gray-100: #f8f9fa;
        --contact-gray-200: #e9ecef;
        --contact-gray-300: #dee2e6;
        --contact-gray-400: #ced4da;
        --contact-gray-500: #adb5bd;
        --contact-gray-600: #6c757d;
        --contact-gray-700: #495057;
        --contact-gray-800: #343a40;
        --contact-gray-900: #212529;
    }

    /* Hero Section */
    .contact-hero {
        position: relative;
        min-height: 50vh;
        background: linear-gradient(135deg, var(--contact-primary) 0%, #1a3a5f 100%);
        overflow: hidden;
        display: flex;
        align-items: center;
        margin-top: 0;
        padding: 120px 0 60px;
    }

    .contact-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><path d="M10 10 L90 10 L90 90 L10 90 Z" fill="none" stroke="%23FF6A00" stroke-width="2"/><circle cx="50" cy="50" r="40" fill="none" stroke="%23FFFFFF" stroke-width="2"/><path d="M20 20 L80 20 L80 80 L20 80 Z" fill="none" stroke="%23FF6A00" stroke-width="1.5"/></svg>');
        background-size: 60px 60px;
        animation: rotate 120s linear infinite;
    }

    .contact-hero::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(255,106,0,0.15) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 1;
    }

    .contact-hero-content {
        position: relative;
        z-index: 2;
        color: white;
        text-align: center;
    }

    .contact-hero-title {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 800;
        margin-bottom: 1.5rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        animation: fadeInUp 0.8s ease;
    }

    .contact-hero-title span {
        color: var(--contact-accent);
        display: block;
        font-size: 0.5em;
        font-weight: 400;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
    }

    .contact-hero-breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        padding: 12px 24px;
        border-radius: 50px;
        border: 1px solid rgba(255,255,255,0.2);
        animation: fadeInUp 0.8s ease 0.2s both;
    }

    .contact-hero-breadcrumb a {
        color: white;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .contact-hero-breadcrumb a:hover {
        color: var(--contact-accent);
    }

    .contact-hero-breadcrumb i {
        color: var(--contact-accent);
        font-size: 0.8rem;
    }

    /* Contact Info Cards */
    .contact-info-section {
        padding: 80px 0;
        background: var(--contact-light);
        position: relative;
    }

    .contact-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }

    .contact-info-card {
        background: white;
        border-radius: 24px;
        padding: 40px 30px;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 1px solid rgba(255,106,0,0.1);
        z-index: 1;
    }

    .contact-info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--contact-accent), var(--contact-primary));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        z-index: 2;
    }

    .contact-info-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 30px 60px rgba(255,106,0,0.15);
        border-color: transparent;
    }

    .contact-info-card:hover::before {
        transform: scaleX(1);
    }

    .info-icon-wrapper {
        width: 90px;
        height: 90px;
        background: linear-gradient(135deg, rgba(255,106,0,0.1), rgba(11,37,69,0.1));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 25px;
        transition: all 0.3s ease;
    }

    .contact-info-card:hover .info-icon-wrapper {
        background: var(--contact-accent);
        transform: scale(1.1) rotate(360deg);
    }

    .info-icon {
        width: 70px;
        height: 70px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: var(--contact-accent);
        transition: all 0.3s ease;
        box-shadow: 0 10px 20px rgba(255,106,0,0.2);
    }

    .contact-info-card:hover .info-icon {
        background: var(--contact-accent);
        color: white;
    }

    .contact-info-card h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--contact-primary);
        margin-bottom: 15px;
    }

    .contact-info-card p {
        color: var(--contact-gray-600);
        margin-bottom: 20px;
        line-height: 1.8;
    }

    .contact-info-detail {
        display: inline-block;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--contact-accent);
        text-decoration: none;
        padding: 8px 20px;
        border-radius: 30px;
        background: rgba(255,106,0,0.1);
        transition: all 0.3s ease;
    }

    .contact-info-detail:hover {
        background: var(--contact-accent);
        color: white;
        transform: translateY(-3px);
    }

    /* Contact Form & Map Section */
    .contact-main-section {
        padding: 80px 0;
        background: white;
        position: relative;
    }

    .contact-form-wrapper {
        background: white;
        border-radius: 30px;
        padding: 50px;
        box-shadow: 0 30px 60px rgba(0,0,0,0.1);
        border: 1px solid var(--contact-gray-200);
        height: 100%;
    }

    .form-header {
        margin-bottom: 40px;
        text-align: center;
    }

    .form-subtitle {
        display: inline-block;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--contact-accent);
        margin-bottom: 10px;
    }

    .form-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--contact-primary);
        margin-bottom: 15px;
    }

    .form-divider {
        width: 80px;
        height: 4px;
        background: var(--contact-accent);
        margin: 0 auto 20px;
        border-radius: 2px;
    }

    .form-group {
        margin-bottom: 25px;
        position: relative;
    }

    .form-label {
        font-weight: 600;
        color: var(--contact-primary);
        margin-bottom: 8px;
        font-size: 0.95rem;
    }

    .form-label i {
        color: var(--contact-accent);
        margin-right: 8px;
    }

    .form-control {
        height: 55px;
        border: 2px solid var(--contact-gray-300);
        border-radius: 12px;
        padding: 0 20px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: var(--contact-gray-100);
    }

    .form-control:focus {
        border-color: var(--contact-accent);
        box-shadow: 0 0 0 4px rgba(255,106,0,0.1);
        background: white;
        outline: none;
    }

    textarea.form-control {
        height: 140px;
        padding: 15px 20px;
        resize: vertical;
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        background-image: none;
    }

    .invalid-feedback {
        color: #dc3545;
        font-size: 0.85rem;
        margin-top: 5px;
    }

    .submit-btn {
        background: linear-gradient(135deg, var(--contact-accent), var(--contact-primary));
        color: white;
        border: none;
        padding: 15px 40px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        width: 100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .submit-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s ease;
        z-index: -1;
    }

    .submit-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 30px rgba(255,106,0,0.4);
    }

    .submit-btn:hover::before {
        left: 100%;
    }

    /* Map Container */
    .map-container {
        height: 100%;
        min-height: 500px;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0,0,0,0.1);
        border: 3px solid var(--contact-accent);
    }

    #map {
        height: 100%;
        width: 100%;
        min-height: 500px;
        z-index: 1;
    }

    .map-info-window {
        padding: 15px;
        max-width: 250px;
    }

    .map-info-window h4 {
        color: var(--contact-primary);
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }

    .map-info-window p {
        color: var(--contact-gray-600);
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .map-info-window i {
        color: var(--contact-accent);
        width: 20px;
        margin-right: 5px;
    }

    /* Business Hours Section */
    .hours-section {
        padding: 80px 0;
        background: linear-gradient(135deg, var(--contact-primary) 0%, #1a3a5f 100%);
        color: white;
        position: relative;
        overflow: hidden;
    }

    .hours-section::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(255,106,0,0.2) 0%, transparent 70%);
        border-radius: 50%;
    }

    .hours-content {
        position: relative;
        z-index: 2;
    }

    .hours-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }

    .hours-card {
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        border: 1px solid rgba(255,255,255,0.2);
        transition: all 0.3s ease;
    }

    .hours-card:hover {
        transform: translateY(-10px);
        background: rgba(255,255,255,0.15);
        border-color: var(--contact-accent);
    }

    .hours-day {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--contact-accent);
        margin-bottom: 15px;
    }

    .hours-time {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .hours-note {
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* FAQ Section */
    .faq-section {
        padding: 80px 0;
        background: var(--contact-light);
    }

    .faq-header {
        text-align: center;
        margin-bottom: 50px;
    }

    .faq-subtitle {
        display: inline-block;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--contact-accent);
        margin-bottom: 10px;
    }

    .faq-title {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--contact-primary);
        margin-bottom: 15px;
    }

    .faq-divider {
        width: 80px;
        height: 4px;
        background: var(--contact-accent);
        margin: 0 auto 20px;
        border-radius: 2px;
    }

    .faq-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .faq-item {
        background: white;
        border-radius: 16px;
        padding: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        border-left: 4px solid var(--contact-accent);
    }

    .faq-item:hover {
        transform: translateX(10px);
        box-shadow: 0 15px 30px rgba(255,106,0,0.1);
    }

    .faq-question {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--contact-primary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .faq-question i {
        color: var(--contact-accent);
        font-size: 1.1rem;
    }

    .faq-answer {
        color: var(--contact-gray-600);
        line-height: 1.8;
        padding-left: 30px;
    }

    /* Social Connect Section */
    .social-connect {
        padding: 60px 0;
        background: white;
        text-align: center;
    }

    .social-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--contact-primary);
        margin-bottom: 30px;
    }

    .social-icons-large {
        display: flex;
        justify-content: center;
        gap: 25px;
        flex-wrap: wrap;
    }

    .social-icon-large {
        width: 80px;
        height: 80px;
        background: var(--contact-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: var(--contact-primary);
        text-decoration: none;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        border: 2px solid transparent;
    }

    .social-icon-large:hover {
        background: var(--contact-accent);
        color: white;
        transform: translateY(-10px) rotate(360deg);
        border-color: var(--contact-primary);
    }

    .social-icon-large.facebook:hover { background: #1877f2; }
    .social-icon-large.twitter:hover { background: #1da1f2; }
    .social-icon-large.instagram:hover { background: linear-gradient(45deg, #f09433, #d62976, #962fbf, #4f5bd5); }
    .social-icon-large.linkedin:hover { background: #0077b5; }
    .social-icon-large.youtube:hover { background: #ff0000; }
    .social-icon-large.whatsapp:hover { background: #25d366; }

    /* Success Alert */
    .alert-success {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        animation: slideDown 0.5s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .alert-success i {
        margin-right: 10px;
        font-size: 1.2rem;
    }

    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    /* Responsive */
    @media (max-width: 992px) {
        .contact-form-wrapper {
            padding: 30px;
            margin-bottom: 30px;
        }

        .map-container {
            min-height: 400px;
        }

        #map {
            min-height: 400px;
        }

        .faq-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .contact-hero {
            min-height: 40vh;
            padding: 100px 0 40px;
        }

        .contact-hero-title {
            font-size: 2rem;
        }

        .form-title {
            font-size: 1.8rem;
        }

        .faq-title {
            font-size: 2rem;
        }

        .hours-grid {
            grid-template-columns: 1fr;
        }

        .contact-info-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 576px) {
        .contact-form-wrapper {
            padding: 20px;
        }

        .social-icons-large {
            gap: 15px;
        }

        .social-icon-large {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }
    }
    </style>
</head>
<body>
    <!-- Include Navigation -->
    <?php include './component/nav.php'; ?>

    <!-- Contact Hero Section -->
    <section class="contact-hero">
        <div class="container">
            <div class="contact-hero-content">
                <h1 class="contact-hero-title" data-aos="fade-up">
                    <span>Get in Touch</span>
                    Contact Us
                </h1>
                <div class="contact-hero-breadcrumb" data-aos="fade-up" data-aos-delay="100">
                    <a href="./index.php"><i class="fas fa-home"></i> Home</a>
                    <i class="fas fa-chevron-right"></i>
                    <span class="text-white-50">Contact</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Info Cards -->
    <section class="contact-info-section">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center" data-aos="fade-up">
                    <span class="section-subtitle">Reach Out</span>
                    <h2 class="section-title">How to Find Us</h2>
                    <div class="section-divider"></div>
                    <p class="section-description">Multiple ways to connect with us. We're always here to help.</p>
                </div>
            </div>

            <div class="contact-info-grid">
                <!-- Address Card -->
                <div class="contact-info-card" data-aos="fade-up" data-aos-delay="0">
                    <div class="info-icon-wrapper">
                        <div class="info-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                    </div>
                    <h3>Visit Us</h3>
                    <p>Bye Pass Road, Opp. Federal Road Safety,<br>Gusau, Zamfara State, Nigeria</p>
                    <a href="https://maps.google.com/?q=Gusau+Zamfara+Nigeria" target="_blank" rel="noopener noreferrer" class="contact-info-detail">
                        <i class="fas fa-directions me-2"></i>Get Directions
                    </a>
                </div>

                <!-- Phone Card -->
                <div class="contact-info-card" data-aos="fade-up" data-aos-delay="100">
                    <div class="info-icon-wrapper">
                        <div class="info-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                    </div>
                    <h3>Call Us</h3>
                    <p>Mon - Fri, 8:00 am - 6:00 pm<br>Sat, 9:00 am - 4:00 pm</p>
                    <a href="tel:+2348036422779" class="contact-info-detail">
                        <i class="fas fa-phone me-2"></i>+234 803 642 2779
                    </a>
                    <a href="tel:+2348036561374" class="contact-info-detail mt-2">
                        <i class="fas fa-phone me-2"></i>+234 803 656 1374
                    </a>
                </div>

                <!-- Email Card -->
                <div class="contact-info-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="info-icon-wrapper">
                        <div class="info-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                    </div>
                    <h3>Email Us</h3>
                    <p>24/7 email support<br>Response within 24 hours</p>
                    <a href="mailto:info@wadata.edu.ng" class="contact-info-detail">
                        <i class="fas fa-envelope me-2"></i>info@wadata.edu.ng
                    </a>
                    <a href="mailto:admissions@wadata.edu.ng" class="contact-info-detail mt-2">
                        <i class="fas fa-envelope me-2"></i>admissions@wadata.edu.ng
                    </a>
                </div>

                <!-- WhatsApp Card -->
                <div class="contact-info-card" data-aos="fade-up" data-aos-delay="300">
                    <div class="info-icon-wrapper">
                        <div class="info-icon">
                            <i class="fab fa-whatsapp"></i>
                        </div>
                    </div>
                    <h3>WhatsApp</h3>
                    <p>Instant messaging<br>Quick responses on WhatsApp</p>
                    <a href="https://wa.me/2348036561374" target="_blank" rel="noopener noreferrer" class="contact-info-detail">
                        <i class="fab fa-whatsapp me-2"></i>Chat with Us
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form & Map Section -->
    <section class="contact-main-section">
        <div class="container">
            <div class="row g-5">
                <!-- Contact Form -->
                <div class="col-lg-6" data-aos="fade-right">
                    <div class="contact-form-wrapper">
                        <div class="form-header">
                            <span class="form-subtitle">Send a Message</span>
                            <h2 class="form-title">Get in Touch</h2>
                            <div class="form-divider"></div>
                            <p class="text-muted">Have questions about our programs? Send us a message and we'll respond within 24 hours.</p>
                        </div>

                        <?php if (!empty($success_message)): ?>
                            <div class="alert-success">
                                <i class="fas fa-check-circle"></i>
                                <?php echo htmlspecialchars($success_message); ?>
                            </div>
                        <?php endif; ?>

                        <form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" id="contactForm">
                            <div class="form-group">
                                <label for="name" class="form-label">
                                    <i class="fas fa-user"></i> Full Name *
                                </label>
                                <input type="text" 
                                       class="form-control <?php echo !empty($name_err) ? 'is-invalid' : ''; ?>" 
                                       id="name" 
                                       name="name" 
                                       value="<?php echo htmlspecialchars($name); ?>" 
                                       placeholder="Enter your full name"
                                       required>
                                <?php if (!empty($name_err)): ?>
                                    <div class="invalid-feedback"><?php echo $name_err; ?></div>
                                <?php endif; ?>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email" class="form-label">
                                            <i class="fas fa-envelope"></i> Email Address *
                                        </label>
                                        <input type="email" 
                                               class="form-control <?php echo !empty($email_err) ? 'is-invalid' : ''; ?>" 
                                               id="email" 
                                               name="email" 
                                               value="<?php echo htmlspecialchars($email); ?>" 
                                               placeholder="you@example.com"
                                               required>
                                        <?php if (!empty($email_err)): ?>
                                            <div class="invalid-feedback"><?php echo $email_err; ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone" class="form-label">
                                            <i class="fas fa-phone"></i> Phone Number
                                        </label>
                                        <input type="tel" 
                                               class="form-control <?php echo !empty($phone_err) ? 'is-invalid' : ''; ?>" 
                                               id="phone" 
                                               name="phone" 
                                               value="<?php echo htmlspecialchars($phone); ?>" 
                                               placeholder="+234 XXX XXX XXXX">
                                        <?php if (!empty($phone_err)): ?>
                                            <div class="invalid-feedback"><?php echo $phone_err; ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="subject" class="form-label">
                                    <i class="fas fa-tag"></i> Subject *
                                </label>
                                <select class="form-control <?php echo !empty($subject_err) ? 'is-invalid' : ''; ?>" 
                                        id="subject" 
                                        name="subject"
                                        required>
                                    <option value="" <?php echo empty($subject) ? 'selected' : ''; ?>>Select a subject</option>
                                    <option value="General Inquiry" <?php echo $subject == 'General Inquiry' ? 'selected' : ''; ?>>General Inquiry</option>
                                    <option value="Program Information" <?php echo $subject == 'Program Information' ? 'selected' : ''; ?>>Program Information</option>
                                    <option value="Admissions" <?php echo $subject == 'Admissions' ? 'selected' : ''; ?>>Admissions</option>
                                    <option value="Partnership" <?php echo $subject == 'Partnership' ? 'selected' : ''; ?>>Partnership Opportunities</option>
                                    <option value="Campus Tour" <?php echo $subject == 'Campus Tour' ? 'selected' : ''; ?>>Schedule a Campus Tour</option>
                                    <option value="Other" <?php echo $subject == 'Other' ? 'selected' : ''; ?>>Other</option>
                                </select>
                                <?php if (!empty($subject_err)): ?>
                                    <div class="invalid-feedback"><?php echo $subject_err; ?></div>
                                <?php endif; ?>
                            </div>

                            <div class="form-group">
                                <label for="message" class="form-label">
                                    <i class="fas fa-comment"></i> Message *
                                </label>
                                <textarea class="form-control <?php echo !empty($message_err) ? 'is-invalid' : ''; ?>" 
                                          id="message" 
                                          name="message" 
                                          placeholder="Write your message here..."
                                          required><?php echo htmlspecialchars($message); ?></textarea>
                                <?php if (!empty($message_err)): ?>
                                    <div class="invalid-feedback"><?php echo $message_err; ?></div>
                                <?php endif; ?>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="submit-btn">
                                    <i class="fas fa-paper-plane me-2"></i> Send Message
                                </button>
                            </div>

                            <div class="text-center text-muted small">
                                <i class="fas fa-lock me-1"></i> Your information is secure and will not be shared
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Map -->
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="map-container">
                        <div id="map"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Business Hours Section -->
    <section class="hours-section">
        <div class="container">
            <div class="hours-content">
                <div class="text-center text-white mb-5" data-aos="fade-up">
                    <span class="section-subtitle text-white-50">Opening Hours</span>
                    <h2 class="section-title text-white">When to Find Us</h2>
                    <div class="section-divider bg-white"></div>
                    <p class="text-white-50">We're open throughout the week to serve you better</p>
                </div>

                <div class="hours-grid">
                    <div class="hours-card" data-aos="fade-up" data-aos-delay="0">
                        <div class="hours-day">Monday - Friday</div>
                        <div class="hours-time">8:00 AM - 6:00 PM</div>
                        <div class="hours-note">Full services available</div>
                    </div>
                    <div class="hours-card" data-aos="fade-up" data-aos-delay="100">
                        <div class="hours-day">Saturday</div>
                        <div class="hours-time">9:00 AM - 4:00 PM</div>
                        <div class="hours-note">Limited services, tours available</div>
                    </div>
                    <div class="hours-card" data-aos="fade-up" data-aos-delay="200">
                        <div class="hours-day">Sunday</div>
                        <div class="hours-time">Closed</div>
                        <div class="hours-note">Online inquiries only</div>
                    </div>
                    <div class="hours-card" data-aos="fade-up" data-aos-delay="300">
                        <div class="hours-day">Public Holidays</div>
                        <div class="hours-time">10:00 AM - 2:00 PM</div>
                        <div class="hours-note">Check calendar for exceptions</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="faq-section">
        <div class="container">
            <div class="faq-header" data-aos="fade-up">
                <span class="faq-subtitle">FAQs</span>
                <h2 class="faq-title">Frequently Asked Questions</h2>
                <div class="faq-divider"></div>
                <p class="text-muted">Quick answers to common questions about contacting us</p>
            </div>

            <div class="faq-grid">
                <div class="faq-item" data-aos="fade-up" data-aos-delay="0">
                    <div class="faq-question">
                        <i class="fas fa-question-circle"></i>
                        How quickly do you respond to inquiries?
                    </div>
                    <div class="faq-answer">
                        We aim to respond to all inquiries within 24 hours during business days. For urgent matters, please call us directly.
                    </div>
                </div>

                <div class="faq-item" data-aos="fade-up" data-aos-delay="100">
                    <div class="faq-question">
                        <i class="fas fa-question-circle"></i>
                        Can I schedule a campus visit?
                    </div>
                    <div class="faq-answer">
                        Yes! We welcome prospective students and partners to visit our campus. Please contact us in advance to schedule a guided tour.
                    </div>
                </div>

                <div class="faq-item" data-aos="fade-up" data-aos-delay="200">
                    <div class="faq-question">
                        <i class="fas fa-question-circle"></i>
                        Do you offer online consultations?
                    </div>
                    <div class="faq-answer">
                        Absolutely. We provide virtual consultations via video call for those who cannot visit in person. Just mention your preference in the message.
                    </div>
                </div>

                <div class="faq-item" data-aos="fade-up" data-aos-delay="300">
                    <div class="faq-question">
                        <i class="fas fa-question-circle"></i>
                        What information should I include in my message?
                    </div>
                    <div class="faq-answer">
                        Please include your full name, contact details, and specific questions about programs, enrollment, or partnerships. This helps us provide accurate information faster.
                    </div>
                </div>

                <div class="faq-item" data-aos="fade-up" data-aos-delay="400">
                    <div class="faq-question">
                        <i class="fas fa-question-circle"></i>
                        Is there parking available at your campus?
                    </div>
                    <div class="faq-answer">
                        Yes, we have ample free parking space for visitors. Our campus is also accessible by public transportation.
                    </div>
                </div>

                <div class="faq-item" data-aos="fade-up" data-aos-delay="500">
                    <div class="faq-question">
                        <i class="fas fa-question-circle"></i>
                        Do you have wheelchair accessibility?
                    </div>
                    <div class="faq-answer">
                        Our facilities are fully wheelchair accessible with ramps, elevators, and accessible restrooms throughout the campus.
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Social Connect -->
    <section class="social-connect">
        <div class="container">
            <h2 class="social-title" data-aos="fade-up">Connect With Us on Social Media</h2>
            <div class="social-icons-large" data-aos="fade-up" data-aos-delay="100">
                <a href="#" class="social-icon-large facebook" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="#" class="social-icon-large twitter" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="social-icon-large instagram" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="#" class="social-icon-large linkedin" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="social-icon-large youtube" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
                    <i class="fab fa-youtube"></i>
                </a>
                <a href="https://wa.me/2348036561374" class="social-icon-large whatsapp" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
                    <i class="fab fa-whatsapp"></i>
                </a>
            </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>
    
    <!-- Leaflet JS for Maps -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="anonymous"></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);
        });

        // Initialize Map
        document.addEventListener('DOMContentLoaded', function() {
            // Coordinates for Gusau, Zamfara State, Nigeria
            const latitude = 12.1642;
            const longitude = 6.6667;
            
            // Initialize map
            const map = L.map('map').setView([latitude, longitude], 15);
            
            // Add OpenStreetMap tiles
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors',
                maxZoom: 19
            }).addTo(map);
            
            // Custom marker icon
            const customIcon = L.divIcon({
                className: 'custom-marker',
                html: '<div style="background-color: #FF6A00; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.3);"><i class="fas fa-map-marker-alt" style="color: white; font-size: 20px;"></i></div>',
                iconSize: [40, 40],
                iconAnchor: [20, 40],
                popupAnchor: [0, -40]
            });
            
            // Add marker
            const marker = L.marker([latitude, longitude], { icon: customIcon }).addTo(map);
            
            // Popup content
            const popupContent = `
                <div class="map-info-window">
                    <h4>WADATA Skills Acquisition Centre</h4>
                    <p><i class="fas fa-map-marker-alt"></i> Bye Pass Road, Opp. Federal Road Safety</p>
                    <p><i class="fas fa-city"></i> Gusau, Zamfara State, Nigeria</p>
                    <p><i class="fas fa-phone"></i> +234 803 642 2779</p>
                    <p><i class="fas fa-clock"></i> Mon-Fri: 8am-6pm, Sat: 9am-4pm</p>
                </div>
            `;
            
            marker.bindPopup(popupContent);
            
            // Add circle to highlight area
            L.circle([latitude, longitude], {
                color: '#FF6A00',
                fillColor: '#FF6A00',
                fillOpacity: 0.1,
                radius: 500
            }).addTo(map);
            
            // Open popup on load
            marker.openPopup();
        });

        // Form validation enhancement
        document.getElementById('contactForm')?.addEventListener('submit', function(e) {
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const message = document.getElementById('message').value.trim();
            
            let isValid = true;
            
            if (!name) {
                isValid = false;
            }
            
            if (!email || !email.includes('@') || !email.includes('.')) {
                isValid = false;
            }
            
            if (!message || message.length < 10) {
                isValid = false;
            }
            
            if (!isValid) {
                e.preventDefault();
                // Scroll to form with error
                document.querySelector('.contact-form-wrapper').scrollIntoView({ 
                    behavior: 'smooth',
                    block: 'center'
                });
            }
        });

        // Smooth scroll 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);
            }
        });

        // Input focus effects
        $('.form-control').on('focus', function() {
            $(this).closest('.form-group').find('.form-label i').css('color', '#FF6A00');
        }).on('blur', function() {
            $(this).closest('.form-group').find('.form-label i').css('color', '');
        });

        // Add Font Awesome to map (since map is loaded separately)
        const style = document.createElement('style');
        style.textContent = `
            .custom-marker {
                background: transparent;
                border: none;
            }
            .leaflet-popup-content-wrapper {
                border-radius: 12px;
                padding: 0;
                overflow: hidden;
                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            }
            .leaflet-popup-content {
                margin: 0;
                min-width: 250px;
            }
            .leaflet-popup-tip {
                background: white;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>