<?php
$page_title = 'About Us - RoutexShipping';
require_once __DIR__ . '/../includes/homeheader.php';
?>

<!-- Hero Section -->
<section class="gradient-primary text-white py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-4xl font-bold mb-2">About RoutexShipping</h1>
        <p class="text-lg opacity-90">Leading the global logistics revolution</p>
    </div>
</section>

<!-- Story Section -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-4xl font-bold text-gray-900 mb-6">Our Story</h2>
                <p class="text-gray-600 mb-4">
                    Founded in 2015, RoutexShipping emerged from a simple vision: to revolutionize global logistics by making shipping transparent, reliable, and accessible to everyone.
                </p>
                <p class="text-gray-600 mb-4">
                    What started as a small team of logistics enthusiasts has grown into a global network serving thousands of businesses across 150+ countries. We've invested heavily in technology, infrastructure, and talent to deliver excellence at every step.
                </p>
                <p class="text-gray-600">
                    Today, RoutexShipping is trusted by enterprises, SMEs, and individuals alike. Our commitment to innovation and customer satisfaction remains unwavering.
                </p>
            </div>
            <div class="bg-gradient-to-br from-purple-100 to-pink-100 rounded-2xl p-12 h-96 flex items-center justify-center">
                <i class="fas fa-globe text-6xl text-purple-600"></i>
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <div class="bg-white rounded-xl p-8 shadow-md">
                <div class="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center mb-6">
                    <i class="fas fa-bullseye text-white text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h3>
                <p class="text-gray-600">
                    To provide fast, reliable, and affordable logistics solutions that empower businesses to reach customers worldwide. We're committed to transparency, innovation, and exceptional customer service.
                </p>
            </div>

            <div class="bg-white rounded-xl p-8 shadow-md">
                <div class="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center mb-6">
                    <i class="fas fa-star text-white text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Vision</h3>
                <p class="text-gray-600">
                    To become the world's most trusted logistics partner, known for innovation, reliability, and customer-centric solutions. We envision a world where shipping is seamless and accessible to all.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Values Section -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Our Core Values</h2>
            <p class="text-xl text-gray-600">What drives us every day</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-handshake text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Integrity</h3>
                <p class="text-gray-600">We operate with honesty and transparency in all our dealings.</p>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-rocket text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Innovation</h3>
                <p class="text-gray-600">We constantly innovate to improve our services and technology.</p>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-users text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Customer Focus</h3>
                <p class="text-gray-600">Your satisfaction is our top priority in everything we do.</p>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-leaf text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Sustainability</h3>
                <p class="text-gray-600">We're committed to environmentally responsible logistics.</p>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Our Team</h2>
            <p class="text-xl text-gray-600">Dedicated professionals committed to excellence</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
                <div class="w-full h-48 bg-gradient-to-br from-purple-200 to-pink-200 flex items-center justify-center">
                    <i class="fas fa-user text-4xl text-purple-600"></i>
                </div>
                <div class="p-6">
                    <h3 class="text-lg font-bold text-gray-900">John Smith</h3>
                    <p class="text-purple-600 font-semibold mb-2">CEO & Founder</p>
                    <p class="text-gray-600 text-sm">20+ years in logistics industry</p>
                </div>
            </div>

            <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
                <div class="w-full h-48 bg-gradient-to-br from-blue-200 to-cyan-200 flex items-center justify-center">
                    <i class="fas fa-user text-4xl text-blue-600"></i>
                </div>
                <div class="p-6">
                    <h3 class="text-lg font-bold text-gray-900">Sarah Johnson</h3>
                    <p class="text-purple-600 font-semibold mb-2">COO</p>
                    <p class="text-gray-600 text-sm">Operations & Supply Chain Expert</p>
                </div>
            </div>

            <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
                <div class="w-full h-48 bg-gradient-to-br from-green-200 to-emerald-200 flex items-center justify-center">
                    <i class="fas fa-user text-4xl text-green-600"></i>
                </div>
                <div class="p-6">
                    <h3 class="text-lg font-bold text-gray-900">Michael Chen</h3>
                    <p class="text-purple-600 font-semibold mb-2">CTO</p>
                    <p class="text-gray-600 text-sm">Technology & Innovation Lead</p>
                </div>
            </div>

            <div class="bg-white rounded-xl overflow-hidden shadow-md text-center">
                <div class="w-full h-48 bg-gradient-to-br from-orange-200 to-red-200 flex items-center justify-center">
                    <i class="fas fa-user text-4xl text-orange-600"></i>
                </div>
                <div class="p-6">
                    <h3 class="text-lg font-bold text-gray-900">Emma Davis</h3>
                    <p class="text-purple-600 font-semibold mb-2">CFO</p>
                    <p class="text-gray-600 text-sm">Finance & Business Strategy</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="gradient-primary text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
            <div>
                <div class="text-4xl font-bold mb-2">150+</div>
                <p class="opacity-90">Countries Served</p>
            </div>
            <div>
                <div class="text-4xl font-bold mb-2">500K+</div>
                <p class="opacity-90">Parcels Delivered</p>
            </div>
            <div>
                <div class="text-4xl font-bold mb-2">10K+</div>
                <p class="opacity-90">Active Customers</p>
            </div>
            <div>
                <div class="text-4xl font-bold mb-2">99.8%</div>
                <p class="opacity-90">On-Time Delivery</p>
            </div>
        </div>
    </div>
</section>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
