@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

<div class="bg-gradient-to-br from-slate-50 via-white to-blue-50 text-slate-800 font-sans overflow-hidden relative" role="document">
    @include('home._hero')
    @include('home._why')
    @include('home._steps')
    @include('home._latest_members')
    @include('home._stats')
    @include('home._final_cta')
    <!-- Removed legacy duplicated inline sections to rely on partials only -->
    <!-- Animated utility styles now handled in global CSS / components -->
    @push('head-css')
<style>
    /* تحسينات إضافية خفيفة بدون تغيير الألوان الأساسية */
    .section-wrapper { position:relative; isolation:isolate; }
    .section-wrapper::after { content:''; position:absolute; inset:0; pointer-events:none; background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.5) 0%, transparent 60%),
        radial-gradient(circle at 10% 70%, rgba(255,255,255,.4) 0%, transparent 65%); mix-blend-mode:overlay; }
    .feature-card:focus-within, .step-card:focus-within { outline:2px solid hsl(var(--brand-accent)); outline-offset:4px; }
    .smooth-scroll { scroll-behavior:smooth; }
    @media (max-width:768px){ .py-24 { padding-top:4rem; padding-bottom:4rem;} }
</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)';
                    }
                });

                // Toggle current FAQ item
                answer.classList.toggle('hidden');

                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'
                    });
                }
            });
        });

        // 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)`;
            });
        });

        // Enhanced Hover Effects for Cards
        const cards = document.querySelectorAll('.member-card, .testimonial-card, .feature-card, .news-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)';
            });
        });

        // Search Form Enhancement
        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);
            });
        }

        // Mobile Menu Toggle (if needed)
        const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
        const mobileMenu = document.querySelector('.mobile-menu');

        if (mobileMenuToggle && mobileMenu) {
            mobileMenuToggle.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // Lazy Loading for Images
        const images = document.querySelectorAll('img[data-src]');
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.classList.remove('lazy');
                    imageObserver.unobserve(img);
                }
            });
        });

        images.forEach(img => imageObserver.observe(img));

        // 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');
        });
    });
</script>
    @endpush
</div><!-- /wrapper -->
@endsection