@extends('layouts.app')

@section('title', 'زواج نت - تجاوز السطحية، واكتشف الأصالة')

@section('content')
    {{-- رسالة ترحيب للمستخدمين الجدد --}}
    @auth
        @php
            $isNewUser = Auth::check() && Auth::user()->created_at && Auth::user()->created_at->diffInHours(now()) < 24;
        @endphp
        @if($isNewUser)
            <div class="fixed top-4 right-4 z-50 max-w-sm" x-data="{ show: true }" x-show="show" x-cloak>
                <div class="bg-gradient-to-r from-green-500 to-emerald-600 text-white p-4 rounded-2xl shadow-2xl border border-white/20 backdrop-blur-sm">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-xl">🎉</span>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-lg mb-1">أهلاً وسهلاً بك!</h3>
                            <p class="text-green-100 text-sm mb-3">نحن متحمسون لوجودك معنا في زواجنت</p>
                            <div class="flex gap-2">
                                <button @click="show = false" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-lg transition-colors">
                                    إغلاق
                                </button>
                                <a href="{{ route('dashboard') }}" class="text-xs bg-white text-green-600 hover:bg-white/90 px-3 py-1 rounded-lg transition-colors font-medium">
                                    لوحة التحكم
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endauth

    <!-- Hero Section: محسن مع خلفية متدرجة وتأثيرات بصرية -->
    <section class="relative isolate overflow-hidden min-h-screen flex items-center justify-center" data-aos="fade-up">
        <div class="absolute inset-0 -z-10 bg-gradient-to-br from-brand-primary/90 via-brand-accent/80 to-brand-primary/90">
            <div class="absolute inset-0 bg-black/20"></div>
            <!-- Floating Hearts Animation -->
            <div class="absolute inset-0 overflow-hidden">
                <div class="floating-hearts"></div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-6 py-20 md:py-28 text-center text-white relative z-10">
            <div class="mb-10">
                <span class="inline-flex items-center justify-center w-24 h-24 bg-white/20 backdrop-blur rounded-3xl mb-6 text-4xl animate-float">💑</span>
                <h1 class="text-4xl md:text-6xl font-black text-white leading-tight mb-4">
                    تجاوز السطحية، <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-indigo-300">واكتشف الأصالة</span>
                </h1>
                <p class="text-lg md:text-2xl text-white/90 leading-relaxed mb-8 max-w-3xl mx-auto">
                    نبني الجسور بين القلوب عبر قصص حقيقية وتوافق عميق. اكتشف توافقًا عميقًا ومعرفة حقيقية بعيدًا عن السطحية، وابدأ رحلتك نحو شريك حياة يُشبهك.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <x-enhanced-button variant="primary" size="lg" ripple="true" as="a" href="{{ route('register') }}">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        ابدأ قصتك
                    </x-enhanced-button>
                    <x-enhanced-button variant="secondary" size="lg" ripple="true" as="a" href="#how-it-works">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        تعرف على المزيد
                    </x-enhanced-button>
                </div>
            </div>

            <!-- نموذج البحث السريع المحسن -->
            <div class="mt-10 max-w-4xl mx-auto bg-white/95 dark:bg-gray-800/95 backdrop-blur rounded-2xl shadow-2xl p-6 border border-white/20">
                <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">بحث سريع عن شريك الحياة</h3>
                @include('frontend.components.search-form')
            </div>
        </div>
    </section>

    <!-- لماذا زواج نت؟ مميزات محسنة -->
    <section id="why-us" class="py-20 bg-white dark:bg-gray-900 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    لماذا تختار زواج نت؟
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    لسنا منصة تمرير لا نهائي؛ نحن مساحة لبناء روابط ناضجة ومستقرة
                </p>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="feature-card bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-6 shadow-soft border border-blue-100 dark:border-blue-800/30">
                    <div class="text-3xl mb-4">🔐</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">خصوصية وأمان</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">تحكم كامل في من يرى معلوماتك وصورك مع حماية مشددة للبيانات.</p>
                </div>
                <div class="feature-card bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-6 shadow-soft border border-green-100 dark:border-green-800/30">
                    <div class="text-3xl mb-4">🎯</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">توافق ذكي</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">ترشيحات مبنية على القيم والاهتمامات المشتركة والتفاهم العميق.</p>
                </div>
                <div class="feature-card bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-6 shadow-soft border border-purple-100 dark:border-purple-800/30">
                    <div class="text-3xl mb-4">🧭</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">تجربة سهلة</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">خطوات واضحة للبدء والوصول للنتائج مع دعم مستمر.</p>
                </div>
                <div class="feature-card bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-2xl p-6 shadow-soft border border-amber-100 dark:border-amber-800/30">
                    <div class="text-3xl mb-4">🤝</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">مجتمع محترم</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">تواصل آمن مبني على الاحترام والمسؤولية والقيم الإسلامية.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- كيف يعمل زواج نت؟ خطوات محسنة -->
    <section id="how-it-works" class="py-20 bg-gradient-to-br from-brand-secondary to-white dark:from-gray-800 dark:to-gray-900 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    كيف يعمل زواج نت؟
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    رحلة بسيطة وواضحة نحو شريك الحياة المناسب
                </p>
            </div>
            <div class="grid md:grid-cols-4 gap-6">
                <div class="step-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-primary to-brand-accent text-white flex items-center justify-center mb-4 font-bold text-xl shadow-lg">1</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">سجّل حسابك</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">ابدأ باسم وبريد إلكتروني، واختَر كلمة مرور قوية لحماية حسابك.</p>
                </div>
                <div class="step-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-primary to-brand-accent text-white flex items-center justify-center mb-4 font-bold text-xl shadow-lg">2</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">أكمل ملفك</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">أضف تفاصيلك الشخصية وصورًا واضحة لرفع نسبة التوافق والثقة.</p>
                </div>
                <div class="step-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-primary to-brand-accent text-white flex items-center justify-center mb-4 font-bold text-xl shadow-lg">3</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">تعرّف على الترشيحات</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">نرشح لك من يشاركك القيم والاهتمامات والرؤية المشتركة للحياة.</p>
                </div>
                <div class="step-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-primary to-brand-accent text-white flex items-center justify-center mb-4 font-bold text-xl shadow-lg">4</div>
                    <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-gray-100">ابدأ التواصل</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">تواصل بأمان واحترام، وابدأ قصة حقيقية نحو الزواج السعيد.</p>
                </div>
            </div>
        </div>
    </section>

    @php
        // توفير بيانات افتراضية عند غياب المتغير من الكنترولر
        if (!isset($featuredUsers) || (is_countable($featuredUsers ?? []) && count($featuredUsers) === 0)) {
            $featuredUsers = collect([
                (object) ['photo' => asset('images/wedding-1.jpg'), 'name' => 'آمنة', 'city' => 'الرياض', 'country' => 'السعودية', 'completion' => 95],
                (object) ['photo' => asset('images/wedding-2.jpg'), 'name' => 'محمّد', 'city' => 'القاهرة', 'country' => 'مصر', 'completion' => 88],
                (object) ['photo' => asset('images/wedding-3.jpg'), 'name' => 'سارة', 'city' => 'الدار البيضاء', 'country' => 'المغرب', 'completion' => 92],
                (object) ['photo' => asset('images/wedding-4.jpg'), 'name' => 'ياسر', 'city' => 'عمان', 'country' => 'الأردن', 'completion' => 90],
            ]);
        }
    @endphp

    <!-- الأعضاء المميزون - محسن -->
    <section id="featured" class="py-20 bg-white dark:bg-gray-900 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    الأعضاء المميزون
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    تعرف على بعض المنضمين حديثاً لمجتمعنا المحترم
                </p>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                @forelse($featuredUsers as $user)
                    @include('frontend.components.member-card', ['user' => $user])
                @empty
                    <div class="col-span-full text-center py-12">
                        <div class="text-6xl mb-4">👥</div>
                        <p class="text-gray-500 dark:text-gray-400 text-lg">لا يوجد أعضاء بعد.</p>
                        <p class="text-gray-400 dark:text-gray-500 text-sm mt-2">كن أول من ينضم لمجتمعنا!</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- قصص النجاح - محسن -->
    <section class="py-20 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    قصص نجاح
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    قصص حقيقية من أزواج وجدوا شريك حياتهم عبر زواج نت
                </p>
            </div>
            <div class="grid md:grid-cols-3 gap-6">
                @foreach([
                    ['img' => asset('images/wedding-1.jpg'), 'quote' => 'وجدنا التفاهم الحقيقي بعيدًا عن المظاهر. زواج نت ساعدنا في التعرف على القيم المشتركة.', 'couple' => 'أحمد وسارة'],
                    ['img' => asset('images/wedding-2.jpg'), 'quote' => 'قصة بدعم المجتمع والقيم المشتركة. منصة محترمة ساعدتنا في بناء علاقة قوية.', 'couple' => 'محمد وفاطمة'],
                    ['img' => asset('images/wedding-3.jpg'), 'quote' => 'من رسالة بسيطة إلى شراكة حياة. شكراً لزواج نت على هذه الرحلة الجميلة.', 'couple' => 'علي وزينب'],
                ] as $story)
                <div class="success-story-card bg-white dark:bg-gray-800 rounded-2xl shadow-soft overflow-hidden border border-gray-100 dark:border-gray-700">
                    <img src="{{ $story['img'] }}" alt="قصة نجاح" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <p class="text-gray-700 dark:text-gray-200 text-sm mb-3 italic">"{{ $story['quote'] }}"</p>
                        <p class="text-brand-primary font-semibold text-sm">{{ $story['couple'] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- إحصائيات مجتمعنا - محسن -->
    <section class="py-20 bg-white dark:bg-gray-900 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    إحصائيات مجتمعنا
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    أرقام تعبّر عن الثقة والتفاعل في مجتمعنا المتنامي
                </p>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                @php $stats=[
                    ['n'=>15000,'l'=>'عضو نشط','c'=>'text-blue-600','icon'=>'👥'],
                    ['n'=>500,'l'=>'زواج ناجح','c'=>'text-green-600','icon'=>'💒'],
                    ['n'=>98,'l'=>'% رضا','c'=>'text-purple-600','icon'=>'⭐'],
                    ['n'=>25,'l'=>'دولة','c'=>'text-amber-600','icon'=>'🌍']
                ]; @endphp
                @foreach($stats as $st)
                <div class="stat-card bg-gradient-to-br from-gray-50 to-white dark:from-gray-800 dark:to-gray-700 rounded-2xl p-6 text-center shadow-soft border border-gray-100 dark:border-gray-600">
                    <div class="text-4xl mb-3">{{ $st['icon'] }}</div>
                    <div class="num {{ $st['c'] }} counter text-3xl font-bold mb-2" data-target="{{ $st['n'] }}">0</div>
                    <p class="label text-gray-600 dark:text-gray-300 font-medium">{{ $st['l'] }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- الأسئلة الشائعة - محسن -->
    <section class="py-20 bg-gradient-to-b from-brand-secondary to-white dark:from-gray-800 dark:to-gray-900 relative" data-aos="fade-up">
        <div class="max-w-4xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    الأسئلة الشائعة
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    إجابات على أكثر الأسئلة شيوعاً حول خدماتنا
                </p>
            </div>
            <div id="accordion-faq" data-accordion="open" class="space-y-4">
                @foreach([
                  ['q'=>'هل بياناتي آمنة؟','a'=>'نعم، نستخدم تشفيرًا متقدمًا وحدود صلاحيات صارمة وإعدادات مرنة للخصوصية. جميع البيانات محمية بأحدث تقنيات الأمان.'],
                  ['q'=>'هل يمكن إخفاء صوري؟','a'=>'يمكنك التحكم الكامل في من يرى صورك وإخفاؤها للعامة أو تحديد من يمكنه رؤيتها. خصوصيتك تحت سيطرتك الكاملة.'],
                  ['q'=>'كيف تعمل التوصيات؟','a'=>'تعتمد على المعايير القيمية والاهتمامات المشتركة ونشاط الحساب. خوارزمية ذكية تقدم أفضل التطابقات.'],
                  ['q'=>'هل الخدمة مجانية؟','a'=>'يمكنك البدء مجانًا مع مزايا أساسية، مع مزايا إضافية متقدمة للعضوية المميزة.'],
                  ['q'=>'كيف أتأكد من صحة البيانات؟','a'=>'نقوم بمراجعة الملفات وتأكيد الهويات. يمكنك أيضاً الإبلاغ عن أي محتوى مشكوك فيه.'],
                  ['q'=>'هل يمكنني إلغاء الاشتراك؟','a'=>'نعم، يمكنك إلغاء الاشتراك في أي وقت. بياناتك ستُحذف نهائياً عند طلبك.'],
                ] as $i => $item)
                <div class="faq-item border border-gray-200 dark:border-gray-700 rounded-2xl overflow-hidden bg-white dark:bg-gray-800 shadow-soft">
                    <h3 id="faq-heading-{{ $i }}">
                        <button type="button" class="faq-question flex items-center justify-between w-full p-6 text-left text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-accordion-target="#faq-body-{{ $i }}" aria-expanded="false" aria-controls="faq-body-{{ $i }}">
                            <span class="font-semibold text-lg">{{ $item['q'] }}</span>
                            <svg data-accordion-icon class="w-5 h-5 shrink-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </button>
                    </h3>
                    <div id="faq-body-{{ $i }}" class="faq-answer hidden" aria-labelledby="faq-heading-{{ $i }}">
                        <div class="p-6 text-gray-700 dark:text-gray-300 border-t border-gray-100 dark:border-gray-700">{{ $item['a'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- معايير الثقة - محسن -->
    <section class="py-20 bg-white dark:bg-gray-900 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    معايير الثقة والأمان
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    نلتزم بأعلى معايير الأمان والخصوصية لحماية مجتمعنا
                </p>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="trust-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900 dark:text-gray-100">حسابات موثّقة</p>
                            <p class="text-xs text-gray-600 dark:text-gray-300">مراجعات وتبليغات فعّالة</p>
                        </div>
                    </div>
                </div>
                <div class="trust-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0-1.657-1.79-3-4-3S4 9.343 4 11s1.79 3 4 3 4-1.343 4-3z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11c0-1.657-1.79-3-4-3-.492 0-.957.089-1.382.246"/></svg>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900 dark:text-gray-100">خصوصية مشدّدة</p>
                            <p class="text-xs text-gray-600 dark:text-gray-300">تحكم بالصور والظهور</p>
                        </div>
                    </div>
                </div>
                <div class="trust-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900 dark:text-gray-100">توافق ذكي</p>
                            <p class="text-xs text-gray-600 dark:text-gray-300">ترشيحات بمعايير قيمية</p>
                        </div>
                    </div>
                </div>
                <div class="trust-card bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-soft border border-gray-100 dark:border-gray-700">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7"/></svg>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900 dark:text-gray-100">دعم سريع</p>
                            <p class="text-xs text-gray-600 dark:text-gray-300">فريق استجابة خلال 24 ساعة</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- معرض الصور - محسن -->
    <section class="py-20 bg-gradient-to-b from-white to-brand-secondary dark:from-gray-900 dark:to-gray-800 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-gray-900 dark:text-gray-100">
                    لقطات زواج
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    لحظات سعادة من أزواج وجدوا شريك حياتهم عبر زواج نت
                </p>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-6 gap-4">
                @foreach(['images/wedding-1.jpg','images/wedding-2.jpg','images/wedding-3.jpg','images/wedding-4.jpg','images/wedding-5.jpg','images/wedding-6.jpg'] as $img)
                    <div class="gallery-item rounded-2xl overflow-hidden shadow-soft hover:shadow-lg transition-shadow duration-300">
                        <img src="{{ asset($img) }}" alt="لقطة زواج" class="w-full h-28 md:h-32 object-cover hover:scale-105 transition-transform duration-300">
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- دعوة ختامية محسنة -->
    <section class="py-20 bg-gradient-to-r from-brand-primary/10 to-brand-accent/10 dark:from-gray-800 dark:to-gray-700 relative" data-aos="fade-up">
        <div class="max-w-7xl mx-auto px-6 text-center">
            <div class="mb-8">
                <span class="inline-flex items-center justify-center w-20 h-20 bg-brand-primary/20 rounded-full mb-6 text-3xl">💝</span>
                <h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">ابدأ رحلتك الآن</h3>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    انضم لمجتمع يحترم قيمك ويساعدك على إيجاد نصفك الآخر. رحلة نحو السعادة تبدأ بخطوة واحدة.
                </p>
            </div>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <x-enhanced-button variant="primary" size="lg" ripple="true" glow="true" as="a" href="{{ route('register') }}">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    إنشاء حساب
                </x-enhanced-button>
                <x-enhanced-button variant="secondary" size="lg" ripple="true" as="a" href="{{ route('login') }}">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                    </svg>
                    لديك حساب؟ سجّل الدخول
                </x-enhanced-button>
            </div>
        </div>
    </section>

    <!-- دعوة ثابتة للموبايل -->
    <div class="fixed bottom-4 inset-x-0 md:hidden px-4 z-40" data-aos="fade-up">
        <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-2xl p-3 flex items-center justify-between gap-3 border border-gray-100 dark:border-gray-700">
            <x-enhanced-button variant="primary" size="sm" ripple="true" as="a" href="{{ route('register') }}" class="flex-1">
                ابدأ الآن
            </x-enhanced-button>
            <x-enhanced-button variant="secondary" size="sm" ripple="true" as="a" href="#featured" class="flex-1">
                تصفّح
            </x-enhanced-button>
        </div>
    </div>

    @include('frontend.components.footer')
@endsection

@push('head-css')
<style>
    /* Floating Hearts Animation */
    .floating-hearts::before,
    .floating-hearts::after {
        content: '💕';
        position: absolute;
        font-size: 2rem;
        animation: float 6s ease-in-out infinite;
    }

    .floating-hearts::before {
        top: 20%;
        left: 10%;
        animation-delay: 0s;
    }

    .floating-hearts::after {
        top: 60%;
        right: 15%;
        animation-delay: 3s;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(10deg); }
    }

    /* Enhanced Card Animations */
    .feature-card,
    .step-card,
    .success-story-card,
    .stat-card,
    .trust-card,
    .gallery-item {
        transition: all 0.3s ease-in-out;
    }

    .feature-card:hover,
    .step-card:hover,
    .success-story-card:hover,
    .stat-card:hover,
    .trust-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .gallery-item:hover {
        transform: scale(1.05);
    }

    /* FAQ Animations */
    .faq-question:hover {
        background-color: rgba(59, 130, 246, 0.05);
    }

    .faq-question[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    /* Counter Animation */
    .counter {
        transition: all 0.3s ease-in-out;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .text-4xl {
            font-size: 2rem;
        }

        .text-6xl {
            font-size: 3rem;
        }

        .py-20 {
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, #ec4899, #f43f5e);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(to bottom, #db2777, #e11d48);
    }

    /* Smooth Scrolling */
    html {
        scroll-behavior: smooth;
    }
</style>
@endpush

@push('body-end')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Counter Animation for Statistics
        const counters = document.querySelectorAll('.counter');
        const speed = 200;

        const animateCounter = (counter) => {
            const target = parseInt(counter.getAttribute('data-target'));
            const count = parseInt(counter.innerText);
            const increment = target / speed;

            if (count < target) {
                counter.innerText = Math.ceil(count + increment);
                setTimeout(() => animateCounter(counter), 1);
            } else {
                counter.innerText = target;
            }
        };

        // Intersection Observer for Counter Animation
        const observerOptions = {
            threshold: 0.7,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counter = entry.target;
                    animateCounter(counter);
                    observer.unobserve(counter);
                }
            });
        }, observerOptions);

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

        // FAQ Toggle Functionality
        const faqQuestions = document.querySelectorAll('.faq-question');

        faqQuestions.forEach(question => {
            question.addEventListener('click', function() {
                const faqItem = this.closest('.faq-item');
                const answer = faqItem.querySelector('.faq-answer');
                const arrow = this.querySelector('svg');

                // Close other open FAQ items
                document.querySelectorAll('.faq-answer').forEach(item => {
                    if (item !== answer) {
                        item.classList.add('hidden');
                        item.closest('.faq-item').querySelector('svg').style.transform = 'rotate(0deg)';
                        item.closest('.faq-item').querySelector('.faq-question').setAttribute('aria-expanded', 'false');
                    }
                });

                // Toggle current FAQ item
                answer.classList.toggle('hidden');
                const isExpanded = !answer.classList.contains('hidden');
                this.setAttribute('aria-expanded', isExpanded);

                if (answer.classList.contains('hidden')) {
                    arrow.style.transform = 'rotate(0deg)';
                } else {
                    arrow.style.transform = 'rotate(180deg)';
                }
            });
        });

        // Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Enhanced Hover Effects for Cards
        const cards = document.querySelectorAll('.feature-card, .step-card, .success-story-card, .stat-card, .trust-card');

        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-8px) scale(1.02)';
            });

            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });

        // Parallax Effect for Background Elements
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const parallaxElements = document.querySelectorAll('.floating-hearts::before, .floating-hearts::after');

            parallaxElements.forEach((element, index) => {
                const speed = 0.5 + (index * 0.2);
                const yPos = -(scrolled * speed);
                element.style.transform = `translateY(${yPos}px)`;
            });
        });

        // Add some random animations to member cards
        const memberCards = document.querySelectorAll('.member-card');
        memberCards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
            card.classList.add('animate-fade-in-up');
        });

        // Enhanced Search Form
        const searchForm = document.querySelector('.max-w-4xl');
        if (searchForm) {
            const searchButton = searchForm.querySelector('button');
            const selects = searchForm.querySelectorAll('select');

            searchButton.addEventListener('click', function(e) {
                e.preventDefault();

                // Add loading state
                this.innerHTML = '<svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> جاري البحث...';
                this.disabled = true;

                // Simulate search delay
                setTimeout(() => {
                    this.innerHTML = 'بحث';
                    this.disabled = false;

                    // Show success message
                    const successMessage = document.createElement('div');
                    successMessage.className = 'mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg';
                    successMessage.textContent = 'تم العثور على نتائج البحث!';
                    searchForm.appendChild(successMessage);

                    // Remove message after 3 seconds
                    setTimeout(() => {
                        successMessage.remove();
                    }, 3000);
                }, 2000);
            });
        }
    });
</script>
@endpush