<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

/*
|--------------------------------------------------------------------------
| LOAD PHPMailer FILES
|--------------------------------------------------------------------------
*/
require __DIR__ . '/PHPMailer/Exception.php';
require __DIR__ . '/PHPMailer/PHPMailer.php';
require __DIR__ . '/PHPMailer/SMTP.php';

/*
|--------------------------------------------------------------------------
| INITIAL VALUES
|--------------------------------------------------------------------------
*/
$success = '';
$error   = '';

/*
|--------------------------------------------------------------------------
| HANDLE FORM SUBMISSION
|--------------------------------------------------------------------------
*/
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // Sanitize inputs
    $name        = trim(strip_tags($_POST['name'] ?? ''));
    $email       = trim(filter_var($_POST['email'] ?? '', FILTER_SANITIZE_EMAIL));
    $phone       = trim(strip_tags($_POST['phone'] ?? ''));
    $company     = trim(strip_tags($_POST['company'] ?? ''));
    $services    = $_POST['services'] ?? [];
    $projectType = trim(strip_tags($_POST['project_type'] ?? ''));
    $budget      = trim(strip_tags($_POST['budget'] ?? ''));
    $message     = trim(strip_tags($_POST['message'] ?? ''));

    // Validation
    if (empty($name) || empty($email) || empty($phone) || empty($message)) {
        $error = "Please fill in all required fields.";
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = "Please enter a valid email address.";
    } else {

        try {
            /*
            |--------------------------------------------------------------------------
            | CREATE MAIL INSTANCE
            |--------------------------------------------------------------------------
            */
            $mail = new PHPMailer(true);

            /*
            |--------------------------------------------------------------------------
            | SMTP CONFIGURATION (EDIT THIS)
            |--------------------------------------------------------------------------
            */
            $mail->isSMTP();
            $mail->Host       = 'mail.femtechwaveslimited.com.ng'; // from cPanel → Connect Devices
            $mail->SMTPAuth   = true;
            $mail->Username   = 'info@femtechwaveslimited.com.ng'; // domain email
            $mail->Password   = 'Femtech2025!';      // email password
            $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
            $mail->Port       = 587;

            /*
            |--------------------------------------------------------------------------
            | EMAIL HEADERS
            |--------------------------------------------------------------------------
            */
            $mail->setFrom('info@femtechwaveslimited.com.ng', 'FEMTECH WAVES Website');
            $mail->addAddress('info@femtechwaveslimited.com.ng'); // where messages arrive
            $mail->addReplyTo($email, $name);

            /*
            |--------------------------------------------------------------------------
            | EMAIL CONTENT
            |--------------------------------------------------------------------------
            */
            $servicesList = !empty($services)
                ? implode(', ', array_map('strip_tags', $services))
                : 'Not specified';

            $mail->isHTML(false); // plain text
            $mail->Subject = 'New Contact Form Submission - FEMTECH WAVES';

            $mail->Body = "
══════════════════════════════════════
NEW CONTACT FORM SUBMISSION
══════════════════════════════════════

CONTACT INFORMATION
-------------------
Name: $name
Email: $email
Phone: $phone
Company: " . ($company ?: 'Not provided') . "

PROJECT DETAILS
---------------
Services: $servicesList
Project Type: " . ($projectType ?: 'Not specified') . "
Budget: " . ($budget ?: 'Not specified') . "

MESSAGE
-------
$message

══════════════════════════════════════
Submitted: " . date('F j, Y, g:i a') . "
IP Address: {$_SERVER['REMOTE_ADDR']}
══════════════════════════════════════
";

            /*
            |--------------------------------------------------------------------------
            | SEND EMAIL
            |--------------------------------------------------------------------------
            */
            $mail->send();

            $success = "Thank you! Your message has been sent successfully. We'll contact you shortly.";
            $_POST = [];

        } catch (Exception $e) {
            $error = "Mailer Error: " . $mail->ErrorInfo;
        }
    }
}
?>

<?php include "head.php"; ?>
<style>
/* ===== MODERN CONTACT PAGE STYLES ===== */
:root {
    --primary: #0d6efd;
    --primary-dark: #0b5ed7;
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.3);
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
}

.contact-page {
    min-height: 100vh;
    padding: 100px 20px 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

/* Animated background elements */
.contact-page::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s infinite ease-in-out;
}

.contact-page::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s infinite ease-in-out reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-50px) rotate(180deg); }
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Hero Header */
.contact-hero {
    text-align: center;
    margin-bottom: 60px;
    animation: fadeInDown 0.8s ease;
}

.contact-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.2);
    letter-spacing: -1px;
}

.contact-hero p {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.95);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Main Grid Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: start;
}

/* Glass Card Effect */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    padding: 48px;
    animation: fadeInUp 0.8s ease;
}

/* Contact Info Section */
.contact-info {
    animation-delay: 0.2s;
}

.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 24px;
    color: #1a1a1a;
    font-weight: 700;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.info-item:hover {
    transform: translateX(8px);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.info-icon {
    width: 56px;
    height: 56px;
    background: var(--gradient-1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.info-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.info-content p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

.info-content a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.info-content a:hover {
    color: var(--primary-dark);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.social-link {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.social-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Contact Form */
.contact-form {
    animation-delay: 0.4s;
}

.contact-form h2 {
    font-size: 2rem;
    margin-bottom: 32px;
    color: #1a1a1a;
    font-weight: 700;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group label .required {
    color: #dc3545;
    margin-left: 4px;
}

.form-control {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    transform: translateY(-2px);
}

textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Multi-select checkbox styling */
.service-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(102, 126, 234, 0.03);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.checkbox-item:hover {
    background: rgba(102, 126, 234, 0.08);
    transform: translateX(4px);
}

.checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: var(--primary);
}

.checkbox-item input[type="checkbox"]:checked + label {
    color: var(--primary);
    font-weight: 600;
}

.checkbox-item label {
    cursor: pointer;
    font-size: 0.95rem;
    color: #555;
    user-select: none;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    padding: 18px 32px;
    background: var(--gradient-1);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    margin-top: 12px;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}

.btn-submit:active {
    transform: translateY(-1px);
}

/* Alert Messages */
.alert {
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 32px;
    font-size: 1rem;
    font-weight: 500;
    animation: slideDown 0.4s ease;
}

.alert-success {
    background: linear-gradient(135deg, #d1f4e0 0%, #a8e6cf 100%);
    color: #0f5132;
    border: 2px solid #a8e6cf;
}

.alert-error {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffccd5 100%);
    color: #842029;
    border: 2px solid #ffccd5;
}

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

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

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

/* Responsive Design */
@media(max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .contact-hero h1 {
        font-size: 2.5rem;
    }
}

@media(max-width: 768px) {
    .contact-page {
        padding: 80px 16px 40px;
    }
    
    .glass-card {
        padding: 32px 24px;
    }
    
    .contact-hero h1 {
        font-size: 2rem;
    }
    
    .contact-hero p {
        font-size: 1.1rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .service-options {
        grid-template-columns: 1fr;
    }
    
    .info-item {
        padding: 16px;
    }
}

@media(max-width: 480px) {
    .contact-hero h1 {
        font-size: 1.75rem;
    }
    
    .glass-card {
        padding: 24px 20px;
    }
}
</style>

<div class="contact-page">
    <div class="contact-container">
        
        <!-- Hero Section -->
        <div class="contact-hero">
            <h1>Let's Build Something Amazing</h1>
            <p>Ready to power your project with excellence? Get in touch with our team of electrical and solar experts.</p>
        </div>

        <div class="contact-grid">
            
            <!-- Contact Information -->
            <div class="glass-card contact-info">
                <h2>Get In Touch</h2>
                
                <div class="info-item">
                    <div class="info-icon">📍</div>
                    <div class="info-content">
                        <h3>Our Location</h3>
                        <p>Abuja, FCT, Nigeria<br>Visit us during business hours</p>
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-icon">📧</div>
                    <div class="info-content">
                        <h3>Email Us</h3>
                        <p><a href="mailto:info@femtechwaves.com">info@femtechwaves.com</a><br>We reply within 24 hours</p>
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-icon">📱</div>
                    <div class="info-content">
                        <h3>Call Us</h3>
                        <p><a href="tel:+2348012345678">+234 801 234 5678</a><br>Mon - Fri: 8am - 6pm</p>
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-icon">⏰</div>
                    <div class="info-content">
                        <h3>Business Hours</h3>
                        <p>Monday - Friday: 8:00 AM - 6:00 PM<br>Saturday: 9:00 AM - 2:00 PM<br>Sunday: Closed</p>
                    </div>
                </div>
                
                <div class="social-links">
                    <a href="#" class="social-link" title="Facebook">📘</a>
                    <a href="#" class="social-link" title="Twitter">🐦</a>
                    <a href="#" class="social-link" title="Instagram">📷</a>
                    <a href="#" class="social-link" title="LinkedIn">💼</a>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="glass-card contact-form">
                <h2>Send Us a Message</h2>
                
                <?php if ($success): ?>
                    <div class="alert alert-success"><?= htmlspecialchars($success) ?></div>
                <?php endif; ?>
                
                <?php if ($error): ?>
                    <div class="alert alert-error"><?= htmlspecialchars($error) ?></div>
                <?php endif; ?>
                
                <form method="POST" action="">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Full Name <span class="required">*</span></label>
                            <input type="text" id="name" name="name" class="form-control" 
                                   placeholder="John Doe" required
                                   value="<?= htmlspecialchars($_POST['name'] ?? '') ?>">
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email Address <span class="required">*</span></label>
                            <input type="email" id="email" name="email" class="form-control" 
                                   placeholder="john@example.com" required
                                   value="<?= htmlspecialchars($_POST['email'] ?? '') ?>">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">Phone Number <span class="required">*</span></label>
                            <input type="tel" id="phone" name="phone" class="form-control" 
                                   placeholder="+234 800 000 0000" required
                                   value="<?= htmlspecialchars($_POST['phone'] ?? '') ?>">
                        </div>
                        
                        <div class="form-group">
                            <label for="company">Company Name</label>
                            <input type="text" id="company" name="company" class="form-control" 
                                   placeholder="Your Company"
                                   value="<?= htmlspecialchars($_POST['company'] ?? '') ?>">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Services Interested In</label>
                        <div class="service-options">
                            <div class="checkbox-item">
                                <input type="checkbox" id="service1" name="services[]" value="Solar Installation">
                                <label for="service1">☀️ Solar Installation</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="service2" name="services[]" value="Electrical Wiring">
                                <label for="service2">⚡ Electrical Wiring</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="service3" name="services[]" value="Maintenance">
                                <label for="service3">🔧 Maintenance</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="service4" name="services[]" value="Consultation">
                                <label for="service4">💡 Consultation</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="service5" name="services[]" value="Emergency Repairs">
                                <label for="service5">🚨 Emergency Repairs</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="service6" name="services[]" value="Other">
                                <label for="service6">📋 Other Services</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="project_type">Project Type</label>
                            <select id="project_type" name="project_type" class="form-control">
                                <option value="">Select project type</option>
                                <option value="Residential">🏠 Residential</option>
                                <option value="Commercial">🏢 Commercial</option>
                                <option value="Industrial">🏭 Industrial</option>
                                <option value="Government">🏛️ Government</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="budget">Budget Range</label>
                            <select id="budget" name="budget" class="form-control">
                                <option value="">Select budget range</option>
                                <option value="Under ₦500,000">Under ₦500,000</option>
                                <option value="₦500,000 - ₦1,000,000">₦500,000 - ₦1,000,000</option>
                                <option value="₦1,000,000 - ₦5,000,000">₦1,000,000 - ₦5,000,000</option>
                                <option value="Above ₦5,000,000">Above ₦5,000,000</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Your Message <span class="required">*</span></label>
                        <textarea id="message" name="message" class="form-control" 
                                  placeholder="Tell us about your project requirements..." 
                                  required><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea>
                    </div>
                    
                    <button type="submit" class="btn-submit">Send Message 🚀</button>
                </form>
            </div>
            
        </div>
    </div>
</div>

<?php include "footer.php"; ?>
