<?php
require_once __DIR__ . '/includes/header.php';

$success = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'] ?? '';
    $email = $_POST['email'] ?? '';
    $subject = $_POST['subject'] ?? '';
    $message = $_POST['message'] ?? '';
    
    $pdo = db();
    $stmt = $pdo->prepare("INSERT INTO contact_messages (name, email, subject, message) VALUES (?, ?, ?, ?)");
    if ($stmt->execute([$name, $email, $subject, $message])) {
        $success = true;
    }
}
?>

<section class="hero" style="height: 50vh; background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('assets/images/contact-hero.jpg') center/cover no-repeat fixed;">
    <h1 class="fw-black" style="font-size: 5rem; letter-spacing: -3px; color: #fff;">Connect With Us</h1>
    <p class="text-secondary fw-bold" style="font-size: 1.3rem; max-width: 700px; margin-left: auto; margin-right: auto;">Our elite concierge team is ready to assist you with every aspect of your premium automotive journey.</p>
</section>

<div class="container" style="max-width: 1200px; margin-top: -6rem; padding-bottom: 8rem;">
    <div class="grid" style="grid-template-columns: 1fr 1.8fr; gap: 4rem; align-items: start;">
        <div class="flex" style="flex-direction: column; gap: 2rem;">
            <div class="glass" style="padding: 3rem; border-left: 6px solid var(--primary-color);">
                <h3 class="fw-black text-gold mb-2" style="display: flex; align-items: center; gap: 1rem; font-size: 1.4rem;">
                    <span style="font-size: 2rem;">📍</span> Headquarters
                </h3>
                <p class="text-secondary fw-bold" style="font-size: 1.1rem; line-height: 1.8;">
                    Wazir Akbar Khan, District 10,<br>
                    Kabul, Afghanistan
                </p>
                <p class="text-gold fw-black mt-2" style="font-size: 1.5rem;">+93 799 123 456</p>
            </div>
            
            <div class="glass" style="padding: 3rem; border-left: 6px solid var(--primary-color);">
                <h3 class="fw-black text-gold mb-2" style="display: flex; align-items: center; gap: 1rem; font-size: 1.4rem;">
                    <span style="font-size: 2rem;">🕒</span> Concierge Hours
                </h3>
                <div class="flex justify-between mb-1">
                    <span class="text-secondary fw-bold">Sat - Wed:</span>
                    <span class="fw-black">08:00 - 18:00</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-secondary fw-bold">Thursday:</span>
                    <span class="fw-black">08:00 - 13:00</span>
                </div>
            </div>

            <div class="glass" style="padding: 3rem; border-left: 6px solid var(--primary-color);">
                <h3 class="fw-black text-gold mb-2" style="display: flex; align-items: center; gap: 1rem; font-size: 1.4rem;">
                    <span style="font-size: 2rem;">✉️</span> Digital Inquiries
                </h3>
                <p class="text-secondary fw-bold" style="font-size: 1.1rem;">info@afgcars.af</p>
                <p class="text-secondary fw-bold" style="font-size: 1.1rem;">concierge@afgcars.af</p>
            </div>
        </div>

        <div class="glass" style="padding: 5rem;">
            <h2 class="fw-black mb-2" style="font-size: 2.5rem; color: #fff;">Direct Inquiry Portal</h2>
            <p class="text-secondary mb-3 fw-bold">Submit your requirements and our specialists will contact you shortly.</p>
            
            <?php if ($success): ?>
                <div class="alert alert-success mb-3" style="padding: 2rem; border-radius: 20px;">
                    <span style="font-size: 1.5rem;">✨</span> Your message has been encrypted and securely transmitted to our team.
                </div>
            <?php endif; ?>
            
            <form method="POST">
                <div class="grid grid-2 mb-2">
                    <div class="form-group">
                        <label class="text-secondary fw-black mb-1" style="text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem;">Your Full Name</label>
                        <input type="text" name="name" class="form-control" required placeholder="John Doe">
                    </div>
                    <div class="form-group">
                        <label class="text-secondary fw-black mb-1" style="text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem;">Email Address</label>
                        <input type="email" name="email" class="form-control" required placeholder="john@example.com">
                    </div>
                </div>
                <div class="form-group">
                    <label class="text-secondary fw-black mb-1" style="text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem;">Inquiry Subject</label>
                    <input type="text" name="subject" class="form-control" required placeholder="Regarding Land Cruiser 2024 Inquiry">
                </div>
                <div class="form-group">
                    <label class="text-secondary fw-black mb-1" style="text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem;">Detailed Message</label>
                    <textarea name="message" class="form-control" rows="6" required placeholder="Provide as much detail as possible..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary w-full fw-black" style="padding: 1.5rem; font-size: 1.1rem; letter-spacing: 1px;">TRANSMIT SECURE MESSAGE</button>
            </form>
        </div>
    </div>
</div>

<div class="container" style="padding-bottom: 8rem;">
    <div class="glass" style="height: 500px; width: 100%; position: relative; overflow: hidden; border-radius: 32px;">
        <!-- Map Placeholder -->
        <div style="position: absolute; inset: 0; background: url('assets/images/contact-map.jpg') center/cover; filter: grayscale(0.8) contrast(1.1) brightness(0.4);"></div>
        <div style="position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(15, 23, 42, 0.4);">
            <div style="font-size: 5rem; margin-bottom: 2rem; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));">📍</div>
            <h2 class="fw-black" style="font-size: 3.5rem; text-transform: uppercase; letter-spacing: 5px; color: #fff; line-height: 1;">Strategic Location</h2>
            <p class="text-gold fw-black" style="font-size: 1.4rem; letter-spacing: 2px; margin-top: 1rem;">VISIT THE KABUL EXPERIENCE CENTER</p>
            <a href="https://maps.google.com" target="_blank" class="btn btn-outline fw-black" style="margin-top: 3rem; padding: 1.2rem 3rem;">OPEN IN NAVIGATION</a>
        </div>
    </div>
</div>

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