import { getTranslations } from "next-intl/server";
import { FileText, ShieldCheck, Scale, History, UserCheck } 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.terms-conditions"),
        description: "Official terms and conditions for using the Mwaheb platform.",
    };
}

export default async function TermsConditionsPage({ params }: { params: Promise<{ locale: string }> }) {
    const locale = (await params).locale;
    const t = await getTranslations('termsConditions');
    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;">باستخدامك لهذا الموقع، نفترض أنك تقبل هذه الشروط والأحكام بالكامل. لا تستمر في استخدام منصة مواهب إذا كنت لا توافق على جميع الشروط والأحكام المذكورة في هذه الصفحة.</p>
<h2 style="color: #2c3e50;">حقوق الملكية الفكرية</h2>
<p style="color: #000;">ما لم ينص على خلاف ذلك، تمتلك منصة مواهب و/أو مرخصوها حقوق الملكية الفكرية لجميع المواد الموجودة على الموقع. جميع حقوق الملكية الفكرية محفوظة.</p>
<h2 style="color: #2c3e50;">قيود الاستخدام</h2>
<p style="color: #000;">يُمنع عليك تحديداً ما يلي:</p>
<ul style="color: #000;">
<li>نشر أي مواد من الموقع في أي وسائل إعلام أخرى دون إذن.</li>
<li>بيع أو ترخيص أو تسويق أي من مواد الموقع.</li>
<li>استخدام هذا الموقع بأي طريقة قد تكون ضارة أو تؤثر على وصول المستخدمين الآخرين.</li>
</ul>
<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;">Terms and Conditions</h1>
<p style="color: #000;">Welcome to Mwaheb Platform! We are committed to providing the best training services. These terms and conditions outline the rules and regulations for the use of our website at <a style="color: #2980b9; text-decoration: none;" href="https://mwaheblms.com/">https://mwaheblms.com</a>.</p>
<h2 style="color: #2c3e50;">Acceptance of Terms</h2>
<p style="color: #000;">By accessing this website, we assume you accept these terms and conditions in full. Do not continue to use Mwaheb Platform if you do not agree to all the terms and conditions stated on this page.</p>
<h2 style="color: #2c3e50;">Intellectual Property Rights</h2>
<p style="color: #000;">Unless otherwise stated, Mwaheb Platform and/or its licensors own the intellectual property rights for all material on the website. All intellectual property rights are reserved.</p>
<h2 style="color: #2c3e50;">User Restrictions</h2>
<p style="color: #000;">You are specifically restricted from all of the following:</p>
<ul style="color: #000;">
<li>Publishing any website material in any other media without permission.</li>
<li>Selling, sublicensing, or otherwise commercializing any website material.</li>
<li>Using this website in any way that is or may be damaging to this website or that impacts user access to this website.</li>
</ul>
<h2 style="color: #2c3e50;">No Warranties</h2>
<p style="color: #000;">This website is provided "as is," with all faults, and Mwaheb Platform expresses no representations or warranties of any kind related to this website or the materials contained on this website.</p>
<h2 style="color: #2c3e50;">Contact Information</h2>
<p style="color: #000;">If you have any questions regarding our terms, please reach out to 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">
            {/* Elegant Hero Section with Saudi Aesthetic */}
            <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/terms_conditions_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">
                {/* Visual Anchors for Legal Pillars */}
                <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-slate-50 text-slate-600 flex items-center justify-center mb-4">
                            <Scale 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">
                            <ShieldCheck 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-blue-50 text-blue-600 flex items-center justify-center mb-4">
                            <UserCheck 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">
                            <History className="size-6" />
                        </div>
                        <h4 className="font-bold text-slate-800">تحديثات مستمرة</h4>
                    </div>
                </div>

                {/* Main Content Area */}
                <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-600" />
                    <div className="flex items-center gap-4 mb-12">
                        <div className="size-12 rounded-full bg-slate-100 flex items-center justify-center">
                            <FileText className="size-6 text-slate-400" />
                        </div>
                        <h2 className="text-2xl md:text-3xl font-black text-slate-900 border-r-4 border-primary-tw-600 pr-5">
                            {t('title')}
                        </h2>
                    </div>

                    <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>

                {/* Agreement Affirmation Section */}
                <div className="mt-20 p-10 md:p-16 rounded-[4rem] bg-slate-900 text-white relative overflow-hidden group shadow-2xl">
                    <div className="absolute top-0 right-0 w-1/2 h-full opacity-5 pointer-events-none group-hover:scale-110 transition-transform duration-1000">
                        <FileText className="w-full h-full" />
                    </div>
                    <div className="relative z-10 max-w-3xl">
                        <h2 className="text-3xl md:text-5xl font-black mb-6">التزامكم.. جزء من رؤيتنا</h2>
                        <p className="text-xl text-primary-tw-100/80 leading-relaxed mb-10 font-medium">
                            باستخدامكم لمنصة مواهب، فإنكم توافقون على الالتزام بهذه الشروط والأحكام التي تهدف لحماية جميع أطراف العملية التعليمية وضمان مسار مهني آمن للجميع.
                        </p>
                        <div className="flex flex-wrap gap-4">
                            <div className="px-6 py-3 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-md text-xs font-black uppercase tracking-widest">
                                #الشفافية_القانونية
                            </div>
                            <div className="px-6 py-3 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-md text-xs font-black uppercase tracking-widest">
                                #حقوق_المتدربين
                            </div>
                            <div className="px-6 py-3 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-md text-xs font-black uppercase tracking-widest">
                                #رؤية_2030
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    );
}