{% extends 'base/base.html' %}

{% block title %}دليلك IQ - دليلك الشامل للأماكن والخدمات في العراق{% endblock %}

{% block extra_css %}
<style>
    .mesh-gradient {
        background: 
            radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.3) 0px, transparent 50%),
            radial-gradient(at 100% 0%, rgba(52, 211, 153, 0.3) 0px, transparent 50%),
            radial-gradient(at 100% 100%, rgba(5, 150, 105, 0.3) 0px, transparent 50%),
            radial-gradient(at 0% 100%, rgba(6, 95, 70, 0.3) 0px, transparent 50%);
    }
    
    .category-card {
        position: relative;
        overflow: hidden;
    }
    
    .category-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 0;
    }
    
    .category-card:hover::before {
        opacity: 1;
    }
    
    .category-card > * {
        position: relative;
        z-index: 1;
    }
    
    .blob {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        filter: blur(40px);
    }
    
    .pattern-dots {
        background-image: radial-gradient(rgba(16, 185, 129, 0.15) 1px, transparent 1px);
        background-size: 20px 20px;
    }
    
    .feature-card {
        transition: all 0.3s ease;
    }
    
    .feature-card:hover {
        transform: translateY(-5px);
    }
    
    .testimonial-card {
        /* Background will be handled by theme-card class */
    }
    
    .app-store-badge {
        transition: all 0.3s ease;
    }
    
    .app-store-badge:hover {
        transform: scale(1.05);
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section id="home" class="relative pt-32 pb-24 overflow-hidden theme-bg-primary">
    <!-- Animated Background Blobs -->
    <div class="absolute top-20 right-10 w-96 h-96 bg-emerald-300 blob opacity-20 animate-blob"></div>
    <div class="absolute top-40 left-20 w-80 h-80 bg-emerald-400 blob opacity-20 animate-blob animation-delay-2000"></div>
    <div class="absolute bottom-20 right-1/3 w-72 h-72 bg-emerald-500 blob opacity-20 animate-blob animation-delay-4000"></div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <!-- Text Content -->
            <div class="text-center lg:text-right space-y-8">
                <div class="inline-block">
                    <span class="bg-emerald-100 text-emerald-800 px-6 py-2 rounded-full text-sm font-bold border-2 border-emerald-300 animate-pulse-glow">
                        🎉 أكثر من 15,000 مكان في انتظارك
                    </span>
                </div>
                
                <h1 class="text-5xl md:text-7xl font-black leading-tight">
                    <span class="theme-text-primary">دليلك الشامل</span>
                    <br>
                    <span class="text-gradient rakkas text-6xl md:text-8xl">للأماكن والخدمات</span>
                    <br>
                    <span class="theme-text-primary">في العراق 🇮🇶</span>
                </h1>
                
                <p class="text-xl md:text-2xl theme-text-secondary leading-relaxed font-semibold">
                    اكتشف أفضل المطاعم، المقاهي، الفنادق، العيادات والصالونات
                    <br>
                    <span class="text-emerald-700">احجز • قيّم • وفّر</span> مع عروض حصرية
                </p>
                
                <!-- Advanced Search Box -->
                <div class="relative max-w-2xl mx-auto lg:mx-0">
                    <form method="GET" action="/places/" id="searchForm" class="theme-card rounded-3xl shadow-2xl p-3 flex items-center gap-3 border-4 border-emerald-200 hover:border-emerald-400 transition-all">
                        <div class="flex-1 relative">
                            <div class="flex items-center gap-3 px-4">
                                <i class="fas fa-search text-emerald-600 text-xl"></i>
                                <input 
                                    type="text" 
                                    name="search"
                                    id="searchInput"
                                    value="{{ search_query|default:'' }}"
                                    placeholder="ابحث عن مطعم، مقهى، فندق، عيادة..." 
                                    class="w-full outline-none text-lg font-semibold theme-input placeholder-gray-400"
                                    autocomplete="off"
                                >
                            </div>
                            <!-- Search Suggestions Dropdown -->
                            <div id="searchSuggestions" class="hidden absolute top-full left-0 right-0 mt-2 theme-card rounded-2xl shadow-2xl border-2 border-emerald-200 max-h-80 overflow-y-auto z-50">
                                <div id="suggestionsList" class="py-2"></div>
                                <div id="recentSearches" class="p-3" style="border-top: 1px solid var(--border-primary);">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-sm font-bold theme-text-secondary">البحث السابق</span>
                                        <button type="button" onclick="clearRecentSearches()" class="text-xs text-red-600 hover:text-red-700">مسح الكل</button>
                                    </div>
                                    <div id="recentSearchesList" class="flex flex-wrap gap-2"></div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="bg-gradient-to-r from-emerald-600 to-emerald-700 text-white px-8 py-4 rounded-2xl font-bold hover:shadow-xl hover:scale-105 transition-all duration-300 flex items-center gap-2 whitespace-nowrap">
                            <span>بحث</span>
                            <i class="fas fa-arrow-left"></i>
                        </button>
                    </form>
                </div>
                
                <!-- Stats -->
                <div class="grid grid-cols-3 gap-6 pt-8">
                    <div class="text-center theme-card rounded-2xl p-4 shadow-lg">
                        <div class="text-4xl font-black text-emerald-600 counter" data-target="15000">0</div>
                        <div class="text-sm font-bold theme-text-secondary mt-1">مكان</div>
                    </div>
                    <div class="text-center theme-card rounded-2xl p-4 shadow-lg">
                        <div class="text-4xl font-black text-emerald-600 counter" data-target="5000">0</div>
                        <div class="text-sm font-bold theme-text-secondary mt-1">تقييم</div>
                    </div>
                    <div class="text-center theme-card rounded-2xl p-4 shadow-lg">
                        <div class="text-4xl font-black text-emerald-600 counter" data-target="1000">0</div>
                        <div class="text-sm font-bold theme-text-secondary mt-1">حجز</div>
                    </div>
                </div>
            </div>
            
            <!-- Image/Illustration -->
            <div class="hidden lg:block">
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-3xl transform rotate-6"></div>
                    <div class="relative theme-card rounded-3xl p-8 shadow-2xl transform -rotate-3">
                        <div class="text-center space-y-4">
                            <div class="w-32 h-32 bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-full flex items-center justify-center mx-auto">
                                <i class="fas fa-map-marked-alt text-white text-6xl"></i>
                            </div>
                            <h3 class="text-2xl font-black theme-text-primary">اكتشف العراق</h3>
                            <p class="theme-text-secondary font-semibold">من بغداد إلى البصرة</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-24 theme-bg-primary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-black mb-4">
                <span class="theme-text-primary">لماذا</span>
                <span class="text-gradient rakkas">دليلك IQ؟</span>
            </h2>
            <p class="text-xl theme-text-secondary font-semibold">منصة شاملة تجمع كل ما تحتاجه في مكان واحد</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="feature-card theme-card rounded-3xl p-6 shadow-lg">
                <div class="w-16 h-16 bg-emerald-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fas fa-search-location text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-black theme-text-primary mb-2">بحث ذكي</h3>
                <p class="theme-text-secondary font-semibold">ابحث بسهولة عن أي مكان باستخدام الفلاتر المتقدمة والبحث الجغرافي</p>
            </div>
            
            <div class="feature-card theme-card rounded-3xl p-6 shadow-lg">
                <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fas fa-calendar-check text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-black theme-text-primary mb-2">حجز سريع</h3>
                <p class="theme-text-secondary font-semibold">احجز مواعيدك بسهولة مع الأماكن التي تدعم نظام الحجز</p>
            </div>
            
            <div class="feature-card theme-card rounded-3xl p-6 shadow-lg">
                <div class="w-16 h-16 bg-yellow-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fas fa-star text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-black theme-text-primary mb-2">تقييمات حقيقية</h3>
                <p class="theme-text-secondary font-semibold">اقرأ تقييمات المستخدمين الحقيقية وشارك تجربتك</p>
            </div>
            
            <div class="feature-card theme-card rounded-3xl p-6 shadow-lg">
                <div class="w-16 h-16 bg-purple-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fas fa-tags text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-black theme-text-primary mb-2">عروض حصرية</h3>
                <p class="theme-text-secondary font-semibold">استمتع بعروض وخصومات حصرية من أفضل الأماكن</p>
            </div>
        </div>
    </div>
</section>

<!-- Categories Section -->
<section id="categories" class="py-24 theme-bg-secondary pattern-dots">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-black mb-4">
                <span class="theme-text-primary">استكشف</span>
                <span class="text-gradient rakkas">الفئات</span>
            </h2>
            <p class="text-xl theme-text-secondary font-semibold">اختر الفئة التي تهمك واكتشف أفضل الأماكن</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {% for category in categories|slice:":8" %}
            <a href="/places/?category={{ category.slug }}" class="category-card theme-card rounded-3xl p-6 shadow-xl hover:shadow-2xl transition-all text-center group">
                <div class="w-20 h-20 bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-2xl flex items-center justify-center mx-auto mb-4 transform group-hover:scale-110 transition-transform">
                    {% if category.icon %}
                    <i class="{{ category.icon }} text-white text-3xl"></i>
                    {% else %}
                    <i class="fas fa-tag text-white text-3xl"></i>
                    {% endif %}
                </div>
                <h3 class="text-xl font-black theme-text-primary group-hover:text-white transition-colors">{{ category.name_ar }}</h3>
                <p class="text-sm theme-text-secondary group-hover:text-white/90 transition-colors mt-2">{{ category.places.count }} مكان</p>
            </a>
            {% endfor %}
        </div>
        
        <div class="text-center mt-12">
            <a href="/places/" class="inline-block bg-gradient-to-r from-emerald-600 to-emerald-700 text-white px-8 py-4 rounded-xl font-bold hover:shadow-xl hover:scale-105 transition-all">
                عرض جميع الفئات
            </a>
        </div>
    </div>
</section>

<!-- Featured Places Section -->
{% if places %}
<section id="places" class="py-24 theme-bg-primary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-black mb-4">
                <span class="theme-text-primary">أفضل</span>
                <span class="text-gradient rakkas">الأماكن</span>
            </h2>
            <p class="text-xl theme-text-secondary font-semibold">اكتشف الأماكن الأكثر تقييماً وزيارة</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for place in places|slice:":6" %}
            <a href="/place/{{ place.slug }}/" class="theme-card rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl border-2 border-emerald-100 hover:border-emerald-400 transition-all scroll-reveal group">
                {% if place.image %}
                <div class="relative h-48 overflow-hidden">
                    <img src="{{ media_url }}{{ place.image }}" alt="{{ place.name }}" loading="lazy" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-bold text-emerald-700">
                        {{ place.category.name_ar }}
                    </div>
                    {% if place.is_open %}
                    <div class="absolute top-4 right-4 bg-emerald-500 text-white px-3 py-1 rounded-full text-xs font-bold">
                        مفتوح
                    </div>
                    {% endif %}
                </div>
                {% else %}
                <div class="relative h-48 bg-gradient-to-br from-emerald-100 to-emerald-200 flex items-center justify-center">
                    <i class="fas fa-map-marker-alt text-6xl text-emerald-400"></i>
                </div>
                {% endif %}
                
                <div class="p-6">
                    <h3 class="text-2xl font-black theme-text-primary mb-2 group-hover:text-emerald-600 transition-colors">
                        {{ place.name }}
                    </h3>
                    <div class="flex items-center gap-2 theme-text-secondary mb-3">
                        <i class="fas fa-map-marker-alt text-emerald-600"></i>
                        <span class="font-semibold">{{ place.governorate.name_ar }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="flex text-yellow-400">
                            {% for i in "12345" %}
                            {% if forloop.counter <= place.rating|floatformat:0|add:"0" %}
                            <i class="fas fa-star text-sm"></i>
                            {% else %}
                            <i class="far fa-star text-sm"></i>
                            {% endif %}
                            {% endfor %}
                        </div>
                        <span class="text-sm font-bold theme-text-primary">{{ place.rating|floatformat:1 }}</span>
                        <span class="text-sm theme-text-tertiary">({{ place.reviews_count }})</span>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        
        <div class="text-center mt-12">
            <a href="/places/" class="inline-block bg-gradient-to-r from-emerald-600 to-emerald-700 text-white px-8 py-4 rounded-xl font-bold hover:shadow-xl hover:scale-105 transition-all">
                عرض جميع الأماكن
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- How It Works Section -->
<section class="py-24" style="background-color: var(--bg-secondary);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-black mb-4">
                <span style="color: var(--text-primary);">كيف</span>
                <span class="text-gradient rakkas">تعمل المنصة؟</span>
            </h2>
            <p class="text-xl font-semibold" style="color: var(--text-secondary);">ثلاث خطوات بسيطة للبدء</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="w-24 h-24 bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
                    <span class="text-white text-4xl font-black">1</span>
                </div>
                <h3 class="text-2xl font-black mb-3" style="color: var(--text-primary);">ابحث</h3>
                <p class="font-semibold" style="color: var(--text-secondary);">استخدم شريط البحث للعثور على المكان الذي تريده أو تصفح الفئات</p>
            </div>
            
            <div class="text-center">
                <div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-blue-700 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
                    <span class="text-white text-4xl font-black">2</span>
                </div>
                <h3 class="text-2xl font-black mb-3" style="color: var(--text-primary);">اكتشف</h3>
                <p class="font-semibold" style="color: var(--text-secondary);">اطلع على التفاصيل، التقييمات، الصور والعروض المتاحة</p>
            </div>
            
            <div class="text-center">
                <div class="w-24 h-24 bg-gradient-to-br from-purple-500 to-purple-700 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
                    <span class="text-white text-4xl font-black">3</span>
                </div>
                <h3 class="text-2xl font-black mb-3" style="color: var(--text-primary);">احجز</h3>
                <p class="font-semibold" style="color: var(--text-secondary);">احجز موعدك أو احفظ المكان في المفضلة للرجوع إليه لاحقاً</p>
            </div>
        </div>
    </div>
</section>

<!-- App Stores Section -->
<section class="py-24 bg-gradient-to-br from-emerald-600 via-emerald-700 to-emerald-800 relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <!-- Text Content -->
            <div class="text-center lg:text-right text-white">
                <h2 class="text-4xl md:text-5xl font-black mb-6">
                    حمل التطبيق الآن
                </h2>
                <p class="text-xl md:text-2xl mb-8 font-semibold text-emerald-100">
                    استمتع بتجربة أفضل مع تطبيق دليلك IQ
                    <br>
                    متوفر الآن على جميع المنصات
                </p>
                <p class="text-lg mb-8 text-emerald-50">
                    احصل على إشعارات فورية، وصول سريع، وواجهة سهلة الاستخدام
                    <br>
                    كل ما تحتاجه في جيبك
                </p>
                
                <!-- App Store Badges -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                    <a href="https://play.google.com/store/apps/details?id=com.daleeli.iq" target="_blank" class="app-store-badge inline-block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="حمل من Google Play" class="h-16 w-auto">
                    </a>
                    <a href="https://apps.apple.com/app/daleeli-iq/id123456789" target="_blank" class="app-store-badge inline-block">
                        <img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/ar-sa?size=250x83&releaseDate=1609459200" alt="حمل من App Store" class="h-16 w-auto">
                    </a>
                </div>
                
                <!-- QR Code Section -->
                <div class="mt-8 flex flex-col sm:flex-row gap-6 justify-center lg:justify-start items-center">
                    <div class="bg-white rounded-2xl p-4 shadow-2xl">
                        <div class="text-center mb-2">
                            <i class="fas fa-qrcode text-emerald-600 text-2xl mb-2"></i>
                        </div>
                        <div class="w-32 h-32 bg-gray-100 rounded-lg flex items-center justify-center mb-2">
                            <i class="fas fa-qrcode text-gray-400 text-6xl"></i>
                        </div>
                        <p class="text-xs text-gray-600 font-bold text-center">امسح للتحميل</p>
                    </div>
                    <div class="text-right">
                        <p class="text-emerald-100 font-semibold mb-2">أو امسح رمز QR</p>
                        <p class="text-sm text-emerald-200">لتحميل التطبيق مباشرة على هاتفك</p>
                    </div>
                </div>
            </div>
            
            <!-- Phone Mockup -->
            <div class="hidden lg:block">
                <div class="relative">
                    <div class="absolute inset-0 bg-white/20 rounded-3xl blur-2xl transform rotate-6"></div>
                    <div class="relative bg-white rounded-3xl p-8 shadow-2xl">
                        <div class="bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-2xl p-6 text-center">
                            <div class="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-mobile-alt text-white text-5xl"></i>
                            </div>
                            <h3 class="text-2xl font-black text-white mb-2">دليلك IQ</h3>
                            <p class="text-emerald-100 font-semibold">تطبيقك الشامل</p>
                        </div>
                        <div class="mt-6 grid grid-cols-2 gap-4">
                            <div class="bg-emerald-50 rounded-xl p-4 text-center">
                                <i class="fas fa-download text-emerald-600 text-2xl mb-2"></i>
                                <p class="text-sm font-bold text-gray-700">تحميل سريع</p>
                            </div>
                            <div class="bg-emerald-50 rounded-xl p-4 text-center">
                                <i class="fas fa-bell text-emerald-600 text-2xl mb-2"></i>
                                <p class="text-sm font-bold text-gray-700">إشعارات فورية</p>
                            </div>
                            <div class="bg-emerald-50 rounded-xl p-4 text-center">
                                <i class="fas fa-star text-emerald-600 text-2xl mb-2"></i>
                                <p class="text-sm font-bold text-gray-700">تقييمات حقيقية</p>
                            </div>
                            <div class="bg-emerald-50 rounded-xl p-4 text-center">
                                <i class="fas fa-calendar text-emerald-600 text-2xl mb-2"></i>
                                <p class="text-sm font-bold text-gray-700">حجز سهل</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="py-24" style="background-color: var(--bg-primary);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-black mb-4">
                <span style="color: var(--text-primary);">ماذا يقول</span>
                <span class="text-gradient rakkas">المستخدمون</span>
            </h2>
            <p class="text-xl font-semibold" style="color: var(--text-secondary);">آراء حقيقية من مستخدمينا</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-6">
            <div class="rounded-3xl p-6 shadow-xl border-2 border-emerald-100" style="background-color: var(--bg-card); border-color: var(--border-primary);">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-full flex items-center justify-center">
                        <span class="text-white font-black">أ</span>
                    </div>
                    <div>
                        <h4 class="font-black" style="color: var(--text-primary);">أحمد محمد</h4>
                        <div class="flex text-yellow-400 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                </div>
                <p class="font-semibold" style="color: var(--text-secondary);">"منصة رائعة! وجدت أفضل المطاعم في بغداد بسهولة. التطبيق سهل الاستخدام والبحث سريع."</p>
            </div>
            
            <div class="rounded-3xl p-6 shadow-xl border-2 border-emerald-100" style="background-color: var(--bg-card); border-color: var(--border-primary);">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-700 rounded-full flex items-center justify-center">
                        <span class="text-white font-black">س</span>
                    </div>
                    <div>
                        <h4 class="font-black" style="color: var(--text-primary);">سارة علي</h4>
                        <div class="flex text-yellow-400 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                </div>
                <p class="font-semibold" style="color: var(--text-secondary);">"استخدمت المنصة لحجز موعد في صالون تجميل. العملية كانت سلسة جداً والتطبيق جميل!"</p>
            </div>
            
            <div class="rounded-3xl p-6 shadow-xl border-2 border-emerald-100" style="background-color: var(--bg-card); border-color: var(--border-primary);">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-700 rounded-full flex items-center justify-center">
                        <span class="text-white font-black">م</span>
                    </div>
                    <div>
                        <h4 class="font-black" style="color: var(--text-primary);">محمد كريم</h4>
                        <div class="flex text-yellow-400 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                </div>
                <p class="font-semibold" style="color: var(--text-secondary);">"العروض والخصومات ممتازة! وفرت الكثير من المال باستخدام كوبونات الخصم من المنصة."</p>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="py-24 bg-gradient-to-br from-gray-900 to-gray-800 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-4 gap-8 text-center">
            <div>
                <div class="text-5xl font-black text-emerald-400 mb-2 counter" data-target="15000">0</div>
                <div class="text-xl font-bold text-gray-300">مكان مسجل</div>
            </div>
            <div>
                <div class="text-5xl font-black text-emerald-400 mb-2 counter" data-target="50000">0</div>
                <div class="text-xl font-bold text-gray-300">مستخدم نشط</div>
            </div>
            <div>
                <div class="text-5xl font-black text-emerald-400 mb-2 counter" data-target="10000">0</div>
                <div class="text-xl font-bold text-gray-300">حجز شهري</div>
            </div>
            <div>
                <div class="text-5xl font-black text-emerald-400 mb-2 counter" data-target="4.8">0</div>
                <div class="text-xl font-bold text-gray-300">تقييم متوسط</div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-24 bg-gradient-to-r from-emerald-600 to-emerald-700">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h2 class="text-4xl md:text-5xl font-black text-white mb-6">
            ابدأ رحلتك الآن
        </h2>
        <p class="text-xl text-emerald-100 mb-8 font-semibold">
            انضم إلى آلاف المستخدمين الذين يكتشفون أفضل الأماكن في العراق
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/register/" class="bg-white text-emerald-600 px-8 py-4 rounded-xl font-bold hover:shadow-xl hover:scale-105 transition-all">
                إنشاء حساب مجاني
            </a>
            <a href="/places/" class="bg-emerald-800 text-white px-8 py-4 rounded-xl font-bold hover:shadow-xl hover:scale-105 transition-all border-2 border-white">
                استكشف الأماكن
            </a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
// Search Suggestions
let searchTimeout;
const searchInput = document.getElementById('searchInput');
const searchSuggestions = document.getElementById('searchSuggestions');
const suggestionsList = document.getElementById('suggestionsList');
const recentSearchesList = document.getElementById('recentSearchesList');

// Load recent searches from localStorage
function loadRecentSearches() {
    const recent = JSON.parse(localStorage.getItem('recentSearches') || '[]');
    if (recent.length > 0) {
        recentSearchesList.innerHTML = recent.slice(0, 5).map(term => `
            <button type="button" onclick="selectSearch('${term.replace(/'/g, "\\'")}')" class="px-3 py-1 bg-gray-100 hover:bg-emerald-100 text-gray-700 hover:text-emerald-700 rounded-full text-sm font-semibold transition-all">
                <i class="fas fa-history ml-1"></i>${term}
            </button>
        `).join('');
    } else {
        document.getElementById('recentSearches').classList.add('hidden');
    }
}

// Save search to recent searches
function saveSearch(term) {
    if (!term || term.trim().length < 2) return;
    const recent = JSON.parse(localStorage.getItem('recentSearches') || '[]');
    const filtered = recent.filter(t => t !== term);
    filtered.unshift(term);
    localStorage.setItem('recentSearches', JSON.stringify(filtered.slice(0, 10)));
}

// Clear recent searches
function clearRecentSearches() {
    localStorage.removeItem('recentSearches');
    recentSearchesList.innerHTML = '';
    document.getElementById('recentSearches').classList.add('hidden');
}

// Select search term
function selectSearch(term) {
    searchInput.value = term;
    searchSuggestions.classList.add('hidden');
    document.getElementById('searchForm').submit();
}

// Fetch search suggestions
async function fetchSuggestions(query) {
    if (query.length < 2) {
        searchSuggestions.classList.add('hidden');
        return;
    }
    
    try {
        const response = await window.apiRequest(`/places/search-suggestions/?q=${encodeURIComponent(query)}&limit=5`);
        if (response && response.ok && response.data.length > 0) {
            suggestionsList.innerHTML = response.data.map(item => `
                <button type="button" onclick="selectSearch('${item.text.replace(/'/g, "\\'")}')" class="w-full text-right px-4 py-3 hover:bg-emerald-50 transition-all flex items-center gap-3">
                    <i class="fas ${item.icon} text-emerald-600"></i>
                    <span class="flex-1 font-semibold text-gray-800">${item.text}</span>
                    <span class="text-xs text-gray-500">${item.type === 'place' ? 'مكان' : item.type === 'category' ? 'فئة' : 'محافظة'}</span>
                </button>
            `).join('');
            searchSuggestions.classList.remove('hidden');
        } else {
            suggestionsList.innerHTML = '<div class="px-4 py-3 text-gray-500 text-center">لا توجد اقتراحات</div>';
            searchSuggestions.classList.remove('hidden');
        }
    } catch (error) {
        console.error('Error fetching suggestions:', error);
    }
}

// Search input event listener
searchInput.addEventListener('input', function(e) {
    const query = e.target.value.trim();
    clearTimeout(searchTimeout);
    
    if (query.length >= 2) {
        searchTimeout = setTimeout(() => fetchSuggestions(query), 300);
    } else {
        searchSuggestions.classList.add('hidden');
    }
});

// Hide suggestions when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('#searchInput') && !e.target.closest('#searchSuggestions')) {
        searchSuggestions.classList.add('hidden');
    }
});

// Save search on form submit
document.getElementById('searchForm').addEventListener('submit', function(e) {
    const query = searchInput.value.trim();
    if (query) {
        saveSearch(query);
    }
});

// Load recent searches on page load
loadRecentSearches();

// Counter Animation
const counters = document.querySelectorAll('.counter');
counters.forEach(counter => {
    const target = parseFloat(counter.getAttribute('data-target'));
    let current = 0;
    const increment = target / 100;
    const isDecimal = target % 1 !== 0;
    
    const updateCounter = () => {
        if (current < target) {
            current += increment;
            if (isDecimal) {
                counter.innerText = current.toFixed(1);
            } else {
                counter.innerText = Math.floor(current).toLocaleString() + '+';
            }
            requestAnimationFrame(updateCounter);
        } else {
            if (isDecimal) {
                counter.innerText = target.toFixed(1);
            } else {
                counter.innerText = target.toLocaleString() + '+';
            }
        }
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                updateCounter();
                observer.unobserve(entry.target);
            }
        });
    });
    
    observer.observe(counter);
});
</script>
{% endblock %}