<?php
// contact.php - Professional Contact Page
// File location: /bidwheels.net/contact.php

require_once 'includes/functions.php';
require_once 'includes/mailer.php';
require_once 'includes/header.php';

$success = '';
$error = '';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = sanitize($_POST['name']);
    $email = sanitize($_POST['email']);
    $phone = sanitize($_POST['phone']);
    $subject = sanitize($_POST['subject']);
    $message = sanitize($_POST['message']);
    $department = sanitize($_POST['department']);
    
    // Determine recipient based on department
    $recipient = SUPPORT_EMAIL;
    if ($department == 'support') {
        $recipient = 'support@bidwheels.net';
    } elseif ($department == 'info') {
        $recipient = 'info@bidwheels.net';
    } elseif ($department == 'bids') {
        $recipient = 'bids@bidwheels.net';
    } elseif ($department == 'billing') {
        $recipient = 'billing@bidwheels.net';
    }
    
    if (empty($name) || empty($email) || empty($message)) {
        $error = 'Please fill in all required fields.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = 'Please enter a valid email address.';
    } else {
        $email_content = '
            <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
                <div style="background: #1a1a1a; padding: 30px; text-align: center; border-radius: 20px 20px 0 0;">
                    <img src="' . SITE_URL . SITE_LOGO . '" alt="' . SITE_NAME . '" style="height: 50px;">
                    <h2 style="color: white; margin-top: 15px;">New Contact Message</h2>
                </div>
                <div style="background: white; padding: 30px; border-radius: 0 0 20px 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
                    <table style="width: 100%; border-collapse: collapse;">
                        <tr><td style="padding: 10px 0; font-weight: bold; width: 120px;">Name:</td><td>' . $name . '</td></tr>
                        <tr><td style="padding: 10px 0; font-weight: bold;">Email:</td><td>' . $email . '</td></tr>
                        <tr><td style="padding: 10px 0; font-weight: bold;">Phone:</td><td>' . ($phone ?: 'Not provided') . '</td></tr>
                        <tr><td style="padding: 10px 0; font-weight: bold;">Subject:</td><td>' . $subject . '</td></tr>
                        <tr><td style="padding: 10px 0; font-weight: bold;">Department:</td><td>' . ucfirst($department) . '</td></tr>
                        <tr><td style="padding: 10px 0; font-weight: bold; vertical-align: top;">Message:</td><td style="line-height: 1.6;">' . nl2br($message) . '</td></tr>
                    </table>
                </div>
            </div>
        ';
        
        if (sendMail($recipient, "Contact Form: $subject", $email_content)) {
            $success = "Thank you for contacting us! We will get back to you within 24-48 hours.";
        } else {
            $error = "Failed to send message. Please try again or call us directly.";
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Contact BidWheels.net - Get in touch with our support team for inquiries about bidding, vehicles, payments, and more.">
    <title>Contact Us - <?php echo SITE_NAME; ?></title>
    
    <style>
        .contact-page {
            background: linear-gradient(135deg, #EFEBE0 0%, #e5e0d4 100%);
            min-height: 100vh;
            padding: 60px 24px;
        }
        
        .contact-container {
            max-width: 1300px;
            margin: 0 auto;
        }
        
        .contact-header {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .contact-header h1 {
            font-size: 48px;
            font-weight: 800;
            background: linear-gradient(135deg, #1a1a1a 0%, #FF8C3E 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 15px;
        }
        
        .contact-header p {
            color: #555;
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }
        
        .contact-info-section {
            background: white;
            border-radius: 32px;
            padding: 32px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .info-title {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 8px;
        }
        
        .info-subtitle {
            color: #666;
            font-size: 14px;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #FF8C3E;
            display: inline-block;
        }
        
        .info-card {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            padding: 20px 0;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s;
        }
        
        .info-card:hover {
            transform: translateX(5px);
        }
        
        .info-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .info-icon i {
            font-size: 24px;
            color: white;
        }
        
        .info-details h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 5px;
        }
        
        .info-details p {
            color: #555;
            font-size: 14px;
            margin-bottom: 3px;
        }
        
        .info-details a {
            color: #FF8C3E;
            text-decoration: none;
            font-size: 14px;
        }
        
        .info-details a:hover {
            text-decoration: underline;
        }
        
        .department-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .dept-card {
            background: #f8f9fa;
            border-radius: 20px;
            padding: 18px;
            text-align: center;
            transition: all 0.3s;
            border: 1px solid transparent;
        }
        
        .dept-card:hover {
            border-color: #FF8C3E;
            transform: translateY(-3px);
        }
        
        .dept-card i {
            font-size: 28px;
            color: #FF8C3E;
            margin-bottom: 10px;
        }
        
        .dept-card h4 {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 5px;
        }
        
        .dept-card p {
            font-size: 11px;
            color: #888;
            word-break: break-all;
        }
        
        .contact-form-section {
            background: white;
            border-radius: 32px;
            padding: 32px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .form-title {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 8px;
        }
        
        .form-subtitle {
            color: #666;
            font-size: 14px;
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 22px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 13px;
            color: #333;
        }
        
        .form-group label i {
            color: #FF8C3E;
            margin-right: 6px;
        }
        
        .form-group .required {
            color: #FF8C3E;
        }
        
        .input-wrapper {
            position: relative;
        }
        
        .input-wrapper i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #aaa;
            font-size: 16px;
        }
        
        .input-wrapper input,
        .input-wrapper select,
        .input-wrapper textarea {
            width: 100%;
            padding: 14px 16px 14px 48px;
            border: 2px solid #f0f0f0;
            border-radius: 16px;
            font-size: 14px;
            transition: all 0.3s;
            background: #f8f8f8;
            font-family: inherit;
        }
        
        .input-wrapper textarea {
            padding: 14px 16px 14px 48px;
            resize: vertical;
            min-height: 120px;
        }
        
        .input-wrapper input:focus,
        .input-wrapper select:focus,
        .input-wrapper textarea:focus {
            outline: none;
            border-color: #FF8C3E;
            background: white;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .submit-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            border: none;
            border-radius: 50px;
            color: white;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(255,140,62,0.3);
        }
        
        .map-section {
            margin-top: 50px;
            background: white;
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        
        .map-container {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 15px;
        }
        
        .map-container i {
            font-size: 48px;
            color: #FF8C3E;
        }
        
        .map-container p {
            color: #aaa;
            font-size: 14px;
        }
        
        .map-address {
            padding: 20px;
            text-align: center;
            border-top: 1px solid #f0f0f0;
        }
        
        .map-address p {
            color: #555;
            font-size: 14px;
        }
        
        .map-address i {
            color: #FF8C3E;
            margin-right: 8px;
        }
        
        .alert {
            padding: 14px 18px;
            border-radius: 16px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }
        
        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }
        
        .alert i {
            font-size: 18px;
        }
        
        @media (max-width: 992px) {
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .department-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .contact-page {
                padding: 40px 16px;
            }
            
            .contact-header h1 {
                font-size: 32px;
            }
            
            .contact-header p {
                font-size: 16px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .department-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .info-card {
                padding: 15px 0;
            }
            
            .info-icon {
                width: 45px;
                height: 45px;
            }
            
            .info-icon i {
                font-size: 20px;
            }
        }
        
        @media (max-width: 480px) {
            .department-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

<div class="contact-page">
    <div class="contact-container">
        <div class="contact-header">
            <h1>Contact Us</h1>
            <p>Have questions? We'd love to hear from you. Our team is here to help.</p>
        </div>
        
        <div class="contact-grid">
            <!-- Left Side - Contact Info -->
            <div class="contact-info-section">
                <div class="info-title">Get in Touch</div>
                <div class="info-subtitle">We're here to help</div>
                
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="info-details">
                        <h3>Visit Us</h3>
                        <p>123 Auction Avenue</p>
                        <p>New York, NY 10001</p>
                        <p>United States</p>
                    </div>
                </div>
                
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="info-details">
                        <h3>Call Us</h3>
                        <p>+1 (555) 123-4567</p>
                        <p>Mon-Fri: 9AM - 6PM EST</p>
                        <p>Sat-Sun: Closed</p>
                    </div>
                </div>
                
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="info-details">
                        <h3>Email Us</h3>
                        <p><a href="mailto:support@bidwheels.net">support@bidwheels.net</a> - Support</p>
                        <p><a href="mailto:info@bidwheels.net">info@bidwheels.net</a> - General Info</p>
                        <p><a href="mailto:bids@bidwheels.net">bids@bidwheels.net</a> - Winning Bids</p>
                        <p><a href="mailto:billing@bidwheels.net">billing@bidwheels.net</a> - Billing</p>
                    </div>
                </div>
                
                <div style="margin-top: 20px;">
                    <h3 style="font-size: 16px; margin-bottom: 15px; color: #1a1a1a;">Send to specific department:</h3>
                    <div class="department-grid">
                        <div class="dept-card">
                            <i class="fas fa-headset"></i>
                            <h4>Support</h4>
                            <p>support@bidwheels.net</p>
                        </div>
                        <div class="dept-card">
                            <i class="fas fa-info-circle"></i>
                            <h4>General Info</h4>
                            <p>info@bidwheels.net</p>
                        </div>
                        <div class="dept-card">
                            <i class="fas fa-gavel"></i>
                            <h4>Winning Bids</h4>
                            <p>bids@bidwheels.net</p>
                        </div>
                        <div class="dept-card">
                            <i class="fas fa-credit-card"></i>
                            <h4>Billing</h4>
                            <p>billing@bidwheels.net</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Right Side - Contact Form -->
            <div class="contact-form-section">
                <div class="form-title">Send Us a Message</div>
                <div class="form-subtitle">Fill out the form below and we'll get back to you as soon as possible.</div>
                
                <?php if ($success): ?>
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i>
                        <span><?php echo $success; ?></span>
                    </div>
                <?php endif; ?>
                
                <?php if ($error): ?>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i>
                        <span><?php echo $error; ?></span>
                    </div>
                <?php endif; ?>
                
                <form method="POST" action="" id="contactForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label><i class="fas fa-user"></i> Full Name <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fas fa-user"></i>
                                <input type="text" name="name" placeholder="Enter your full name" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-envelope"></i> Email Address <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fas fa-envelope"></i>
                                <input type="email" name="email" placeholder="your@email.com" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> Phone Number</label>
                            <div class="input-wrapper">
                                <i class="fas fa-phone"></i>
                                <input type="tel" name="phone" placeholder="+1 234 567 8900">
                            </div>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-tag"></i> Subject</label>
                            <div class="input-wrapper">
                                <i class="fas fa-tag"></i>
                                <input type="text" name="subject" placeholder="What is this regarding?">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Department <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fas fa-building"></i>
                            <select name="department" required>
                                <option value="support">Customer Support</option>
                                <option value="info">General Information</option>
                                <option value="bids">Winning Bids / Auction Questions</option>
                                <option value="billing">Billing / Payment Questions</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label><i class="fas fa-comment"></i> Message <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fas fa-comment"></i>
                            <textarea name="message" placeholder="Please describe your question or concern in detail..." required></textarea>
                        </div>
                    </div>
                    
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane"></i> Send Message
                    </button>
                </form>
            </div>
        </div>
        
        <div class="map-section">
            <div class="map-container">
                <i class="fas fa-map-marker-alt"></i>
                <p>123 Auction Avenue, New York, NY 10001, United States</p>
            </div>
            <div class="map-address">
                <p><i class="fas fa-clock"></i> Monday - Friday: 9:00 AM - 6:00 PM (EST)</p>
                <p><i class="fas fa-clock"></i> Saturday - Sunday: Closed</p>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
    var name = this.querySelector('input[name="name"]').value;
    var email = this.querySelector('input[name="email"]').value;
    var message = this.querySelector('textarea[name="message"]').value;
    
    if (name.trim() === '') {
        e.preventDefault();
        alert('Please enter your name');
        return false;
    }
    
    if (email.trim() === '') {
        e.preventDefault();
        alert('Please enter your email address');
        return false;
    }
    
    if (message.trim() === '') {
        e.preventDefault();
        alert('Please enter your message');
        return false;
    }
    
    return true;
});
</script>

<?php require_once 'includes/footer.php'; ?>