<?php $__env->startSection('title', 'Our Services - NRT SA Luxury Van Rentals'); ?>
<?php $__env->startSection('description', 'Comprehensive luxury transportation services including event hire, chauffeur service, multi-day packages, and airport transfers in Centurion, South Africa.'); ?>

<?php $__env->startSection('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 Services</h1>
                <p class="text-xl text-gray-300 font-body">Comprehensive luxury transportation solutions for all your needs</p>
            </div>
        </div>
    </section>

    <!-- Services 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">Luxury Transportation Solutions</h2>
                    <p class="text-xl text-gray-300 font-body">From events to corporate travel, we have you covered</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 shadow-lg hover:shadow-2xl transition-all duration-300 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-calendar-alt text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Event Hire</h3>
                    <p class="text-gray-300 font-body">Perfect for weddings, corporate events, and special celebrations</p>
                </div>

                <div class="glass-card p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 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">Chauffeur Service</h3>
                    <p class="text-gray-300 font-body">Professional drivers included with all rentals</p>
                </div>

                <div class="glass-card p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 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-calendar-week text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Multi-day Packages</h3>
                    <p class="text-gray-300 font-body">Extended rental options for longer trips</p>
                </div>

                <div class="glass-card p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 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-plane text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-white font-display text-glow">Airport Transfers</h3>
                    <p class="text-gray-300 font-body">Reliable transportation to and from airports</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Detailed Services -->
    <section class="py-16">
        <div class="max-w-7xl mx-auto px-4">
            <!-- Event Hire -->
            <div class="mb-16">
                <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">Event Hire</h2>
                            <p class="text-lg text-gray-300 mb-6 font-body">
                                Make your special occasions unforgettable with our luxury Mercedes V-Class vehicles. Perfect for weddings, corporate events, and celebrations.
                            </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-heart text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Weddings:</strong> Elegant transportation for your big day</span>
                                </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-briefcase text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Corporate Events:</strong> Professional transportation for business</span>
                                </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-birthday-cake text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Celebrations:</strong> Special occasions and parties</span>
                                </li>
                            </ul>
                        </div>
                        <a href="<?php echo e(route('bookings.index')); ?>" class="btn-primary shimmer">
                            <i class="fas fa-calendar-check"></i>
                            <span>Book Event Hire</span>
                        </a>
                    </div>
                    <div class="text-center">
                        <div class="glass-card h-96 rounded-xl flex items-center justify-center floating-card">
                            <i class="fas fa-calendar-alt text-gray-400 text-6xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Chauffeur Service -->
            <div class="mb-16">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="text-center lg:text-left order-2 lg:order-1">
                        <div class="glass-card h-96 rounded-xl flex items-center justify-center floating-card">
                            <i class="fas fa-user-tie text-gray-400 text-6xl"></i>
                        </div>
                    </div>
                    <div class="order-1 lg:order-2">
                        <div class="glass-card p-6 rounded-xl mb-6">
                            <h2 class="text-3xl font-bold text-white mb-6 font-display text-glow">Chauffeur Service</h2>
                            <p class="text-lg text-gray-300 mb-6 font-body">
                                All our rentals include professional chauffeur service. Our experienced drivers ensure safe, comfortable, and punctual transportation.
                            </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-id-card text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Licensed Drivers:</strong> All chauffeurs are properly licensed</span>
                                </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-clock text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Punctual Service:</strong> Always on time for your appointments</span>
                                </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-star text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Professional:</strong> Courteous and well-trained staff</span>
                                </li>
                            </ul>
                        </div>
                        <a href="<?php echo e(route('bookings.index')); ?>" class="btn-primary shimmer">
                            <i class="fas fa-calendar-check"></i>
                            <span>Book Chauffeur Service</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Multi-day Packages -->
            <div class="mb-16">
                <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">Multi-day Packages</h2>
                            <p class="text-lg text-gray-300 mb-6 font-body">
                                Extended rental options for longer trips, business travel, or special occasions requiring multiple days of transportation.
                            </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-percentage text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Discounted Rates:</strong> Better value for longer rentals</span>
                                </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-calendar text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Flexible Duration:</strong> Choose from 2 days to weeks</span>
                                </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>
                                    <span class="font-body"><strong>Long Distance:</strong> Perfect for road trips and tours</span>
                                </li>
                            </ul>
                        </div>
                        <a href="<?php echo e(route('bookings.index')); ?>" class="btn-primary shimmer">
                            <i class="fas fa-calendar-check"></i>
                            <span>Book Multi-day Package</span>
                        </a>
                    </div>
                    <div class="text-center">
                        <div class="glass-card h-96 rounded-xl flex items-center justify-center floating-card">
                            <i class="fas fa-calendar-week text-gray-400 text-6xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Airport Transfers -->
            <div class="mb-16">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="text-center lg:text-left order-2 lg:order-1">
                        <div class="glass-card h-96 rounded-xl flex items-center justify-center floating-card">
                            <i class="fas fa-plane text-gray-400 text-6xl"></i>
                        </div>
                    </div>
                    <div class="order-1 lg:order-2">
                        <div class="glass-card p-6 rounded-xl mb-6">
                            <h2 class="text-3xl font-bold text-white mb-6 font-display text-glow">Airport Transfers</h2>
                            <p class="text-lg text-gray-300 mb-6 font-body">
                                Reliable and comfortable transportation to and from major airports including OR Tambo International Airport and Lanseria Airport.
                            </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-clock text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Flight Monitoring:</strong> We track your flight for timely pickup</span>
                                </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-suitcase text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Luggage Space:</strong> Ample room for all your bags</span>
                                </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-map-marker-alt text-white text-xs"></i>
                                    </div>
                                    <span class="font-body"><strong>Door-to-Door:</strong> Direct service to your destination</span>
                                </li>
                            </ul>
                        </div>
                        <a href="<?php echo e(route('bookings.index')); ?>" class="btn-primary shimmer">
                            <i class="fas fa-calendar-check"></i>
                            <span>Book Airport Transfer</span>
                        </a>
                    </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 Service?
                </h2>
                <p class="text-xl text-gray-300 mb-8 font-body">
                    Choose from our range of luxury transportation services
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="<?php echo e(route('bookings.index')); ?>" class="btn-primary shimmer">
                        <i class="fas fa-calendar-check"></i>
                        <span>Book Now</span>
                    </a>
                    <a href="<?php echo e(route('contact')); ?>" class="btn-secondary shimmer">
                        <i class="fas fa-envelope"></i>
                        <span>Contact Us</span>
                    </a>
                </div>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\nrt\resources\views/services.blade.php ENDPATH**/ ?>