@extends('layouts.frontend')

@section('title', 'About Us')

@section('content')
    <!-- Header Section -->
    <div class="bg-indigo-700 py-16 sm:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">About Us</h1>
            <p class="mt-6 max-w-2xl mx-auto text-xl text-indigo-100">
                Building bridges across the nation with reliable, efficient, and secure cargo services.
            </p>
        </div>
    </div>

    <!-- Company Overview -->
    <div class="py-16 bg-white overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
                <div class="relative">
                    <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">
                        Your Trusted Logistics Partner
                    </h3>
                    <p class="mt-3 text-lg text-gray-500">
                        {{ $settings->company_name ?? 'CargoFlow' }} has been a leader in the logistics industry, providing top-notch domestic and international cargo services. We pride ourselves on our commitment to timely delivery and the safety of your goods.
                    </p>

                    <div class="mt-10 space-y-10">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                                    <i class="fas fa-globe-asia text-xl"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <dt class="text-lg leading-6 font-medium text-gray-900">Nationwide Coverage</dt>
                                <dd class="mt-2 text-base text-gray-500">
                                    From Karachi to Khyber, we cover every corner of Pakistan with our extensive network.
                                </dd>
                            </div>
                        </div>

                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                                    <i class="fas fa-truck-loading text-xl"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <dt class="text-lg leading-6 font-medium text-gray-900">Modern Fleet</dt>
                                <dd class="mt-2 text-base text-gray-500">
                                    Our fleet of modern container trucks ensures that your heavy cargo is transported safely and efficiently.
                                </dd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-10 lg:mt-0 relative">
                    <div class="relative rounded-2xl shadow-xl overflow-hidden bg-gray-100 h-96">
                         <!-- Placeholder for Office/Team Image -->
                         <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1200" alt="Office Environment">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="bg-indigo-800">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
                    Trusted by businesses across Pakistan
                </h2>
                <p class="mt-3 text-xl text-indigo-200 sm:mt-4">
                    Our numbers speak for themselves.
                </p>
            </div>
            <dl class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-3 sm:gap-8">
                <div class="flex flex-col">
                    <dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">Shipments Delivered</dt>
                    <dd class="order-1 text-5xl font-extrabold text-white">10k+</dd>
                </div>
                <div class="flex flex-col mt-10 sm:mt-0">
                    <dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">Cities Covered</dt>
                    <dd class="order-1 text-5xl font-extrabold text-white">50+</dd>
                </div>
                <div class="flex flex-col mt-10 sm:mt-0">
                    <dt class="order-2 mt-2 text-lg leading-6 font-medium text-indigo-200">Happy Clients</dt>
                    <dd class="order-1 text-5xl font-extrabold text-white">500+</dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="bg-white">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
            <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                <span class="block">Ready to ship?</span>
                <span class="block text-indigo-600">Start your shipment today.</span>
            </h2>
            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
                <div class="inline-flex rounded-md shadow">
                    <a href="{{ route('home') }}#calculator" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                        Get a Quote
                    </a>
                </div>
                <div class="ml-3 inline-flex rounded-md shadow">
                    <a href="{{ route('home') }}#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
                        Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection