@extends('layouts.app')
@section('title', 'About Us - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">About Us</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">About</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8 lg:p-12 mb-8">
                <h2 class="text-3xl font-extrabold text-brand-dark mb-6">Your Trusted Source for <span class="text-brand-red">Auto Parts</span></h2>
                <p class="text-gray-600 leading-relaxed mb-6">AutoPart Online Store has been serving car enthusiasts and professionals since 2020. We are committed to providing the highest quality auto parts and accessories at competitive prices with fast, reliable shipping.</p>
                <p class="text-gray-600 leading-relaxed mb-8">Our extensive catalog covers everything from engine components and body parts to performance accessories and maintenance essentials. Every product in our inventory is sourced from trusted manufacturers and inspected for quality.</p>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
                    @foreach([['10K+', 'Products'], ['50K+', 'Customers'], ['99%', 'Satisfaction'], ['24/7', 'Support']] as $stat)
                    <div class="text-center p-4 bg-gray-50 rounded-lg border border-gray-100">
                        <span class="text-3xl font-extrabold text-brand-red">{{ $stat[0] }}</span>
                        <span class="block text-sm text-gray-500 font-bold uppercase tracking-wider mt-1">{{ $stat[1] }}</span>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach([['shield-check','Quality Guarantee','All our parts meet or exceed OEM specifications with comprehensive warranty coverage.'],['truck','Fast Shipping','Free shipping on orders over $50 with 2-4 business day delivery nationwide.'],['headphones','Expert Support','Our team of automotive experts is available 24/7 to help you find the right parts.']] as $feat)
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8 text-center hover:shadow-lg hover:border-brand-red/30 transition-all">
                    <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6 text-brand-red"><i data-lucide="{{ $feat[0] }}" class="w-8 h-8"></i></div>
                    <h3 class="font-extrabold text-lg text-brand-dark mb-3">{{ $feat[1] }}</h3>
                    <p class="text-sm text-gray-600 leading-relaxed">{{ $feat[2] }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection