"use client"
import Image from 'next/image';
import { Link } from '@/i18n/navigation';
import { useTranslations } from 'next-intl';

import { Button } from '@/components/ui/button';
import { GraduationCap, Users, Shield, ArrowRight, Trophy } from 'lucide-react';
import { USER_TOKEN_CL } from '@/utils/data/user-client';

import { CategoriesSwiper } from './categories-swiper';
import { PopularCoursesSection } from './popular-courses';
import { OnlineCoursesSection } from './online-courses';
import { PopularPackagesSection } from './popular-packages';
import { Feedback } from './feedback';
import { MwahebClients } from './clients';
import { FAQ } from './faq';
import { BannersSwiper } from './banners-swiper';

const features = [
    {
        title: "courses.title",
        desc: "courses.subtitle",
        icon: GraduationCap,
    },
    {
        title: "teachers.title",
        desc: "teachers.subtitle",
        icon: Users,
    },
    {
        title: "access.title",
        desc: "access.subtitle",
        icon: Shield,
    },
];

import { useState, useEffect } from "react";

export function Hero() {
    const t = useTranslations();
    const [IS_LOGGED_IN, setIS_LOGGED_IN] = useState<string | undefined>(undefined);

    useEffect(() => {
        setIS_LOGGED_IN(USER_TOKEN_CL());
    }, []);
    
    return (
        <main className="relative">

            <div className="relative">
                <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
                    <div className="absolute top-10 md:top-20 right-0 md:right-10 w-48 h-48 md:w-96 md:h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-2xl md:blur-3xl opacity-30 animate-blob" />
                    <div className="absolute top-20 md:top-40 right-10 md:right-1/3 w-48 h-48 md:w-96 md:h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-2xl md:blur-3xl opacity-30 animate-blob animation-delay-2000" />
                    <div className="absolute bottom-10 md:bottom-20 right-4 md:right-1/4 w-48 h-48 md:w-96 md:h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-2xl md:blur-3xl opacity-30 animate-blob animation-delay-4000" />
                    <div className="hidden md:block absolute top-1/3 right-20 w-64 h-64 bg-orange-300 rounded-full mix-blend-multiply filter blur-2xl opacity-40" />
                </div>

                {/* main */}
                <div className="relative pt-20 pb-16">
                    <div className="grid lg:grid-cols-2 gap-12 items-center">
                        {/* left */}
                        <div className="space-y-8 z-10">
                            <h1 className="text-5xl font-bold text-gray-900 leading-tight">
                                {t("home.desc-1")}
                            </h1>

                            <p className="text-lg lg:text-xl text-gray-600 leading-relaxed max-w-2xl">
                                {t("home.desc-2")}
                            </p>

                            <div className="flex flex-wrap gap-4">
                                {IS_LOGGED_IN ? (
                                    <>
                                        <Button className='bg-primary-tw-500 hover:opacity-85' size={"lg"} asChild>
                                            <Link href={'/dashboard'}>
                                                {t("routes.dashboard")}
                                                <ArrowRight className="size-4 rtl:rotate-180" />
                                            </Link>
                                        </Button>
                                        
                                        <Button size={"lg"} className='hover:opacity-85' asChild>
                                            <Link href={'/programs'}>
                                                {t("routes.programs")}
                                                <ArrowRight className="size-4 rtl:rotate-180" />
                                            </Link>
                                        </Button>
                                    </>
                                ) : (
                                    <>
                                        <Button className='bg-primary-tw-500 hover:opacity-85' size={"lg"} asChild>
                                            <Link href={'/login'}>
                                                {t("custom.get-started")}
                                                <ArrowRight className="size-4 rtl:rotate-180" />
                                            </Link>
                                        </Button>

                                        <Button size={"lg"} className='hover:opacity-85' asChild>
                                            <Link href={'/register'}>
                                                {t("custom.join-now")}
                                                <ArrowRight className="size-4 rtl:rotate-180" />
                                            </Link>
                                        </Button>
                                    </>
                                )}
                            </div>
                        </div>

                        {/* right */}
                        <div className="hidden lg:flex relative items-center justify-center min-h-[500px] lg:min-h-[600px]">
                            {/* The Circular Portal Effect */}
                            <div className="relative w-full max-w-[500px] aspect-square flex items-center justify-center">
                                
                                {/* Rotating Geometric Rings */}
                                <div className="absolute inset-0 border-[1px] border-dashed border-primary-tw-300/40 rounded-full animate-[spin_20s_linear_infinite]" />
                                <div className="absolute inset-4 border-[1px] border-solid border-primary-tw-200/20 rounded-full animate-[spin_15s_linear_infinite_reverse]" />
                                <div className="absolute inset-12 bg-gradient-to-tr from-primary-tw-50/50 to-blue-50/50 rounded-full blur-xl" />
                                
                                {/* Main Image Container (Floating) */}
                                <div className="relative z-10 w-[85%] h-[85%] animate-float">
                                    <div className="absolute inset-0 bg-gradient-to-b from-primary-tw-500 to-blue-600 rounded-full p-1.5 shadow-2xl">
                                        <div className="w-full h-full rounded-full overflow-hidden bg-white border-4 border-white shadow-inner">
                                            <Image
                                                src={'/images/saudi-hero-main-v2.png'}
                                                alt='mwaheb'
                                                className='w-full h-full object-cover grayscale-[20%] hover:grayscale-0 transition-all duration-700 hover:scale-110'
                                                width={600}
                                                height={600}
                                                priority
                                            />
                                        </div>
                                    </div>

                                    {/* Decorative Floating Circle 1: Top Left */}
                                    <div className="absolute -top-8 -left-12 bg-gradient-to-tr from-white/40 to-white/10 backdrop-blur-md size-24 rounded-full shadow-2xl border border-white/30 animate-pulse z-20" />

                                    {/* Decorative Floating Circle 2: Bottom Right */}
                                    <div className="absolute -bottom-10 -right-16 bg-gradient-to-br from-primary-tw-200/30 to-blue-200/10 backdrop-blur-xl size-32 rounded-full shadow-2xl border border-white/20 animate-bounce-slow z-20" />
                                    
                                    {/* A third smaller circle for depth */}
                                    <div className="absolute top-1/4 -right-16 bg-yellow-200/20 backdrop-blur-sm size-16 rounded-full border border-white/10 animate-float z-20" />

                                    {/* Floating Dots/Decoration */}
                                    <div className="absolute top-1/2 -right-10 w-4 h-4 bg-yellow-400 rounded-full blur-sm animate-pulse" />
                                    <div className="absolute bottom-1/4 -left-12 w-6 h-6 bg-blue-400 rounded-full blur-md animate-pulse [animation-delay:1.5s]" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* features */}
            <div className="relative pb-20 box !px-0">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 bg-gradient-to-br from-blue-700 to-primary-tw-700 p-10 rounded-md">
 
                     {features.map((item, i) => {
                         const Icon = item.icon;
 
                         return (
                             <div key={i} className="group relative rounded-xl p-4 bg-white/10"
                             >
                                 <div className="flex items-start gap-4">
                                     <div
                                         className="flex-shrink-0 size-12 rounded-full bg-white/10 backdrop-blur-sm border-2 border-white/20 flex items-center justify-center"
                                     >
                                         <Icon className="size-6 text-white" />
                                     </div>
 
                                     <div className="flex-1">
                                         <h3 className="text-lg font-bold text-white mb-0.5">
                                             {t(`home.features.${item.title}`)}
                                         </h3>
                                         <p className="text-purple-100 text-sm">
                                             {t(`home.features.${item.desc}`)}
                                         </p>
                                     </div>
                                 </div>
                             </div>
                         );
                     })}
 
                 </div>
             </div>

            <CategoriesSwiper />
            <PopularCoursesSection />
            <OnlineCoursesSection />
            <PopularPackagesSection />

            {/* <MwahebClients /> */}

            <Feedback />
            <FAQ />
            <BannersSwiper />
        </main>
    );
}