@extends('layouts.app')

@section('title', 'Our Fleet - NRT SA Luxury Van Rentals')
@section('description', 'Explore our premium Mercedes V-Class fleet. V300d and V250d models available for luxury transportation in Centurion, South Africa.')

@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">Our Luxury Fleet</h1>
                <p class="text-xl text-gray-300 font-body">Premium Mercedes V-Class vehicles for the ultimate luxury experience</p>
            </div>
        </div>
    </section>

    <!-- Fleet Overview -->
    <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">Mercedes V-Class</h2>
                    <p class="text-xl text-gray-300 font-body">The epitome of luxury and comfort in transportation</p>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                @forelse($vehicles as $vehicle)
                <div class="glass-card rounded-xl shadow-lg overflow-hidden floating-card" @if($loop->index > 0) style="animation-delay: {{ $loop->index * 0.5 }}s;" @endif>
                    <div class="h-80 bg-gray-200 flex items-center justify-center relative overflow-hidden">
                        @if($vehicle->image_path)
                            <img src="{{ asset('storage/' . $vehicle->image_path) }}" alt="{{ $vehicle->name }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full flex items-center justify-center bg-gray-300">
                                <i class="fas fa-car text-gray-500 text-6xl"></i>
                            </div>
                        @endif
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>
                    <div class="p-8">
                        <h3 class="text-3xl font-bold mb-4 text-white font-display text-glow">{{ $vehicle->name }}</h3>
                        <p class="text-gray-300 mb-6 font-body">{{ $vehicle->description }}</p>

                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div class="glass-card p-3 rounded-lg">
                                <div 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-users text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Seating:</strong> {{ $vehicle->seating_capacity }} passengers</span>
                                </div>
                            </div>
                            <div class="glass-card p-3 rounded-lg">
                                <div 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-suitcase text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Luggage:</strong> {{ $vehicle->luggage_space }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="mb-6">
                            <h4 class="text-lg font-semibold mb-3 text-white font-display">Features:</h4>
                            <ul class="space-y-2 text-gray-300 font-body">
                                @if($vehicle->amenities)
                                    @foreach($vehicle->amenities as $amenity)
                                    <li class="flex items-center">
                                        <div class="icon-bg w-4 h-4 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                            <i class="fas fa-check text-white text-xs"></i>
                                        </div>
                                        {{ $amenity }}
                                    </li>
                                    @endforeach
                                @else
                                    <li class="flex items-center">
                                        <div class="icon-bg w-4 h-4 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                            <i class="fas fa-check text-white text-xs"></i>
                                        </div>
                                        Leather seats with climate control
                                    </li>
                                    <li class="flex items-center">
                                        <div class="icon-bg w-4 h-4 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                            <i class="fas fa-check text-white text-xs"></i>
                                        </div>
                                        Premium sound system
                                    </li>
                                    <li class="flex items-center">
                                        <div class="icon-bg w-4 h-4 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                            <i class="fas fa-check text-white text-xs"></i>
                                        </div>
                                        Advanced safety features
                                    </li>
                                    <li class="flex items-center">
                                        <div class="icon-bg w-4 h-4 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                            <i class="fas fa-check text-white text-xs"></i>
                                        </div>
                                        Professional chauffeur included
                                    </li>
                                @endif
                            </ul>
                        </div>

                        <div class="text-2xl font-bold gold-accent mb-6 font-display text-glow-gold">
                            R{{ number_format($vehicle->daily_rate, 2) }}/day
                        </div>

                        <a href="{{ route('bookings.index') }}" class="btn-primary w-full justify-center shimmer">
                            <i class="fas fa-calendar-check"></i>
                            <span>Book {{ $vehicle->name }}</span>
                        </a>
                    </div>
                </div>
                @empty
                <div class="lg:col-span-2">
                    <div class="glass-card p-8 rounded-xl text-center">
                        <i class="fas fa-car text-gray-400 text-6xl mb-4"></i>
                        <h3 class="text-xl font-semibold text-white mb-2 font-display">No Vehicles Available</h3>
                        <p class="text-gray-300 font-body">Please check back later for available vehicles.</p>
                    </div>
                </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Why Choose Our Fleet -->
    <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 Our Fleet?</h2>
                    <p class="text-xl text-gray-300 font-body">Experience the difference of premium Mercedes vehicles</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="text-center p-6">
                        <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">Safety First</h3>
                        <p class="text-gray-300 font-body">Advanced safety features and regular maintenance</p>
                    </div>
                </div>

                <div class="glass-card p-6 rounded-xl shadow-lg floating-card" style="animation-delay: 0.5s;">
                    <div class="text-center p-6">
                        <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 Quality</h3>
                        <p class="text-gray-300 font-body">Latest Mercedes V-Class models with luxury features</p>
                    </div>
                </div>

                <div class="glass-card p-6 rounded-xl shadow-lg floating-card" style="animation-delay: 1s;">
                    <div class="text-center p-6">
                        <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 Service</h3>
                        <p class="text-gray-300 font-body">Experienced chauffeurs and exceptional customer service</p>
                    </div>
                </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 Book Your Luxury Vehicle?
                </h2>
                <p class="text-xl text-gray-300 mb-8 font-body">
                    Choose your preferred Mercedes V-Class 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
