{% extends "base.html" %}

{% block content %}
<!-- Page Header -->
<div class="page-header">
    <div class="container">
        <h1>Contact Us</h1>
        <p>Get in touch with our customer support team</p>
    </div>
</div>

<!-- Contact Content -->
<section class="page-content">
    <div class="container">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px;">
            <!-- Contact Form -->
            <div>
                <h2>Send Us a Message</h2>
                <p style="margin-bottom: 30px; color: #666;">Have questions or need assistance? Fill out the form below and we'll get back to you within 24 hours.</p>
                
                <form class="contact-form">
                    <div class="form-group">
                        <label for="name">Full Name *</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">Email Address *</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label for="subject">Subject *</label>
                        <select id="subject" class="form-control" required>
                            <option value="">Select a subject</option>
                            <option value="general">General Inquiry</option>
                            <option value="tracking">Tracking Issue</option>
                            <option value="shipping">Shipping Question</option>
                            <option value="billing">Billing & Payment</option>
                            <option value="technical">Technical Support</option>
                            <option value="partnership">Partnership Opportunity</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="tracking">Tracking Number (if applicable)</label>
                        <input type="text" id="tracking" class="form-control" placeholder="e.g., NS-12345678-1234">
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Message *</label>
                        <textarea id="message" class="form-control" rows="6" required></textarea>
                    </div>
                    
                    <button type="submit" class="btn-primary">Send Message</button>
                </form>
            </div>
            
            <!-- Contact Information -->
            <div>
                <h2>Contact Information</h2>
                <p style="margin-bottom: 30px; color: #666;">Reach out to us through any of these channels</p>
                
                <div style="margin-bottom: 40px;">
                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                        <div style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 20px;">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div>
                            <h4 style="margin-bottom: 5px; color: #4D148C;">Phone</h4>
                            <p style="color: #666; margin: 0;">1-800-NEXUS-SHIP</p>
                            <p style="color: #666; margin: 0;">+1 (555) 123-4567 (International)</p>
                        </div>
                    </div>
                    
                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                        <div style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 20px;">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div>
                            <h4 style="margin-bottom: 5px; color: #4D148C;">Email</h4>
                            <p style="color: #666; margin: 0;">support@nexusship.com</p>
                            <p style="color: #666; margin: 0;">billing@nexusship.com</p>
                        </div>
                    </div>
                    
                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                        <div style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 20px;">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h4 style="margin-bottom: 5px; color: #4D148C;">Headquarters</h4>
                            <p style="color: #666; margin: 0;">123 Shipping Lane, Suite 100</p>
                            <p style="color: #666; margin: 0;">Global City, GC 12345</p>
                            <p style="color: #666; margin: 0;">United States</p>
                        </div>
                    </div>
                    
                    <div style="display: flex; align-items: center;">
                        <div style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 20px;">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div>
                            <h4 style="margin-bottom: 5px; color: #4D148C;">Business Hours</h4>
                            <p style="color: #666; margin: 0;">Monday - Friday: 8:00 AM - 8:00 PM EST</p>
                            <p style="color: #666; margin: 0;">Saturday: 9:00 AM - 5:00 PM EST</p>
                            <p style="color: #666; margin: 0;">Sunday: Closed</p>
                            <p style="color: #666; margin: 0;">24/7 Emergency Support Available</p>
                        </div>
                    </div>
                </div>
                
                <!-- Social Media -->
                <h3>Follow Us</h3>
                <p style="color: #666; margin-bottom: 20px;">Stay connected with us on social media for updates, promotions, and shipping tips.</p>
                
                <div style="display: flex; gap: 15px;">
                    <a href="#" style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none;">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none;">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none;">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none;">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" style="width: 50px; height: 50px; background: #4D148C; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none;">
                        <i class="fab fa-youtube"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- FAQ Section -->
        <div style="margin-top: 60px;">
            <h2>Frequently Asked Questions</h2>
            <p style="margin-bottom: 30px; color: #666;">Quick answers to common questions</p>
            
            <div style="max-width: 800px;">
                <div style="background: #F5F5F5; padding: 20px; border-radius: 10px; margin-bottom: 15px;">
                    <h3 style="color: #4D148C; margin-bottom: 10px;">How do I track my package?</h3>
                    <p style="color: #666; margin: 0;">Simply enter your tracking number on our Track page. You can find your tracking number on your receipt or shipping confirmation email.</p>
                </div>
                
                <div style="background: #F5F5F5; padding: 20px; border-radius: 10px; margin-bottom: 15px;">
                    <h3 style="color: #4D148C; margin-bottom: 10px;">What should I do if my package is delayed?</h3>
                    <p style="color: #666; margin: 0;">Check the tracking status for updates. If there's no change after 24 hours, please contact our support team with your tracking number.</p>
                </div>
                
                <div style="background: #F5F5F5; padding: 20px; border-radius: 10px; margin-bottom: 15px;">
                    <h3 style="color: #4D148C; margin-bottom: 10px;">How do I change the delivery address?</h3>
                    <p style="color: #666; margin: 0;">Address changes can be requested before the package is out for delivery. Contact customer service with your tracking number as soon as possible.</p>
                </div>
                
                <div style="background: #F5F5F5; padding: 20px; border-radius: 10px; margin-bottom: 15px;">
                    <h3 style="color: #4D148C; margin-bottom: 10px;">What if my package is damaged?</h3>
                    <p style="color: #666; margin: 0;">Take photos of the damage and contact us immediately. We'll guide you through the claims process and arrange for a replacement or refund.</p>
                </div>
                
                <div style="background: #F5F5F5; padding: 20px; border-radius: 10px;">
                    <h3 style="color: #4D148C; margin-bottom: 10px;">How do I file a claim for a lost package?</h3>
                    <p style="color: #666; margin: 0;">Contact our claims department within 30 days of the expected delivery date. Have your tracking number and proof of value ready.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
<script src="https://sites.super.myninja.ai/_assets/ninja-daytona-script.js"></script>