import { getTranslations } from "next-intl/server";
import { 
    ShieldCheck, 
    Database, 
    Clock, 
    GraduationCap, 
    BookOpen, 
    LifeBuoy, 
    Users, 
    Lock, 
    FileText,
    ChevronLeft,
    ArrowRight,
    MessageSquare
} from 'lucide-react';
import { Link } from "@/i18n/navigation";

export async function generateMetadata() {
    const t = await getTranslations();
    return {
        title: t("routes.guides-and-regulations"),
        description: "Mwaheb platform policies and guides hub",
    };
}

const POLICY_CARDS = [
    {
        id: 'integrity-policy',
        icon: ShieldCheck,
        href: '/integrity-policy',
        color: 'bg-blue-500',
    },
    {
        id: 'data-policy',
        icon: Database,
        href: '/data-policy',
        color: 'bg-indigo-500',
    },
    {
        id: 'attendance-policy',
        icon: Clock,
        href: '/attendance-policy',
        color: 'bg-purple-500',
    },
    {
        id: 'academic-policy',
        icon: GraduationCap,
        href: '/academic-policy',
        color: 'bg-emerald-500',
    },
    {
        id: 'moodle-guide',
        icon: BookOpen,
        href: '/moodle-guide',
        color: 'bg-amber-500',
    },
    {
        id: 'support-policy',
        icon: LifeBuoy,
        href: '/support-policy',
        color: 'bg-rose-500',
    },
    {
        id: 'communication-policy',
        icon: Users,
        href: '/communication-policy',
        color: 'bg-cyan-500',
    },
    {
        id: 'privacy',
        icon: Lock,
        href: '/privacy',
        color: 'bg-slate-500',
    },
    {
        id: 'roles-policy',
        icon: Users,
        href: '/roles-policy',
        color: 'bg-emerald-600',
    },
    {
        id: 'terms-conditions',
        icon: FileText,
        href: '/terms-conditions',
        color: 'bg-gray-500',
    },
    {
        id: 'trainer-training-plan',
        icon: GraduationCap,
        href: '/trainer-training-plan',
        color: 'bg-indigo-600',
    },
    {
        id: 'center-commitment',
        icon: ShieldCheck,
        href: '/center-commitment',
        color: 'bg-slate-900',
    },
    {
        id: 'supervisory-staff',
        icon: Users,
        href: '/supervisory-staff',
        color: 'bg-indigo-700',
    },
    {
        id: 'identity-verification',
        icon: ShieldCheck,
        href: '/identity-verification',
        color: 'bg-blue-600',
    },
    {
        id: 'complaints-proposals',
        icon: MessageSquare,
        href: '/complaints-proposals',
        color: 'bg-amber-600',
    }
];

export default async function PoliciesHubPage() {
    const t = await getTranslations();

    return (
        <main className="min-h-screen bg-slate-50/50 pb-20">
            {/* Hero Section */}
            <div className="bg-white border-b relative overflow-hidden">
                <div className="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-primary-tw-600 to-indigo-600" />
                <div className="container mx-auto px-4 py-16 md:py-24 text-center relative z-10">
                    <h1 className="text-4xl md:text-6xl text-slate-900 mb-6 tracking-tight">
                        {t('routes.guides-and-regulations')}
                    </h1>
                    <p className="text-lg md:text-xl text-slate-500 max-w-2xl mx-auto leading-relaxed">
                        نحن نؤمن بالشفافية والوضوح. هنا تجد كافة الأنظمة واللوائح التي تنظم رحلتك التدريبية في منصة مواهب لضمان أفضل تجربة تعليمية.
                    </p>
                </div>
                
                {/* Abstract Background Shapes */}
                <div className="absolute -top-24 -right-24 size-96 bg-primary-tw-50 rounded-full blur-3xl opacity-50" />
                <div className="absolute -bottom-24 -left-24 size-96 bg-indigo-50 rounded-full blur-3xl opacity-50" />
            </div>

            {/* Grid Section */}
            <div className="container mx-auto px-4 -mt-10 relative z-20">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
                    {POLICY_CARDS.map((card) => {
                        const Icon = card.icon;
                        
                        return (
                            <Link 
                                key={card.id}
                                href={card.href}
                                className="group relative bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm hover:shadow-xl hover:-translate-y-2 transition-all duration-500 flex flex-col h-full overflow-hidden"
                            >
                                <div className={`size-16 rounded-2xl ${card.color} text-white flex items-center justify-center mb-6 shadow-lg shadow-inherit/20 group-hover:scale-110 transition-transform duration-500`}>
                                    <Icon className="size-8" />
                                </div>
                                
                                <h3 className="text-2xl text-slate-900 mb-3 group-hover:text-primary-tw-600 transition-colors">
                                    {t(card.id === 'privacy' || card.id === 'terms-conditions' || card.id === 'integrity-policy' || card.id === 'data-policy' || card.id === 'attendance-policy' || card.id === 'academic-policy' || card.id === 'moodle-guide' || card.id === 'support-policy' || card.id === 'communication-policy' || card.id === 'roles-policy' || card.id === 'trainer-training-plan' || card.id === 'center-commitment' || card.id === 'supervisory-staff' || card.id === 'identity-verification' || card.id === 'complaints-proposals' ? `routes.${card.id}` : card.id)}
                                </h3>
                                
                                <p className="text-slate-500 leading-relaxed mb-8 line-clamp-3">
                                    {t(`${card.id === 'privacy' ? 'privacyPolicy' : card.id === 'terms-conditions' ? 'termsConditions' : card.id === 'moodle-guide' ? 'moodleGuide' : card.id === 'academic-policy' ? 'academicPolicy' : card.id === 'roles-policy' ? 'rolesPolicy' : card.id === 'trainer-training-plan' ? 'trainerTrainingPlan' : card.id === 'center-commitment' ? 'centerCommitment' : card.id === 'integrity-policy' ? 'integrityPolicy' : card.id === 'data-policy' ? 'dataPolicy' : card.id === 'attendance-policy' ? 'attendancePolicy' : card.id === 'support-policy' ? 'supportPolicy' : card.id === 'supervisory-staff' ? 'supervisoryStaff' : card.id === 'identity-verification' ? 'identityVerification' : card.id === 'complaints-proposals' ? 'complaintsProposals' : 'communicationPolicy'}.description`)}
                                </p>
                                
                                <div className="mt-auto flex items-center gap-2 text-primary-tw-600 text-sm uppercase tracking-wider group-hover:gap-4 transition-all">
                                    اقرأ المزيد 
                                    <ArrowRight className="size-4 rtl:rotate-180" />
                                </div>

                                {/* Hover Glow */}
                                <div className="absolute -bottom-10 -right-10 size-40 bg-slate-50 rounded-full scale-0 group-hover:scale-100 transition-transform duration-700 -z-10 opacity-50" />
                            </Link>
                        );
                    })}
                </div>
            </div>

           
        </main>
    );
}