import Image from "next/image";
import { getTranslations } from "next-intl/server";
import { 
    Users, 
    Target, 
    TrendingUp, 
    Headset, 
    Wallet, 
    Briefcase, 
    Palette, 
    Lock, 
    Settings, 
    Activity,
    CheckCircle2,
    MessagesSquare,
    Globe,
    ArrowRight
} from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/navigation";

export const generateMetadata = async () => {
    const t = await getTranslations();
    return {
        title: t("why-mwaheb.title")
    };
};

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

    const domains = [
        { id: "hr", icon: Users },
        { id: "marketing", icon: Target },
        { id: "sales", icon: TrendingUp },
        { id: "customer_service", icon: Headset },
        { id: "finance", icon: Wallet },
        { id: "strategy", icon: Briefcase },
        { id: "design", icon: Palette },
        { id: "digital", icon: Lock },
        { id: "ops", icon: Settings },
        { id: "medical", icon: Activity },
    ];

    const values = [
        { id: "certs", icon: CheckCircle2 },
        { id: "support", icon: MessagesSquare },
        { id: "consulting", icon: Globe },
    ];

    return (
        <section className="flex flex-col gap-20  py-10 m-auto">
            {/* 1. Hero Section */}
            <div className="relative overflow-hidden  m-auto">
                <div className="box grid lg:grid-cols-2 gap-8 lg:gap-12 items-center min-h-[400px] lg:min-h-[500px]">
                    <div className="space-y-6 z-10 text-center lg:text-start">
                        <span className="inline-block text-secondary-foreground bg-secondary px-4 py-1.5 rounded-full text-sm font-semibold">
                            {t("why-mwaheb.title")}
                        </span>
                        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
                            {t("why-mwaheb.hero.title")}
                        </h1>
                        <p className="text-base md:text-lg text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                            {t("why-mwaheb.hero.desc")}
                        </p>
                        <div className="flex justify-center lg:justify-start gap-4">
                            <Button className="bg-primary-tw-500 hover:opacity-90 px-6 lg:px-8 py-5 lg:py-6 text-base lg:text-lg w-full sm:w-auto" asChild>
                                <Link href="/programs">
                                    {t("custom.get-started")}
                                    <ArrowRight className="ms-2 size-5 rtl:rotate-180" />
                                </Link>
                            </Button>
                        </div>
                    </div>
                    <div className="relative h-[250px] sm:h-[350px] lg:h-[500px] w-full bg-slate-100 rounded-3xl overflow-hidden shadow-2xl order-last lg:order-none">
                        {/* Placeholder for Hero Image - Needs Saudi Business Setting */}
                        <Image
                            src="/images/saudi-hero.png" 
                            alt="Saudi Business Excellence"
                            fill
                            className="object-cover"
                            priority
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
                    </div>
                </div>
            </div>

            {/* 2. Training Domains Grid */}
            <div className="bg-slate-50 py-20 m-auto">
                <div className="box space-y-12">
                    <div className="text-center space-y-4">
                        <h2 className="text-3xl lg:text-4xl font-bold text-gray-900">
                            {t("why-mwaheb.domains.title")}
                        </h2>
                        <div className="h-1.5 w-24 bg-primary-tw-500 mx-auto rounded-full" />
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
                        {domains.map((domain) => {
                            const Icon = domain.icon;
                            return (
                                <Card key={domain.id} className="border-none shadow-sm hover:shadow-md transition-all duration-300 group">
                                    <CardContent className="p-6 flex flex-col items-center text-center space-y-4">
                                        <div className="p-4 rounded-2xl bg-primary-tw-50 group-hover:bg-primary-tw-500 transition-colors duration-300">
                                            <Icon className="size-8 text-primary-tw-500 group-hover:text-white" />
                                        </div>
                                        <div className="space-y-2">
                                            <h3 className="font-bold text-gray-900">
                                                {t(`why-mwaheb.domains.items.${domain.id}`)}
                                            </h3>
                                            <p className="text-sm text-gray-500 leading-relaxed">
                                                {t(`why-mwaheb.domains.items.${domain.id}_desc`)}
                                            </p>
                                        </div>
                                    </CardContent>
                                </Card>
                            )
                        })}
                    </div>
                </div>
            </div>

            {/* 3. Learning Ecosystem */}
            <div className="box grid lg:grid-cols-2 gap-10 lg:gap-16 items-center m-auto">
                <div className="relative h-[280px] sm:h-[350px] lg:h-[400px] rounded-3xl overflow-hidden order-2 lg:order-1">
                    <Image
                        src="/images/saudi-learning.png"
                        alt="Integrated Learning"
                        fill
                        className="object-cover"
                    />
                    <div className="absolute inset-0 bg-primary-tw-900/10" />
                </div>
                <div className="space-y-6 order-1 lg:order-2 text-center lg:text-start">
                    <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
                        {t("why-mwaheb.ecosystem.title")}
                    </h2>
                    <p className="text-base md:text-lg text-gray-600 leading-relaxed">
                        {t("why-mwaheb.ecosystem.desc")}
                    </p>
                    <div className="grid grid-cols-2 gap-4 pt-4">
                        <div className="flex items-center gap-3">
                            <div className="size-2 rounded-full bg-primary-tw-500" />
                            <span className="font-medium">{t("single-word.blog")}</span>
                        </div>
                        <div className="flex items-center gap-3">
                            <div className="size-2 rounded-full bg-teal-500" />
                            <span className="font-medium text-teal-600">أدلة إجرائية</span>
                        </div>
                        <div className="flex items-center gap-3">
                            <div className="size-2 rounded-full bg-yellow-500" />
                            <span className="font-medium text-yellow-600">تعلم تفاعلي</span>
                        </div>
                    </div>
                </div>
            </div>

            {/* 4. Value Added */}
            <div className="bg-primary-tw-900 py-12 lg:py-20 text-white overflow-hidden relative">
                <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-32 -mt-32" />
                <div className="box space-y-12 relative z-10 m-auto">
                    <div className="text-center space-y-4">
                        <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold">
                            {t("why-mwaheb.value.title")}
                        </h2>
                    </div>
                    <div className="grid md:grid-cols-3 gap-8">
                        {values.map((v) => {
                            const Icon = v.icon;
                            return (
                                <div key={v.id} className="bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/20 space-y-4">
                                    <div className="size-14 rounded-xl bg-yellow-400 flex items-center justify-center">
                                        <Icon className="size-8 text-primary-tw-900" />
                                    </div>
                                    <h3 className="text-xl font-bold">{t(`why-mwaheb.value.items.${v.id}`)}</h3>
                                    <p className="text-primary-tw-50 leading-relaxed opacity-90">
                                        {t(`why-mwaheb.value.items.${v.id}_desc`)}
                                    </p>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>

            {/* 5. Future Vision */}
            <div className="box pb-10 lg:pb-20 m-auto">
                <div className="bg-slate-300 relative overflow-hidden rounded-[2rem] lg:rounded-[3rem] p-6 sm:p-10 lg:p-16 grid lg:grid-cols-3 gap-8 items-center text-white min-h-[300px] lg:min-h-[400px]">
                    <Image 
                        src="/images/saudi-vision.png"
                        alt="Saudi Growth Vision"
                        fill
                        className="object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-r from-teal-900/80 to-primary-tw-900/80" />
                    <div className="lg:col-span-2 space-y-4 sm:space-y-6 relative z-10 text-center lg:text-start">
                        <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold">
                            {t("why-mwaheb.vision.title")}
                        </h2>
                        <p className="text-base md:text-lg opacity-90 leading-relaxed">
                            {t("why-mwaheb.vision.desc")}
                        </p>
                    </div>
                    <div className="flex justify-center lg:justify-end relative z-10">
                        <div className="size-32 sm:size-40 lg:size-48 bg-white/20 backdrop-blur-3xl rounded-full border-4 border-white/30 p-2 flex items-center justify-center">
                             <TrendingUp className="size-16 sm:size-20 lg:size-24" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}