import { getTranslations } from "next-intl/server";
import { Shield, Lock, Eye, Database, Cookie } from 'lucide-react';
import Image from 'next/image';
import { Link } from "@/i18n/navigation";
import { GET } from "@/utils/get";
import { Policy } from "@/types/models";

export async function generateMetadata() {
    const t = await getTranslations();
    return {
        title: t("routes.privacy"),
        description: "Privacy policy and data protection at Mwaheb platform.",
    };
}

export default async function PrivacyPolicyPage({ params }: { params: Promise<{ locale: string }> }) {
    const locale = (await params).locale;
    const t = await getTranslations('privacyPolicy');
    const tGlobal = await getTranslations();
    
    const content = locale === 'ar' ? `
<h1 style="color: #2c3e50;">سياسة الخصوصية</h1>
<p style="color: #000;">مرحبًا بكم في منصة مواهب! نحن ملتزمون بحماية خصوصيتك، وتوضّح هذه السياسة كيف نقوم بجمع واستخدام وحماية بياناتك الشخصية عند زيارتك موقعنا <a style="color: #2980b9; text-decoration: none;" href="https://mwaheblms.com/">https://mwaheblms.com</a>.</p>
<h2 style="color: #2c3e50;">المعلومات التي نجمعها</h2>
<p style="color: #000;"><span style="color: #000000;">قد نقوم بجمع الأنواع التالية من المعلومات:</span></p>
<ul style="color: #000;">
<li><span style="color: #000000;"><strong>المعلومات الشخصية:</strong> مثل الاسم، البريد الإلكتروني، رقم الهاتف، وأي تفاصيل تقدمها عند التسجيل أو الاتصال بنا.</span></li>
<li><span style="color: #000000;"><strong>المعلومات غير الشخصية:</strong> مثل نوع المتصفح، عنوان IP، معلومات الجهاز، وسلوك التصفح باستخدام ملفات تعريف الارتباط وأدوات التحليل.</span></li>
</ul>
<h2 style="color: #2c3e50;">كيفية استخدام معلوماتك</h2>
<p style="color: #000;"><span style="color: #000000;">نستخدم المعلومات التي نجمعها للأغراض التالية:</span></p>
<ul style="color: #000;">
<li><span style="color: #000000;">تقديم وإدارة خدماتنا.</span></li>
<li><span style="color: #000000;">الرد على استفساراتك والتواصل معك.</span></li>
<li><span style="color: #000000;">تحسين موقعنا وخدماتنا.</span></li>
<li><span style="color: #000000;">إرسال رسائل ترويجية أو تحديثات (إذا اخترت الاشتراك).</span></li>
<li><span style="color: #000000;">الامتثال للالتزامات القانونية.</span></li>
</ul>
<h2 style="color: #2c3e50;">مشاركة معلوماتك</h2>
<p style="color: #000;"><span style="color: #000000;">لا نقوم ببيع أو تأجير معلوماتك الشخصية لأطراف ثالثة. ولكن قد نشارك معلوماتك مع:</span></p>
<ul style="color: #000;">
<li><span style="color: #000000;">مزودي الخدمات الذين يساعدوننا في تشغيل موقعنا أو تقديم خدماتنا.</span></li>
<li><span style="color: #000000;">الجهات القانونية أو التنظيمية إذا تطلب القانون ذلك.</span></li>
</ul>
<h2 style="color: #2c3e50;">ملفات تعريف الارتباط والتتبع</h2>
<p style="color: #000;">نستخدم ملفات تعريف الارتباط لتحسين تجربتك على موقعنا. يمكنك التحكم في ملفات تعريف الارتباط أو تعطيلها من خلال إعدادات متصفحك.</p>
<h2 style="color: #2c3e50;">الأمان</h2>
<p style="color: #000;">نتخذ تدابير معقولة لحماية معلوماتك من الوصول غير المصرح به أو الفقدان أو سوء الاستخدام. ومع ذلك، فإن أي طريقة لنقل البيانات عبر الإنترنت ليست آمنة بنسبة 100٪.</p>
<h2 style="color: #2c3e50;">حقوقك</h2>
<p style="color: #000;"><span style="color: #000000;">لديك الحق في:</span></p>
<ul style="color: #000;">
<li><span style="color: #000000;">الوصول إلى معلوماتك الشخصية أو تحديثها أو حذفها.</span></li>
<li><span style="color: #000000;">إلغاء الاشتراك في تلقي الرسائل الترويجية.</span></li>
<li><span style="color: #000000;">طلب نسخة من البيانات التي نحتفظ بها عنك.</span></li>
</ul>
<p style="color: #000;">لممارسة هذه الحقوق، يرجى التواصل معنا عبر البريد الإلكتروني <a style="color: #2980b9; text-decoration: none;" href="mailto:info@mwaheblms.com">info@mwaheblms.com</a>.</p>
<h2 style="color: #2c3e50;">الروابط الخارجية</h2>
<p style="color: #000;">قد يحتوي موقعنا على روابط لمواقع خارجية. نحن لسنا مسؤولين عن ممارسات الخصوصية أو محتوى تلك المواقع.</p>
<h2 style="color: #2c3e50;">التغييرات على سياسة الخصوصية</h2>
<p style="color: #000;">قد نقوم بتحديث سياسة الخصوصية هذه من وقت لآخر. سيتم نشر أي تغييرات على هذه الصفحة مع تاريخ سريان محدث.</p>
<h2 style="color: #2c3e50;">اتصل بنا</h2>
<p style="color: #000;">إذا كانت لديك أي أسئلة حول سياسة الخصوصية هذه، يرجى التواصل معنا على:</p>
<p style="color: #000;">البريد الإلكتروني: <a style="color: #2980b9; text-decoration: none;" href="mailto:info@mwaheblms.com">info@mwaheblms.com</a></p>
<p style="color: #000;">الموقع الإلكتروني: <a style="color: #2980b9; text-decoration: none;" href="https://mwaheblms.com/">https://mwaheblms.com</a></p>
    ` : `
<h1 style="color: #2c3e50;">Privacy Policy</h1>
<p style="color: #000;">Welcome to Mwaheb Platform! We are committed to protecting your privacy. This policy explains how we collect, use, and protect your personal data when you visit our website <a style="color: #2980b9; text-decoration: none;" href="https://mwaheblms.com/">https://mwaheblms.com</a>.</p>
<h2 style="color: #2c3e50;">Information We Collect</h2>
<p style="color: #000;">We may collect the following types of information:</p>
<ul style="color: #000;">
<li><strong>Personal Information:</strong> such as name, email, phone number, and any details you provide when registering or contacting us.</li>
<li><strong>Non-Personal Information:</strong> such as browser type, IP address, device information, and browsing behavior using cookies and analytics tools.</li>
</ul>
<h2 style="color: #2c3e50;">How We Use Your Information</h2>
<p style="color: #000;">We use the information we collect for the following purposes:</p>
<ul style="color: #000;">
<li>Providing and managing our services.</li>
<li>Responding to your inquiries and communicating with you.</li>
<li>Improving our website and services.</li>
<li>Sending promotional messages or updates (if you choose to subscribe).</li>
<li>Complying with legal obligations.</li>
</ul>
<h2 style="color: #2c3e50;">Sharing Your Information</h2>
<p style="color: #000;">We do not sell or rent your personal information to third parties. However, we may share your information with:</p>
<ul style="color: #000;">
<li>Service providers who assist us in operating our website or providing our services.</li>
<li>Legal or regulatory authorities if required by law.</li>
</ul>
<h2 style="color: #2c3e50;">Cookies and Tracking</h2>
<p style="color: #000;">We use cookies to improve your experience on our website. You can control or disable cookies through your browser settings.</p>
<h2 style="color: #2c3e50;">Security</h2>
<p style="color: #000;">We take reasonable measures to protect your information from unauthorized access, loss, or misuse. However, any method of data transmission over the internet is not 100% secure.</p>
<h2 style="color: #2c3e50;">Your Rights</h2>
<p style="color: #000;">You have the right to:</p>
<ul style="color: #000;">
<li>Access, update, or delete your personal information.</li>
<li>Unsubscribe from promotional messages.</li>
<li>Request a copy of the data we hold about you.</li>
</ul>
<p style="color: #000;">To exercise these rights, please contact us via email at <a style="color: #2980b9; text-decoration: none;" href="mailto:info@mwaheblms.com">info@mwaheblms.com</a>.</p>
<h2 style="color: #2c3e50;">External Links</h2>
<p style="color: #000;">Our website may contain links to external sites. We are not responsible for the privacy practices or content of those sites.</p>
<h2 style="color: #2c3e50;">Changes to Privacy Policy</h2>
<p style="color: #000;">We may update this privacy policy from time to time. Any changes will be posted on this page with an updated effective date.</p>
<h2 style="color: #2c3e50;">Contact Us</h2>
<p style="color: #000;">If you have any questions about this privacy policy, please contact us at:</p>
<p style="color: #000;">Email: <a style="color: #2980b9; text-decoration: none;" href="mailto:info@mwaheblms.com">info@mwaheblms.com</a></p>
<p style="color: #000;">Website: <a style="color: #2980b9; text-decoration: none;" href="https://mwaheblms.com/">https://mwaheblms.com</a></p>
    `;

    return (
        <main className="min-h-screen box m-auto bg-slate-50/20 font-sans">
            {/* Professional Privacy Hero */}
            <div className="container mx-auto px-4 py-8 md:py-16 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center overflow-hidden">
                <div className="space-y-6 animate-in slide-in-from-right-10 duration-1000">
                    <div className="flex flex-col gap-4">
                         <div className="px-5 py-2 bg-primary-tw-600/5 text-primary-tw-700 w-fit rounded-2xl border border-primary-tw-100/50 text-sm tracking-widest uppercase font-bold">
                            {t("title")}
                         </div>
                        <h1 className="text-3xl md:text-5xl text-slate-900 font-extrabold leading-tight">
                            سياسة الخصوصية وحماية البيانات
                        </h1>
                        <p className="text-base md:text-lg text-slate-500 max-w-lg italic opacity-80 leading-relaxed font-medium">
                            {t('description')}
                        </p>
                    </div>
                    
                    <div className="flex items-center gap-2 text-slate-400 text-sm tracking-wide">
                         <Link href="/" className="hover:text-primary-tw-600 transition-colors uppercase font-medium">
                            {tGlobal("routes.home")}
                         </Link>
                         <span className="opacity-30">/</span>
                         <Link href="/policies" className="hover:text-primary-tw-600 transition-colors uppercase font-medium">
                            {tGlobal("routes.guides-and-regulations")}
                         </Link>
                         <span className="opacity-30">/</span>
                         <span className="text-slate-900 font-semibold">{t('title')}</span>
                    </div>

                    <div className="h-1.5 w-24 bg-primary-tw-600 rounded-full shadow-[0_0_20px_rgba(124,58,237,0.3)]" />
                </div>

                <div className="relative group">
                    <div className="absolute -inset-6 bg-primary-tw-100/30 rounded-[4rem] blur-[80px] group-hover:bg-primary-tw-200/40 transition-all duration-1000" />
                    <div className="relative h-[250px] md:h-[450px] rounded-[3rem] overflow-hidden border-[10px] border-white group-hover:rotate-0 rotate-1 shadow-2xl transition-all duration-700 scale-105">
                        <Image 
                            src="/images/privacy_hero.png" 
                            alt={t("title")} 
                            fill 
                            className="object-cover group-hover:scale-100 scale-110 transition-transform duration-1000"
                            priority
                        />
                    </div>
                </div>
            </div>

            <section className="pb-32 container mx-auto px-4 relative">
                {/* Privacy Pillar Icons */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16 relative z-20">
                    <div className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all">
                        <div className="size-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center mb-4">
                            <Shield className="size-6" />
                        </div>
                        <h4 className="font-bold text-slate-800">حماية فائقة</h4>
                    </div>
                    <div className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all">
                        <div className="size-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center mb-4">
                            <Lock className="size-6" />
                        </div>
                        <h4 className="font-bold text-slate-800">بيانات مشفرة</h4>
                    </div>
                    <div className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all">
                        <div className="size-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center mb-4">
                            <Eye className="size-6" />
                        </div>
                        <h4 className="font-bold text-slate-800">شفافية كاملة</h4>
                    </div>
                    <div className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-md transition-all">
                        <div className="size-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center mb-4">
                            <Database className="size-6" />
                        </div>
                        <h4 className="font-bold text-slate-800">حق الوصول</h4>
                    </div>
                </div>

                {/* Main Text Content */}
                <div className="p-8 md:p-16 rounded-[4rem] border border-slate-100 bg-white relative z-10 overflow-hidden text-lg leading-relaxed shadow-xl">
                    <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-primary-tw-600 to-indigo-500" />
                    
                    <div
                        className="
                            prose max-w-none text-slate-700
                            [&_h1]:text-4xl [&_h1]:text-slate-900 [&_h1]:mb-12 [&_h1]:font-black
                            [&_h2]:text-2xl [&_h2]:text-slate-900 [&_h2]:mb-8 [&_h2]:mt-16 [&_h2]:pb-3 [&_h2]:border-b-2 [&_h2]:border-primary-tw-50 [&_h2]:font-bold
                            [&_h3]:text-xl [&_h3]:text-slate-900 [&_h3]:mb-4 [&_h3]:mt-10 [&_h3]:font-bold
                            [&_p]:mb-6 [&_p]:leading-loose
                            [&_ul]:bg-slate-50/50 [&_ul]:p-10 [&_ul]:rounded-[2.5rem] [&_ul]:border [&_ul]:border-slate-100 [&_ul]:space-y-4 [&_ul]:list-none [&_ul]:my-10
                            [&_li]:flex [&_li]:items-start [&_li]:gap-4
                            [&_li]:before:content-[''] [&_li]:before:size-3 [&_li]:before:mt-2.5 [&_li]:before:rounded-full [&_li]:before:bg-primary-tw-500 [&_li]:before:flex-shrink-0
                            [&_a]:text-primary-tw-700 [&_a]:underline font-bold
                            [&_strong]:text-slate-900 [&_strong]:font-bold
                        "
                        dangerouslySetInnerHTML={{ __html: content }}
                    />
                </div>

                {/* Secure Trust Banner */}
                <div className="mt-20 p-10 md:p-20 rounded-[4rem] bg-slate-950 text-white relative overflow-hidden group shadow-2xl">
                    <div className="absolute -top-20 -right-20 w-96 h-96 bg-primary-tw-500/10 rounded-full blur-[100px] group-hover:scale-150 transition-all duration-1000" />
                    <div className="absolute -bottom-20 -left-20 w-96 h-96 bg-indigo-500/10 rounded-full blur-[100px] group-hover:scale-150 transition-all duration-1000" />
                    
                    <div className="relative z-10 max-w-4xl text-center mx-auto">
                        <div className="size-20 bg-primary-tw-600 rounded-3xl mx-auto flex items-center justify-center mb-8 rotate-3 group-hover:rotate-0 transition-transform duration-500 shadow-2xl">
                            <Lock className="size-10 text-white" />
                        </div>
                        <h2 className="text-3xl md:text-5xl font-black mb-8">خصوصيتكم.. أمانة نعتز بها</h2>
                        <p className="text-xl text-slate-400 leading-relaxed mb-12 font-medium">
                            نطبق في منصة مواهب أعلى معايير الأمان الوطنية والدولية لضمان أن تبقى بياناتكم الشخصية والتعليمية في أمان تام، بعيداً عن أيدي العابثين، مع الحق الكامل لكم في التحكم بها.
                        </p>
                        <div className="flex flex-wrap justify-center gap-6">
                            <div className="flex items-center gap-3 px-6 py-3 bg-white/5 rounded-2xl border border-white/10">
                                <Cookie className="size-5 text-primary-tw-400" />
                                <span className="text-sm font-bold tracking-widest uppercase">#إدارة_الكوكيز</span>
                            </div>
                            <div className="flex items-center gap-3 px-6 py-3 bg-white/5 rounded-2xl border border-white/10">
                                <Shield className="size-5 text-emerald-400" />
                                <span className="text-sm font-bold tracking-widest uppercase">#المعايير_الوطنية</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    );
}