@extends('layouts.app')

@section('title', 'صفحه اصلی')

@section('content')
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-primary-600 via-primary-700 to-purple-800 text-white overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
                <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                    <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"/>
                </pattern>
            </defs>
            <rect width="100" height="100" fill="url(#grid)"/>
        </svg>
    </div>
    
    <div class="container mx-auto px-4 py-20 relative">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">
                رزرو هوشمند بلیط هواپیما ✈️
            </h1>
            <p class="text-xl opacity-90 mb-8">
                با کمک هوش مصنوعی، بهترین پرواز را متناسب با نیازهای شما پیدا کنید
            </p>
            
            <!-- Search Box -->
            <div class="bg-white rounded-2xl p-6 shadow-2xl text-gray-800">
                <form action="{{ url('/search') }}" method="GET" class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">مبدا</label>
                            <select name="origin" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                                <option value="">انتخاب شهر</option>
                                <option value="THR">تهران</option>
                                <option value="MHD">مشهد</option>
                                <option value="IFN">اصفهان</option>
                                <option value="SYZ">شیراز</option>
                                <option value="TBZ">تبریز</option>
                                <option value="KIH">کیش</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">مقصد</label>
                            <select name="destination" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                                <option value="">انتخاب شهر</option>
                                <option value="THR">تهران</option>
                                <option value="MHD">مشهد</option>
                                <option value="IFN">اصفهان</option>
                                <option value="SYZ">شیراز</option>
                                <option value="TBZ">تبریز</option>
                                <option value="KIH">کیش</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">تاریخ رفت</label>
                            <input type="date" name="date" 
                                   class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                                   min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">تعداد مسافر</label>
                            <select name="passengers" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                                @for($i = 1; $i <= 9; $i++)
                                    <option value="{{ $i }}">{{ $i }} نفر</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    
                    <button type="submit" class="w-full bg-primary-600 text-white py-4 rounded-xl font-bold text-lg hover:bg-primary-700 transition flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        جستجوی پرواز
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Decorative plane -->
    <div class="absolute top-10 right-10 text-6xl opacity-20 animate-bounce">✈️</div>
    <div class="absolute bottom-10 left-10 text-4xl opacity-20">🌍</div>
</section>

<!-- Features Section -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">ویژگی‌های هوشمند ما</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 text-center hover:shadow-lg transition">
                <div class="text-5xl mb-4">🧠</div>
                <h3 class="text-xl font-bold mb-3">شخصی‌سازی هوشمند</h3>
                <p class="text-gray-600">
                    پروازها بر اساس ترجیحات و سابقه سفر شما رتبه‌بندی می‌شوند
                </p>
            </div>
            
            <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-8 text-center hover:shadow-lg transition">
                <div class="text-5xl mb-4">🛡️</div>
                <h3 class="text-xl font-bold mb-3">لایه ناظر هوشمند</h3>
                <p class="text-gray-600">
                    قبل از نهایی شدن رزرو، کیفیت و ریسک ارزیابی می‌شود
                </p>
            </div>
            
            <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8 text-center hover:shadow-lg transition">
                <div class="text-5xl mb-4">🤖</div>
                <h3 class="text-xl font-bold mb-3">دستیار هوش مصنوعی</h3>
                <p class="text-gray-600">
                    پاسخگویی به سوالات و پیشنهاد مقصد سفر
                </p>
            </div>
        </div>
    </div>
</section>

<!-- How it Works -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">چگونه کار می‌کند؟</h2>
        
        <div class="max-w-4xl mx-auto">
            <div class="flex flex-col md:flex-row items-center gap-8">
                <div class="flex-1 text-center md:text-right">
                    <div class="inline-block bg-primary-100 text-primary-600 rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold mb-4">۱</div>
                    <h3 class="text-xl font-bold mb-2">جستجوی پرواز</h3>
                    <p class="text-gray-600">مبدا، مقصد و تاریخ سفر را وارد کنید</p>
                </div>
                
                <div class="hidden md:block text-4xl text-gray-300">→</div>
                
                <div class="flex-1 text-center md:text-right">
                    <div class="inline-block bg-primary-100 text-primary-600 rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold mb-4">۲</div>
                    <h3 class="text-xl font-bold mb-2">انتخاب هوشمند</h3>
                    <p class="text-gray-600">سیستم بهترین پروازها را بر اساس پروفایل شما پیشنهاد می‌دهد</p>
                </div>
                
                <div class="hidden md:block text-4xl text-gray-300">→</div>
                
                <div class="flex-1 text-center md:text-right">
                    <div class="inline-block bg-primary-100 text-primary-600 rounded-full w-12 h-12 flex items-center justify-center text-xl font-bold mb-4">۳</div>
                    <h3 class="text-xl font-bold mb-2">رزرو مطمئن</h3>
                    <p class="text-gray-600">با تأیید لایه ناظر، رزرو با اطمینان انجام شود</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Popular Routes -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">مسیرهای پرطرفدار</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @php
                $routes = [
                    ['from' => 'تهران', 'to' => 'مشهد', 'price' => '۱,۲۰۰,۰۰۰', 'image' => '🕌'],
                    ['from' => 'تهران', 'to' => 'کیش', 'price' => '۱,۸۰۰,۰۰۰', 'image' => '🏝️'],
                    ['from' => 'تهران', 'to' => 'شیراز', 'price' => '۱,۱۰۰,۰۰۰', 'image' => '🏛️'],
                    ['from' => 'مشهد', 'to' => 'کیش', 'price' => '۲,۲۰۰,۰۰۰', 'image' => '✈️'],
                    ['from' => 'تهران', 'to' => 'اصفهان', 'price' => '۹۵۰,۰۰۰', 'image' => '🌉'],
                    ['from' => 'تهران', 'to' => 'تبریز', 'price' => '۱,۰۵۰,۰۰۰', 'image' => '⛰️'],
                ];
            @endphp
            
            @foreach($routes as $route)
                <div class="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition group">
                    <div class="bg-gradient-to-br from-primary-500 to-purple-600 h-32 flex items-center justify-center text-6xl">
                        {{ $route['image'] }}
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="font-bold">{{ $route['from'] }}</span>
                            <span class="text-gray-400">→</span>
                            <span class="font-bold">{{ $route['to'] }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">از</span>
                            <span class="text-primary-600 font-bold">{{ $route['price'] }} تومان</span>
                        </div>
                        <a href="{{ url('/search?origin=' . $route['from'] . '&destination=' . $route['to']) }}" 
                           class="block mt-4 text-center bg-primary-600 text-white py-2 rounded-lg opacity-0 group-hover:opacity-100 transition">
                            مشاهده پروازها
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-16 bg-gradient-to-r from-primary-600 to-purple-600 text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold mb-4">آماده سفر هستید؟</h2>
        <p class="text-xl opacity-90 mb-8">همین الان ثبت‌نام کنید و از ویژگی‌های هوشمند استفاده کنید</p>
        <div class="flex justify-center gap-4">
            <a href="{{ url('/register') }}" class="bg-white text-primary-600 px-8 py-3 rounded-xl font-bold hover:bg-gray-100 transition">
                ثبت‌نام رایگان
            </a>
            <a href="{{ url('/ai-assistant') }}" class="border-2 border-white text-white px-8 py-3 rounded-xl font-bold hover:bg-white/10 transition">
                صحبت با دستیار
            </a>
        </div>
    </div>
</section>
@endsection