<?php
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/countries-list.php';
$settings = getSettings();

$pageTitle = $settings['seo_contact_title'];
$pageDesc = $settings['seo_contact_desc'];

include __DIR__ . '/includes/header.php';
?>

<section class="page-hero">
    <div class="container">
        <span class="section-label">Get in Touch</span>
        <h1 class="section-title">Contact Us</h1>
        <nav class="breadcrumb-nav mt-2">
            <a href="<?php echo BASE_URL; ?>/index.php">Home</a>
            <span>/</span>
            Contact
        </nav>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row g-4">
            <!-- Left — Contact Form + Map -->
            <div class="col-lg-7 reveal">
                <div class="section-card mb-4">
                    <h3 style="font-family:var(--font-heading);font-size:1rem;text-transform:uppercase;color:var(--text-dark);margin-bottom:1.25rem;">Send Us a Message</h3>

                    <form action="<?php echo BASE_URL; ?>/send-form.php" method="POST" class="ajax-form" data-success-id="contactSuccess">
                        <input type="hidden" name="form_type" value="contact">
                        <div class="form-error alert alert-danger" style="display:none;margin-bottom:1rem;"></div>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Full Name *</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email *</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Phone</label>
                                <input type="tel" name="phone" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Company</label>
                                <input type="text" name="company" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Country</label>
                                <select name="country" class="form-select">
                                    <option value="">Select Country</option>
                                    <?php renderCountryOptions(); ?>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Message *</label>
                                <textarea name="message" class="form-control" rows="5" required placeholder="How can we help you?"></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn-green">Send Message</button>
                            </div>
                        </div>
                    </form>

                    <!-- Success State -->
                    <div id="contactSuccess" class="form-success" style="display:none;">
                        <div style="font-size:3rem;margin-bottom:1rem;">✓</div>
                        <h3 style="font-family:var(--font-heading);font-size:1.1rem;text-transform:uppercase;color:var(--green);margin-bottom:0.5rem;">Message Sent</h3>
                        <p style="color:var(--text-secondary);font-size:0.9rem;">Thank you for reaching out. We'll get back to you within 24 hours.</p>
                    </div>
                </div>

                <!-- Google Map -->
                <div style="border-radius:6px;overflow:hidden;min-height:300px;">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3941.2!2d38.7888!3d9.0054!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zOcKwMDAnMTkuNCJOIDM4wrA0NycxOS43IkU!5e0!3m2!1sen!2s!4v1"
                        width="100%" height="300" style="border:0;"
                        allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>

            <!-- Right — Contact Info + Event Info -->
            <div class="col-lg-5">
                <div class="section-card mb-3 reveal">
                    <h4 style="font-family:var(--font-heading);font-size:0.85rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1rem;">Contact Information</h4>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        <a href="tel:<?php echo e(preg_replace('/[^0-9+]/','',$settings['phone'])); ?>" style="color:var(--text-body);text-decoration:none;"><?php echo e($settings['phone']); ?></a>
                    </div>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                        <a href="mailto:<?php echo e($settings['email']); ?>" style="color:var(--text-body);text-decoration:none;"><?php echo e($settings['email']); ?></a>
                    </div>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        <span><?php echo e($settings['address']); ?></span>
                    </div>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        <span><?php echo e($settings['hours']); ?></span>
                    </div>
                    <a href="https://wa.me/<?php echo e($settings['whatsapp']); ?>" class="btn-green w-100 text-center mt-2" target="_blank" style="font-size:0.8rem;padding:0.5rem;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:middle;margin-right:0.4rem;"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                        Chat on WhatsApp
                    </a>
                </div>

                <div class="section-card reveal">
                    <h4 style="font-family:var(--font-heading);font-size:0.85rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:1rem;">Event Information</h4>
                    <p style="font-size:0.88rem;color:var(--text-body);margin-bottom:0.5rem;"><strong>Date:</strong> 16–18 November 2026</p>
                    <p style="font-size:0.88rem;color:var(--text-body);margin-bottom:0.5rem;"><strong>Venue:</strong> Millennium Hall, Addis Ababa</p>
                    <p style="font-size:0.88rem;color:var(--text-body);margin-bottom:1rem;"><strong>Entry:</strong> Trade visitors only</p>
                    <a href="<?php echo BASE_URL; ?>/register.php" class="btn-green w-100 text-center">Book a Stand</a>
                </div>
            </div>
        </div>
    </div>
</section>

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