@props(['footerData' => null])

@php
    // استخدام بيانات Composer إن وُجدت، وإلا قيم افتراضية ثابتة
    if (!$footerData) {
        $footerData = [
            'logo_url' => asset('images/logo2.png'),
            'description' => 'شركة تقنية عربية متخصصة في بناء الحلول الرقمية المتقدمة التي تدفع عجلة النمو لعملائنا.',
            'copyright' => '© ' . date('Y') . ' HoloolTech. جميع الحقوق محفوظة. صُنع بـ ❤️ في الوطن العربي.',
            'social_links' => [
                ['icon' => '𝕏', 'url' => '#', 'title' => 'تويتر / X'],
                ['icon' => 'in', 'url' => '#', 'title' => 'لينكد إن'],
                ['icon' => '📷', 'url' => '#', 'title' => 'انستغرام'],
                ['icon' => '💬', 'url' => '#', 'title' => 'واتساب'],
            ],
        ];
    }
@endphp

<footer class="bg-dark border-t border-gray-light/10 pt-20 pb-10">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-16">
            {{-- العمود الأول: الشعار، الوصف، روابط التواصل --}}
            <div>
                <a href="/" class="inline-block transition-opacity hover:opacity-80">
                    <img src="{{ $footerData['logo_url'] ?? asset('images/logo2.png') }}" alt="HoloolTech Logo" class="h-10 w-auto">
                </a>
                <p class="text-gray text-sm leading-relaxed max-w-xs mt-4">
                    {{ $footerData['description'] ?? 'شركة تقنية عربية متخصصة...' }}
                </p>
                <div class="flex gap-2 mt-5">
                    @foreach(($footerData['social_links'] ?? []) as $social)
                        <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" title="{{ $social['title'] ?? '' }}"
                           class="w-9 h-9 bg-dark border border-gray-light/20 rounded-lg flex items-center justify-center text-gray-light hover:bg-primary/20 hover:border-primary transition">
                            {{ $social['icon'] }}
                        </a>
                    @endforeach
                </div>
            </div>

            {{-- العمود الثاني: الخدمات (ثابت) --}}
            <div>
                <h4 class="text-white font-bold text-sm mb-4">الخدمات</h4>
                <ul class="space-y-2">
                    <li><a href="/#services" class="text-gray text-sm hover:text-white transition">تطوير مواقع الويب</a></li>
                    <li><a href="/#services" class="text-gray text-sm hover:text-white transition">تطبيقات الجوال</a></li>
                    <li><a href="/#services" class="text-gray text-sm hover:text-white transition">تصميم UI/UX</a></li>
                    <li><a href="/#services" class="text-gray text-sm hover:text-white transition">المتاجر الإلكترونية</a></li>
                    <li><a href="/#services" class="text-gray text-sm hover:text-white transition">الحلول السحابية</a></li>
                    <li><a href="/#services" class="text-gray text-sm hover:text-white transition">الذكاء الاصطناعي</a></li>
                </ul>
            </div>

            {{-- العمود الثالث: الشركة (ثابت) --}}
            <div>
                <h4 class="text-white font-bold text-sm mb-4">الشركة</h4>
                <ul class="space-y-2">
                    <li><a href="/#services" class="text-gray text-sm hover:text-white transition">خدماتنا</a></li>
                    <li><a href="/#why-us" class="text-gray text-sm hover:text-white transition">لماذا نحن</a></li>
                    <li><a href="/#portfolio" class="text-gray text-sm hover:text-white transition">أعمالنا</a></li>
                    <li><a href="/#about" class="text-gray text-sm hover:text-white transition">من نحن</a></li>
                    <li><a href="/#process" class="text-gray text-sm hover:text-white transition">آلية العمل</a></li>
                    <li><a href="/#faq" class="text-gray text-sm hover:text-white transition">الأسئلة الشائعة</a></li>
                </ul>
            </div>

            {{-- العمود الرابع: قانوني (ثابت) --}}
            <div>
                <h4 class="text-white font-bold text-sm mb-4">قانوني</h4>
                <ul class="space-y-2">
                    <li><a href="{{ route('privacy') }}" class="text-gray text-sm hover:text-white transition">سياسة الخصوصية</a></li>
                    <li><a href="{{ route('terms') }}" class="text-gray text-sm hover:text-white transition">الشروط والأحكام</a></li>
                    <li><a href="{{ route('refund-policy') }}" class="text-gray text-sm hover:text-white transition">سياسة الاسترداد</a></li>
                    <li><a href="{{ route('usage-agreement') }}" class="text-gray text-sm hover:text-white transition">اتفاقية الاستخدام</a></li>
                </ul>
            </div>
        </div>

        {{-- الشريط السفلي --}}
        <div class="pt-6 border-t border-gray-light/10 flex flex-col md:flex-row justify-between items-center gap-4 text-center md:text-right">
            <p class="text-gray text-xs">{!! $footerData['copyright'] ?? '© '. date('Y') .' HoloolTech.' !!}</p>
            <div class="flex gap-6">
                <a href="{{ route('privacy') }}" class="text-gray text-xs hover:text-white transition">سياسة الخصوصية</a>
                <a href="{{ route('terms') }}" class="text-gray text-xs hover:text-white transition">الشروط والأحكام</a>
                <a href="{{ route('sitemap') }}" class="text-gray text-xs hover:text-white transition">خريطة الموقع</a>
            </div>
        </div>
    </div>
</footer>