script.js

// Form step navigation
function nextStep(step) {
    document.getElementById(`step${step}`).classList.remove('active');
    document.getElementById(`step${step + 1}`).classList.add('active');
    
    // Update progress bar
    const progress = (step + 1) * 25;
    document.getElementById('formProgress').style.width = `${progress}%`;
}

function prevStep(step) {
    document.getElementById(`step${step}`).classList.remove('active');
    document.getElementById(`step${step - 1}`).classList.add('active');
    
    // Update progress bar
    const progress = (step - 1) * 25;
    document.getElementById('formProgress').style.width = `${progress}%`;
}

// Service selection
document.querySelectorAll('.service-option').forEach(option => {
    option.addEventListener('click', function() {
        document.querySelectorAll('.service-option').forEach(el => {
            el.classList.remove('selected');
            el.classList.remove('border-blue-500');
            el.classList.remove('bg-blue-50');
            el.classList.add('border-gray-300');
        });
        this.classList.add('selected');
        this.classList.remove('border-gray-300');
        this.classList.add('border-blue-500');
        this.classList.add('bg-blue-50');
    });
});

// Shipment tracking simulation
function trackShipment() {
    const trackingNumber = document.getElementById('trackingNumber').value;
    
    if (!trackingNumber) {
        alert('Please enter a tracking number');
        return;
    }
    
    // Show tracking result
    document.getElementById('trackingResult').classList.remove('hidden');
    
    // Populate with sample data
    document.getElementById('resultTrackingNumber').textContent = trackingNumber;
    document.getElementById('resultStatus').textContent = 'In Transit';
    document.getElementById('resultDeliveryDate').textContent = 'May 25, 2023';
    document.getElementById('resultOrigin').textContent = 'New York, USA';
    document.getElementById('resultDestination').textContent = 'London, UK';
    document.getElementById('resultCurrentLocation').textContent = 'Amsterdam, Netherlands';
    
    // Populate timeline
    const timeline = document.getElementById('shipmentTimeline');
    timeline.innerHTML = `
        <div class="timeline-item active">
            <h4 class="font-bold">Shipment Picked Up</h4>
            <p class="text-gray-600">May 15, 2023 - 10:30 AM</p>
            <p class="text-gray-600">New York, USA</p>
        </div>
        <div class="timeline-item active">
            <h4 class="font-bold">Arrived at Sorting Facility</h4>
            <p class="text-gray-600">May 15, 2023 - 4:45 PM</p>
            <p class="text-gray-600">New York, USA</p>
        </div>
        <div class="timeline-item active">
            <h4 class="font-bold">Departed from Sorting Facility</h4>
            <p class="text-gray-600">May 16, 2023 - 6:00 AM</p>
            <p class="text-gray-600">New York, USA</p>
        </div>
        <div class="timeline-item active">
            <h4 class="font-bold">Arrived at International Hub</h4>
            <p class="text-gray-600">May 17, 2023 - 3:30 PM</p>
            <p class="text-gray-600">Amsterdam, Netherlands</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Departed from International Hub</h4>
            <p class="text-gray-600">Expected: May 18, 2023</p>
            <p class="text-gray-600">Amsterdam, Netherlands</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Arrival at Destination Hub</h4>
            <p class="text-gray-600">Expected: May 24, 2023</p>
            <p class="text-gray-600">London, UK</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Out for Delivery</h4>
            <p class="text-gray-600">Expected: May 25, 2023</p>
            <p class="text-gray-600">London, UK</p>
        </div>
        <div class="timeline-item">
            <h4 class="font-bold">Delivered</h4>
            <p class="text-gray-600">Expected: May 25, 2023</p>
            <p class="text-gray-600">London, UK</p>
        </div>
    `;
}

// Form submission
function submitForm() {
    alert('Shipment registered successfully! Your tracking number is GS123456789');
    // Reset form
    document.getElementById('step4').classList.remove('active');
    document.getElementById('step1').classList.add('active');
    document.getElementById('formProgress').style.width = '20%';
}

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.querySelector('[data-mobile-menu]');
    const mobileMenu = document.querySelector('[data-mobile-menu-items]');
    
    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
});