@extends('layouts.frontend')

@section('title', 'الرئيسية')

@section('content')
<!-- Hero Section -->
<section class="relative h-[80vh] flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 z-0">
        <div class="absolute inset-0 bg-black/60 z-10"></div>
        @if($settings->hero_bg_type == 'video' && $settings->hero_bg_path)
            <video autoplay muted loop class="w-full h-full object-cover">
                <source src="{{ asset('storage/' . $settings->hero_bg_path) }}" type="video/mp4">
            </video>
        @else
            @php
                $heroImg = $settings->hero_bg_path ? asset('storage/' . $settings->hero_bg_path) : 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&q=80&w=2070';
            @endphp
            <img src="{{ $heroImg }}" class="w-full h-full object-cover" alt="Hero">
        @endif
    </div>
    
    <div class="relative z-20 text-center px-4">
        <div class="inline-block bg-[#d4af37]/20 text-[#d4af37] px-4 py-1 rounded-full text-xs mb-6 border border-[#d4af37]/30">
            🏆 الوكيل المعتمد للسيارات الفاخرة
        </div>
        <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
            {!! str_replace('معنا', '<span class="text-[#d4af37]">معنا</span>', $settings->hero_title ?? 'اكتشف سيارة أحلامك معنا') !!}
        </h1>
        <p class="text-gray-300 max-w-2xl mx-auto mb-10 text-lg">
            {{ $settings->hero_subtitle ?? 'نقدم لك أفخم السيارات العالمية بأسعار تنافسية وخطط تقسيط مريحة تناسب ميزانيتك.' }}
        </p>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('cars.index') }}" class="btn-gold px-10 py-4 rounded-lg">تصفح السيارات</a>
            <a href="#contact" class="bg-white/10 hover:bg-white/20 text-white px-10 py-4 rounded-lg backdrop-blur-sm transition-all">تواصل معنا</a>
        </div>
        
        <div class="mt-20 grid grid-cols-3 gap-8 md:gap-20">
            <div>
                <div class="text-3xl font-bold">{{ $settings->hero_cars_count ?? '+500' }}</div>
                <div class="text-gray-400 text-sm">سيارة متوفرة</div>
            </div>
            <div>
                <div class="text-3xl font-bold">{{ $settings->hero_experience_years ?? '+15' }}</div>
                <div class="text-gray-400 text-sm">سنة خبرة</div>
            </div>
            <div>
                <div class="text-3xl font-bold">{{ $settings->hero_customers_count ?? '+10K' }}</div>
                <div class="text-gray-400 text-sm">عميل سعيد</div>
            </div>
        </div>
    </div>
</section>

<!-- Features Grid -->
<section class="py-12 -mt-16 relative z-30">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach([
                ['تقسيط مريح', 'خطط تقسيط تصل إلى 60 شهر', '💰'],
                ['ضمان شامل', 'ضمان على جميع السيارات', '🛡️'],
                ['استبدال سهل', 'استبدل سيارتك القديمة', '🔄'],
                ['فحص معتمد', 'فحص شامل قبل البيع', '📋']
            ] as $feature)
            <div class="card-dark p-6 text-center group bg-[#111]/90 backdrop-blur-sm">
                <div class="text-3xl mb-3 group-hover:scale-110 transition-transform">{{ $feature[2] }}</div>
                <h3 class="text-base font-bold mb-1">{{ $feature[0] }}</h3>
                <p class="text-gray-400 text-xs">{{ $feature[1] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Latest Cars -->
<section id="cars" class="py-24 bg-[#0a0a0a]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-[#d4af37] text-sm font-bold tracking-widest uppercase mb-3">تشكيلتنا المميزة</h2>
            <h3 class="text-3xl md:text-5xl font-bold">أحدث السيارات</h3>
            <p class="text-gray-500 mt-6 max-w-xl mx-auto text-sm leading-relaxed">اختر من بين مجموعة واسعة من أفخم السيارات العالمية بأسعار تنافسية</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            @forelse($latest_cars as $car)
            <div class="card-dark overflow-hidden flex flex-col group h-full">
                <div class="relative h-64 overflow-hidden">
                    @php
                        $displayImage = $car->mainImage ?? $car->images->first();
                        $imagePath = $displayImage ? $displayImage->path : null;
                        $imageUrl = $imagePath ? (str_starts_with($imagePath, 'http') ? $imagePath : asset('storage/'.$imagePath)) : asset('images/login-bg.png');
                    @endphp
                    <img src="{{ $imageUrl }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="{{ $car->title }}" onerror="this.src='{{ asset('images/login-bg.png') }}'">
                    <div class="absolute top-4 right-4 flex flex-col gap-2">
                        <span class="bg-[#d4af37] text-black text-[10px] font-bold px-3 py-1 rounded shadow-lg">
                            {{ $car->type == 'sale' ? 'للبيع' : ($car->type == 'rent' ? 'للايجار' : 'للبيع/للايجار') }}
                        </span>
                        <span class="bg-black/50 backdrop-blur-md text-white text-[10px] font-bold px-3 py-1 rounded border border-white/20">
                            {{ $car->year }}
                        </span>
                    </div>
                </div>
                <div class="p-6 flex-grow flex flex-col bg-gradient-to-b from-[#1a1a1a] to-[#111]">
                    <h3 class="text-xl font-bold mb-4 text-white group-hover:text-[#d4af37] transition-colors line-clamp-1">{{ $car->title }}</h3>
                    
                    <div class="grid grid-cols-3 gap-2 mb-6 text-[10px] text-gray-400">
                        <div class="bg-black/30 p-2 rounded text-center border border-gray-800">
                            <div class="mb-1 text-gray-500 italic">الممشى</div>
                            <div class="text-white font-bold">{{ number_format($car->mileage) }} كم</div>
                        </div>
                        <div class="bg-black/30 p-2 rounded text-center border border-gray-800">
                            <div class="mb-1 text-gray-500 italic">ناقل الحركة</div>
                            <div class="text-white font-bold">{{ $car->transmission }}</div>
                        </div>
                        <div class="bg-black/30 p-2 rounded text-center border border-gray-800">
                            <div class="mb-1 text-gray-500 italic">الوقود</div>
                            <div class="text-white font-bold">{{ $car->fuel_type }}</div>
                        </div>
                    </div>

                    <div class="mt-auto pt-4 border-t border-gray-800/50 flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="text-[10px] text-gray-500 mb-1 italic">السعر الإجمالي</span>
                            <span class="text-[#d4af37] font-bold text-lg leading-none">
                                @if($car->price)
                                    {{ number_format($car->price) }} <span class="text-[10px]">ر.س</span>
                                @elseif($car->daily_price)
                                    {{ number_format($car->daily_price) }} <span class="text-[10px]">ر.س / يوم</span>
                                @endif
                            </span>
                        </div>
                        <a href="{{ route('cars.show', $car->id) }}" class="bg-[#d4af37] text-black px-5 py-2 rounded font-bold text-xs hover:bg-[#b08d2a] transition-all shadow-lg shadow-[#d4af37]/10">
                            عرض التفاصيل
                        </a>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-3 text-center text-gray-500 py-10">
                لا يوجد سيارات متاحة حالياً.
            </div>
            @endforelse
        </div>
        
        <div class="text-center mt-12">
            <a href="{{ route('cars.index') }}" class="inline-block border border-[#d4af37] text-[#d4af37] hover:bg-[#d4af37] hover:text-black px-8 py-3 rounded-lg transition-all">عرض جميع السيارات</a>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section id="about" class="py-20 bg-[#0a0a0a]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="text-[#d4af37] text-sm font-bold tracking-widest uppercase">{{ $settings->features_title ?? 'مميزاتنا' }}</span>
            <h2 class="text-3xl md:text-4xl font-bold mt-4">{{ $settings->features_heading ?? 'لماذا تختار معرض النخبة؟' }}</h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @php
                $features = $settings->features_list ?? [
                    ['title' => 'جودة مضمونة', 'description' => 'جميع سياراتنا تخضع لفحص شامل من 150 نقطة', 'icon' => '🎖️'],
                    ['title' => 'تمويل ميسر', 'description' => 'نوفر خيارات تمويل متعددة بالتعاون مع أفضل البنوك', 'icon' => '💳'],
                    ['title' => 'ضمان ممتد', 'description' => 'ضمان شامل يصل إلى 5 سنوات على السيارات الجديدة', 'icon' => '🛡️'],
                    ['title' => 'خدمة ما بعد البيع', 'description' => 'مركز صيانة متكامل مع فنيين متخصصين', 'icon' => '🔧'],
                    ['title' => 'توصيل مجاني', 'description' => 'نوصل سيارتك إلى باب منزلك في أي مكان بالمملكة', 'icon' => '🚚'],
                    ['title' => 'دعم على مدار الساعة', 'description' => 'فريق خدمة عملاء متاح 24/7 للإجابة على استفساراتكم', 'icon' => '📞']
                ];
            @endphp
            @foreach($features as $item)
            <div class="bg-[#111] p-8 rounded-2xl border border-gray-800 flex items-start">
                <div class="text-3xl ml-6">{{ $item['icon'] ?? ($item[2] ?? '') }}</div>
                <div>
                    <h4 class="text-lg font-bold mb-2">{{ $item['title'] ?? ($item[0] ?? '') }}</h4>
                    <p class="text-gray-400 text-sm leading-relaxed">{{ $item['description'] ?? ($item[1] ?? '') }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-20 bg-[#0f0f0f]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-black/40 rounded-3xl p-8 md:p-16 border border-gray-800 grid grid-cols-1 md:grid-cols-2 gap-16">
            <div>
                <h2 class="text-3xl md:text-4xl font-bold mb-6">{{ $settings->contact_section_title ?? 'نحن هنا لمساعدتك' }}</h2>
                <p class="text-gray-400 mb-10 leading-relaxed">{{ $settings->contact_section_subtitle ?? 'فريقنا المتخصص جاهز للإجابة على جميع استفساراتك ومساعدتك في اختيار السيارة المناسبة لك.' }}</p>
                
                <div class="space-y-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-[#1a1a1a] rounded-full flex items-center justify-center text-[#d4af37] ml-4">📍</div>
                        <div>
                            <div class="text-white font-bold">العنوان</div>
                            <div class="text-gray-500 text-sm">{{ $settings->contact_address }}</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-[#1a1a1a] rounded-full flex items-center justify-center text-[#d4af37] ml-4">📞</div>
                        <div>
                            <div class="text-white font-bold">الهاتف</div>
                            <div class="text-gray-500 text-sm" dir="ltr">{{ $settings->contact_phone }}</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div>
                <form action="{{ route('inquiries.store') }}" method="POST" class="space-y-4">
                    @csrf
                    <input type="hidden" name="request_type" value="inquiry">
                    <input type="hidden" name="car_id" value="{{ $latest_cars->first()->id ?? 1 }}">
                    
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">الاسم الكامل</label>
                        <input type="text" name="name" class="w-full bg-[#1a1a1a] border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none" placeholder="أدخل اسمك">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">رقم الجوال</label>
                        <input type="text" name="phone" class="w-full bg-[#1a1a1a] border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none" placeholder="05xxxxxxxx">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">الرسالة</label>
                        <textarea name="notes" rows="4" class="w-full bg-[#1a1a1a] border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none" placeholder="كيف يمكننا مساعدتك؟"></textarea>
                    </div>
                    <button type="submit" class="btn-gold w-full py-4 rounded-lg">إرسال الاستفسار</button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection