@props([
    'badge' => 'تواصل معنا',
    'title' => 'لنبدأ رحلتك الرقمية',
    'description' => 'أرسل لنا تفاصيل مشروعك وسيتواصل معك أحد خبرائنا خلال 24 ساعة.',
])

@php
    // استخدام بيانات Composer إن وُجدت
    if (isset($contactItems)) {
        $contactItems = $contactItems;
    } else {
        $contactItems = [
            ['icon' => '📧', 'label' => 'البريد الإلكتروني', 'value' => 'hello@holooltech.com'],
            ['icon' => '📞', 'label' => 'رقم الهاتف / واتساب', 'value' => '+966 50 000 0000'],
            ['icon' => '📍', 'label' => 'الموقع', 'value' => 'الرياض، المملكة العربية السعودية'],
            ['icon' => '🕐', 'label' => 'أوقات العمل', 'value' => 'الأحد – الخميس، 9 ص – 6 م'],
        ];
    }
    if (isset($socialLinks)) {
        $socialLinks = $socialLinks;
    } else {
        $socialLinks = [
            ['icon' => '𝕏', 'url' => '#', 'title' => 'تويتر / X'],
            ['icon' => 'in', 'url' => '#', 'title' => 'لينكد إن'],
            ['icon' => '📷', 'url' => '#', 'title' => 'انستغرام'],
            ['icon' => '💬', 'url' => '#', 'title' => 'واتساب'],
            ['icon' => '▶', 'url' => '#', 'title' => 'يوتيوب'],
        ];
    }
    if (isset($serviceOptions)) {
        $serviceOptions = $serviceOptions;
    } else {
        $serviceOptions = ['تطوير موقع ويب', 'تطبيق جوال', 'تصميم UI/UX', 'متجر إلكتروني', 'نظام مؤسسي', 'الذكاء الاصطناعي', 'استشارة تقنية', 'أخرى'];
    }
@endphp

<section id="contact" class="py-20 md:py-28 bg-dark/40 relative">
    <div class="container">
        <x-ui.section-header :badge="$badge" :title="$title" :description="$description" />

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 mt-12">
            {{-- العمود الأيسر: معلومات الاتصال --}}
            <div class="space-y-6">
                <div class="space-y-4">
                    @foreach($contactItems as $item)
                        <div class="flex items-center gap-5 p-5 bg-dark/80 backdrop-blur-md border border-gray-light/20 rounded-xl hover:border-primary/30 transition-colors">
                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary/15 border border-primary/30 flex items-center justify-center text-2xl">
                                {{ $item['icon'] }}
                            </div>
                            <div>
                                <div class="text-gray-light text-xs mb-0.5">{{ $item['label'] }}</div>
                                <div class="text-white font-semibold">{{ $item['value'] }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- روابط التواصل الاجتماعي --}}
                <div class="flex flex-wrap gap-3 pt-2">
                    @foreach($socialLinks as $social)
                        <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" title="{{ $social['title'] }}"
                           class="w-12 h-12 rounded-xl bg-dark/80 border border-gray-light/20 flex items-center justify-center text-xl hover:bg-primary/20 hover:border-primary hover:-translate-y-1 transition-all">
                            {{ $social['icon'] }}
                        </a>
                    @endforeach
                </div>
            </div>

            {{-- العمود الأيمن: نموذج الاتصال --}}
            <div class="bg-dark/80 backdrop-blur-xl border border-gray-light/20 rounded-3xl p-6 md:p-8 shadow-glow">
                <form @submit.prevent="submitForm" x-data="contactForm()" class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    {{-- الاسم --}}
                    <div class="flex flex-col gap-1.5">
                        <label class="text-gray-light text-sm font-semibold">الاسم الكامل *</label>
                        <input type="text" x-model="form.name" required
                               class="bg-white/5 border border-gray-light/30 rounded-xl px-5 py-3.5 text-white placeholder:text-gray-light/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 transition">
                    </div>
                    {{-- البريد الإلكتروني --}}
                    <div class="flex flex-col gap-1.5">
                        <label class="text-gray-light text-sm font-semibold">البريد الإلكتروني *</label>
                        <input type="email" x-model="form.email" required
                               class="bg-white/5 border border-gray-light/30 rounded-xl px-5 py-3.5 text-white placeholder:text-gray-light/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 transition">
                    </div>
                    {{-- رقم الهاتف --}}
                    <div class="flex flex-col gap-1.5">
                        <label class="text-gray-light text-sm font-semibold">رقم الهاتف</label>
                        <input type="tel" x-model="form.phone"
                               class="bg-white/5 border border-gray-light/30 rounded-xl px-5 py-3.5 text-white placeholder:text-gray-light/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 transition">
                    </div>
                    {{-- نوع الخدمة --}}
                    <div class="flex flex-col gap-1.5">
                        <label class="text-gray-light text-sm font-semibold">نوع الخدمة *</label>
                        <select x-model="form.service" required
                                class="bg-white/5 border border-gray-light/30 rounded-xl px-5 py-3.5 text-white placeholder:text-gray-light/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 transition">
                            <option value="" disabled selected>اختر الخدمة</option>
                            @foreach($serviceOptions as $option)
                                <option value="{{ $option }}">{{ $option }}</option>
                            @endforeach
                        </select>
                    </div>
                    {{-- وصف المشروع --}}
                    <div class="sm:col-span-2 flex flex-col gap-1.5">
                        <label class="text-gray-light text-sm font-semibold">وصف مشروعك *</label>
                        <textarea x-model="form.message" rows="5" required
                                  class="bg-white/5 border border-gray-light/30 rounded-xl px-5 py-3.5 text-white placeholder:text-gray-light/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 transition resize-none"></textarea>
                    </div>
                    {{-- رسالة التنبيه --}}
                    <div x-show="message" class="sm:col-span-2">
                        <div x-html="message"></div>
                    </div>
                    {{-- زر الإرسال --}}
                    <div class="sm:col-span-2 mt-2">
                        <button type="submit" class="w-full py-4 bg-primary text-dark font-semibold rounded-lg shadow-md hover:bg-opacity-90 transition-all flex justify-center items-center" x-bind:disabled="loading">
                            <span x-show="!loading">📨 إرسال الطلب</span>
                            <span x-show="loading" class="flex items-center justify-center gap-2">
                                <span class="spinner"></span> جارٍ الإرسال...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
    function contactForm() {
        return {
            loading: false,
            success: false,
            message: '',
            form: {
                name: '',
                email: '',
                phone: '',
                service: '',
                message: ''
            },
            async submitForm() {
                this.loading = true;
                this.message = '';

                try {
                    const response = await fetch('{{ route("contact.send") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify(this.form)
                    });

                    if (response.ok) {
                        const data = await response.json();
                        this.success = true;
                        this.message = `
                            <div class="mt-4 p-5 bg-primary/10 border border-primary/30 rounded-2xl text-white text-center relative overflow-hidden">
                                <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary"></div>
                                <div class="text-4xl mb-2">✅</div>
                                <h4 class="font-bold text-xl mb-2">تم الإرسال بنجاح!</h4>
                                <p class="text-gray-light">${data.message || 'سنتواصل معك قريباً.'}</p>
                            </div>
                        `;
                        this.form = { name: '', email: '', phone: '', service: '', message: '' };
                        setTimeout(() => { this.message = ''; this.success = false; }, 8000);
                    } else {
                        const errorData = await response.json();
                        let errors = '';
                        if (errorData.errors) {
                            for (const [key, msgs] of Object.entries(errorData.errors)) {
                                errors += `<p class="text-red-400">${msgs.join('<br>')}</p>`;
                            }
                        } else {
                            errors = '<p class="text-red-400">حدث خطأ. حاول مرة أخرى.</p>';
                        }
                        this.message = `
                            <div class="mt-4 p-5 bg-red-500/10 border border-red-500/30 rounded-2xl text-white">
                                <div class="text-2xl mb-2">❌</div>
                                <h4 class="font-bold text-lg mb-2">تعذر الإرسال</h4>
                                ${errors}
                            </div>
                        `;
                    }
                } catch (e) {
                    this.message = `
                        <div class="mt-4 p-5 bg-red-500/10 border border-red-500/30 rounded-2xl text-white">
                            <p class="text-red-400">فشل الاتصال بالخادم. تحقق من الإنترنت.</p>
                        </div>
                    `;
                } finally {
                    this.loading = false;
                }
            }
        }
    }
</script>
@endpush
@push('styles')
<style>
    .spinner { /* ... */ }

    /* لضمان ظهور خيارات select بلون غامق */
    select option {
        background-color: #242425; /* dark */
        color: #e2e3e4; /* secondary / gray-light */
    }
</style>
@endpush