@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900/20 dark:to-blue-900/20">
    <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8" dir="rtl">
        <!-- Enhanced Header -->
        <header class="mb-10 relative overflow-hidden bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 rounded-3xl p-8 shadow-2xl">
            <div class="absolute inset-0 bg-black opacity-10"></div>
            <div class="relative z-10 text-center">
                <h1 class="text-5xl font-black text-white mb-4 animate-fade-in">📋 شروط الاستخدام</h1>
                <p class="text-xl text-white/90">يرجى قراءة هذه الشروط بعناية قبل استخدام منصة زواجنت</p>
            </div>
        </header>

        <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 border border-gray-100 dark:border-gray-700">
            <div class="prose prose-lg prose-rtl max-w-none dark:prose-invert">
                <div class="mb-8">
                    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">مرحباً بك في زواجنت</h2>
                    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                        باستخدامك لمنصة زواجنت، فإنك توافق على الشروط والأحكام التالية. يرجى قراءتها بعناية قبل إنشاء حساب أو استخدام خدماتنا.
                    </p>
                </div>

                <div class="space-y-6">
                    <div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-6 border-2 border-purple-100 dark:border-purple-900/50">
                        <h3 class="text-xl font-bold text-purple-800 dark:text-purple-200 mb-3">1. شروط الاستخدام الأساسية</h3>
                        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
                            <li class="flex items-start gap-2">
                                <span class="text-purple-500 mt-1">•</span>
                                <span>استخدام الموقع بما يتوافق مع القوانين والأنظمة المعمول بها في بلدك</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-purple-500 mt-1">•</span>
                                <span>الالتزام باحترام خصوصية الآخرين وعدم إساءة استخدام المعلومات الشخصية</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-purple-500 mt-1">•</span>
                                <span>عدم نشر محتوى مسيء أو مخالف للآداب العامة</span>
                            </li>
                        </ul>
                    </div>

                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-6 border-2 border-blue-100 dark:border-blue-900/50">
                        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-200 mb-3">2. الحساب والخصوصية</h3>
                        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">•</span>
                                <span>يجب أن تكون عمرك 18 عاماً أو أكثر لإنشاء حساب</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">•</span>
                                <span>أنت مسؤول عن الحفاظ على سرية معلومات تسجيل الدخول الخاصة بك</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-1">•</span>
                                <span>يجب تقديم معلومات صحيحة ودقيقة عند التسجيل</span>
                            </li>
                        </ul>
                    </div>

                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-6 border-2 border-green-100 dark:border-green-900/50">
                        <h3 class="text-xl font-bold text-green-800 dark:text-green-200 mb-3">3. السلوك والمحتوى</h3>
                        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
                            <li class="flex items-start gap-2">
                                <span class="text-green-500 mt-1">•</span>
                                <span>احترام جميع المستخدمين بغض النظر عن خلفياتهم أو معتقداتهم</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-green-500 mt-1">•</span>
                                <span>عدم إرسال رسائل مزعجة أو غير مرغوب فيها</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-green-500 mt-1">•</span>
                                <span>الإبلاغ عن أي سلوك مشبوه أو مخالف</span>
                            </li>
                        </ul>
                    </div>

                    <div class="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 rounded-2xl p-6 border-2 border-amber-100 dark:border-amber-900/50">
                        <h3 class="text-xl font-bold text-amber-800 dark:text-amber-200 mb-3">4. التعديلات والإشعارات</h3>
                        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
                            <li class="flex items-start gap-2">
                                <span class="text-amber-500 mt-1">•</span>
                                <span>قد يتم تعديل هذه الشروط من وقت لآخر لتحسين الخدمة</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-amber-500 mt-1">•</span>
                                <span>سيتم إخطارك بالتغييرات الجوهرية عبر البريد الإلكتروني</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-amber-500 mt-1">•</span>
                                <span>استمرارك في استخدام الموقع يعني موافقتك على الشروط المحدثة</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="mt-8 p-6 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">للاستفسارات والدعم</h3>
                    <p class="text-gray-600 dark:text-gray-300 mb-4">
                        إذا كان لديك أي استفسارات حول هذه الشروط أو تحتاج إلى مساعدة، لا تتردد في التواصل معنا عبر:
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="mailto:support@zawajnet.com" class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300">
                            <svg class="w-4 h-4" 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-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            البريد الإلكتروني
                        </a>
                        <a href="#" class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all duration-300">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            مركز المساعدة
                        </a>
                    </div>
                </div>

                <div class="mt-8 flex flex-wrap justify-center gap-4 text-sm">
                    <a href="{{ route('privacy') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl hover:from-green-700 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        اطلع أيضاً على سياسة الخصوصية
                    </a>
                    <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                        </svg>
                        العودة للرئيسية
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection