@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-5xl font-bold mb-6">About E-Jumla</h1>
        <p class="text-xl text-gray-200 max-w-3xl mx-auto">
            Revolutionizing vehicle trading in Kenya through technology, transparency, and trusted partnerships.
        </p>
    </div>
</section>

<!-- Our Story Section -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-6">Our Story</h2>
                <p class="text-gray-600 mb-4">
                    E-Jumla was born from a vision to transform the vehicle importation and trading landscape in Kenya. 
                    We recognized the challenges faced by both dealers and consumers in the traditional vehicle trading process - 
                    from lengthy clearance times to complex financing procedures.
                </p>
                <p class="text-gray-600 mb-4">
                    In partnership with DP World and KCB Bank, we've created a digital ecosystem that simplifies every step 
                    of the vehicle trading journey. Our platform brings together cutting-edge technology with trusted financial 
                    services to create a seamless experience for all stakeholders.
                </p>
                <p class="text-gray-600">
                    Today, E-Jumla stands as Kenya's premier digital marketplace for vehicles and spare parts, 
                    committed to transparency, efficiency, and customer satisfaction.
                </p>
            </div>
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1565688534245-05d6b5be184a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" 
                     alt="Modern car dealership" 
                     class="rounded-lg shadow-2xl">
                <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-red-600 rounded-full flex items-center justify-center">
                    <i class="fas fa-car text-white text-3xl"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision Section -->
<section class="py-16 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-12">
            <div class="text-center">
                <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-bullseye text-red-600 text-3xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h3>
                <p class="text-gray-600">
                    To democratize vehicle trading in Kenya by providing a transparent, efficient, and accessible platform 
                    that connects buyers with verified sellers, while integrating seamless financing solutions and 
                    streamlining the entire importation process.
                </p>
            </div>
            <div class="text-center">
                <div class="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-eye text-red-600 text-3xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Vision</h3>
                <p class="text-gray-600">
                    To become East Africa's leading digital automotive marketplace, setting new standards for transparency, 
                    customer service, and technological innovation in vehicle trading while empowering businesses and 
                    individuals to access quality vehicles easily.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Values Section -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Values</h2>
            <p class="text-gray-600 text-lg">The principles that guide everything we do</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center p-6">
                <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-shield-alt text-red-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Trust & Transparency</h3>
                <p class="text-gray-600">We believe in complete transparency in pricing, vehicle history, and business practices.</p>
            </div>
            <div class="text-center p-6">
                <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-bolt text-red-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Innovation</h3>
                <p class="text-gray-600">We continuously leverage technology to simplify and enhance the vehicle trading experience.</p>
            </div>
            <div class="text-center p-6">
                <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-users text-red-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Customer First</h3>
                <p class="text-gray-600">Our customers' success and satisfaction are at the heart of everything we do.</p>
            </div>
        </div>
    </div>
</section>

<!-- Partners Section -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Our Partners</h2>
            <p class="text-gray-600 text-lg">Working with industry leaders to serve you better</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
            <div class="text-center p-6 bg-white rounded-lg shadow-md">
                <i class="fas fa-globe text-4xl text-red-600 mb-4"></i>
                <h3 class="font-semibold text-gray-900">DP World</h3>
                <p class="text-sm text-gray-600 mt-2">Logistics Partner</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md">
                <i class="fas fa-university text-4xl text-red-600 mb-4"></i>
                <h3 class="font-semibold text-gray-900">KCB Bank</h3>
                <p class="text-sm text-gray-600 mt-2">Financing Partner</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md">
                <i class="fas fa-truck text-4xl text-red-600 mb-4"></i>
                <h3 class="font-semibold text-gray-900">Port Logistics</h3>
                <p class="text-sm text-gray-600 mt-2">Clearance Partner</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md">
                <i class="fas fa-shield-alt text-4xl text-red-600 mb-4"></i>
                <h3 class="font-semibold text-gray-900">KRA</h3>
                <p class="text-sm text-gray-600 mt-2">Tax Authority</p>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Leadership Team</h2>
            <p class="text-gray-600 text-lg">The people driving E-Jumla's vision forward</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="w-32 h-32 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-user text-gray-400 text-4xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">Sammy Alamar Thiongo</h3>
                <p class="text-red-600 font-medium mb-2">Platform Lead & Founder</p>
                <p class="text-gray-600 text-sm">Driving platform strategy and stakeholder engagement</p>
            </div>
            <div class="text-center">
                <div class="w-32 h-32 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-user text-gray-400 text-4xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">Technical Lead</h3>
                <p class="text-red-600 font-medium mb-2">System Architecture</p>
                <p class="text-gray-600 text-sm">Overseeing technical development and API integrations</p>
            </div>
            <div class="text-center">
                <div class="w-32 h-32 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                    <i class="fas fa-user text-gray-400 text-4xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">Operations Manager</h3>
                <p class="text-red-600 font-medium mb-2">Customer Experience</p>
                <p class="text-gray-600 text-sm">Ensuring seamless operations and customer satisfaction</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-16 bg-red-600 text-white">
    <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold mb-4">Ready to Join the E-Jumla Revolution?</h2>
        <p class="text-xl mb-8 text-red-100">Experience the future of vehicle trading in Kenya today.</p>
        <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
            <a href="{{ route('register') }}" class="bg-white text-red-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">
                Get Started Today
            </a>
            <a href="{{ route('vehicles.index') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-red-600 transition duration-300">
                Browse Inventory
            </a>
        </div>
    </div>
</section>
@endsection