@extends('layouts.app')

@section('title', 'About Us - NRT SA Luxury Van Rentals')
@section('description', 'Learn about NRT SA, your trusted luxury van rental service in Centurion. Discover our commitment to safety, excellence, and premium Mercedes V-Class transportation.')

@section('content')
    <!-- Hero Section -->
    <section class="py-16 luxury-gradient">
        <div class="max-w-4xl mx-auto text-center px-4">
            <div class="glass-card p-8 rounded-2xl floating-card">
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-6 font-display text-glow">About NRT SA</h1>
                <p class="text-xl text-gray-300 font-body">Your trusted partner in luxury transportation</p>
            </div>
        </div>
    </section>

    <!-- Company Introduction -->
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <div class="glass-card p-6 rounded-xl mb-6">
                        <h2 class="text-3xl font-bold text-white mb-6 font-display text-glow">Our Story</h2>
                        <p class="text-lg text-gray-300 mb-6 font-body">
                            NRT SA is a premier luxury van rental service based in Centurion, South Africa. We specialize in providing premium Mercedes V-Class vehicles for discerning clients who demand excellence in transportation.
                        </p>
                        <p class="text-lg text-gray-300 mb-8 font-body">
                            Our commitment to excellence extends beyond just providing luxury vehicles. We offer a complete transportation experience with professional chauffeurs, flexible scheduling, and personalized service that exceeds expectations.
                        </p>
                    </div>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="{{ route('fleet') }}" class="btn-primary shimmer">
                            <i class="fas fa-car"></i>
                            <span>View Our Fleet</span>
                        </a>
                        <a href="{{ route('contact') }}" class="btn-secondary shimmer">
                            <i class="fas fa-envelope"></i>
                            <span>Contact Us</span>
                        </a>
                    </div>
                </div>
                <div class="text-center">
                    <div class="glass-card h-96 rounded-xl flex items-center justify-center floating-card">
                        <i class="fas fa-car text-gray-400 text-6xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Safety Commitment -->
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="text-center mb-12">
                <div class="glass-card p-6 rounded-xl mb-6">
                    <h2 class="text-3xl md:text-4xl font-bold text-white mb-4 font-display text-glow">Our Commitment to Safety</h2>
                    <p class="text-xl text-gray-300 font-body">Your safety and comfort are our top priorities</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="glass-card p-6 rounded-xl shadow-lg floating-card">
                    <div class="icon-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-shield-alt text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Regular Maintenance</h3>
                    <p class="text-gray-300 font-body">All vehicles undergo rigorous maintenance schedules to ensure optimal performance and safety.</p>
                </div>

                <div class="glass-card p-6 rounded-xl shadow-lg floating-card" style="animation-delay: 0.5s;">
                    <div class="icon-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-user-tie text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Professional Drivers</h3>
                    <p class="text-gray-300 font-body">Experienced, licensed, and background-checked chauffeurs for your peace of mind.</p>
                </div>

                <div class="glass-card p-6 rounded-xl shadow-lg floating-card" style="animation-delay: 1s;">
                    <div class="icon-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-shield-alt text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Fully Insured</h3>
                    <p class="text-gray-300 font-body">Comprehensive insurance coverage for all rentals and passengers.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Area -->
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="text-center lg:text-left">
                    <div class="glass-card p-6 rounded-xl mb-6">
                        <h2 class="text-3xl font-bold text-white mb-6 font-display text-glow">Service Area</h2>
                        <p class="text-lg text-gray-300 mb-6 font-body">
                            Based in Centurion, we provide luxury transportation services throughout the greater Pretoria area and beyond. Our service area includes:
                        </p>
                        <ul class="space-y-3 text-gray-300 mb-8 font-body">
                            <li class="flex items-center">
                                <div class="icon-bg w-5 h-5 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-map-marker-alt text-white text-xs"></i>
                                </div>
                                Centurion and surrounding areas
                            </li>
                            <li class="flex items-center">
                                <div class="icon-bg w-5 h-5 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-city text-white text-xs"></i>
                                </div>
                                Pretoria and Johannesburg
                            </li>
                            <li class="flex items-center">
                                <div class="icon-bg w-5 h-5 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-plane text-white text-xs"></i>
                                </div>
                                Airport transfers (OR Tambo, Lanseria)
                            </li>
                            <li class="flex items-center">
                                <div class="icon-bg w-5 h-5 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                    <i class="fas fa-route text-white text-xs"></i>
                                </div>
                                Long-distance travel throughout South Africa
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="text-center">
                    <div class="glass-card h-96 rounded-xl flex items-center justify-center floating-card">
                        <i class="fas fa-map text-gray-400 text-6xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us -->
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="text-center mb-12">
                <div class="glass-card p-6 rounded-xl mb-6">
                    <h2 class="text-3xl md:text-4xl font-bold text-white mb-4 font-display text-glow">Why Choose NRT SA?</h2>
                    <p class="text-xl text-gray-300 font-body">Experience the difference of premium luxury transportation</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="glass-card p-6 rounded-xl floating-card">
                    <div class="icon-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-clock text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">24/7 Availability</h3>
                    <p class="text-gray-300 font-body">Always open for your convenience</p>
                </div>

                <div class="glass-card p-6 rounded-xl floating-card" style="animation-delay: 0.5s;">
                    <div class="icon-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-star text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Premium Fleet</h3>
                    <p class="text-gray-300 font-body">Latest Mercedes V-Class vehicles</p>
                </div>

                <div class="glass-card p-6 rounded-xl floating-card" style="animation-delay: 1s;">
                    <div class="icon-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-handshake text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Personalized Service</h3>
                    <p class="text-gray-300 font-body">Tailored to your specific needs</p>
                </div>

                <div class="glass-card p-6 rounded-xl floating-card" style="animation-delay: 1.5s;">
                    <div class="icon-bg w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-medal text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Proven Excellence</h3>
                    <p class="text-gray-300 font-body">Trusted by satisfied clients</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 luxury-gradient">
        <div class="max-w-4xl mx-auto text-center px-4">
            <div class="glass-card p-8 rounded-2xl floating-card">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-6 font-display text-glow">
                    Ready to Experience Luxury?
                </h2>
                <p class="text-xl text-gray-300 mb-8 font-body">
                    Book your Mercedes V-Class today and enjoy premium transportation
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('bookings.index') }}" class="btn-primary shimmer">
                        <i class="fas fa-calendar-check"></i>
                        <span>Book Now</span>
                    </a>
                    <a href="{{ route('contact') }}" class="btn-secondary shimmer">
                        <i class="fas fa-envelope"></i>
                        <span>Contact Us</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection