<?php 
/* 
Template Name: Contact Page Template 
Description: Enhanced contact page with country code selector and redirect functionality
*/
get_header(); 
include get_template_directory() . '/inc/menus/menu.php'; 

// Honeypot Field (hidden from real users)
$honeypot = '<input type="text" name="company_name" style="display:none">';

// Handle Form Submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_inquiry_submit'])) {
    $ip_address = $_SERVER['REMOTE_ADDR'];
    $form_time = $_POST['form_time'] ?? time();
    $current_time = time();

    // Simple rate limit: 1 submission per 60 seconds
    if (($current_time - intval($form_time)) < 60) {
        $error_message = urlencode('Please wait before submitting again.');
        wp_redirect(add_query_arg('error', $error_message, wp_get_referer()));
        exit;
    } elseif (!empty($_POST['company_name'])) {
        $error_message = urlencode('Spam detected.');
        wp_redirect(add_query_arg('error', $error_message, wp_get_referer()));
        exit;
    } else {
        // Sanitize all form inputs
        $full_name = sanitize_text_field($_POST['full_name']);
        $last_name = sanitize_text_field($_POST['last_name']);
        $complete_name = trim($full_name . ' ' . $last_name);
        $inquiry_type = sanitize_text_field($_POST['inquiry_type']);
        $country_code = sanitize_text_field($_POST['country_code']);
        $phone = sanitize_text_field($_POST['telephone']);
        $complete_phone = $country_code . ' ' . $phone;
        $email = sanitize_email($_POST['email']);
        $country = sanitize_text_field($_POST['country']);
        $message = sanitize_textarea_field($_POST['message']);

        // Save submission as a custom post type (WordPress Dashboard)
        $post_id = wp_insert_post([
            'post_title' => $complete_name . ' - ' . $inquiry_type,
            'post_type' => 'contact_inquiry',
            'post_status' => 'publish',
            'meta_input' => [
                'full_name' => $complete_name,
                'inquiry_type' => $inquiry_type,
                'phone' => $complete_phone,
                'email' => $email,
                'country' => $country,
                'message' => $message
            ]
        ]);

        // Send Email Notification to The Travel Portal
        $to_admin = 'info@thetravelerportal.com';
        $subject_admin = 'New Contact Inquiry - The Travel Portal';
        $headers = array('Content-Type: text/html; charset=UTF-8');
        
        // Admin email message
        $email_message_admin = "
        <html>
        <head>
            <style>
                body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
                .email-container { max-width: 600px; margin: 0 auto; padding: 20px; }
                .email-header { background-color: #2B5AA0; color: white; padding: 20px; text-align: center; }
                .email-body { background-color: #f5f8fa; padding: 30px; }
                .field-row { margin-bottom: 15px; }
                .field-label { font-weight: bold; color: #2B5AA0; }
                .field-value { margin-top: 5px; padding: 10px; background-color: white; border-left: 3px solid #FFC107; }
                .email-footer { text-align: center; padding: 20px; font-size: 12px; color: #666; }
            </style>
        </head>
        <body>
            <div class='email-container'>
                <div class='email-header'>
                    <h2>New Contact Inquiry Received</h2>
                </div>
                <div class='email-body'>
                    <div class='field-row'>
                        <div class='field-label'>Full Name:</div>
                        <div class='field-value'>{$complete_name}</div>
                    </div>
                    <div class='field-row'>
                        <div class='field-label'>Inquiry Type:</div>
                        <div class='field-value'>{$inquiry_type}</div>
                    </div>
                    <div class='field-row'>
                        <div class='field-label'>Email:</div>
                        <div class='field-value'>{$email}</div>
                    </div>
                    <div class='field-row'>
                        <div class='field-label'>Phone:</div>
                        <div class='field-value'>{$complete_phone}</div>
                    </div>
                    <div class='field-row'>
                        <div class='field-label'>Country:</div>
                        <div class='field-value'>{$country}</div>
                    </div>
                    <div class='field-row'>
                        <div class='field-label'>Message:</div>
                        <div class='field-value'>{$message}</div>
                    </div>
                </div>
                <div class='email-footer'>
                    <p>This inquiry was submitted on " . date('F j, Y, g:i a') . "</p>
                    <p>The Travel Portal - Contact Form Submission</p>
                </div>
            </div>
        </body>
        </html>
        ";

        // Send admin email
        $mail_sent_admin = wp_mail($to_admin, $subject_admin, $email_message_admin, $headers);

        // Send confirmation email to customer
        $subject_customer = 'Thank You for Contacting The Travel Portal';
        
        $email_message_customer = "
        <html>
        <head>
            <style>
                body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
                .email-container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f5f8fa; }
                .email-header { background: linear-gradient(135deg, #2B5AA0 0%, #1E3A5F 100%); color: white; padding: 40px 20px; text-align: center; border-radius: 8px 8px 0 0; }
                .email-header h1 { margin: 0; font-size: 28px; }
                .email-body { background-color: white; padding: 40px 30px; }
                .greeting { font-size: 18px; color: #2B5AA0; margin-bottom: 20px; }
                .message-box { background-color: #f5f8fa; padding: 20px; border-radius: 8px; margin: 20px 0; border-left: 4px solid #FFC107; }
                .field-row { margin-bottom: 15px; }
                .field-label { font-weight: bold; color: #2B5AA0; font-size: 14px; }
                .field-value { margin-top: 5px; color: #333; font-size: 15px; }
                .email-footer { text-align: center; padding: 30px 20px; color: #666; font-size: 13px; background-color: #f5f8fa; border-radius: 0 0 8px 8px; }
                .footer-links { margin-top: 20px; }
                .footer-links a { color: #2B5AA0; text-decoration: none; margin: 0 10px; }
            </style>
        </head>
        <body>
            <div class='email-container'>
                <div class='email-header'>
                    <h1>Thank You for Contacting Us!</h1>
                </div>
                <div class='email-body'>
                    <p class='greeting'>Dear {$complete_name},</p>
                    <p>Thank you for contacting The Travel Portal! We've successfully received your inquiry and our team will review it shortly.</p>
                    <p>We aim to respond within 24 hours during business days. Below is a summary of the information you submitted:</p>
                    
                    <div class='message-box'>
                        <h3 style='color: #2B5AA0; margin-top: 0;'>Your Submission Details</h3>
                        <div class='field-row'>
                            <div class='field-label'>Name:</div>
                            <div class='field-value'>{$complete_name}</div>
                        </div>
                        <div class='field-row'>
                            <div class='field-label'>Inquiry Type:</div>
                            <div class='field-value'>{$inquiry_type}</div>
                        </div>
                        <div class='field-row'>
                            <div class='field-label'>Email:</div>
                            <div class='field-value'>{$email}</div>
                        </div>
                        <div class='field-row'>
                            <div class='field-label'>Phone:</div>
                            <div class='field-value'>{$complete_phone}</div>
                        </div>
                        <div class='field-row'>
                            <div class='field-label'>Country:</div>
                            <div class='field-value'>{$country}</div>
                        </div>
                        <div class='field-row'>
                            <div class='field-label'>Your Message:</div>
                            <div class='field-value'>{$message}</div>
                        </div>
                    </div>
                    
                    <p>If you have any additional questions or concerns, please don't hesitate to reach out to us directly.</p>
                    <p style='margin-top: 30px;'>Best regards,<br><strong>The Travel Portal Team</strong></p>
                </div>
                <div class='email-footer'>
                    <p><strong>The Travel Portal</strong></p>
                    <p>Email: info@thetravelerportal.com | Phone: +256 771 456146</p>
                    <p>Kampala, Uganda</p>
                    <div class='footer-links'>
                        <a href='" . home_url() . "'>Visit Website</a> | 
                        <a href='" . home_url('/services') . "'>Our Services</a>
                    </div>
                </div>
            </div>
        </body>
        </html>
        ";

        // Send customer confirmation email
        $mail_sent_customer = wp_mail($email, $subject_customer, $email_message_customer, $headers);

        if ($post_id) {
            // Store submission data in session for thank you page
            if (!session_id()) {
                session_start();
            }
            $_SESSION['contact_submission'] = [
                'full_name' => $complete_name,
                'inquiry_type' => $inquiry_type,
                'phone' => $complete_phone,
                'email' => $email,
                'country' => $country,
                'message' => $message,
                'submission_time' => date('F j, Y, g:i a')
            ];

            // Redirect to thank you page
            wp_redirect(home_url('/contact-thank-you'));
            exit;
        } else {
            $error_message = urlencode('There was an error submitting your inquiry. Please try again.');
            wp_redirect(add_query_arg('error', $error_message, wp_get_referer()));
            exit;
        }
    }
}

// Display error message if redirected back with error
if (isset($_GET['error'])) {
    echo '<div class="safari-alert safari-alert-danger">' . esc_html($_GET['error']) . '</div>';
}
?>

<main role="main">
    <!-- Hero Section -->
    <section class="parallax-hero full-width">
        <?php $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?>
        <div class="parallax-bg" style="background-image: url('<?php echo $backgroundImg[0] ? $backgroundImg[0] : get_template_directory_uri() . '/assets/images/default-hero.jpg'; ?>');" id="contact-parallax-bg"></div>
        
        <div class="hero-overlay"></div>
        
        <div class="container">
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    <div class="hero-content">
                        <h1 class="hero-title fade-up"><?php the_title(); ?></h1>
                        <?php if (has_excerpt()): ?>
                            <p class="hero-subtitle fade-up delay-1"><?php echo get_the_excerpt(); ?></p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="hero-curve">
            <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
                <path fill="white" d="M0,80 C240,0 480,80 720,40 C960,0 1200,80 1440,20 L1440,80 L0,80 Z"></path>
            </svg>
        </div>
    </section>

    <!-- Contact Section -->
    <div class="grace-contact-wrapper" style="max-width: 100%;">
        <div class="grace-contact-container" style="max-width: 100%; margin: 0;">
            
            <!-- Left Side - Contact Info -->
            <div class="grace-contact-left">
                <div class="grace-contact-header">
                    <h1 class="grace-contact-title">Contact Us</h1>
                    <p class="grace-contact-description">
                        Ready to embark on your dream journey? Get in touch with us today to start planning your unforgettable travel experience.
                    </p>
                </div>
                
                <div class="grace-contact-details">
                    <div class="grace-contact-item">
                        <div class="grace-contact-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="grace-contact-info">
                            <h4>Office</h4>
                            <p>Plot 1900, Ntinda Kisakye Shopping Center,<br>
                            Office F1, Ground Floor,<br>
                            Kampala, Uganda.</p>
                        </div>
                    </div>
                    
                    <div class="grace-contact-item">
                        <div class="grace-contact-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="grace-contact-info">
                            <h4>Phone</h4>
                            <p>+256 771 456146</p>
                        </div>
                    </div>
                    
                    <div class="grace-contact-item">
                        <div class="grace-contact-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <polyline points="22,6 12,13 2,6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="grace-contact-info">
                            <h4>Email</h4>
                            <p>info@thetravelerportal.com</p>
                        </div>
                    </div>
                </div>
                
                <div class="grace-social-links">
                    <h4>Follow Us</h4>
                    <div class="grace-social-icons">
                        <a href="#" class="grace-social-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                            </svg>
                        </a>
                        <a href="#" class="grace-social-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a>
                        <a href="#" class="grace-social-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zM12 16c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Right Side - Contact Form -->
            <div class="grace-contact-right">
                <div class="grace-form-background"></div>
                <div class="grace-form-container">
                    <div class="grace-form-header">
                        <h2>Send us a message</h2>
                    </div>
                    
                    <form method="post" class="grace-contact-form" id="contactForm">
                        <?php echo $honeypot; ?>
                        <input type="hidden" name="form_time" value="<?php echo time(); ?>">
                        
                        <div class="grace-form-group grace-form-row">
                            <div class="grace-input-group">
                                <label for="full_name">First Name *</label>
                                <input type="text" id="full_name" name="full_name" placeholder="First" required>
                            </div>
                            <div class="grace-input-group">
                                <label for="last_name">Last Name *</label>
                                <input type="text" id="last_name" name="last_name" placeholder="Last" required>
                            </div>
                        </div>
                        
                        <div class="grace-form-group">
                            <label for="email">Email *</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        
                        <div class="grace-form-group">
                            <label for="telephone">Telephone *</label>
                            <div class="phone-input-wrapper">
                                <select name="country_code" id="country_code" class="country-code-select" required>
                                    <option value="+256" data-flag="🇺🇬">🇺🇬 +256</option>
                                    <option value="+1" data-flag="🇺🇸">🇺🇸 +1</option>
                                    <option value="+44" data-flag="🇬🇧">🇬🇧 +44</option>
                                    <option value="+254" data-flag="🇰🇪">🇰🇪 +254</option>
                                    <option value="+255" data-flag="🇹🇿">🇹🇿 +255</option>
                                    <option value="+250" data-flag="🇷🇼">🇷🇼 +250</option>
                                    <option value="+27" data-flag="🇿🇦">🇿🇦 +27</option>
                                    <option value="+234" data-flag="🇳🇬">🇳🇬 +234</option>
                                    <option value="+91" data-flag="🇮🇳">🇮🇳 +91</option>
                                    <option value="+86" data-flag="🇨🇳">🇨🇳 +86</option>
                                    <option value="+81" data-flag="🇯🇵">🇯🇵 +81</option>
                                    <option value="+61" data-flag="🇦🇺">🇦🇺 +61</option>
                                    <option value="+49" data-flag="🇩🇪">🇩🇪 +49</option>
                                    <option value="+33" data-flag="🇫🇷">🇫🇷 +33</option>
                                    <option value="+39" data-flag="🇮🇹">🇮🇹 +39</option>
                                    <option value="+34" data-flag="🇪🇸">🇪🇸 +34</option>
                                    <option value="+971" data-flag="🇦🇪">🇦🇪 +971</option>
                                </select>
                                <input type="tel" id="telephone" name="telephone" placeholder="771 456146" required>
                            </div>
                        </div>
                        
                        <div class="grace-form-group">
                            <label for="country">Country *</label>
                            <input type="text" id="country" name="country" placeholder="e.g., Uganda" required>
                        </div>
                        
                        <div class="grace-form-group">
                            <label for="inquiry_type">Subject *</label>
                            <select name="inquiry_type" id="inquiry_type" required>
                                <option value="">Select your inquiry type</option>
                                <option value="General Inquiry - New Booking">General Inquiry - New Booking</option>
                                <option value="General Inquiry - Existing Booking">General Inquiry - Existing Booking</option>
                                <option value="Travel Management Services">Travel Management Services</option>
                                <option value="Visa Support Services">Visa Support Services</option>
                                <option value="Changes to an Existing Booking">Changes to an Existing Booking</option>
                                <option value="Cancel My Booking">Cancel My Booking</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        
                        <div class="grace-form-group">
                            <label for="message">Comment or Message *</label>
                            <textarea id="message" name="message" rows="6" required></textarea>
                        </div>
                        
                        <div class="grace-form-submit">
                            <button type="submit" name="contact_inquiry_submit" class="grace-submit-btn">
                                Send Us A Message
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Map Section -->
    <section class="map-section">
        <div class="container">
            <div class="map-container">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15958.967210488914!2d32.59385936316566!3d0.3548483394825153!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177dbb7f00fadad5%3A0x7a0aafbb39ea1e4d!2sBeaute%20Sauvage%20Safaris%20Limited!5e0!3m2!1sen!2sug!4v1754034584112!5m2!1sen!2sug" 
                        width="100%" 
                        height="450" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </section>

    <!-- Quote Section -->
    <div class="grace-quote-section" style="max-width: 100%;">
        <div class="grace-quote-container">
            <div class="grace-quote-mark">"</div>
            <blockquote class="grace-quote-text">
                Every journey tells a story of wonder and discovery. Let us craft yours with the passion and expertise that only comes from truly knowing the world of travel.
            </blockquote>
            <div class="grace-quote-signature">
                <div class="grace-signature-line"></div>
                <p class="grace-signature-name">The Travel Portal</p>
            </div>
        </div>
    </div>
</main>

<style>
:root { --primary-blue: #2B5AA0; --primary-blue-rgb: 43, 90, 160; --accent-yellow: #FFC107; --accent-yellow-rgb: 255, 193, 7; --dark-blue: #1E3A5F; --dark-blue-rgb: 30, 58, 95; --text-dark: #2C2C2C; --text-light: #666666; --text-muted: #999999; --background-light: #F5F8FA; --white: #FFFFFF; --border-light: #E5E5E5; --transition: all 0.3s ease; }
* { box-sizing: border-box; }
.grace-contact-wrapper { background-color: var(--background-light); min-height: 100vh; padding: 0; margin: 0; width: 100%; max-width: 100%; }
.grace-contact-container { display: flex; min-height: 100vh; width: 100%; max-width: 100%; margin: 0; background: var(--white); }
.grace-contact-left { flex: 1; padding: 80px 60px; background-color: var(--background-light); display: flex; flex-direction: column; justify-content: flex-start; }
.grace-contact-header { margin-bottom: 60px; }
.grace-contact-title { font-size: 3.5rem; font-weight: 400; color: var(--dark-blue); margin: 0 0 24px 0; line-height: 1.1; letter-spacing: -0.02em; }
.grace-contact-description { font-size: 1rem; line-height: 1.6; color: var(--text-light); margin: 0; max-width: 400px; }
.grace-contact-details { margin-bottom: 60px; }
.grace-contact-item { display: flex; align-items: flex-start; margin-bottom: 40px; }
.grace-contact-icon { width: 20px; height: 20px; margin-right: 20px; margin-top: 2px; color: var(--primary-blue); flex-shrink: 0; transition: var(--transition); }
.grace-contact-item:hover .grace-contact-icon { color: var(--accent-yellow); }
.grace-contact-info h4 { font-weight: 500; font-size: 1rem; color: var(--primary-blue); margin: 0 0 8px 0; text-transform: capitalize; }
.grace-contact-info p { font-size: 0.95rem; line-height: 1.5; color: var(--text-dark); margin: 0; }
.grace-social-links h4 { font-weight: 500; font-size: 1rem; color: var(--text-dark); margin: 0 0 20px 0; }
.grace-social-icons { display: flex; gap: 16px; }
.grace-social-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition); text-decoration: none; }
.grace-social-icon:hover { color: var(--accent-yellow); transform: translateY(-2px); }
.grace-contact-right { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; }
.grace-form-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url('https://images.unsplash.com/photo-1516426122078-c23e76319801?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.02; z-index: 1; }
.grace-form-background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(var(--primary-blue-rgb), 0.1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.95) 100%); z-index: 2; }
.grace-form-container { position: relative; z-index: 3; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 60px 50px; border-radius: 0; width: 100%; max-width: 500px; margin: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); }
.grace-form-header h2 { font-size: 2rem; font-weight: 400; color: var(--dark-blue); margin: 0 0 40px 0; text-align: center; }
.grace-contact-form { width: 100%; }
.grace-form-group { margin-bottom: 24px; }
.grace-form-row { display: flex; gap: 16px; }
.grace-input-group { flex: 1; }
.grace-form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--dark-blue); margin-bottom: 8px; }
.grace-form-group input, .grace-form-group select, .grace-form-group textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 4px; font-size: 1rem; background: var(--white); color: var(--text-dark); transition: var(--transition); outline: none; }
.grace-form-group input:focus, .grace-form-group select:focus, .grace-form-group textarea:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(var(--primary-blue-rgb), 0.1); }
.grace-form-group input::placeholder, .grace-form-group textarea::placeholder { color: var(--text-muted); }
.grace-form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; padding-right: 40px; }
.grace-form-group textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.phone-input-wrapper { display: flex; gap: 12px; }
.country-code-select { flex: 0 0 120px; font-size: 0.95rem; padding: 14px 12px; }
#telephone { flex: 1; }
.grace-form-submit { text-align: center; margin-top: 32px; }
.grace-submit-btn { background-color: var(--dark-blue); color: var(--white); border: none; padding: 16px 40px; font-size: 1rem; font-weight: 500; border-radius: 4px; cursor: pointer; transition: var(--transition); min-width: 160px; }
.grace-submit-btn:hover { background-color: var(--primary-blue); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--accent-yellow-rgb), 0.3); }
.safari-alert { padding: 16px 20px; border-radius: 4px; margin: 20px auto; max-width: 600px; font-size: 0.95rem; border-left: 4px solid; }
.safari-alert-success { background: #E8F5E9; color: #2E7D32; border-left-color: #4CAF50; }
.safari-alert-danger { background: #FFEBEE; color: #C62828; border-left-color: #E53935; }
.grace-quote-section { background: var(--white); padding: 100px 20px; text-align: center; width: 100%; max-width: 100%; }
.grace-quote-container { max-width: 800px; margin: 0 auto; }
.grace-quote-mark { font-size: 4rem; color: var(--primary-blue); line-height: 1; margin-bottom: 30px; }
.grace-quote-text { font-size: 1.5rem; font-style: italic; line-height: 1.6; color: var(--primary-blue); margin: 0 0 40px 0; font-weight: 400; }
.grace-quote-signature { display: flex; align-items: center; justify-content: center; gap: 20px; }
.grace-signature-line { width: 60px; height: 1px; background: var(--primary-blue); }
.grace-signature-name { font-size: 1.1rem; color: var(--primary-blue); margin: 0; font-style: italic; }
.map-section { padding: 80px 0; background: var(--background-light); }
.map-container { max-width: 1200px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 87, 183, 0.08); border: 1px solid var(--border-light); }
.parallax-hero { position: relative; height: 350px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.parallax-bg { position: absolute; top: -20%; left: 0; width: 100%; height: 120%; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; will-change: transform; z-index: 1; animation: zoomIn 20s ease-out infinite alternate; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%); z-index: 2; }
.hero-content { position: relative; z-index: 3; text-align: center; color: white; padding: 2rem; max-width: 800px; margin: 0 auto; }
.hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); line-height: 1.2; animation-duration: 1.5s; }
.hero-subtitle { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.fade-up { opacity: 0; transform: translateY(50px); animation: fadeUp 1.2s ease-out forwards; }
.fade-up.delay-1 { animation-delay: 0.3s; }
.full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.hero-curve { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 3; }
.hero-curve svg { display: block; width: 100%; height: 80px; }
@media (max-width: 1024px) { .grace-contact-container { flex-direction: column; min-height: auto; } .grace-contact-left { padding: 60px 40px; } .grace-contact-right { min-height: 600px; } .grace-form-container { margin: 20px; padding: 50px 40px; } }
@media (max-width: 768px) { .grace-contact-title { font-size: 2.8rem; } .grace-contact-left { padding: 40px 30px; } .grace-form-container { margin: 20px; padding: 40px 30px; } .grace-form-row { flex-direction: column; gap: 20px; } .phone-input-wrapper { flex-direction: column; } .country-code-select { flex: 1; } .grace-quote-text { font-size: 1.25rem; } .parallax-hero { height: 400px; } .hero-title { font-size: 2.2rem; } .hero-subtitle { font-size: 1rem; } .parallax-bg { background-attachment: scroll; } }
@media (max-width: 480px) { .grace-contact-title { font-size: 2.2rem; } .grace-contact-left { padding: 30px 20px; } .grace-form-container { margin: 10px; padding: 30px 20px; } .grace-form-header h2 { font-size: 1.6rem; } .grace-quote-section { padding: 60px 20px; } .grace-quote-text { font-size: 1.1rem; } .parallax-hero { height: 350px; } .hero-title { font-size: 1.8rem; } .hero-subtitle { font-size: 0.9rem; } }
@keyframes zoomIn { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } }
</style>

<script>
jQuery(document).ready(function($) {
    // Form validation
    $('.grace-contact-form').on('submit', function(e) {
        let valid = true;
        
        $(this).find('input[required], textarea[required], select[required]').each(function() {
            if ($(this).val().trim() === '') {
                valid = false;
                $(this).addClass('error').css('border-color', '#E53935');
            } else {
                $(this).removeClass('error').css('border-color', '');
            }
        });
        
        if (!valid) {
            e.preventDefault();
            alert('Please fill in all required fields.');
        }
    });
    
    // Remove error styling on input
    $('input, textarea, select').on('input change', function() {
        if ($(this).val().trim() !== '') {
            $(this).removeClass('error').css('border-color', '');
        }
    });
    
    // Parallax effect for hero background
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        $('#contact-parallax-bg').css('transform', 'translateY(' + (scroll * 0.3) + 'px)');
    });
});
</script>

<?php get_footer(); ?>