@extends('layouts.app')

@section('head')
    
@endsection

@section('content')
    <div class="min-h-screen bg-gray-50">
        <!-- Hero Section -->
        <div class="relative bg-blue-600 text-white py-20">
            <div class="absolute inset-0 bg-black opacity-50"></div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h1 class="text-5xl font-bold mb-4">About RBGarage</h1>
                <p class="text-2xl">Your Trusted Automotive Partner Since 2021</p>
            </div>
        </div>

        <!-- Story Section -->
        <div class="py-16">
            <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">
                           RB Garage merupakan sebuah usaha perorangan yang berdiri sejak tahun 2021    dan berlokasi di Jl. Cipinang Besar Selatan RT 10 RW 10 No. 53A. RB Garage bergerak di bidang jasa servis kendaraan bermotor, khususnya sepeda motor. Layanan yang disediakan meliputi servis umum (general service) dan penggantian oli.
                        </p>
                        <p class="text-gray-600 mb-4">
                            Saat ini, RBGarage menggabungkan keahlian otomotif tradisional dengan teknologi modern untuk menghadirkan layanan yang efisien, mudah diakses, dan terpercaya kepada ribuan pelanggan setiap bulannya.
                        </p>
                        <p class="text-gray-600">
                            TDengan sistem pemesanan online, pelanggan dapat dengan mudah memilih layanan, menjadwalkan servis, dan memantau status kendaraan mereka tanpa harus datang langsung ke bengkel.
                        </p>
                    </div>
                    <div class="relative h-96 rounded-lg overflow-hidden shadow-xl">
                        <img src="https://th.bing.com/th/id/OIP.dNdiu1FtUckAfHsD9IXo3AHaE8?w=256&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3"
                            alt="BengkelOnline Workshop" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </div>

        {{-- <!-- Values Section -->
        <div class="bg-white py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Our Core Values</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Quality Service</h3>
                        <p class="text-gray-600">We use only genuine parts and employ certified technicians to ensure the
                            highest quality of service.</p>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Transparency</h3>
                        <p class="text-gray-600">Clear pricing, detailed explanations, and no hidden charges. You know
                            exactly what you're paying for.</p>
                    </div>
                    <div class="text-center">
                        <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-10 h-10 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
                                </path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">Customer First</h3>
                        <p class="text-gray-600">Your satisfaction is our priority. We go above and beyond to exceed your
                            expectations.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Section -->
        <div class="bg-gray-900 text-white py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-3xl font-bold text-center mb-12">BengkelOnline in Numbers</h2>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div class="text-center">
                        <div class="text-5xl font-bold text-blue-400 mb-2">15+</div>
                        <p class="text-xl">Years of Service</p>
                    </div>
                    <div class="text-center">
                        <div class="text-5xl font-bold text-green-400 mb-2">50K+</div>
                        <p class="text-xl">Happy Customers</p>
                    </div>
                    <div class="text-center">
                        <div class="text-5xl font-bold text-yellow-400 mb-2">25</div>
                        <p class="text-xl">Service Centers</p>
                    </div>
                    <div class="text-center">
                        <div class="text-5xl font-bold text-purple-400 mb-2">100+</div>
                        <p class="text-xl">Expert Technicians</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Team Section -->
        <div class="py-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Meet Our Leadership Team</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <img src="https://ui-avatars.com/api/?name=Budi+Santoso&background=0066CC&color=fff&size=200"
                            alt="Budi Santoso" class="w-32 h-32 rounded-full mx-auto mb-4">
                        <h3 class="text-xl font-semibold">Budi Santoso</h3>
                        <p class="text-gray-600">Founder & CEO</p>
                        <p class="text-sm text-gray-500 mt-2">20+ years in automotive industry</p>
                    </div>
                    <div class="text-center">
                        <img src="https://ui-avatars.com/api/?name=Sarah+Wijaya&background=0066CC&color=fff&size=200"
                            alt="Sarah Wijaya" class="w-32 h-32 rounded-full mx-auto mb-4">
                        <h3 class="text-xl font-semibold">Sarah Wijaya</h3>
                        <p class="text-gray-600">Chief Operations Officer</p>
                        <p class="text-sm text-gray-500 mt-2">Expert in service optimization</p>
                    </div>
                    <div class="text-center">
                        <img src="https://ui-avatars.com/api/?name=Ahmad+Rahman&background=0066CC&color=fff&size=200"
                            alt="Ahmad Rahman" class="w-32 h-32 rounded-full mx-auto mb-4">
                        <h3 class="text-xl font-semibold">Ahmad Rahman</h3>
                        <p class="text-gray-600">Head of Technology</p>
                        <p class="text-sm text-gray-500 mt-2">Leading digital transformation</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- CTA Section -->
        <div class="bg-blue-600 text-white py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl font-bold mb-4">Experience the BengkelOnline Difference</h2>
                <p class="text-xl mb-8">Join thousands of satisfied customers who trust us with their vehicles</p>
                <a href="{{ route('services') }}"
                    class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-lg text-lg transition duration-300 inline-block">
                    Explore Our Services
                </a>
            </div>
        </div>
    </div> --}}
@endsection