<?php
    require_once 'get_setting.php'; 
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php echo htmlspecialchars($site_settings['site_title'] ?? 'ReliParcel Express'); ?> | Contact Us</title> 
        
        <?php if (isset($use_favicon) && $use_favicon): ?>
        <link rel="icon" type="<?php echo $favicon_mime; ?>" href="<?php echo $favicon_path; ?>">
        <?php else: ?>
        <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
        <?php endif; ?>
        
        <link href="assets/css/style.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
        <link rel="stylesheet" href="assets/css/font-awesome-pro.css">
        <link rel="stylesheet" href="assets/css/gtranslate.css">
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        
        <style>
            :root {
                --crimson: #B00000;
                --crimson-dark: #6d0000;
                --gold: #FFC107;
                --dark-bg: #121212;
            }
            body {
                background-color: #f8f9fa;
            }
            .hero-contact {
                background: linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.85)), url('assets/images/contact_bg.png') center/cover no-repeat;
                padding: 140px 0 100px;
                position: relative;
                color: #fff;
                margin-top: -80px; /* pull under nav */
                box-shadow: inset 0 -30px 40px -10px rgba(248, 249, 250, 1);
            }
            .contact-glass-card {
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.4);
                border-radius: 25px;
                box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
                padding: 50px;
                transform: translateY(-80px);
                position: relative;
                z-index: 10;
            }
            .icon-box {
                width: 70px;
                height: 70px;
                background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30px;
                margin-bottom: 25px;
                box-shadow: 0 10px 20px rgba(176, 0, 0, 0.3);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            .contact-info-card {
                background: white;
                border-radius: 20px;
                padding: 35px 30px;
                height: 100%;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                transition: transform 0.4s ease, box-shadow 0.4s ease;
                border-bottom: 5px solid var(--crimson);
            }
            .contact-info-card:hover {
                transform: translateY(-15px);
                box-shadow: 0 20px 50px rgba(176,0,0,0.15);
                border-bottom-color: var(--gold);
            }
            .contact-info-card:hover .icon-box {
                transform: scale(1.15) rotate(10deg);
                box-shadow: 0 15px 30px rgba(255, 193, 7, 0.4);
                background: linear-gradient(135deg, var(--gold), #ffb300);
            }
            .form-control:focus {
                border-color: var(--crimson);
                box-shadow: 0 0 0 0.35rem rgba(176, 0, 0, 0.15);
            }
            .floating-label-custom label {
                color: #6c757d;
                font-size: 15px;
                font-weight: 500;
            }
            .floating-label-custom .form-control {
                border-radius: 12px;
                border: 2px solid #e9ecef;
                background-color: #f8f9fa;
                font-weight: 600;
                color: #333;
            }
            .floating-label-custom .form-control:focus {
                background-color: #fff;
            }
            .contact-map {
                border-radius: 25px;
                overflow: hidden;
                box-shadow: 0 20px 50px rgba(0,0,0,0.1);
                height: 450px;
                border: 5px solid white;
            }
            .section-title {
                font-family: 'ABC Ginto Nord Unlicensed Trial Bold', sans-serif;
                font-size: 2.8rem;
                text-transform: uppercase;
                margin-bottom: 1.5rem;
                letter-spacing: -1px;
            }
            .animate-up {
                opacity: 0;
                transform: translateY(40px);
                animation: fadeInUp 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
            }
            @keyframes fadeInUp {
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .delay-1 { animation-delay: 0.2s; }
            .delay-2 { animation-delay: 0.4s; }
            .btn-gradient-premium {
                background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
                border: none;
                transition: all 0.3s ease;
            }
            .btn-gradient-premium:hover {
                background: linear-gradient(135deg, #C60000, #8A0000);
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(176, 0, 0, 0.4);
            }
        </style>
    </head>
    <body>
        
        <?php include "nav.php" ?>
        
        <!-- Hero Section -->
        <section class="hero-contact text-center animate-up">
            <div class="container pt-5">
                <span class="badge bg-gold text-dark mb-4 px-4 py-2 fw-bold rounded-pill shadow-sm" style="background-color: var(--gold); letter-spacing: 2px;">24/7 SUPPORT</span>
                <h1 class="display-3 fw-bolder mb-4 text-white" style="text-shadow: 0 5px 15px rgba(0,0,0,0.5);">Contact Our <span style="color: var(--gold)">Experts</span></h1>
                <p class="lead mb-0 fs-5 text-light mx-auto" style="max-width: 700px; line-height: 1.8;">
                    Whether you have a question about our global logistics network, tracking, or want to partner with us, we’re ready to answer all your questions.
                </p>
            </div>
        </section>

        <!-- Main Contact Section -->
        <section class="py-5" style="background-color: #f8f9fa;">
            <div class="container">
                <div class="row align-items-stretch">
                    <!-- Form Side -->
                    <div class="col-lg-7 animate-up delay-1">
                        <div class="contact-glass-card">
                            <h2 class="fw-bolder mb-3" style="color: var(--crimson-dark); font-size: 2.2rem;">Send Us a Message</h2>
                            <p class="text-muted mb-5 fs-6">Fill out the form below and a dedicated logistics specialist will get back to you within 24 hours.</p>
                            
                            <form action="process_contact.php" method="POST">
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <div class="form-floating floating-label-custom">
                                            <input type="text" class="form-control" id="name" name="name" placeholder="John Doe" required>
                                            <label for="name">Full Name</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating floating-label-custom">
                                            <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com" required>
                                            <label for="email">Email Address</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-floating floating-label-custom">
                                            <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
                                            <label for="subject">Subject / Inquiry Type</label>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-floating floating-label-custom">
                                            <textarea class="form-control" id="message" name="message" placeholder="Leave a message here" style="height: 180px" required></textarea>
                                            <label for="message">How can we help you today?</label>
                                        </div>
                                    </div>
                                    <div class="col-12 mt-5">
                                        <button type="submit" class="btn btn-gradient-premium btn-lg w-100 text-white fw-bold py-3 shadow-lg rounded-pill" style="letter-spacing: 1px;">
                                            <i class="bi bi-send-fill me-2"></i> SUBMIT INQUIRY
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Contact Info Side -->
                    <div class="col-lg-5 animate-up delay-2" style="transform: translateY(-80px);">
                        <div class="d-flex flex-column gap-4 h-100">
                            <!-- Address -->
                            <div class="contact-info-card">
                                <div class="icon-box">
                                    <i class="bi bi-geo-alt-fill"></i>
                                </div>
                                <h4 class="fw-bolder text-dark mb-3">Headquarters</h4>
                                <p class="text-muted mb-0 lh-lg"><strong><?php echo htmlspecialchars($site_settings['site_title'] ?? 'ReliParcel Express'); ?></strong><br>123 Logistics Way, Cargo Center<br>New York, NY 10001, USA</p>
                            </div>
                            <!-- Phone -->
                            <div class="contact-info-card">
                                <div class="icon-box">
                                    <i class="bi bi-telephone-fill"></i>
                                </div>
                                <h4 class="fw-bolder text-dark mb-3">Call Us 24/7</h4>
                                <p class="text-muted mb-0 lh-lg">
                                    <strong>Support:</strong> +1 (555) 123-4567<br>
                                    <strong>Sales:</strong> +1 (555) 987-6543
                                </p>
                            </div>
                            <!-- Email -->
                            <div class="contact-info-card">
                                <div class="icon-box">
                                    <i class="bi bi-envelope-paper-fill"></i>
                                </div>
                                <h4 class="fw-bolder text-dark mb-3">Email Support</h4>
                                <p class="text-muted mb-0 lh-lg">
                                    <strong>General:</strong> info@<?php echo $_SERVER['HTTP_HOST'] ?? 'logistics.com'; ?><br>
                                    <strong>Tracking:</strong> support@<?php echo $_SERVER['HTTP_HOST'] ?? 'logistics.com'; ?>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Global Presence Map Section -->
        <section class="py-5 bg-white animate-up mt-4 mb-5">
            <div class="container text-center">
                <h2 class="section-title text-dark">Our Global <span class="text-crimson">Presence</span></h2>
                <p class="text-muted mb-5 mx-auto" style="max-width: 800px; font-size: 1.1rem;">We operate regional hubs in North America, Europe, and Asia to ensure fast global reach and 24/7 localized support for our high-value clients.</p>
                <div class="contact-map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.25279998186!2d-74.14483015421272!3d40.69763123332152!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1689898014565!5m2!1sen!2s" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </section>

        <?php include "footer.php" ?>
        
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <?php include "custom_script.php" ?>
        
        <script>
            // Form submission alert logic
            const urlParams = new URLSearchParams(window.location.search);
            const status = urlParams.get('status');
            
            if (status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: 'Message Sent Successfully!',
                    text: 'Thank you for reaching out. One of our specialists will get back to you within 24 hours.',
                    confirmButtonColor: '#B00000',
                    background: '#fff',
                    iconColor: '#B00000',
                    timer: 6000,
                    timerProgressBar: true,
                    customClass: {
                        popup: 'animated fadeInDown'
                    }
                });
                // Clean up URL
                window.history.replaceState({}, document.title, window.location.pathname);
            } else if (status === 'error') {
                Swal.fire({
                    icon: 'error',
                    title: 'Sending Failed',
                    text: 'We encountered a problem sending your message. Please try again or contact us directly via email.',
                    confirmButtonColor: '#B00000'
                });
                window.history.replaceState({}, document.title, window.location.pathname);
            }

            // Scroll Animation Trigger
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animationPlayState = 'running';
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.animate-up').forEach((el) => {
                el.style.animationPlayState = 'paused';
                observer.observe(el);
            });
        </script>
    </body>
</html>