<?php $__env->startSection('title', 'NRT SA - Luxury Van Rentals in Centurion'); ?>
<?php $__env->startSection('description', 'Premium Mercedes V-Class van rentals for events, corporate travel, and special occasions in Centurion, South Africa.'); ?>

<?php $__env->startSection('content'); ?>
    <!-- Hero Section -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 bg-black bg-opacity-40 z-10"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div>
        <div class="relative z-20 text-center text-white px-4">
            <div class="glass-card p-8 rounded-2xl mb-8 floating-card">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 font-display text-glow">
                    Luxury Van Rentals for
                    <span class="gold-accent text-glow-gold">Every Occasion</span>
                </h1>
                <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-body">
                    Premium Mercedes V-Class vehicles for corporate events, weddings, and special occasions in Centurion, South Africa
                </p>
            </div>
            <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="https://wa.me/27645343176" target="_blank" class="btn-success shimmer">
                    <i class="fab fa-whatsapp"></i>
                    <span>WhatsApp Us</span>
                </a>
                <a href="tel:+27645343176" class="btn-info shimmer">
                    <i class="fas fa-phone"></i>
                    <span>Call Now</span>
                </a>
            </div>
        </div>
        <!-- Background image -->
        <img src="<?php echo e(asset('images/hero/beach.jpg')); ?>" alt="NRT SA Luxury Van" class="absolute inset-0 w-full h-full object-cover z-0">
    </section>

    <!-- Trust Message -->
    <section class="glass-section text-white py-8">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <div class="glass-card p-6 rounded-xl">
                <h2 class="text-2xl font-bold gold-accent font-display text-glow-gold">Always Open – Flexible Scheduling</h2>
                <p class="text-gray-300 mt-2 font-body">Available 24/7 for your convenience</p>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <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 Services</h2>
                    <p class="text-xl text-gray-300 max-w-3xl mx-auto font-body">
                        Comprehensive luxury transportation solutions for all your needs
                    </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">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>

    <!-- Fleet Showcase -->
    <section class="py-16 luxury-gradient">
        <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 Luxury Fleet</h2>
                    <p class="text-xl text-gray-300 max-w-3xl mx-auto font-body">
                        Premium Mercedes V-Class vehicles for the ultimate luxury experience
                    </p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <?php $__empty_1 = true; $__currentLoopData = $vehicles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vehicle): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="glass-card rounded-xl shadow-lg overflow-hidden floating-card">
                    <div class="h-64 bg-gray-200 flex items-center justify-center relative overflow-hidden">
                        <?php if($vehicle->image_path): ?>
                            <img src="<?php echo e(asset('storage/' . $vehicle->image_path)); ?>" alt="<?php echo e($vehicle->name); ?>" class="w-full h-full object-cover">
                        <?php 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>
                        <?php endif; ?>
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-2xl font-bold mb-2 text-white font-display text-glow"><?php echo e($vehicle->name); ?></h3>
                        <p class="text-gray-300 mb-4 font-body"><?php echo e($vehicle->description); ?></p>
                        <div class="grid grid-cols-2 gap-4 mb-4">
                            <div class="glass-card p-3 rounded-lg">
                                <span class="text-sm text-gray-400 font-body">Seating:</span>
                                <p class="font-semibold text-white font-body"><?php echo e($vehicle->seating_capacity); ?> passengers</p>
                            </div>
                            <div class="glass-card p-3 rounded-lg">
                                <span class="text-sm text-gray-400 font-body">Luggage:</span>
                                <p class="font-semibold text-white font-body"><?php echo e($vehicle->luggage_space); ?></p>
                            </div>
                        </div>
                        <?php if($vehicle->daily_rate): ?>
                        <div class="text-2xl font-bold gold-accent mb-4 font-display text-glow-gold">
                            R<?php echo e(number_format($vehicle->daily_rate, 2)); ?>/day
                        </div>
                        <?php endif; ?>
                        <a href="<?php echo e(route('bookings.index')); ?>" class="btn-primary w-full justify-center shimmer">
                            <i class="fas fa-calendar-check"></i>
                            <span>Book This Vehicle</span>
                        </a>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="md: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>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <?php if($featuredTestimonials->count() > 0): ?>
    <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">What Our Clients Say</h2>
                    <p class="text-xl text-gray-300 font-body">Don't just take our word for it</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php $__currentLoopData = $featuredTestimonials; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $testimonial): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="glass-card p-6 rounded-xl floating-card">
                    <div class="flex items-center mb-4">
                        <?php for($i = 1; $i <= 5; $i++): ?>
                            <i class="fas fa-star <?php echo e($i <= $testimonial->rating ? 'text-yellow-400' : 'text-gray-600'); ?>"></i>
                        <?php endfor; ?>
                    </div>
                    <p class="text-gray-300 mb-4 font-body">"<?php echo e($testimonial->testimonial); ?>"</p>
                    <div class="flex items-center">
                        <div class="icon-bg w-12 h-12 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-user text-gray-300"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-white font-display"><?php echo e($testimonial->customer_name); ?></p>
                            <?php if($testimonial->event_type): ?>
                            <p class="text-sm text-gray-400 font-body"><?php echo e($testimonial->event_type); ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- 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 for your next event
                </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/home.blade.php ENDPATH**/ ?>