@extends('site.layout')

@section('title', 'سياسة الخصوصية — MadarX')
@section('meta_description', 'سياسة خصوصية تطبيق ومنصة MadarX: البيانات التي نجمعها، كيف نستخدمها، أمانك، وحقوقك قبل الإطلاق على الاستضافة.')

@section('body')
    @php
        $sections = [
            ['id' => 'overview', 'label' => 'نظرة عامة'],
            ['id' => 'prelaunch', 'label' => 'قبل الرفع على الهوست'],
            ['id' => 'data-we-collect', 'label' => 'البيانات التي نجمعها'],
            ['id' => 'how-we-use', 'label' => 'كيف نستخدم البيانات'],
            ['id' => 'ai-third-parties', 'label' => 'الذكاء الاصطناعي والأطراف الثالثة'],
            ['id' => 'storage-security', 'label' => 'التخزين والأمان'],
            ['id' => 'payments', 'label' => 'المدفوعات والاشتراكات'],
            ['id' => 'analytics', 'label' => 'التحليلات'],
            ['id' => 'your-rights', 'label' => 'حقوقك'],
            ['id' => 'retention', 'label' => 'الاحتفاظ والحذف'],
            ['id' => 'children', 'label' => 'الأطفال'],
            ['id' => 'changes', 'label' => 'تحديث السياسة'],
            ['id' => 'contact', 'label' => 'التواصل'],
        ];
    @endphp

    <div class="mx-auto max-w-6xl px-6 pb-20 pt-10">
        {{-- Hero --}}
        <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-white/[0.08] via-violet-500/10 to-teal-500/5 p-8 shadow-2xl backdrop-blur-xl md:p-12">
            <div class="pointer-events-none absolute -left-20 -top-20 h-56 w-56 rounded-full bg-violet-500/25 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-16 -right-10 h-48 w-48 rounded-full bg-teal-400/20 blur-3xl"></div>
            <div class="relative flex flex-col items-center text-center">
                <img src="{{ $logoUrl ?? asset('images/madarx-logo.png') }}" alt="{{ $platformName }}" class="mx-auto h-auto w-full max-w-md drop-shadow-[0_0_40px_rgba(78,235,255,0.25)]" width="480" height="120">
                <p class="mt-6 inline-flex items-center gap-2 rounded-full border border-teal-400/30 bg-teal-400/10 px-4 py-1.5 text-xs font-bold text-teal-300">
                    <span class="h-2 w-2 animate-pulse rounded-full bg-teal-400"></span>
                    سياسة الخصوصية الرسمية
                </p>
                <h1 class="mt-4 text-3xl font-black tracking-tight text-white md:text-4xl">خصوصيتك أولوية — شفافية كاملة</h1>
                <p class="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-zinc-400">
                    توضّح هذه الصفحة كيف تتعامل منصة <strong class="text-white">{{ $platformName }}</strong>
                    (تطبيق الجوال + الموقع + لوحة التحكم) مع بياناتك — بما في ذلك ميزات الذكاء الاصطناعي،
                    المحفظة، المكافآت، والمدفوعات — <strong class="text-teal-300">قبل رفع المشروع على الاستضافة</strong>
                    ونشره على متاجر التطبيقات.
                </p>
                <div class="mt-6 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500">
                    <span class="rounded-lg border border-white/10 bg-black/30 px-3 py-1.5">آخر تحديث: {{ $updatedAt }}</span>
                    @if ($isBeta)
                        <span class="rounded-lg border border-amber-400/30 bg-amber-400/10 px-3 py-1.5 text-amber-200">إطلاق تجريبي (Beta)</span>
                    @endif
                    <span class="rounded-lg border border-white/10 bg-black/30 px-3 py-1.5">{{ $appUrl }}</span>
                </div>
            </div>
        </div>

        <div class="mt-12 lg:grid lg:grid-cols-[240px_1fr] lg:gap-10">
            {{-- TOC --}}
            <aside class="mb-8 lg:sticky lg:top-24 lg:mb-0 lg:self-start">
                <nav class="rounded-2xl border border-white/10 bg-black/40 p-4 backdrop-blur-xl" aria-label="فهرس السياسة">
                    <p class="mb-3 text-xs font-bold uppercase tracking-widest text-zinc-500">المحتويات</p>
                    <ul class="space-y-1">
                        @foreach ($sections as $s)
                            <li>
                                <a href="#{{ $s['id'] }}"
                                   class="toc-link block rounded-lg border border-transparent px-3 py-2 text-sm text-zinc-400 transition hover:border-white/10 hover:bg-white/5 hover:text-white">
                                    {{ $s['label'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </nav>
            </aside>

            {{-- Content --}}
            <article class="legal-prose space-y-10 text-sm leading-relaxed text-zinc-300 md:text-[15px]">

                <section id="overview" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="flex items-center gap-2 text-xl font-black text-white md:text-2xl">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-teal-500/20 text-sm text-teal-300">1</span>
                        نظرة عامة
                    </h2>
                    <p class="mt-4">
                        <strong class="text-white">{{ $platformName }}</strong> منصة رقمية عربية تجمع بين محادثات الذكاء الاصطناعي،
                        توليد الصور (AI Studio)، تحليل النصوص والملفات، محفظة نقاط، مكافآت يومية، إحالات، واشتراكات.
                        نحن ملتزمون بحماية بياناتك وفق مبادئ الشفافية والحد الأدنى من الجمع والأمان المعقول.
                    </p>
                    <p class="mt-3">
                        باستخدامك للتطبيق أو الموقع أو إنشاء حساب، فإنك تقر بقراءة هذه السياسة. إن لم توافق عليها،
                        يرجى عدم استخدام الخدمة.
                    </p>
                </section>

                <section id="prelaunch" class="rounded-2xl border border-amber-400/25 bg-gradient-to-br from-amber-500/10 to-transparent p-6 md:p-8">
                    <h2 class="flex items-center gap-2 text-xl font-black text-amber-100 md:text-2xl">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/25 text-sm">⚡</span>
                        ما يجب معرفته قبل الرفع على الاستضافة
                    </h2>
                    <p class="mt-4 text-amber-50/90">
                        هذا القسم موجّه لفريق التشغيل والمستخدمين: يوضح بوضوح ماذا يحدث تقنياً عند نشر المنصة على السيرفر الحقيقي.
                    </p>
                    <ul class="mt-5 space-y-3">
                        <li class="flex gap-3 rounded-xl border border-white/10 bg-black/30 p-4">
                            <span class="text-teal-400">▸</span>
                            <span><strong class="text-white">عنوان المنصة:</strong> يُضبط عبر <code class="rounded bg-white/10 px-1.5 py-0.5 text-xs">APP_URL</code> في ملف البيئة على الاستضافة (مثال: <code class="text-teal-300">https://usemadar.org</code>). رابط الخصوصية يصبح: <code class="text-teal-300">{{ $appUrl }}/privacy</code></span>
                        </li>
                        <li class="flex gap-3 rounded-xl border border-white/10 bg-black/30 p-4">
                            <span class="text-teal-400">▸</span>
                            <span><strong class="text-white">التطبيق (Flutter):</strong> يتصل بـ API عبر عنوان الإنتاج؛ صفحة الخصوصية مفتوحة من الملف الشخصي عبر نفس النطاق.</span>
                        </li>
                        <li class="flex gap-3 rounded-xl border border-white/10 bg-black/30 p-4">
                            <span class="text-teal-400">▸</span>
                            <span><strong class="text-white">الصور والملفات العامة:</strong> تُخزَّن في <code class="rounded bg-white/10 px-1 text-xs">storage/app/public</code> وتُعرض عبر <code class="rounded bg-white/10 px-1 text-xs">public/storage</code> بعد ربط التخزين من لوحة الإعدادات (زر «تنظيف الكاش ومزامنة التخزين»).</span>
                        </li>
                        <li class="flex gap-3 rounded-xl border border-white/10 bg-black/30 p-4">
                            <span class="text-teal-400">▸</span>
                            <span><strong class="text-white">وضع الإنتاج:</strong> يجب تعطيل وضع التصحيح (<code class="text-xs">APP_DEBUG=false</code>) واستخدام قاعدة بيانات إنتاج (MySQL) وليس SQLite التجريبي.</span>
                        </li>
                        <li class="flex gap-3 rounded-xl border border-white/10 bg-black/30 p-4">
                            <span class="text-teal-400">▸</span>
                            <span><strong class="text-white">الذكاء الاصطناعي:</strong> الطلبات تُرسل إلى مزود خارجي (OpenAI أو متوافق) عند تفعيل المفتاح في السيرفر؛ بدون مفتاح قد لا تعمل ميزات AI فعلياً.</span>
                        </li>
                        <li class="flex gap-3 rounded-xl border border-white/10 bg-black/30 p-4">
                            <span class="text-teal-400">▸</span>
                            <span><strong class="text-white">متاجر التطبيقات:</strong> Google Play و App Store يطلبان رابط سياسة خصوصية عاماً — استخدم هذا الرابط في نماذج النشر.</span>
                        </li>
                    </ul>
                </section>

                <section id="data-we-collect" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">البيانات التي نجمعها</h2>
                    <div class="mt-6 grid gap-4 md:grid-cols-2">
                        @foreach ([
                            ['بيانات الحساب', 'الاسم، البريد الإلكتروني، رقم الهاتف (إن وُجد)، كلمة المرور (مُهشّرة فقط — لا نخزنها نصاً صريحاً)، حالة الحساب والاشتراك.'],
                            ['المحادثات والذكاء الاصطناعي', 'نصوص الرسائل، سجل المحادثات، طلبات توليد الصور، قوالب الاستوديو، و«ذاكرة AI» التي تختار حفظها لتحسين الردود.'],
                            ['الملفات المرفوعة', 'ملفات AI Studio (صور، PDF، مستندات ضمن الأنواع المسموحة) مع اسم الملف والحجم ونتيجة التحليل الأولي.'],
                            ['المحفظة والمعاملات', 'رصيد النقاط، سجل المكافآت، المكافآت اليومية، الإحالات، وعمليات الاستبدال.'],
                            ['المدفوعات', 'طلبات الاشتراك اليدوية، إثبات التحويل (صورة/PDF) الذي ترفعه، وسجل المراجعة من الإدارة.'],
                            ['التقنية والاستخدام', 'أحداث تحليلات مسموحة (قائمة بيضاء)، تسجيل النشاط اليومي (DAU)، عنوان IP تقريبي، نوع الجهاز/المتصفح عبر السجلات التقنية.'],
                        ] as [$title, $desc])
                            <div class="rounded-xl border border-white/10 bg-black/25 p-4">
                                <h3 class="font-bold text-teal-300">{{ $title }}</h3>
                                <p class="mt-2 text-zinc-400">{{ $desc }}</p>
                            </div>
                        @endforeach
                    </div>
                    <p class="mt-5 text-zinc-500">
                        لا نجمع عمداً بيانات حساسة إضافية (مثل السجلات الطبية) إلا إذا أدخلتها أنت في المحادثة أو الملفات — وتبقى مسؤوليتك عند مشاركة مثل هذه المحتويات.
                    </p>
                </section>

                <section id="how-we-use" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">كيف نستخدم بياناتك</h2>
                    <ul class="mt-5 list-none space-y-3">
                        @foreach ([
                            'تقديم الخدمة: تسجيل الدخول، المحادثات، توليد الصور، الاستوديو، والمحفظة.',
                            'إدارة الاشتراكات والحصص (Quota) حسب خطتك.',
                            'منع إساءة الاستخدام: حدود معدل الطلبات (Rate limiting) وحظر الحسابات المخالفة.',
                            'تحسين المنتج عبر إحصاءات مجمّعة وأحداث التحليلات المصرّح بها فقط.',
                            'الرد على ملاحظاتك وطلبات الدعم المرسلة من التطبيق.',
                            'الامتثال للقانون أو حماية حقوق المنصة والمستخدمين عند الضرورة.',
                        ] as $item)
                            <li class="flex gap-3">
                                <span class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-violet-500/30 text-[10px] text-violet-200">✓</span>
                                <span>{{ $item }}</span>
                            </li>
                        @endforeach
                    </ul>
                    <p class="mt-5 rounded-xl border border-violet-400/20 bg-violet-500/10 p-4 text-violet-100/90">
                        <strong>لا نبيع</strong> بياناتك الشخصية لأطراف ثالثة لأغراض تسويقية.
                    </p>
                </section>

                <section id="ai-third-parties" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">الذكاء الاصطناعي والأطراف الثالثة</h2>
                    <p class="mt-4">
                        عند استخدامك لميزات الشات، توليد الصور، تحسين الوصف (Prompt Enhancer)، أو تحليل النصوص،
                        قد تُرسَل مدخلاتك إلى <strong class="text-white">مزود AI خارجي</strong> (مثل OpenAI) لمعالجتها وإرجاع النتيجة.
                        يخضع ذلك لسياسة خصوصية المزود أيضاً.
                    </p>
                    <ul class="mt-4 space-y-2 text-zinc-400">
                        <li>• لا تُدخل معلومات سرية (كلمات مرور، أرقام بطاقات كاملة) في المحادثة.</li>
                        <li>• الصور المولَّدة قد تُحفظ على سيرفرنا لعرضها لك ولإدارة الحصص.</li>
                        <li>• يمكن للإدارة مراجعة طلبات AI لأغراض الدعم والأمان وفق سياسة داخلية.</li>
                    </ul>
                </section>

                <section id="storage-security" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">التخزين والأمان</h2>
                    <div class="mt-5 grid gap-4 sm:grid-cols-3">
                        <div class="rounded-xl border border-teal-400/20 bg-teal-500/5 p-4 text-center">
                            <p class="text-2xl">🔐</p>
                            <p class="mt-2 font-bold text-teal-300">مصادقة Sanctum</p>
                            <p class="mt-1 text-xs text-zinc-500">توكنات API للتطبيق وجلسات للويب</p>
                        </div>
                        <div class="rounded-xl border border-violet-400/20 bg-violet-500/5 p-4 text-center">
                            <p class="text-2xl">🛡️</p>
                            <p class="mt-2 font-bold text-violet-300">تشفير كلمات المرور</p>
                            <p class="mt-1 text-xs text-zinc-500">Bcrypt — لا نخزنها بنص واضح</p>
                        </div>
                        <div class="rounded-xl border border-purple-400/20 bg-purple-500/5 p-4 text-center">
                            <p class="text-2xl">⚡</p>
                            <p class="mt-2 font-bold text-purple-300">حدود الطلبات</p>
                            <p class="mt-1 text-xs text-zinc-500">Throttling على API و AI</p>
                        </div>
                    </div>
                    <p class="mt-5">
                        نطبّق إجراءات أمان معقولة، لكن لا يوجد نظام آمن بنسبة 100%. عند اكتشاف خرق، سنعمل على المعالجة
                        وإخطار المتأثرين عند الاقتضاء قانونياً.
                    </p>
                </section>

                <section id="payments" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">المدفوعات والاشتراكات</h2>
                    <p class="mt-4">
                        قد تتضمن خطط الاشتراك دفعاً يدوياً (تحويل + إثبات). الملفات المرفوعة كإثبات تُخزَّن بشكل آمن
                        ويصل إليها فريق المراجعة المصرّح فقط. بوابات الدفع الإلكترونية الآلية (إن فُعّلت لاحقاً)
                        ستخضع لشروط مزود الدفع المعني.
                    </p>
                </section>

                <section id="analytics" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">التحليلات</h2>
                    <p class="mt-4">
                        نجمع أحداثاً محددة مسبقاً (قائمة بيضاء) مثل: فتح التطبيق، عرض شاشة، إرسال رسالة AI، طلب صورة، فتح الاستوديو.
                        الهدف تحسين الأداء والتجربة — وليس تتبعك خارج التطبيق لأغراض إعلانية.
                    </p>
                </section>

                <section id="your-rights" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">حقوقك</h2>
                    <p class="mt-4">حسب قوانين بلدك، قد يكون لك الحق في:</p>
                    <ul class="mt-4 grid gap-2 sm:grid-cols-2">
                        @foreach (['الاطلاع على بياناتك', 'تصحيح الملف الشخصي', 'حذف الحساب (عند توفر الميزة)', 'سحب الموافقة على معالجة معيّنة', 'تقديم شكوى لجهة مختصة'] as $right)
                            <li class="rounded-lg border border-white/10 bg-black/20 px-4 py-3">{{ $right }}</li>
                        @endforeach
                    </ul>
                    <p class="mt-4">للتواصل بخصوص طلبات الخصوصية: <a href="mailto:privacy@usemadar.org" class="font-bold text-teal-400 hover:underline">privacy@usemadar.org</a></p>
                </section>

                <section id="retention" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">الاحتفاظ بالبيانات والحذف</h2>
                    <p class="mt-4">
                        نحتفظ بالبيانات طالما حسابك نشطاً أو حسب الحاجة التشغيلية والقانونية. عند حذف الحساب أو إغلاقه،
                        نعمل على حذف أو إخفاء هوية البيانات خلال فترة معقولة، مع احتفاظنا بسجلات قد تُطلب قانونياً (مثل سجل مدفوعات).
                    </p>
                </section>

                <section id="children" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">الأطفال</h2>
                    <p class="mt-4">
                        الخدمة غير موجّهة لمن هم دون 13 عاماً (أو السن الأدنى في بلدك). إن علمنا بجمع بيانات طفل دون موافقة ولي الأمر،
                        سنعمل على حذفها.
                    </p>
                </section>

                <section id="changes" class="rounded-2xl border border-white/10 bg-white/[0.03] p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">تحديث هذه السياسة</h2>
                    <p class="mt-4">
                        قد نحدّث هذه الصفحة عند إضافة ميزات أو تغيير ممارساتنا. سيظهر تاريخ «آخر تحديث» في أعلى الصفحة.
                        استمرارك في الاستخدام بعد التحديث يعني موافقتك على النسخة المحدّثة.
                    </p>
                </section>

                <section id="contact" class="rounded-2xl border border-teal-400/30 bg-gradient-to-l from-teal-500/10 to-violet-500/10 p-6 md:p-8">
                    <h2 class="text-xl font-black text-white md:text-2xl">التواصل معنا</h2>
                    <p class="mt-4">
                        لأي استفسار حول الخصوصية أو البيانات أو طلبات الحذف:
                    </p>
                    <div class="mt-5 flex flex-wrap gap-3">
                        <a href="mailto:privacy@usemadar.org"
                           class="inline-flex items-center gap-2 rounded-xl bg-teal-500 px-5 py-2.5 text-sm font-bold text-madar-950 hover:bg-teal-400">
                            privacy@usemadar.org
                        </a>
                        <a href="{{ route('site.landing') }}"
                           class="inline-flex items-center gap-2 rounded-xl border border-white/15 bg-white/5 px-5 py-2.5 text-sm font-bold text-white hover:bg-white/10">
                            العودة للرئيسية
                        </a>
                        <a href="{{ route('site.terms') }}"
                           class="inline-flex items-center gap-2 rounded-xl border border-white/15 px-5 py-2.5 text-sm font-medium text-zinc-300 hover:text-white">
                            الشروط والأحكام
                        </a>
                    </div>
                </section>

                <p class="rounded-xl border border-zinc-700/50 bg-zinc-900/50 p-4 text-center text-xs text-zinc-500">
                    هذه السياسة مكمّلة وليست بديلاً عن استشارة قانونية محلية قبل الإطلاق التجاري الكامل في بلدك.
                </p>
            </article>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    (function () {
        const links = document.querySelectorAll('.toc-link');
        const ids = Array.from(links).map(a => a.getAttribute('href').slice(1));
        const onScroll = () => {
            let current = ids[0];
            for (const id of ids) {
                const el = document.getElementById(id);
                if (el && el.getBoundingClientRect().top <= 120) current = id;
            }
            links.forEach(a => {
                a.classList.toggle('active', a.getAttribute('href') === '#' + current);
            });
        };
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll();
    })();
</script>
@endpush