{% extends "base.html" %}

{% block content %}
<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <h1>Global Shipping Solutions</h1>
        <p>Fast, reliable, and secure delivery services worldwide. Trust NexusShip for all your shipping needs.</p>
        <div style="margin-top: 30px;">
            <a href="{{ url_for('track') }}" class="tracking-button" style="text-decoration: none; display: inline-block;">Track Your Package</a>
        </div>
    </div>
</section>

<!-- Quick Track Section -->
<section class="tracking-section">
    <div class="container">
        <div class="tracking-box">
            <h2>Track Your Shipment</h2>
            <form id="trackingForm">
                <div class="tracking-form">
                    <input type="text" id="trackingNumber" class="tracking-input" placeholder="Enter your tracking number (e.g., NS-12345678-1234)" required>
                    <button type="submit" id="trackButton" class="tracking-button">Track Package</button>
                </div>
            </form>
            
            <div id="trackingResults" class="tracking-results"></div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="services">
    <div class="container">
        <div class="section-title">
            <h2>Our Courier Services</h2>
            <p>Comprehensive shipping solutions tailored to meet your specific needs. From same-day delivery to international freight, we've got you covered.</p>
        </div>
        
        <div class="services-grid">
            <div class="service-card">
                <div class="service-icon">🚚</div>
                <h3>Express Shipping</h3>
                <p>Next-day delivery for urgent shipments. Priority handling and dedicated routing ensures your package arrives on time, every time.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🌍</div>
                <h3>International Delivery</h3>
                <p>Seamless cross-border shipping to over 220 countries. Customs clearance included with real-time tracking throughout the journey.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">📦</div>
                <h3>Standard Shipping</h3>
                <p>Cost-effective ground shipping for non-urgent deliveries. Perfect for e-commerce and regular business shipments with 3-5 day delivery.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">⚡</div>
                <h3>Same Day Delivery</h3>
                <p>Ultra-fast local delivery within the same business day. Ideal for time-sensitive documents and packages in major metropolitan areas.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🏢</div>
                <h3>Freight Services</h3>
                <p>Complete logistics solutions for large-scale cargo. LTL, FTL, and intermodal shipping options for businesses of all sizes.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">📄</div>
                <h3>Document Delivery</h3>
                <p>Secure and confidential document shipping. Perfect for legal papers, contracts, and important business documents.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">❄️</div>
                <h3>Cold Chain Shipping</h3>
                <p>Temperature-controlled transport for pharmaceuticals, food, and perishables. Real-time temperature monitoring included.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">💎</div>
                <h3>High-Value Shipping</h3>
                <p>Specialized handling for valuable items including jewelry, electronics, and art. Enhanced security and insurance options available.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">📦</div>
                <h3>E-Commerce Solutions</h3>
                <p>Integrated shipping for online retailers. API access, bulk shipping, and returns management for seamless operations.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🏠</div>
                <h3>Residential Delivery</h3>
                <p>Door-to-door delivery for homes and apartments. Flexible scheduling and notification options for customer convenience.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🏭</div>
                <h3>B2B Logistics</h3>
                <p>Business-to-business shipping with dedicated account management. Volume discounts and customized solutions available.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🚁</div>
                <h3>Air Freight</h3>
                <p>Priority air shipping for time-sensitive cargo. Global network of airlines ensures fastest possible delivery times.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🚢</div>
                <h3>Ocean Freight</h3>
                <p>Economical sea shipping for large volumes. Full container and less-than-container options for international trade.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🔄</div>
                <h3>Returns Management</h3>
                <p>Comprehensive reverse logistics solutions. Easy return processing, inspection, and restocking services.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">📦</div>
                <h3>Warehousing</h3>
                <p>Secure storage and fulfillment services. Inventory management, pick-and-pack, and distribution from strategic locations.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">⚠️</div>
                <h3>Hazardous Materials</h3>
                <p>Certified handling of dangerous goods. Compliant with all international regulations for safe transport of hazardous materials.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🚗</div>
                <h3>Vehicle Shipping</h3>
                <p>Safe transport of cars, motorcycles, and boats. Enclosed and open carrier options for domestic and international shipping.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🎁</div>
                <h3>Gift Delivery</h3>
                <p>Special handling for gift packages. Gift wrapping options, personalized messages, and delivery confirmation for special occasions.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">📱</div>
                <h3>Mobile Integration</h3>
                <p>Track and manage shipments on-the-go. Mobile app with push notifications, barcode scanning, and live updates.</p>
            </div>
            
            <div class="service-card">
                <div class="service-icon">🔒</div>
                <h3>Secure Delivery</h3>
                <p>Enhanced security for sensitive shipments. Signature required, adult signature, and controlled access delivery options.</p>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us Section -->
<section style="padding: 80px 0; background: white;">
    <div class="container">
        <div class="section-title">
            <h2>Why Choose NexusShip?</h2>
            <p>Experience the difference with industry-leading service and technology</p>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; text-align: center;">
            <div>
                <div style="font-size: 48px; margin-bottom: 15px;">🌐</div>
                <h3 style="margin-bottom: 15px; color: #4D148C;">Global Network</h3>
                <p style="color: #666;">Shipping to over 220 countries with strategically located hubs worldwide.</p>
            </div>
            
            <div>
                <div style="font-size: 48px; margin-bottom: 15px;">⏱️</div>
                <h3 style="margin-bottom: 15px; color: #4D148C;">On-Time Delivery</h3>
                <p style="color: #666;">99.5% on-time delivery rate with real-time tracking and updates.</p>
            </div>
            
            <div>
                <div style="font-size: 48px; margin-bottom: 15px;">🛡️</div>
                <h3 style="margin-bottom: 15px; color: #4D148C;">Secure & Insured</h3>
                <p style="color: #666;">Comprehensive insurance options and state-of-the-art security systems.</p>
            </div>
            
            <div>
                <div style="font-size: 48px; margin-bottom: 15px;">💬</div>
                <h3 style="margin-bottom: 15px; color: #4D148C;">24/7 Support</h3>
                <p style="color: #666;">Round-the-clock customer service to assist with all your shipping needs.</p>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section style="padding: 60px 0; background: linear-gradient(135deg, #4D148C 0%, #660099 100%); color: white;">
    <div class="container">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; text-align: center;">
            <div>
                <div style="font-size: 48px; font-weight: bold; margin-bottom: 10px;">220+</div>
                <div style="font-size: 18px;">Countries Served</div>
            </div>
            
            <div>
                <div style="font-size: 48px; font-weight: bold; margin-bottom: 10px;">50M+</div>
                <div style="font-size: 18px;">Packages Delivered</div>
            </div>
            
            <div>
                <div style="font-size: 48px; font-weight: bold; margin-bottom: 10px;">99.5%</div>
                <div style="font-size: 18px;">On-Time Rate</div>
            </div>
            
            <div>
                <div style="font-size: 48px; font-weight: bold; margin-bottom: 10px;">24/7</div>
                <div style="font-size: 18px;">Customer Support</div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
<script src="https://sites.super.myninja.ai/_assets/ninja-daytona-script.js"></script>