import { getTranslations } from "next-intl/server";
import { GraduationCap } from 'lucide-react';
import Image from 'next/image';
import { Link } from "@/i18n/navigation";

export async function generateMetadata() {
    const t = await getTranslations();
    return {
        title: t("routes.academic-policy"),
        description: "Academic controls and requirements",
    };
}

export default async function AcademicPolicyPage() {
    const t = await getTranslations('academicPolicy');
    const tGlobal = await getTranslations();
    const content = t.raw("content");

    return (
        <main className="min-h-screen box m-auto  bg-primary-tw-50/20 font-sans">
            {/* Modern Two-Column Hero with First Academic Image */}
            <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-700">
                    <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">
                            {t("title")}
                         </div>
                        <h1 className="text-3xl md:text-5xl text-gray-900 leading-tight">
                            {t('title')}
                        </h1>
                        <p className="text-base md:text-lg text-gray-400 max-w-lg italic opacity-80 leading-relaxed">
                            {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">
                            {tGlobal("routes.home")}
                         </Link>
                         <span className="opacity-30">/</span>
                         <span className="text-slate-900">{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/50 rounded-[4rem] blur-[80px] group-hover:bg-primary-tw-200/60 transition-all duration-1000" />
                    <div className="relative h-[250px] md:h-[450px] rounded-[2.5rem] overflow-hidden  border-[10px] border-white group-hover:rotate-0 rotate-1 transition-all duration-700 scale-105">
                        <Image 
                            src="/images/saudi_academic_1_final.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">
                <div className="p-4 md:p-8 rounded-[3.5rem] border border-slate-100 bg-white  relative z-10 overflow-hidden text-lg leading-relaxed">
                    <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-primary-tw-600 to-indigo-600" />
                    <div
                        className="
                            prose max-w-none text-slate-700
                            
                            [&_h1]:text-3xl [&_h1]:text-slate-900 [&_h1]:mb-8
                            
                            [&_h2]:text-2xl [&_h2]:text-slate-900 [&_h2]:mb-8 [&_h2]:mt-16 [&_h2]:pb-3 [&_h2]:border-b-2 [&_h2]:border-primary-tw-100
                            
                            [&_h3]:text-xl [&_h3]:text-slate-900 [&_h3]:mb-4 [&_h3]:mt-10
                            
                            [&_ul]:bg-primary-tw-50/30 [&_ul]:p-10 [&_ul]:rounded-[2.5rem] [&_ul]:border [&_ul]:border-primary-tw-100/50 [&_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
                            [&_strong]:text-slate-900
                            
                            [&_table]:w-full [&_table]:border-collapse [&_table]:my-12 [&_table]:rounded-3xl [&_table]:overflow-hidden [&_table]:border [&_table]:border-slate-100
                            [&_thead]:bg-primary-tw-50
                            [&_th]:p-6 [&_th]:text-right [&_th]:border [&_th]:text-primary-tw-900 [&_th]:text-sm [&_th]:uppercase
                            [&_td]:p-6 [&_td]:border [&_td]:text-slate-700
                        "
                        dangerouslySetInnerHTML={{ __html: content }}
                    />
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 mt-24 items-center">
                    <div className="lg:col-span-5 relative group order-last lg:order-first">
                         <div className="absolute -inset-8 bg-primary-tw-100 rounded-[4rem] blur-3xl opacity-60 group-hover:opacity-100 transition-opacity duration-1000" />
                        <div className="relative h-[400px] rounded-[3rem] overflow-hidden shadow-2xl border-8 border-white hover:-rotate-1 transition-transform duration-700 z-10">
                             <Image 
                                src="/images/saudi_academic_final_research.png" 
                                alt="Saudi Academic Research Excellence" 
                                fill 
                                className="object-cover"
                            />
                        </div>
                    </div>
                    <div className="lg:col-span-7 space-y-6">
                        <div className="size-16 rounded-2xl bg-primary-tw-600 shadow-xl shadow-primary-tw-100 flex items-center justify-center text-white mb-6">
                            <GraduationCap className="size-8" />
                        </div>
                        <h1 className="text-3xl md:text-5xl text-slate-900 leading-tight">
                            {t('title')}
                        </h1>
                        <div className="h-1.5 w-24 bg-primary-tw-600 rounded-full" />
                        <p className="text-xl text-slate-500 leading-relaxed max-w-2xl opacity-90">
                            {t('description')}
                        </p>
                    </div>
                </div>
            </section>
        </main>
    );
}