@extends('layouts.app')

@section('title', __('general.company_name') . ' - ' . __('general.company_tagline'))

@section('content')
    <!-- Enhanced Hero Section -->
    <section class="hero-section">
        <div class="hero-bg"></div>
        <div class="hero-particles"></div>
        <div class="hero-overlay"></div>

        <div class="container text-center">
            <div class="hero-content">
                <!-- Animated Logo/Icon -->
                <div class="hero-icon" data-aos="zoom-in" data-aos-duration="1000">
                    <i class="fas fa-crown"
                        style="font-size: 4rem; color: var(--primary-gold); margin-bottom: 2rem; filter: drop-shadow(0 8px 16px rgba(255, 215, 0, 0.4)); animation: float 3s ease-in-out infinite;"></i>
                </div>

                <div class="glass-morphism hero-glass"
                    style="padding: 4rem; max-width: 900px; margin: 0 auto; position: relative; overflow: hidden;">
                    <!-- Animated Background Elements -->
                    <div class="hero-decoration"></div>

                    <h1 class="hero-title" data-aos="fade-up" data-aos-delay="200"
                        style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1rem; color: var(--primary-gold); font-weight: 700; text-shadow: 0 4px 20px rgba(255, 215, 0, 0.3); position: relative; z-index: 2;">
                        {{ __('general.company_name') }}
                    </h1>

                    <div class="hero-tagline" data-aos="fade-up" data-aos-delay="400">
                        <h2
                            style="font-size: 1.8rem; margin-bottom: 2rem; font-weight: 300; background: linear-gradient(45deg, #FFD700, #FFA500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                            {{ __('general.company_tagline') }}
                        </h2>
                    </div>

                    <p class="hero-description" data-aos="fade-up" data-aos-delay="600"
                        style="font-size: 1.2rem; margin-bottom: 3rem; line-height: 1.8; opacity: 0.95; max-width: 700px; margin-left: auto; margin-right: auto;">
                        {{ __('general.company_description') }}
                    </p>

                    <!-- Enhanced CTA Buttons -->
                    <div class="hero-cta" data-aos="fade-up" data-aos-delay="800">
                        <a href="{{ route('vehicles.index') }}" class="btn-primary hero-btn-primary"
                            style="margin: 0 1rem 1rem; font-size: 1.2rem; padding: 18px 45px; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;">
                            <span class="btn-text">{{ __('general.book_now') }}</span>
                            <i class="fas fa-arrow-{{ current_locale() === 'ar' ? 'left' : 'right' }}"
                                style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 10px; transition: transform 0.3s ease;"></i>
                        </a>
                        <a href="#vehicles" class="btn-secondary hero-btn-secondary"
                            style="margin: 0 1rem 1rem; font-size: 1.2rem; padding: 18px 45px; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;">
                            <span class="btn-text">{{ __('general.learn_more') }}</span>
                            <i class="fas fa-chevron-down"
                                style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 10px; transition: transform 0.3s ease;"></i>
                        </a>
                    </div>

                    <!-- Trust Indicators -->
                    <div class="hero-trust" data-aos="fade-up" data-aos-delay="1000"
                        style="margin-top: 3rem; display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; opacity: 0.8;">
                        <div class="trust-item" style="display: flex; align-items: center; gap: 0.5rem;">
                            <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                            <span
                                style="font-size: 0.9rem;">{{ current_locale() === 'ar' ? '5 نجوم' : '5 Star Rating' }}</span>
                        </div>
                        <div class="trust-item" style="display: flex; align-items: center; gap: 0.5rem;">
                            <i class="fas fa-shield-alt" style="color: var(--primary-gold);"></i>
                            <span
                                style="font-size: 0.9rem;">{{ current_locale() === 'ar' ? 'تأمين شامل' : 'Full Insurance' }}</span>
                        </div>
                        <div class="trust-item" style="display: flex; align-items: center; gap: 0.5rem;">
                            <i class="fas fa-clock" style="color: var(--primary-gold);"></i>
                            <span
                                style="font-size: 0.9rem;">{{ current_locale() === 'ar' ? '24/7 دعم' : '24/7 Support' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scroll Indicator -->
        <div class="scroll-indicator" data-aos="fade-in" data-aos-delay="1200">
            <div class="scroll-arrow">
                <i class="fas fa-chevron-down"></i>
            </div>
            <span
                style="font-size: 0.9rem; margin-top: 0.5rem;">{{ current_locale() === 'ar' ? 'اكتشف المزيد' : 'Discover More' }}</span>
        </div>
    </section>

    <!-- Premium Fleet Showcase Section -->
    <section id="vehicles" class="premium-fleet-section" style="padding: 6rem 0; position: relative; overflow: hidden;">
        <!-- Background Elements -->
        <div class="fleet-bg-elements">
            <div class="floating-element"
                style="position: absolute; top: 10%; left: 5%; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255, 215, 0, 0.1), transparent); border-radius: 50%; animation: float 6s ease-in-out infinite;">
            </div>
            <div class="floating-element"
                style="position: absolute; top: 60%; right: 8%; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255, 165, 0, 0.08), transparent); border-radius: 50%; animation: float 8s ease-in-out infinite reverse;">
            </div>
        </div>

        <div class="container">
            <!-- Section Header -->
            <div class="fleet-header" style="text-align: center; margin-bottom: 4rem; position: relative;">
                <div class="section-badge"
                    style="display: inline-block; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.5rem 1.5rem; border-radius: 25px; font-size: 0.9rem; font-weight: 600; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 1px;">
                    @if(current_locale() === 'ar')
                        أسطول مميز
                    @else
                        Premium Fleet
                    @endif
                </div>
                <h2 class="fleet-title"
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: clamp(2rem, 4vw, 3.2rem); color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; text-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                    @if(current_locale() === 'ar')
                        مجموعة السيارات الفاخرة
                    @else
                        Luxury Vehicle Collection
                    @endif
                </h2>
                <p class="fleet-subtitle"
                    style="font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); max-width: 700px; margin: 0 auto; line-height: 1.7; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                    @if(current_locale() === 'ar')
                        اكتشف مجموعتنا الحصرية من أفخم السيارات في العالم، مختارة بعناية فائقة لتوفر لك تجربة قيادة لا تُنسى
                    @else
                        Discover our exclusive collection of the world's finest vehicles, meticulously selected to provide you
                        with an unforgettable driving experience
                    @endif
                </p>
            </div>

            <!-- Interactive Filters -->
            <div class="fleet-filters"
                style="display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap;">
                <button class="filter-btn active" data-filter="all"
                    style="background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); border: none; padding: 0.75rem 2rem; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                    @if(current_locale() === 'ar')
                        الكل
                    @else
                        All
                    @endif
                </button>
                <button class="filter-btn" data-filter="luxury"
                    style="background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.75rem 2rem; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                    @if(current_locale() === 'ar')
                        سيدان فاخرة
                    @else
                        Luxury Sedan
                    @endif
                </button>
                <button class="filter-btn" data-filter="suv"
                    style="background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.75rem 2rem; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                    @if(current_locale() === 'ar')
                        دفع رباعي
                    @else
                        SUV
                    @endif
                </button>
                <button class="filter-btn" data-filter="sports"
                    style="background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.75rem 2rem; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                    @if(current_locale() === 'ar')
                        رياضية
                    @else
                        Sports
                    @endif
                </button>
            </div>

            <!-- Premium Vehicle Carousel -->
            <div class="premium-carousel-container" style="position: relative; margin-bottom: 3rem; overflow: hidden;">
                <div class="premium-carousel" id="vehicleCarousel"
                    style="display: flex; gap: 1.5rem; overflow-x: hidden; scroll-behavior: smooth; padding: 1rem 0.5rem; scrollbar-width: none; -ms-overflow-style: none; transition: transform 0.5s ease;">

                    <!-- Vehicle Card 1: Mercedes S-Class -->
                    <div class="premium-vehicle-card luxury" data-category="luxury"
                        style="min-width: 320px; max-width: 320px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 215, 0, 0.05)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; padding: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; flex-shrink: 0; box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);">
                        <!-- Vehicle Image -->
                        <div class="vehicle-image-container"
                            style="height: 200px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 50%, rgba(26, 26, 46, 0.8) 100%); position: relative; overflow: hidden;">
                            <div class="vehicle-placeholder"
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                <i class="fas fa-car"
                                    style="font-size: 3.5rem; color: var(--primary-gold); margin-bottom: 0.5rem; filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); animation: float 3s ease-in-out infinite;"></i>
                                <div style="color: var(--primary-gold); font-size: 0.9rem; opacity: 0.9; font-weight: 600;">
                                    Mercedes S-Class
                                </div>
                            </div>
                            <!-- Premium Badge -->
                            <div class="premium-badge"
                                style="position: absolute; top: 1rem; right: 1rem; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.4rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);">
                                @if(current_locale() === 'ar')
                                    مميز
                                @else
                                    Premium
                                @endif
                            </div>
                            <!-- Quick Actions -->
                            <div class="quick-actions"
                                style="position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.5rem; opacity: 0; transition: all 0.3s ease;">
                                <button class="quick-action-btn" onclick="toggleFavorite(this)"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="quick-action-btn" onclick="quickView('mercedes-s-class')"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Vehicle Info -->
                        <div class="vehicle-info" style="padding: 1.5rem;">
                            <div class="vehicle-header" style="margin-bottom: 1rem;">
                                <h3 class="vehicle-name"
                                    style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    Mercedes S-Class</h3>
                                <div class="vehicle-category"
                                    style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">
                                    @if(current_locale() === 'ar')
                                        سيدان فاخرة
                                    @else
                                        Luxury Sedan
                                    @endif
                                </div>
                            </div>

                            <!-- Vehicle Specs -->
                            <div class="vehicle-specs"
                                style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-users"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">5
                                        {{ current_locale() === 'ar' ? 'مقاعد' : 'Seats' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-cog"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'أوتوماتيك' : 'Auto' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-gas-pump"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'بنزين' : 'Petrol' }}
                                    </div>
                                </div>
                            </div>

                            <!-- Pricing & Action -->
                            <div class="vehicle-footer"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="pricing">
                                    <div class="price"
                                        style="color: var(--primary-gold); font-size: 1.4rem; font-weight: 800; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        $150</div>
                                    <div class="price-period" style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem;">
                                        {{ current_locale() === 'ar' ? '/ في اليوم' : '/ per day' }}
                                    </div>
                                </div>
                                <a href="{{ route('vehicles.index') }}" class="premium-cta-btn"
                                    style="background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.6rem 1.2rem; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.9rem;">
                                    {{ current_locale() === 'ar' ? 'احجز الآن' : 'Book Now' }}
                                </a>
                            </div>
                        </div>

                        <!-- Hover Overlay -->
                        <div class="hover-overlay"
                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                        </div>
                    </div>

                    <!-- Vehicle Card 2: Range Rover Sport -->
                    <div class="premium-vehicle-card suv" data-category="suv"
                        style="min-width: 320px; max-width: 320px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 215, 0, 0.05)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; padding: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; flex-shrink: 0; box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);">
                        <div class="vehicle-image-container"
                            style="height: 200px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 50%, rgba(26, 26, 46, 0.8) 100%); position: relative; overflow: hidden;">
                            <div class="vehicle-placeholder"
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                <i class="fas fa-car-side"
                                    style="font-size: 3.5rem; color: var(--primary-gold); margin-bottom: 0.5rem; filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); animation: float 3s ease-in-out infinite 1s;"></i>
                                <div style="color: var(--primary-gold); font-size: 0.9rem; opacity: 0.9; font-weight: 600;">
                                    Range Rover Sport
                                </div>
                            </div>
                            <div class="premium-badge"
                                style="position: absolute; top: 1rem; right: 1rem; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.4rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);">
                                {{ current_locale() === 'ar' ? 'دفع رباعي' : 'SUV' }}
                            </div>
                            <div class="quick-actions"
                                style="position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.5rem; opacity: 0; transition: all 0.3s ease;">
                                <button class="quick-action-btn" onclick="toggleFavorite(this)"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="quick-action-btn" onclick="quickView('range-rover-sport')"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="vehicle-info" style="padding: 1.5rem;">
                            <div class="vehicle-header" style="margin-bottom: 1rem;">
                                <h3 class="vehicle-name"
                                    style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    Range Rover Sport</h3>
                                <div class="vehicle-category"
                                    style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">
                                    {{ current_locale() === 'ar' ? 'دفع رباعي فاخر' : 'Luxury SUV' }}
                                </div>
                            </div>
                            <div class="vehicle-specs"
                                style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-users"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">7
                                        {{ current_locale() === 'ar' ? 'مقاعد' : 'Seats' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-road"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? '4WD' : 'AWD' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-gas-pump"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'بنزين' : 'Petrol' }}
                                    </div>
                                </div>
                            </div>
                            <div class="vehicle-footer"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="pricing">
                                    <div class="price"
                                        style="color: var(--primary-gold); font-size: 1.4rem; font-weight: 800; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        $200</div>
                                    <div class="price-period" style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem;">
                                        {{ current_locale() === 'ar' ? '/ في اليوم' : '/ per day' }}
                                    </div>
                                </div>
                                <a href="{{ route('vehicles.index') }}" class="premium-cta-btn"
                                    style="background: linear-gradient(45deg, #11998e, #38ef7d); color: white; padding: 0.6rem 1.2rem; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.9rem;">
                                    {{ current_locale() === 'ar' ? 'احجز الآن' : 'Book Now' }}
                                </a>
                            </div>
                        </div>
                        <div class="hover-overlay"
                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(17, 153, 142, 0.1), rgba(56, 239, 125, 0.05)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                        </div>
                    </div>

                    <!-- Vehicle Card 3: Porsche 911 -->
                    <div class="premium-vehicle-card sports" data-category="sports"
                        style="min-width: 320px; max-width: 320px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 215, 0, 0.05)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; padding: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; flex-shrink: 0; box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);">
                        <div class="vehicle-image-container"
                            style="height: 200px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 50%, rgba(26, 26, 46, 0.8) 100%); position: relative; overflow: hidden;">
                            <div class="vehicle-placeholder"
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                <i class="fas fa-car-alt"
                                    style="font-size: 3.5rem; color: var(--primary-gold); margin-bottom: 0.5rem; filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); animation: float 3s ease-in-out infinite 2s;"></i>
                                <div style="color: var(--primary-gold); font-size: 0.9rem; opacity: 0.9; font-weight: 600;">
                                    Porsche 911</div>
                            </div>
                            <div class="premium-badge"
                                style="position: absolute; top: 1rem; right: 1rem; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.4rem 1rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);">
                                {{ current_locale() === 'ar' ? 'رياضية' : 'Sports' }}
                            </div>
                            <div class="quick-actions"
                                style="position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.5rem; opacity: 0; transition: all 0.3s ease;">
                                <button class="quick-action-btn" onclick="toggleFavorite(this)"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button class="quick-action-btn" onclick="quickView('porsche-911')"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="vehicle-info" style="padding: 1.5rem;">
                            <div class="vehicle-header" style="margin-bottom: 1rem;">
                                <h3 class="vehicle-name"
                                    style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    Porsche 911</h3>
                                <div class="vehicle-category"
                                    style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">
                                    {{ current_locale() === 'ar' ? 'سيارة رياضية' : 'Sports Car' }}
                                </div>
                            </div>
                            <div class="vehicle-specs"
                                style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-users"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">2
                                        {{ current_locale() === 'ar' ? 'مقاعد' : 'Seats' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-tachometer-alt"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'سريع' : 'Fast' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-gas-pump"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'بنزين' : 'Petrol' }}
                                    </div>
                                </div>
                            </div>
                            <div class="vehicle-footer"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="pricing">
                                    <div class="price"
                                        style="color: var(--primary-gold); font-size: 1.4rem; font-weight: 800; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        $300</div>
                                    <div class="price-period" style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem;">
                                        {{ current_locale() === 'ar' ? '/ في اليوم' : '/ per day' }}
                                    </div>
                                </div>
                                <a href="{{ route('vehicles.index') }}" class="premium-cta-btn"
                                    style="background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 0.6rem 1.2rem; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.9rem;">
                                    {{ current_locale() === 'ar' ? 'احجز الآن' : 'Book Now' }}
                                </a>
                            </div>
                        </div>
                        <div class="hover-overlay"
                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.05)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                        </div>
                    </div>

                    <!-- Vehicle Card 4: BMW X5 -->
                    <div class="premium-vehicle-card suv luxury" data-category="suv luxury"
                        style="min-width: 320px; max-width: 320px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 215, 0, 0.05)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; padding: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; flex-shrink: 0; box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);">
                        <div class="vehicle-image-container"
                            style="height: 200px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 50%, rgba(26, 26, 46, 0.8) 100%); position: relative; overflow: hidden;">
                            <div class="vehicle-placeholder"
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                <i class="fas fa-car-side"
                                    style="font-size: 3.5rem; color: var(--primary-gold); margin-bottom: 0.5rem; filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); animation: float 3s ease-in-out infinite 3s;"></i>
                                <div style="color: var(--primary-gold); font-size: 0.9rem; opacity: 0.9; font-weight: 600;">
                                    BMW X5</div>
                            </div>
                            <div class="quick-actions"
                                style="position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; opacity: 0; transition: all 0.3s ease;">
                                <button onclick="toggleFavorite(this)" class="quick-action-btn"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button onclick="quickView('bmw-x5')" class="quick-action-btn"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="vehicle-info" style="padding: 1.5rem;">
                            <div class="vehicle-header" style="margin-bottom: 1rem;">
                                <h3 class="vehicle-name"
                                    style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    BMW X5</h3>
                                <div class="vehicle-category"
                                    style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">
                                    {{ current_locale() === 'ar' ? 'دفع رباعي فاخر' : 'Luxury SUV' }}
                                </div>
                            </div>
                            <div class="vehicle-specs"
                                style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-users"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? '7 مقاعد' : '7 Seats' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-cog"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'أوتوماتيك' : 'Auto' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-gas-pump"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'بنزين' : 'Petrol' }}
                                    </div>
                                </div>
                            </div>
                            <div class="vehicle-footer"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="pricing">
                                    <div class="price"
                                        style="color: var(--primary-gold); font-size: 1.4rem; font-weight: 800; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        $250</div>
                                    <div class="price-period" style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem;">
                                        {{ current_locale() === 'ar' ? '/ في اليوم' : '/ per day' }}
                                    </div>
                                </div>
                                <a href="{{ route('vehicles.index') }}" class="premium-cta-btn"
                                    style="background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 0.6rem 1.2rem; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.9rem;">
                                    {{ current_locale() === 'ar' ? 'احجز الآن' : 'Book Now' }}
                                </a>
                            </div>
                        </div>
                        <div class="hover-overlay"
                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.05)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                        </div>
                    </div>

                    <!-- Vehicle Card 5: Audi A8 -->
                    <div class="premium-vehicle-card luxury" data-category="luxury"
                        style="min-width: 320px; max-width: 320px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 215, 0, 0.05)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; padding: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; flex-shrink: 0; box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);">
                        <div class="vehicle-image-container"
                            style="height: 200px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 50%, rgba(26, 26, 46, 0.8) 100%); position: relative; overflow: hidden;">
                            <div class="vehicle-placeholder"
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                <i class="fas fa-car"
                                    style="font-size: 3.5rem; color: var(--primary-gold); margin-bottom: 0.5rem; filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); animation: float 3s ease-in-out infinite 4s;"></i>
                                <div style="color: var(--primary-gold); font-size: 0.9rem; opacity: 0.9; font-weight: 600;">
                                    Audi A8</div>
                            </div>
                            <div class="quick-actions"
                                style="position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; opacity: 0; transition: all 0.3s ease;">
                                <button onclick="toggleFavorite(this)" class="quick-action-btn"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button onclick="quickView('audi-a8')" class="quick-action-btn"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="vehicle-info" style="padding: 1.5rem;">
                            <div class="vehicle-header" style="margin-bottom: 1rem;">
                                <h3 class="vehicle-name"
                                    style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    Audi A8</h3>
                                <div class="vehicle-category"
                                    style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">
                                    @if(current_locale() === 'ar')
                                        سيدان فاخرة
                                    @else
                                        Luxury Sedan
                                    @endif
                                </div>
                            </div>
                            <div class="vehicle-specs"
                                style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-users"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? '5 مقاعد' : '5 Seats' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-cog"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'أوتوماتيك' : 'Auto' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-gas-pump"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'بنزين' : 'Petrol' }}
                                    </div>
                                </div>
                            </div>
                            <div class="vehicle-footer"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="pricing">
                                    <div class="price"
                                        style="color: var(--primary-gold); font-size: 1.4rem; font-weight: 800; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        $180</div>
                                    <div class="price-period" style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem;">
                                        {{ current_locale() === 'ar' ? '/ في اليوم' : '/ per day' }}
                                    </div>
                                </div>
                                <a href="{{ route('vehicles.index') }}" class="premium-cta-btn"
                                    style="background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); color: var(--primary-dark); padding: 0.6rem 1.2rem; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.9rem;">
                                    {{ current_locale() === 'ar' ? 'احجز الآن' : 'Book Now' }}
                                </a>
                            </div>
                        </div>
                        <div class="hover-overlay"
                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                        </div>
                    </div>

                    <!-- Vehicle Card 6: Lamborghini Huracan -->
                    <div class="premium-vehicle-card sports" data-category="sports"
                        style="min-width: 320px; max-width: 320px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 215, 0, 0.05)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; padding: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; flex-shrink: 0; box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);">
                        <div class="vehicle-image-container"
                            style="height: 200px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 50%, rgba(26, 26, 46, 0.8) 100%); position: relative; overflow: hidden;">
                            <div class="vehicle-placeholder"
                                style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                                <i class="fas fa-car-alt"
                                    style="font-size: 3.5rem; color: var(--primary-gold); margin-bottom: 0.5rem; filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); animation: float 3s ease-in-out infinite 5s;"></i>
                                <div style="color: var(--primary-gold); font-size: 0.9rem; opacity: 0.9; font-weight: 600;">
                                    Lamborghini Huracan</div>
                            </div>
                            <div class="quick-actions"
                                style="position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; opacity: 0; transition: all 0.3s ease;">
                                <button onclick="toggleFavorite(this)" class="quick-action-btn"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="far fa-heart"></i>
                                </button>
                                <button onclick="quickView('lamborghini-huracan')" class="quick-action-btn"
                                    style="width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: none; border-radius: 50%; color: white; cursor: pointer; transition: all 0.3s ease;">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <div class="vehicle-info" style="padding: 1.5rem;">
                            <div class="vehicle-header" style="margin-bottom: 1rem;">
                                <h3 class="vehicle-name"
                                    style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                    Lamborghini Huracan</h3>
                                <div class="vehicle-category"
                                    style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;">
                                    {{ current_locale() === 'ar' ? 'سيارة رياضية فائقة' : 'Supercar' }}
                                </div>
                            </div>
                            <div class="vehicle-specs"
                                style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-users"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? '2 مقعد' : '2 Seats' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-cog"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'أوتوماتيك' : 'Auto' }}
                                    </div>
                                </div>
                                <div class="spec-item"
                                    style="text-align: center; padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
                                    <i class="fas fa-gas-pump"
                                        style="color: var(--primary-gold); font-size: 0.9rem; margin-bottom: 0.3rem;"></i>
                                    <div style="color: rgba(255, 255, 255, 0.9); font-size: 0.7rem; font-weight: 600;">
                                        {{ current_locale() === 'ar' ? 'بنزين' : 'Petrol' }}
                                    </div>
                                </div>
                            </div>
                            <div class="vehicle-footer"
                                style="display: flex; justify-content: space-between; align-items: center;">
                                <div class="pricing">
                                    <div class="price"
                                        style="color: var(--primary-gold); font-size: 1.4rem; font-weight: 800; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                                        $500</div>
                                    <div class="price-period" style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem;">
                                        {{ current_locale() === 'ar' ? '/ في اليوم' : '/ per day' }}
                                    </div>
                                </div>
                                <a href="{{ route('vehicles.index') }}" class="premium-cta-btn"
                                    style="background: linear-gradient(45deg, #ff6b6b, #ee5a24); color: white; padding: 0.6rem 1.2rem; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; font-size: 0.9rem;">
                                    {{ current_locale() === 'ar' ? 'احجز الآن' : 'Book Now' }}
                                </a>
                            </div>
                        </div>
                        <div class="hover-overlay"
                            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(238, 90, 36, 0.05)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                        </div>
                    </div>

                </div>

                <!-- Carousel Navigation -->
                <div class="carousel-navigation"
                    style="display: flex; justify-content: center; gap: 1rem; margin-top: 2rem;">
                    <button class="carousel-nav-btn" onclick="scrollCarousel('left')"
                        style="width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 50%; color: var(--primary-gold); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="carousel-nav-btn" onclick="scrollCarousel('right')"
                        style="width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 50%; color: var(--primary-gold); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>

            <!-- View All Vehicles CTA -->
            <div class="fleet-cta" style="text-align: center; margin-top: 4rem;">
                <a href="{{ route('vehicles.index') }}" class="view-all-btn"
                    style="display: inline-flex; align-items: center; gap: 1rem; background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1)); backdrop-filter: blur(20px); border: 2px solid var(--primary-gold); color: var(--primary-gold); padding: 1.25rem 3rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.4s ease; text-transform: uppercase; letter-spacing: 1px; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif;">
                    <span>{{ current_locale() === 'ar' ? 'عرض جميع السيارات' : 'View All Vehicles' }}</span>
                    <i class="fas fa-arrow-{{ current_locale() === 'ar' ? 'left' : 'right' }}" style="font-size: 1rem;"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Enhanced Services Section -->
    <section class="services-section"
        style="padding: 8rem 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 215, 0, 0.01) 100%); position: relative; overflow: hidden;">
        <!-- Background Decoration -->
        <div class="services-bg-decoration"></div>

        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <div class="section-badge"
                    style="display: inline-block; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 25px; padding: 0.5rem 1.5rem; margin-bottom: 2rem; font-size: 0.9rem; color: var(--primary-gold); text-transform: uppercase; letter-spacing: 1px;">
                    {{ current_locale() === 'ar' ? 'خدماتنا المميزة' : 'Our Premium Services' }}
                </div>

                <h2 class="services-title"
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.8rem; color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);">
                    {{ __('general.services') }}
                </h2>

                <p class="services-subtitle"
                    style="font-size: 1.3rem; opacity: 0.9; max-width: 700px; margin: 0 auto; line-height: 1.7;">
                    @if(current_locale() === 'ar')
                        نقدم خدمات تأجير السيارات الفاخرة الشاملة في جميع أنحاء عُمان مع دعم عملاء مميز على مدار الساعة
                    @else
                        We provide comprehensive luxury car rental services across Oman with premium customer support around the
                        clock
                    @endif
                </p>
            </div>

            <div class="services-grid"
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; margin-top: 4rem;">

                <!-- Service Card 1: Airport Pickup -->
                <div class="service-card glass-card animate-on-scroll" data-aos="fade-up" data-aos-delay="100"
                    style="text-center; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;">
                    <div class="service-icon-wrapper"
                        style="position: relative; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="service-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 50%; transition: all 0.4s ease; opacity: 0.6;">
                        </div>
                        <i class="fas fa-plane-departure service-icon"
                            style="font-size: 2.5rem; color: var(--primary-gold); position: relative; z-index: 2; transition: all 0.4s ease; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.2));"></i>
                    </div>

                    <h3 class="service-title"
                        style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 600;">
                        @if(current_locale() === 'ar')
                            الاستلام من المطار
                        @else
                            Airport Pickup
                        @endif
                    </h3>

                    <p class="service-description" style="opacity: 0.85; line-height: 1.6; margin-bottom: 1.5rem;">
                        @if(current_locale() === 'ar')
                            خدمات استلام وتسليم مريحة في جميع المطارات الرئيسية في عُمان مع سائقين محترفين
                        @else
                            Convenient pickup and drop-off services at all major airports in Oman with professional drivers
                        @endif
                    </p>

                    <div class="service-features"
                        style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? 'مجاني' : 'Free' }}
                        </span>
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? '24/7' : '24/7' }}
                        </span>
                    </div>

                    <div class="service-hover-overlay"
                        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 215, 0, 0.05), rgba(255, 165, 0, 0.02)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                    </div>
                </div>

                <!-- Service Card 2: 24/7 Support -->
                <div class="service-card glass-card animate-on-scroll" data-aos="fade-up" data-aos-delay="200"
                    style="text-center; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;">
                    <div class="service-icon-wrapper"
                        style="position: relative; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="service-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 50%; transition: all 0.4s ease; opacity: 0.6;">
                        </div>
                        <i class="fas fa-headset service-icon"
                            style="font-size: 2.5rem; color: var(--primary-gold); position: relative; z-index: 2; transition: all 0.4s ease; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.2));"></i>
                    </div>

                    <h3 class="service-title"
                        style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 600;">
                        @if(current_locale() === 'ar')
                            دعم 24/7
                        @else
                            24/7 Support
                        @endif
                    </h3>

                    <p class="service-description" style="opacity: 0.85; line-height: 1.6; margin-bottom: 1.5rem;">
                        @if(current_locale() === 'ar')
                            فريق دعم العملاء متاح على مدار الساعة لمساعدتك في أي وقت وحل جميع استفساراتك
                        @else
                            Our customer support team is available 24/7 to assist you anytime and resolve all your queries
                        @endif
                    </p>

                    <div class="service-features"
                        style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? 'هاتف' : 'Phone' }}
                        </span>
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? 'واتساب' : 'WhatsApp' }}
                        </span>
                    </div>

                    <div class="service-hover-overlay"
                        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 215, 0, 0.05), rgba(255, 165, 0, 0.02)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                    </div>
                </div>

                <!-- Service Card 3: Full Insurance -->
                <div class="service-card glass-card animate-on-scroll" data-aos="fade-up" data-aos-delay="300"
                    style="text-center; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;">
                    <div class="service-icon-wrapper"
                        style="position: relative; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="service-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 50%; transition: all 0.4s ease; opacity: 0.6;">
                        </div>
                        <i class="fas fa-shield-alt service-icon"
                            style="font-size: 2.5rem; color: var(--primary-gold); position: relative; z-index: 2; transition: all 0.4s ease; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.2));"></i>
                    </div>

                    <h3 class="service-title"
                        style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 600;">
                        @if(current_locale() === 'ar')
                            تأمين شامل
                        @else
                            Full Insurance
                        @endif
                    </h3>

                    <p class="service-description" style="opacity: 0.85; line-height: 1.6; margin-bottom: 1.5rem;">
                        @if(current_locale() === 'ar')
                            تغطية تأمينية شاملة لراحة بالك مع حماية كاملة ضد جميع المخاطر والأضرار
                        @else
                            Comprehensive insurance coverage for your peace of mind with full protection against all risks and
                            damages
                        @endif
                    </p>

                    <div class="service-features"
                        style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? 'شامل' : 'Full Coverage' }}
                        </span>
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? 'بدون خصم' : 'No Deductible' }}
                        </span>
                    </div>

                    <div class="service-hover-overlay"
                        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 215, 0, 0.05), rgba(255, 165, 0, 0.02)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                    </div>
                </div>

                <!-- Service Card 4: Diverse Fleet -->
                <div class="service-card glass-card animate-on-scroll" data-aos="fade-up" data-aos-delay="400"
                    style="text-center; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;">
                    <div class="service-icon-wrapper"
                        style="position: relative; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="service-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 50%; transition: all 0.4s ease; opacity: 0.6;">
                        </div>
                        <i class="fas fa-car-side service-icon"
                            style="font-size: 2.5rem; color: var(--primary-gold); position: relative; z-index: 2; transition: all 0.4s ease; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.2));"></i>
                    </div>

                    <h3 class="service-title"
                        style="color: var(--primary-gold); margin-bottom: 1.5rem; font-size: 1.4rem; font-weight: 600;">
                        @if(current_locale() === 'ar')
                            أسطول متنوع
                        @else
                            Diverse Fleet
                        @endif
                    </h3>

                    <p class="service-description" style="opacity: 0.85; line-height: 1.6; margin-bottom: 1.5rem;">
                        @if(current_locale() === 'ar')
                            مجموعة واسعة من السيارات الفاخرة والرياضية والعائلية لتناسب جميع احتياجاتك ومناسباتك
                        @else
                            Wide range of luxury, sports, and family vehicles to suit all your needs and occasions
                        @endif
                    </p>

                    <div class="service-features"
                        style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? '50+ سيارة' : '50+ Cars' }}
                        </span>
                        <span class="feature-tag"
                            style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 15px; padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--primary-gold);">
                            {{ current_locale() === 'ar' ? 'حديثة' : 'Latest Models' }}
                        </span>
                    </div>

                    <div class="service-hover-overlay"
                        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 215, 0, 0.05), rgba(255, 165, 0, 0.02)); opacity: 0; transition: all 0.3s ease; pointer-events: none;">
                    </div>
                </div>
            </div>

            <!-- Additional Services CTA -->
            <div class="services-cta" data-aos="fade-up" data-aos-delay="500" style="text-align: center; margin-top: 5rem;">
                <p style="font-size: 1.1rem; opacity: 0.8; margin-bottom: 2rem;">
                    {{ current_locale() === 'ar' ? 'هل تحتاج خدمة خاصة؟ نحن هنا لمساعدتك' : 'Need a special service? We\'re here to help you' }}
                </p>
                <a href="{{ route('contact') }}" class="btn-secondary"
                    style="padding: 15px 40px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px;">
                    {{ current_locale() === 'ar' ? 'تواصل معنا' : 'Contact Us' }}
                    <i class="fas fa-arrow-{{ current_locale() === 'ar' ? 'left' : 'right' }}"
                        style="margin-{{ current_locale() === 'ar' ? 'right' : 'left' }}: 10px;"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Statistics Section -->
    <section class="stats-section"
        style="padding: 8rem 0; background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 165, 0, 0.02) 100%); position: relative; overflow: hidden;">
        <!-- Background Elements -->
        <div class="stats-bg-decoration"
            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(255, 165, 0, 0.08) 0%, transparent 50%); animation: statsGlow 12s ease-in-out infinite alternate;">
        </div>

        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <div class="section-badge"
                    style="display: inline-block; background: linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08)); border: 1px solid rgba(255, 215, 0, 0.4); border-radius: 25px; padding: 0.5rem 1.5rem; margin-bottom: 2rem; font-size: 0.9rem; color: var(--primary-gold); text-transform: uppercase; letter-spacing: 1px;">
                    {{ current_locale() === 'ar' ? 'إنجازاتنا بالأرقام' : 'Our Achievements in Numbers' }}
                </div>

                <h2 class="stats-title"
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 700; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);">
                    {{ current_locale() === 'ar' ? 'نفخر بثقتكم' : 'Trusted by Thousands' }}
                </h2>

                <p class="stats-subtitle"
                    style="font-size: 1.3rem; opacity: 0.9; max-width: 700px; margin: 0 auto; line-height: 1.7;">
                    {{ current_locale() === 'ar' ? 'أرقام تعكس التزامنا بتقديم أفضل خدمات تأجير السيارات الفاخرة في عُمان' : 'Numbers that reflect our commitment to providing the finest luxury car rental services in Oman' }}
                </p>
            </div>

            <div class="stats-grid"
                style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 4rem; max-width: 1000px; margin-left: auto; margin-right: auto;">

                <!-- Stat 1: Happy Customers -->
                <div class="stat-card glass-card" data-aos="fade-up" data-aos-delay="100"
                    style="text-center; position: relative; padding: 1.8rem 1rem; border-radius: 16px; transition: all 0.4s ease; cursor: pointer; border: 1px solid rgba(255, 215, 0, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%); backdrop-filter: blur(20px);">
                    <div class="stat-icon-wrapper"
                        style="position: relative; margin-bottom: 1.2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="stat-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08)); border-radius: 50%; opacity: 0.8;">
                        </div>
                        <i class="fas fa-users stat-icon"
                            style="font-size: 1.8rem; color: var(--primary-gold); position: relative; z-index: 2; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));"></i>
                    </div>

                    <div class="stat-number" data-count="5000"
                        style="font-size: 2.2rem; font-weight: 800; color: var(--primary-gold); margin-bottom: 0.5rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; line-height: 1;">
                        5,000</div>
                    <div class="stat-label"
                        style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.95); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem;">
                        {{ current_locale() === 'ar' ? 'عميل سعيد' : 'Happy Customers' }}
                    </div>
                    <div class="stat-description" style="font-size: 0.75rem; opacity: 0.7; color: rgba(255, 215, 0, 0.8);">
                        {{ current_locale() === 'ar' ? 'منذ التأسيس' : 'Since Inception' }}
                    </div>
                </div>

                <!-- Stat 2: Luxury Vehicles -->
                <div class="stat-card glass-card" data-aos="fade-up" data-aos-delay="200"
                    style="text-center; position: relative; padding: 1.8rem 1rem; border-radius: 16px; transition: all 0.4s ease; cursor: pointer; border: 1px solid rgba(255, 215, 0, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%); backdrop-filter: blur(20px);">
                    <div class="stat-icon-wrapper"
                        style="position: relative; margin-bottom: 1.2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="stat-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08)); border-radius: 50%; opacity: 0.8;">
                        </div>
                        <i class="fas fa-car stat-icon"
                            style="font-size: 1.8rem; color: var(--primary-gold); position: relative; z-index: 2; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));"></i>
                    </div>

                    <div class="stat-number" data-count="150"
                        style="font-size: 2.2rem; font-weight: 800; color: var(--primary-gold); margin-bottom: 0.5rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; line-height: 1;">
                        150</div>
                    <div class="stat-label"
                        style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.95); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem;">
                        {{ current_locale() === 'ar' ? 'سيارة فاخرة' : 'Luxury Vehicles' }}
                    </div>
                    <div class="stat-description" style="font-size: 0.75rem; opacity: 0.7; color: rgba(255, 215, 0, 0.8);">
                        {{ current_locale() === 'ar' ? 'في الأسطول' : 'In Our Fleet' }}
                    </div>
                </div>

                <!-- Stat 3: Years of Experience -->
                <div class="stat-card glass-card" data-aos="fade-up" data-aos-delay="300"
                    style="text-center; position: relative; padding: 1.8rem 1rem; border-radius: 16px; transition: all 0.4s ease; cursor: pointer; border: 1px solid rgba(255, 215, 0, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%); backdrop-filter: blur(20px);">
                    <div class="stat-icon-wrapper"
                        style="position: relative; margin-bottom: 1.2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="stat-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08)); border-radius: 50%; opacity: 0.8;">
                        </div>
                        <i class="fas fa-award stat-icon"
                            style="font-size: 1.8rem; color: var(--primary-gold); position: relative; z-index: 2; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));"></i>
                    </div>

                    <div class="stat-number" data-count="15"
                        style="font-size: 2.2rem; font-weight: 800; color: var(--primary-gold); margin-bottom: 0.5rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; line-height: 1;">
                        15</div>
                    <div class="stat-label"
                        style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.95); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem;">
                        {{ current_locale() === 'ar' ? 'سنة خبرة' : 'Years Experience' }}
                    </div>
                    <div class="stat-description" style="font-size: 0.75rem; opacity: 0.7; color: rgba(255, 215, 0, 0.8);">
                        {{ current_locale() === 'ar' ? 'في السوق' : 'In the Market' }}
                    </div>
                </div>

                <!-- Stat 4: Cities Covered -->
                <div class="stat-card glass-card" data-aos="fade-up" data-aos-delay="400"
                    style="text-center; position: relative; padding: 1.8rem 1rem; border-radius: 16px; transition: all 0.4s ease; cursor: pointer; border: 1px solid rgba(255, 215, 0, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 215, 0, 0.03) 100%); backdrop-filter: blur(20px);">
                    <div class="stat-icon-wrapper"
                        style="position: relative; margin-bottom: 1.2rem; display: flex; justify-content: center; align-items: center;">
                        <div class="stat-icon-bg"
                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08)); border-radius: 50%; opacity: 0.8;">
                        </div>
                        <i class="fas fa-map-marked-alt stat-icon"
                            style="font-size: 1.8rem; color: var(--primary-gold); position: relative; z-index: 2; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));"></i>
                    </div>

                    <div class="stat-number" data-count="25"
                        style="font-size: 2.2rem; font-weight: 800; color: var(--primary-gold); margin-bottom: 0.5rem; font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Inter', sans-serif @endif; line-height: 1;">
                        25</div>
                    <div class="stat-label"
                        style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.95); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem;">
                        {{ current_locale() === 'ar' ? 'مدينة مغطاة' : 'Cities Covered' }}
                    </div>
                    <div class="stat-description" style="font-size: 0.75rem; opacity: 0.7; color: rgba(255, 215, 0, 0.8);">
                        {{ current_locale() === 'ar' ? 'في عُمان' : 'Across Oman' }}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Locations Section -->
    <section id="locations" style="padding: 5rem 0;">
        <div class="container">
            <div class="text-center mb-4">
                <h2
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1rem; font-weight: 600;">
                    @if(current_locale() === 'ar')
                        مواقعنا في عُمان
                    @else
                        Our Locations in Oman
                    @endif
                </h2>
                <p style="font-size: 1.1rem; opacity: 0.8; max-width: 600px; margin: 0 auto;">
                    @if(current_locale() === 'ar')
                        نخدم المدن الرئيسية في جميع أنحاء سلطنة عُمان بخدمات تأجير السيارات المميزة.
                    @else
                        We serve major cities across the Sultanate of Oman with premium car rental services.
                    @endif
                </p>
            </div>

            <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 3rem;">
                <div class="glass-card animate-on-scroll text-center">
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">
                        {{ __('general.muscat') }}
                    </h4>
                    <p style="opacity: 0.8; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            العاصمة
                        @else
                            Capital City
                        @endif
                    </p>
                </div>

                <div class="glass-card animate-on-scroll text-center">
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">
                        {{ __('general.salalah') }}
                    </h4>
                    <p style="opacity: 0.8; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            المنطقة الجنوبية
                        @else
                            Southern Region
                        @endif
                    </p>
                </div>

                <div class="glass-card animate-on-scroll text-center">
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.nizwa') }}
                    </h4>
                    <p style="opacity: 0.8; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            المنطقة الداخلية
                        @else
                            Interior Region
                        @endif
                    </p>
                </div>

                <div class="glass-card animate-on-scroll text-center">
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.sur') }}
                    </h4>
                    <p style="opacity: 0.8; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            المنطقة الشرقية
                        @else
                            Eastern Region
                        @endif
                    </p>
                </div>

                <div class="glass-card animate-on-scroll text-center">
                    <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">{{ __('general.sohar') }}
                    </h4>
                    <p style="opacity: 0.8; font-size: 0.9rem;">
                        @if(current_locale() === 'ar')
                            المنطقة الشمالية
                        @else
                            Northern Region
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials-section"
        style="padding: 8rem 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 215, 0, 0.02) 100%); position: relative; overflow: hidden;">
        <!-- Background Elements -->
        <div class="testimonials-bg-decoration"
            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.06) 0%, transparent 50%); animation: testimonialsGlow 15s ease-in-out infinite alternate;">
        </div>

        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <div class="section-badge"
                    style="display: inline-block; background: linear-gradient(45deg, rgba(255, 215, 0, 0.12), rgba(255, 165, 0, 0.06)); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 25px; padding: 0.5rem 1.5rem; margin-bottom: 2rem; font-size: 0.9rem; color: var(--primary-gold); text-transform: uppercase; letter-spacing: 1px;">
                    {{ current_locale() === 'ar' ? 'آراء عملائنا' : 'Customer Reviews' }}
                </div>

                <h2 class="testimonials-title"
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: clamp(2rem, 4.5vw, 3.5rem); color: var(--primary-gold); margin-bottom: 1.5rem; font-weight: 700; text-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                    {{ current_locale() === 'ar' ? 'ماذا يقول عملاؤنا' : 'What Our Customers Say' }}
                </h2>

                <p class="testimonials-subtitle"
                    style="font-size: 1.3rem; opacity: 0.9; max-width: 700px; margin: 0 auto; line-height: 1.7;">
                    {{ current_locale() === 'ar' ? 'تجارب حقيقية من عملائنا الكرام الذين اختاروا خدماتنا المميزة' : 'Real experiences from our valued customers who chose our premium services' }}
                </p>
            </div>

            <!-- Testimonials Carousel -->
            <div class="testimonials-carousel" style="position: relative; max-width: 1000px; margin: 0 auto;">
                <div class="testimonials-wrapper" style="overflow: hidden; border-radius: 20px;">
                    <div class="testimonials-track" style="display: flex; transition: transform 0.5s ease;">

                        <!-- Testimonial 1 -->
                        <div class="testimonial-card" style="min-width: 100%; padding: 0 1rem;">
                            <div class="glass-card"
                                style="padding: 3rem; text-align: center; position: relative; overflow: hidden;">
                                <div class="testimonial-decoration"
                                    style="position: absolute; top: -50px; left: -50px; width: 100px; height: 100px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 50%; animation: float 6s ease-in-out infinite;">
                                </div>

                                <div class="quote-icon"
                                    style="font-size: 3rem; color: var(--primary-gold); opacity: 0.3; margin-bottom: 2rem;">
                                    <i class="fas fa-quote-left"></i>
                                </div>

                                <p class="testimonial-text"
                                    style="font-size: 1.3rem; line-height: 1.8; margin-bottom: 2rem; font-style: italic; color: rgba(255, 255, 255, 0.95);">
                                    {{ current_locale() === 'ar' ? 'تجربة رائعة مع خدمة عملاء ممتازة. السيارة كانت نظيفة وحديثة، والفريق كان محترف جداً. بالتأكيد سأعود مرة أخرى!' : 'Amazing experience with excellent customer service. The car was clean and modern, and the team was very professional. I will definitely come back again!' }}
                                </p>

                                <div class="customer-info">
                                    <div class="customer-avatar"
                                        style="width: 80px; height: 80px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-dark); font-weight: bold;">
                                        {{ current_locale() === 'ar' ? 'أ' : 'A' }}
                                    </div>
                                    <h4 class="customer-name"
                                        style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem;">
                                        {{ current_locale() === 'ar' ? 'أحمد المحمدي' : 'Ahmed Al-Mohammadi' }}
                                    </h4>
                                    <p class="customer-title" style="opacity: 0.8; font-size: 0.9rem;">
                                        {{ current_locale() === 'ar' ? 'رجل أعمال' : 'Business Executive' }}
                                    </p>
                                    <div class="rating" style="margin-top: 1rem;">
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonial 2 -->
                        <div class="testimonial-card" style="min-width: 100%; padding: 0 1rem;">
                            <div class="glass-card"
                                style="padding: 3rem; text-align: center; position: relative; overflow: hidden;">
                                <div class="testimonial-decoration"
                                    style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 50%; animation: float 6s ease-in-out infinite 2s;">
                                </div>

                                <div class="quote-icon"
                                    style="font-size: 3rem; color: var(--primary-gold); opacity: 0.3; margin-bottom: 2rem;">
                                    <i class="fas fa-quote-left"></i>
                                </div>

                                <p class="testimonial-text"
                                    style="font-size: 1.3rem; line-height: 1.8; margin-bottom: 2rem; font-style: italic; color: rgba(255, 255, 255, 0.95);">
                                    {{ current_locale() === 'ar' ? 'خدمة استثنائية وأسطول رائع من السيارات الفاخرة. الاستلام من المطار كان سلس جداً والسعر معقول. أنصح بشدة!' : 'Exceptional service and amazing fleet of luxury cars. Airport pickup was very smooth and the price was reasonable. Highly recommended!' }}
                                </p>

                                <div class="customer-info">
                                    <div class="customer-avatar"
                                        style="width: 80px; height: 80px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-dark); font-weight: bold;">
                                        {{ current_locale() === 'ar' ? 'س' : 'S' }}
                                    </div>
                                    <h4 class="customer-name"
                                        style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem;">
                                        {{ current_locale() === 'ar' ? 'سارة الزهراني' : 'Sarah Al-Zahrani' }}
                                    </h4>
                                    <p class="customer-title" style="opacity: 0.8; font-size: 0.9rem;">
                                        {{ current_locale() === 'ar' ? 'مديرة تسويق' : 'Marketing Manager' }}
                                    </p>
                                    <div class="rating" style="margin-top: 1rem;">
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonial 3 -->
                        <div class="testimonial-card" style="min-width: 100%; padding: 0 1rem;">
                            <div class="glass-card"
                                style="padding: 3rem; text-align: center; position: relative; overflow: hidden;">
                                <div class="testimonial-decoration"
                                    style="position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05)); border-radius: 50%; animation: float 6s ease-in-out infinite 4s;">
                                </div>

                                <div class="quote-icon"
                                    style="font-size: 3rem; color: var(--primary-gold); opacity: 0.3; margin-bottom: 2rem;">
                                    <i class="fas fa-quote-left"></i>
                                </div>

                                <p class="testimonial-text"
                                    style="font-size: 1.3rem; line-height: 1.8; margin-bottom: 2rem; font-style: italic; color: rgba(255, 255, 255, 0.95);">
                                    {{ current_locale() === 'ar' ? 'أفضل شركة تأجير سيارات في عُمان! الدعم الفني متاح 24/7 والسيارات دائماً في حالة ممتازة. شكراً لكم على الخدمة المتميزة.' : 'Best car rental company in Oman! Technical support is available 24/7 and cars are always in excellent condition. Thank you for the outstanding service.' }}
                                </p>

                                <div class="customer-info">
                                    <div class="customer-avatar"
                                        style="width: 80px; height: 80px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-dark); font-weight: bold;">
                                        {{ current_locale() === 'ar' ? 'م' : 'M' }}
                                    </div>
                                    <h4 class="customer-name"
                                        style="color: var(--primary-gold); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem;">
                                        {{ current_locale() === 'ar' ? 'محمد الراشدي' : 'Mohammed Al-Rashidi' }}
                                    </h4>
                                    <p class="customer-title" style="opacity: 0.8; font-size: 0.9rem;">
                                        {{ current_locale() === 'ar' ? 'مهندس' : 'Engineer' }}
                                    </p>
                                    <div class="rating" style="margin-top: 1rem;">
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                        <i class="fas fa-star" style="color: var(--primary-gold);"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Carousel Navigation -->
                <div class="testimonials-nav" style="display: flex; justify-content: center; gap: 1rem; margin-top: 3rem;">
                    <button class="testimonial-nav-btn active" onclick="showTestimonial(0)"
                        style="width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--primary-gold); background: var(--primary-gold); cursor: pointer; transition: all 0.3s ease;"></button>
                    <button class="testimonial-nav-btn" onclick="showTestimonial(1)"
                        style="width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--primary-gold); background: transparent; cursor: pointer; transition: all 0.3s ease;"></button>
                    <button class="testimonial-nav-btn" onclick="showTestimonial(2)"
                        style="width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--primary-gold); background: transparent; cursor: pointer; transition: all 0.3s ease;"></button>
                </div>

                <!-- Carousel Arrows -->
                <button class="testimonial-arrow testimonial-prev" onclick="prevTestimonial()"
                    style="position: absolute; left: -60px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 50%; color: var(--primary-gold); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="testimonial-arrow testimonial-next" onclick="nextTestimonial()"
                    style="position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 50%; color: var(--primary-gold); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section style="padding: 5rem 0; background: rgba(255, 215, 0, 0.1);">
        <div class="container text-center">
            <div class="glass-morphism" style="padding: 3rem; max-width: 600px; margin: 0 auto;">
                <h2
                    style="font-family: @if(current_locale() === 'ar') 'Cairo', 'Noto Sans Arabic', sans-serif @else 'Playfair Display', serif @endif; font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 1rem; font-weight: 600;">
                    @if(current_locale() === 'ar')
                        مستعد لتجربة الفخامة؟
                    @else
                        Ready to Experience Luxury?
                    @endif
                </h2>
                <p style="font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;">
                    @if(current_locale() === 'ar')
                        احجز مركبتك المميزة اليوم واستمتع بأفضل تجربة تأجير سيارات في عُمان.
                    @else
                        Book your premium vehicle today and enjoy the finest car rental experience in Oman.
                    @endif
                </p>
                <a href="{{ route('register') }}" class="btn-primary" style="font-size: 1.1rem; padding: 15px 40px;">
                    {{ __('general.book_now') }}
                </a>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        /* Enhanced Hero Section Styles */
        .hero-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            background: linear-gradient(135deg, rgba(20, 25, 40, 0.95), rgba(30, 35, 50, 0.9));
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
            animation: heroGlow 8s ease-in-out infinite alternate;
        }

        .hero-particles {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                radial-gradient(2px 2px at 20px 30px, rgba(255, 215, 0, 0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255, 165, 0, 0.2), transparent),
                radial-gradient(1px 1px at 90px 40px, rgba(255, 215, 0, 0.4), transparent),
                radial-gradient(1px 1px at 130px 80px, rgba(255, 165, 0, 0.3), transparent);
            background-repeat: repeat;
            background-size: 150px 100px;
            animation: particleFloat 20s linear infinite;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.02) 50%, transparent 70%);
            animation: overlayShift 15s ease-in-out infinite;
        }

        .hero-decoration {
            position: absolute;
            top: -50%;
            left: -50%;
            right: -50%;
            bottom: -50%;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
            animation: decorationRotate 30s linear infinite;
        }

        .hero-glass {
            backdrop-filter: blur(25px) !important;
            border: 1px solid rgba(255, 215, 0, 0.3) !important;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        }

        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            color: var(--primary-gold);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .scroll-arrow {
            width: 40px;
            height: 40px;
            border: 2px solid var(--primary-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            animation: bounce 2s infinite;
        }

        @keyframes heroGlow {
            0% {
                opacity: 0.6;
                transform: scale(1);
            }

            100% {
                opacity: 1;
                transform: scale(1.05);
            }
        }

        @keyframes particleFloat {
            0% {
                transform: translateY(0px) rotate(0deg);
            }

            100% {
                transform: translateY(-100px) rotate(360deg);
            }
        }

        @keyframes overlayShift {

            0%,
            100% {
                transform: translateX(-100px);
            }

            50% {
                transform: translateX(100px);
            }
        }

        @keyframes decorationRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
            }
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-10px);
            }

            60% {
                transform: translateY(-5px);
            }
        }

        /* Enhanced Hero Button Styles */
        .hero-btn-primary,
        .hero-btn-secondary {
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid transparent;
        }

        .hero-btn-primary::before,
        .hero-btn-secondary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .hero-btn-primary:hover::before,
        .hero-btn-secondary:hover::before {
            left: 100%;
        }

        .hero-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255, 215, 0, 0.4);
        }

        .hero-btn-secondary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255, 215, 0, 0.2);
            border-color: var(--primary-gold);
        }

        .hero-btn-primary:hover i,
        .hero-btn-secondary:hover i {
            transform: translateX({{ current_locale() === 'ar' ? '-' : '' }}5px);
        }

        .trust-item {
            transition: all 0.3s ease;
        }

        .trust-item:hover {
            transform: translateY(-2px);
            color: var(--primary-gold) !important;
        }

        .scroll-indicator:hover {
            transform: translateX(-50%) translateY(-5px);
        }

        .scroll-indicator:hover .scroll-arrow {
            border-color: var(--accent-gold);
            background: rgba(255, 215, 0, 0.1);
        }

        /* Responsive Hero Section */
        @media (max-width: 768px) {
            .hero-section {
                min-height: 80vh;
                padding: 1.5rem 0.5rem;
            }

            .hero-glass {
                padding: 2.5rem 1.5rem !important;
            }

            .hero-title {
                font-size: 2.8rem !important;
            }

            .hero-tagline h2 {
                font-size: 1.4rem !important;
            }

            .hero-description {
                font-size: 1rem !important;
            }

            .hero-trust {
                gap: 1.5rem !important;
            }

            .hero-btn-primary,
            .hero-btn-secondary {
                padding: 15px 35px !important;
                font-size: 1rem !important;
                margin: 0 0.5rem 1rem !important;
            }
        }

        @media (max-width: 576px) {
            .hero-section {
                min-height: 65vh;
            }

            .hero-section .glass-morphism {
                padding: 2.5rem 1.5rem !important;
            }

            .services-grid {
                grid-template-columns: 1fr !important;
                gap: 2rem !important;
            }

            .service-card {
                max-width: 100% !important;
                margin: 0 auto !important;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1.2rem !important;
                max-width: 100% !important;
            }

            .premium-vehicle-card {
                min-width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
            }

            .fleet-grid {
                grid-template-columns: 1fr !important;
                gap: 1.5rem !important;
            }

            .testimonial-card {
                max-width: 100% !important;
                margin: 0 auto !important;
            }
        }

        @media (max-width: 480px) {
            .hero-section {
                min-height: 60vh;
            }

            .hero-section .glass-morphism {
                padding: 2rem 1rem !important;
            }

            .hero-section h1 {
                font-size: 2rem !important;
            }

            .hero-section h2 {
                font-size: 1.1rem !important;
            }
        }

        /* Premium Fleet Section Styles */
        .premium-fleet-section {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.02) 0%, rgba(255, 165, 0, 0.01) 100%);
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(180deg);
            }
        }

        .premium-carousel::-webkit-scrollbar {
            display: none;
        }

        .premium-carousel {
            padding-right: 1rem;
        }

        .premium-vehicle-card {
            flex: 0 0 320px;
            width: 320px;
        }

        .premium-vehicle-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 60px rgba(255, 215, 0, 0.2);
        }

        .premium-vehicle-card:hover .hover-overlay {
            opacity: 1;
        }

        .premium-vehicle-card:hover .quick-actions {
            opacity: 1;
        }

        .premium-vehicle-card:hover .vehicle-image-container {
            transform: scale(1.05);
        }

        .quick-action-btn:hover {
            background: rgba(255, 215, 0, 0.3) !important;
            transform: scale(1.1);
        }

        .filter-btn:hover {
            background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)) !important;
            color: var(--primary-dark) !important;
            transform: translateY(-2px);
        }

        .filter-btn.active {
            background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)) !important;
            color: var(--primary-dark) !important;
        }

        .carousel-nav-btn:hover {
            background: rgba(255, 215, 0, 0.2) !important;
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
        }

        @media (max-width: 768px) {
            .premium-vehicle-card {
                min-width: 280px !important;
                max-width: 280px !important;
                flex: 0 0 280px !important;
                width: 280px !important;
            }

            .vehicle-image-container {
                height: 160px !important;
            }

            .vehicle-info {
                padding: 1rem !important;
            }
        }

        .view-all-btn:hover {
            background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)) !important;
            color: var(--primary-dark) !important;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
        }

        .premium-cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
        }

        /* Responsive Design for Premium Fleet */
        @media (max-width: 768px) {
            .fleet-title {
                font-size: 2.5rem !important;
            }

            .fleet-subtitle {
                font-size: 1.1rem !important;
            }

            .premium-vehicle-card {
                min-width: 320px !important;
            }

            .fleet-filters {
                gap: 0.5rem !important;
            }

            .filter-btn {
                padding: 0.6rem 1.5rem !important;
                font-size: 0.9rem !important;
            }
        }

        @media (max-width: 480px) {
            .fleet-title {
                font-size: 2rem !important;
            }

            .fleet-subtitle {
                font-size: 1rem !important;
            }

            .premium-vehicle-card {
                min-width: 280px !important;
            }

            .vehicle-info {
                padding: 1.5rem !important;
            }

            .vehicle-specs {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .filter-btn {
                padding: 0.5rem 1rem !important;
                font-size: 0.8rem !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Premi           um Fleet Interactive Features
        document.addEventListener('DOMContentLoaded', function () {
            initializeFleetFeatures();
        });

        function initializeFleetFeatures() {
            // Initialize filter functionality
            initializeFilters();

            // Initialize carousel
            initializeCarousel();

            // Initialize scroll animations
            initializeScrollAnimations();
        }

        // Filter Functionality
        function initializeFilters() {
            const filterBtns = document.querySelectorAll('.filter-btn');
            const vehicleCards = document.querySelectorAll('.premium-vehicle-card');

            filterBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    const filter = this.getAttribute('data-filter');

                    // Update active button
                    filterBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    // Filter vehicles with animation
                    vehicleCards.forEach(card => {
                        const categories = card.getAttribute('data-category').split(' ');

                        if (filter === 'all' || categories.includes(filter)) {
                            card.style.display = 'block';
                            card.style.opacity = '0';
                            card.style.transform = 'translateY(20px)';

                            setTimeout(() => {
                                card.style.transition = 'all 0.4s ease';
                                card.style.opacity = '1';
                                card.style.transform = 'translateY(0)';
                            }, 100);
                        } else {
                            card.style.transition = 'all 0.3s ease';
                            card.style.opacity = '0';
                            card.style.transform = 'translateY(-20px)';

                            setTimeout(() => {
                                card.style.display = 'none';
                            }, 300);
                        }
                    });
                });
            });
        }

        // Carousel Navigation
        function initializeCarousel() {
            const carousel = document.querySelector('.premium-carousel');
            if (!carousel) return;

            // Auto-scroll functionality
            let autoScrollInterval;

            function startAutoScroll() {
                autoScrollInterval = setInterval(() => {
                    const scrollAmount = carousel.clientWidth * 0.8;
                    carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });

                    // Reset to beginning if at end
                    if (carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 10) {
                        setTimeout(() => {
                            carousel.scrollTo({ left: 0, behavior: 'smooth' });
                        }, 2000);
                    }
                }, 5000);
            }

            function stopAutoScroll() {
                clearInterval(autoScrollInterval);
            }

            // Start auto-scroll
            startAutoScroll();

            // Pause on hover
            carousel.addEventListener('mouseenter', stopAutoScroll);
            carousel.addEventListener('mouseleave', startAutoScroll);
        }

        // Carousel Navigation Functions
        function scrollCarousel(direction) {
            const carousel = document.querySelector('.premium-carousel');
            if (!carousel) return;

            const scrollAmount = carousel.clientWidth * 0.8;

            if (direction === 'left') {
                carousel.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
            } else {
                carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
            }
        }

        // Favorite Toggle
        function toggleFavorite(btn) {
            const icon = btn.querySelector('i');

            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                btn.style.background = 'rgba(255, 215, 0, 0.3)';

                // Add pulse animation
                btn.style.animation = 'pulse 0.6s ease-in-out';
                setTimeout(() => {
                    btn.style.animation = '';
                }, 600);
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                btn.style.background = 'rgba(255, 255, 255, 0.2)';
            }
        }

        // Quick View Modal (placeholder)
        function quickView(vehicleId) {
            // Create modal overlay
            const modal = document.createElement('div');
            modal.style.cssText = `
                                                                                                                                                                                                                        position: fixed;
                                                                                                                                                                                                                        top: 0;
                                                                                                                                                                                                                        left: 0;
                                                                                                                                                                                                                        right: 0;
                                                                                                                                                                                                                        bottom: 0;
                                                                                                                                                                                                                        background: rgba(0, 0, 0, 0.8);
                                                                                                                                                                                                                        backdrop-filter: blur(10px);
                                                                                                                                                                                                                        z-index: 10000;
                                                                                                                                                                                                                        display: flex;
                                                                                                                                                                                                                        align-items: center;
                                                                                                                                                                                                                        justify-content: center;
                                                                                                                                                                                                                        opacity: 0;
                                                                                                                                                                                                                        transition: all 0.3s ease;
                                                                                                                                                                                                                    `;

            // Modal content
            modal.innerHTML = `
                                                                                                                                                                                                                        <div style="
                                                                                                                                                                                                                            background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
                                                                                                                                                                                                                            backdrop-filter: blur(20px);
                                                                                                                                                                                                                            border: 1px solid rgba(255, 215, 0, 0.2);
                                                                                                                                                                                                                            border-radius: 20px;
                                                                                                                                                                                                                            padding: 2rem;
                                                                                                                                                                                                                            max-width: 500px;
                                                                                                                                                                                                                            width: 90%;
                                                                                                                                                                                                                            text-align: center;
                                                                                                                                                                                                                            transform: scale(0.8);
                                                                                                                                                                                                                            transition: all 0.3s ease;
                                                                                                                                                                                                                        ">
                                                                                                                                                                                                                            <h3 style="color: var(--primary-gold); margin-bottom: 1rem; font-size: 1.5rem;">
                                                                                                                                                                                                                                ${vehicleId.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase())}
                                                                                                                                                                                                                            </h3>
                                                                                                                                                                                                                            <p style="color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; line-height: 1.6;">
                                                                                                                                                                                                                                ${document.documentElement.lang === 'ar' ?
                    'عرض سريع للمركبة. للحصول على تفاصيل كاملة، يرجى زيارة صفحة السيارات.' :
                    'Quick view of the vehicle. For full details, please visit the vehicles page.'}
                                                                                                                                                                                                                            </p>
                                                                                                                                                                                                                            <div style="display: flex; gap: 1rem; justify-content: center;">
                                                                                                                                                                                                                                <a href="/vehicles" style="
                                                                                                                                                                                                                                    background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold));
                                                                                                                                                                                                                                    color: var(--primary-dark);
                                                                                                                                                                                                                                    padding: 0.75rem 2rem;
                                                                                                                                                                                                                                    border-radius: 25px;
                                                                                                                                                                                                                                    text-decoration: none;
                                                                                                                                                                                                                                    font-weight: 600;
                                                                                                                                                                                                                                    transition: all 0.3s ease;
                                                                                                                                                                                                                                ">
                                                                                                                                                                                                                                    ${document.documentElement.lang === 'ar' ? 'عرض التفاصيل' : 'View Details'}
                                                                                                                                                                                                                                </a>
                                                                                                                                                                                                                                <button onclick="closeQuickView()" style="
                                                                                                                                                                                                                                    background: rgba(255, 255, 255, 0.1);
                                                                                                                                                                                                                                    color: rgba(255, 255, 255, 0.9);
                                                                                                                                                                                                                                    border: 1px solid rgba(255, 255, 255, 0.2);
                                                                                                                                                                                                                                    padding: 0.75rem 2rem;
                                                                                                                                                                                                                                    border-radius: 25px;
                                                                                                                                                                                                                                    cursor: pointer;
                                                                                                                                                                                                                                    font-weight: 600;
                                                                                                                                                                                                                                    transition: all 0.3s ease;
                                                                                                                                                                                                                                ">
                                                                                                                                                                                                                                    ${document.documentElement.lang === 'ar' ? 'إغلاق' : 'Close'}
                                                                                                                                                                                                                                </button>
                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                    `;

            document.body.appendChild(modal);

            // Animate in
            setTimeout(() => {
                modal.style.opacity = '1';
                modal.querySelector('div').style.transform = 'scale(1)';
            }, 10);

            // Close on overlay click
            modal.addEventListener('click', function (e) {
                if (e.target === modal) {
                    closeQuickView();
                }
            });

            // Store reference for closing
            window.currentModal = modal;
        }

        function closeQuickView() {
            const modal = window.currentModal;
            if (modal) {
                modal.style.opacity = '0';
                modal.querySelector('div').style.transform = 'scale(0.8)';

                setTimeout(() => {
                    document.body.removeChild(modal);
                    window.currentModal = null;
                }, 300);
            }
        }

        // Scroll Animations
        function initializeScrollAnimations() {
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, observerOptions);

            // Observe fleet elements
            document.querySelectorAll('.premium-vehicle-card, .fleet-header, .fleet-filters').forEach(el => {
                el.style.opacity = '0';
                el.style.transform = 'translateY(30px)';
                el.style.transition = 'all 0.6s ease';
                observer.observe(el);
            });
        }

        // Add pulse animation keyframes
        const style = document.createElement('style');
        style.textContent = `
                                                                                                                                                                                                                    @keyframes pulse {
                                                                                                                                                                                                                        0% { transform: scale(1); }
                                                                                                                                                                                                                        50% { transform: scale(1.1); }
                                                                                                                                                                                                                        100% { transform: scale(1); }
                                                                                                                                                                                                                    }
                                                                                                                                                                                                                `;
        document.head.appendChild(style);

        /* Advanced Animations and Interactions */

        // Statistics Counter Animation
        function animateCounters() {
            const counters = document.querySelectorAll('.stat-number[data-count]');

            const observerOptions = {
                threshold: 0.5,
                rootMargin: '0px 0px -100px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const counter = entry.target;
                        const target = parseInt(counter.getAttribute('data-count'));
                        const duration = 2000;
                        const increment = target / (duration / 16);
                        let current = 0;

                        const updateCounter = () => {
                            current += increment;
                            if (current < target) {
                                counter.textContent = Math.floor(current).toLocaleString();
                                requestAnimationFrame(updateCounter);
                            } else {
                                counter.textContent = target.toLocaleString();
                            }
                        };

                        updateCounter();
                        observer.unobserve(counter);
                    }
                });
            }, observerOptions);

            counters.forEach(counter => observer.observe(counter));
        }

        // Testimonials Carousel
        let currentTestimonial = 0;
        const testimonials = document.querySelectorAll('.testimonial-card');
        const totalTestimonials = testimonials.length;

        window.showTestimonial = function (index) {
            const track = document.querySelector('.testimonials-track');
            const navButtons = document.querySelectorAll('.testimonial-nav-btn');

            if (track && navButtons.length > 0) {
                currentTestimonial = index;
                track.style.transform = `translateX(-${index * 100}%)`;

                navButtons.forEach((btn, i) => {
                    if (i === index) {
                        btn.classList.add('active');
                        btn.style.background = 'var(--primary-gold)';
                    } else {
                        btn.classList.remove('active');
                        btn.style.background = 'transparent';
                    }
                });
            }
        }

        window.nextTestimonial = function () {
            const nextIndex = (currentTestimonial + 1) % totalTestimonials;
            showTestimonial(nextIndex);
        }

        window.prevTestimonial = function () {
            const prevIndex = (currentTestimonial - 1 + totalTestimonials) % totalTestimonials;
            showTestimonial(prevIndex);
        }

        // Auto-advance testimonials
        function startTestimonialAutoplay() {
            setInterval(() => {
                nextTestimonial();
            }, 6000);
        }

        // Service Cards Hover Effects
        function initServiceCardEffects() {
            const serviceCards = document.querySelectorAll('.service-card');

            serviceCards.forEach(card => {
                const overlay = card.querySelector('.service-hover-overlay');
                const icon = card.querySelector('.service-icon');
                const iconBg = card.querySelector('.service-icon-bg');

                card.addEventListener('mouseenter', () => {
                    if (overlay) overlay.style.opacity = '0.8';
                    if (icon) {
                        icon.style.transform = 'scale(1.05)';
                        icon.style.filter = 'drop-shadow(0 3px 6px rgba(255, 215, 0, 0.3))';
                    }
                    if (iconBg) {
                        iconBg.style.transform = 'translate(-50%, -50%) scale(1.1)';
                        iconBg.style.background = 'linear-gradient(45deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08))';
                    }
                    card.style.transform = 'translateY(-5px)';
                    card.style.boxShadow = '0 10px 20px rgba(255, 215, 0, 0.15)';
                });

                card.addEventListener('mouseleave', () => {
                    if (overlay) overlay.style.opacity = '0';
                    if (icon) {
                        icon.style.transform = 'scale(1) rotate(0deg)';
                        icon.style.filter = 'drop-shadow(0 2px 4px rgba(255, 215, 0, 0.2))';
                    }
                    if (iconBg) {
                        iconBg.style.transform = 'translate(-50%, -50%) scale(1)';
                        iconBg.style.background = 'linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05))';
                    }
                    card.style.transform = 'translateY(0)';
                    card.style.boxShadow = 'none';
                });
            });
        }

        // Enhanced Scroll Animations
        function initScrollAnimations() {
            const animatedElements = document.querySelectorAll('[data-aos]');

            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const element = entry.target;
                        const delay = element.getAttribute('data-aos-delay') || 0;

                        setTimeout(() => {
                            element.style.opacity = '1';
                            element.style.transform = 'translateY(0)';
                            element.classList.add('aos-animate');
                        }, delay);

                        observer.unobserve(element);
                    }
                });
            }, observerOptions);

            animatedElements.forEach(element => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(30px)';
                element.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
                observer.observe(element);
            });
        }

        // Vehicle Carousel Auto-scroll
        function initVehicleCarousel() {
            const carousel = document.getElementById('vehicleCarousel');
            const cards = carousel.querySelectorAll('.premium-vehicle-card');
            const cardWidth = 320 + 24; // card width + gap
            let currentIndex = 0;
            let isAutoScrolling = true;
            let autoScrollInterval;

            // Clone first few cards for seamless loop
            const firstCard = cards[0].cloneNode(true);
            const secondCard = cards[1].cloneNode(true);
            carousel.appendChild(firstCard);
            carousel.appendChild(secondCard);

            function scrollToIndex(index, smooth = true) {
                const translateX = -index * cardWidth;
                carousel.style.transition = smooth ? 'transform 0.5s ease' : 'none';
                carousel.style.transform = `translateX(${translateX}px)`;
            }

            function nextSlide() {
                currentIndex++;
                scrollToIndex(currentIndex);

                // Reset to beginning for seamless loop
                if (currentIndex >= cards.length) {
                    setTimeout(() => {
                        currentIndex = 0;
                        scrollToIndex(currentIndex, false);
                    }, 500);
                }
            }

            function startAutoScroll() {
                if (autoScrollInterval) clearInterval(autoScrollInterval);
                autoScrollInterval = setInterval(nextSlide, 4000);
            }

            function stopAutoScroll() {
                if (autoScrollInterval) clearInterval(autoScrollInterval);
            }

            // Enhanced hover effects for vehicle cards
            cards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    stopAutoScroll();
                    card.style.transform = 'translateY(-10px) scale(1.02)';
                    card.style.boxShadow = '0 20px 40px rgba(255, 215, 0, 0.2)';
                    card.style.borderColor = 'var(--primary-gold)';

                    // Show quick actions
                    const quickActions = card.querySelector('.quick-actions');
                    if (quickActions) {
                        quickActions.style.opacity = '1';
                    }
                });

                card.addEventListener('mouseleave', () => {
                    if (isAutoScrolling) startAutoScroll();
                    card.style.transform = 'translateY(0) scale(1)';
                    card.style.boxShadow = '0 8px 32px rgba(255, 215, 0, 0.1)';
                    card.style.borderColor = 'rgba(255, 215, 0, 0.3)';

                    // Hide quick actions
                    const quickActions = card.querySelector('.quick-actions');
                    if (quickActions) {
                        quickActions.style.opacity = '0';
                    }
                });
            });

            // Manual navigation
            const leftBtn = document.querySelector('.carousel-nav-btn:first-child');
            const rightBtn = document.querySelector('.carousel-nav-btn:last-child');

            if (leftBtn) {
                leftBtn.addEventListener('click', () => {
                    stopAutoScroll();
                    currentIndex = currentIndex > 0 ? currentIndex - 1 : cards.length - 1;
                    scrollToIndex(currentIndex);
                    setTimeout(() => {
                        if (isAutoScrolling) startAutoScroll();
                    }, 3000);
                });
            }

            if (rightBtn) {
                rightBtn.addEventListener('click', () => {
                    stopAutoScroll();
                    nextSlide();
                    setTimeout(() => {
                        if (isAutoScrolling) startAutoScroll();
                    }, 3000);
                });
            }

            // Pause on container hover
            const container = document.querySelector('.premium-carousel-container');
            if (container) {
                container.addEventListener('mouseenter', stopAutoScroll);
                container.addEventListener('mouseleave', () => {
                    if (isAutoScrolling) startAutoScroll();
                });
            }

            // Start auto-scroll
            startAutoScroll();
        }

        // Vehicle card interaction functions
        function toggleFavorite(button) {
            const icon = button.querySelector('i');
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                button.style.color = '#ff4757';
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                button.style.color = 'white';
            }
        }

        function quickView(vehicleId) {
            // Placeholder for quick view functionality
            console.log('Quick view for:', vehicleId);
        }

        // Initialize all advanced features
        document.addEventListener('DOMContentLoaded', () => {
            animateCounters();
            startTestimonialAutoplay();
            initServiceCardEffects();
            initScrollAnimations();
            initVehicleCarousel();
        });
    </script>
@endpush