@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>
                            <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>تقديم خدمات المطابقة والتوصيات بناءً على تفضيلاتك</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>
                            <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>
                            <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>
                            <li class="flex items-start gap-2">
                                <span class="text-amber-500 mt-1">•</span>
                                <span>رفض ملفات تعريف الارتباط (Cookies) غير الضرورية</span>
                            </li>
                        </ul>
                    </div>

                    <div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-rose-900/20 dark:to-pink-900/20 rounded-2xl p-6 border-2 border-rose-100 dark:border-rose-900/50">
                        <h3 class="text-xl font-bold text-rose-800 dark:text-rose-200 mb-3">5. ملفات تعريف الارتباط</h3>
                        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
                            <li class="flex items-start gap-2">
                                <span class="text-rose-500 mt-1">•</span>
                                <span>نستخدم ملفات تعريف الارتباط لتحسين تجربة التصفح</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-rose-500 mt-1">•</span>
                                <span>تذكر تفضيلاتك وإعداداتك الشخصية</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-rose-500 mt-1">•</span>
                                <span>تحليل استخدام الموقع لتحسين الخدمات</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-rose-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:privacy@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('terms') }}" 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