"use client";
import { TitleAndDescription } from "@/types";

import Image from "@/ui/image";
import Breadcrumb from "@/ui/breadcrumb";
import ServiceRegisterAuth from "@/ui/service-register-auth";

import ConsultingImg from "@/assets/used-images/training-sec-1.png";
import ConsultingImg2 from "@/assets/used-images/consulting-img-2.png";
import Eye from "@/assets/used-images/eye.png";
import Msg from "@/assets/used-images/message-star.png";

import IvoryGold from "@/assets/used-icons/IvoryGold.svg";
import { CheckCircle } from "lucide-react";

import Swiper from "@/ui/swiper";
import { SwiperSlide } from "swiper/react";

import { useTranslation } from "react-i18next";

const ThirdSector = () => {
    const { t, i18n } = useTranslation();

    const firstSecIcons = [Eye, Msg];
    const firstSec = t('sector.firstSec', { returnObjects: true }) as TitleAndDescription[];
    const goals = t('sector.goals', { returnObjects: true }) as string[];
    const productsFirstCol = t('sector.productsFirstCol', { returnObjects: true }) as any;
    const productsSecondCol = t('sector.productsSecondCol', { returnObjects: true }) as any;
    const trainingAndCertificationsArray = t('sector.trainingAndCertificationsArray', { returnObjects: true }) as any;
    const testimonialArray = t('sector.testimonialArray', { returnObjects: true }) as any[];

    const swiperProps = {
        key: i18n.language,
        slidesPerView: 1,
        spaceBetween: 10,
        loop: true,
        autoplay: { delay: 3000, disableOnInteraction: false },
        breakpoints: {
            300: { slidesPerView: 1 },
            800: { slidesPerView: 2 },
        },
        className: "p-3"
    };

    return (
        <>
            <Breadcrumb pages={[t('routes.services'), t('routes.third-sector')]} />
            <div className="layout">
                <div className="border rounded-lg p-3">
                    <h2 className="services-header after:w-20 after:-bottom-2">
                        {t('sector.title-1')}
                    </h2>
                    <article className="text-semi-gray text-start mt-4">
                        {t('sector.desc')}
                    </article>
                </div>
                <section className="grid grid-cols-[29%_68%] gap-12 px-4 max-lg:grid-cols-1 my-8">
                    <div className="relative">
                        <div className="w-full h-full border rounded-lg z-10 absolute -top-2 -right-4"></div>
                        <Image
                            src={ConsultingImg}
                            alt={t("routes.third-sector")}
                            className={'rounded-lg w-full h-full z-10 relative top-4 -left-4'}
                        />
                    </div>
                    <div className="space-y-6">
                        {
                            firstSec.map((sec, i) => (
                                <div className="flex items-start gap-2 text-start" key={i}>
                                    <div className="size-14 border rounded-full">
                                        <div className="size-14 flex justify-center items-center">
                                            <img src={firstSecIcons[i]} alt={sec.title} className="w-8" />
                                        </div>
                                    </div>
                                    <div>
                                        <p className="text-secondary-tw">
                                            {sec.title}
                                        </p>
                                        <p className="text-semi-gray w-[36rem] max-lg:w-auto">
                                            {sec.desc}
                                        </p>
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </section>
            </div>

            {/* الاهداف */}
            <div className="bg-[#F5F5F5] py-4">
                <div className="layout">
                    <div className="flex justify-center">
                        <h2 className="services-header after:-bottom-2 after:w-12 flex justify-center">
                            {t('training-courses.goals')}
                        </h2>
                    </div>
                    <div className="grid grid-cols-3 gap-4 max-lg:grid-cols-1">
                        {
                            goals?.map((goal: string, i: number) => (
                                <div className="border-2 rounded-tr-3xl rounded-bl-3xl rounded-lg p-3 text-start bg-white" key={i}>
                                    {goal}
                                </div>
                            ))
                        }
                    </div>
                </div>
            </div>

            {/* منتجات وحدة القطاع */}
            <div className="layout">
                <section className="relative rounded-lg" style={{ backgroundImage: `url(${ConsultingImg2})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }}>
                    <div className="absolute z-10 w-full h-full bg-gradient-to-t from-[rgba(106,47,56,0.95)] to-[rgba(84,18,37,0.95)] rounded-lg"></div>
                    <div className="relative z-20 text-white text-lg !py-9 px-3 space-y-4">
                        <p className="text-secondary-tw text-2xl font-semibold">
                            {t('sector.title-2')}
                        </p>
                        <p>
                            {t('sector.desc-2')}
                        </p>
                    </div>
                </section>

                <section className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 py-5">
                    <div className="border-2 rounded-xl p-3 text-start">
                        <p className="text-secondary-tw text-xl">
                            {productsFirstCol.title}
                        </p>
                        <div className="space-y-1 my-2">
                            {
                                productsFirstCol.desc.map((item, i: number) => (
                                    <div className="grid grid-cols-[3%_96%] items-start gap-2" key={i}>
                                        <div>
                                            <img src={IvoryGold} alt="" className="w-3 mt-1" />
                                        </div>
                                        <p>
                                            {item}
                                        </p>
                                    </div>
                                ))
                            }
                        </div>
                        <div className="space-y-5 my-4">
                            <p className="text-lg text-common-text">
                                {productsFirstCol.secondTitle}
                            </p>
                            <div className="space-y-6">
                                {
                                    productsFirstCol.details.map((item, i: number) => (
                                        <div key={i}>
                                            <div className="flex items-center gap-2 text-secondary-tw mb-2">
                                                <CheckCircle size={13} />
                                                <p className="text-lg">
                                                    {item.title} :
                                                </p>
                                            </div>
                                            <p>
                                                {item.desc}
                                            </p>
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    </div>
                    <div className="grid gap-3">
                        {
                            productsSecondCol.map((pro, i) => (
                                <div className="border-2 rounded-xl p-3 text-start h-full" key={i}>
                                    <p className="text-secondary-tw text-lg mb-2">
                                        {pro.title}
                                    </p>
                                    <p>
                                        {pro.desc}
                                    </p>
                                    <div>
                                        {
                                            pro.items.map((item, iItem) => (
                                                <div key={iItem} className="grid grid-cols-[3%_96%] items-start gap-2">
                                                    <div>
                                                        <img src={IvoryGold} alt="" className="w-3 mt-1" />
                                                    </div>
                                                    <p>
                                                        {item}
                                                    </p>
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>
                            ))
                        }
                    </div>
                </section>
            </div>

            {/* البرامج و الشهادات */}
            <div className="px-20 pt-4 pb-24 relative max-lg:px-4 bg-primary-tw lg:h-[47rem]">

                <div className="flex justify-center">
                    <h2 className="services-header !text-white after:-bottom-2 after:w-24 flex justify-center">
                        {t('sector.title-3')}
                    </h2>
                </div>
                <section className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 my-4">
                    {
                        trainingAndCertificationsArray.map((box, i) => (
                            <div key={i} className="border-2 border-secondary-tw rounded-lg p-3 text-white text-start bg-[#ffffff0a]">
                                <p className="text-xl">
                                    {box.title}
                                </p>
                                <p className="text-secondary-tw my-2">
                                    {box.desc}
                                </p>
                                <ul className="grid grid-cols-2 px-3">
                                    {
                                        box.items.map((item, iList) => (
                                            <li className="!list-disc" key={iList}>
                                                {item}
                                            </li>
                                        ))
                                    }
                                </ul>
                            </div>
                        ))
                    }
                </section>

              
            </div>
  {/* اراء الشركات */}
                <div className="grid place-items-center ">
                    {/* <h2 className="services-header !text-white after:w-32 flex justify-center after:-bottom-2">
                        {t('sector.title-4')}
                    </h2> */}
                </div>
<section  className="relative -top-14 p-2">


                <Swiper id={'test'} showButtons props={swiperProps}> 
                    {
                        testimonialArray.map((test, i: number) => (
                            <SwiperSlide key={i} className="w-full lg:!w-[30rem] rounded-lg bg-white border-2 border-secondary-tw">
                                <div className="w-auto">
                                    <div className="bg-secondary-tw text-white w-auto rounded-t-lg p-3 h-24 grid place-items-center">
                                        <p className="text-center">{test.programTitle}</p>
                                    </div>
                                    <div className="text-start py-3 px-2 space-y-2 md:h-96">
                                        <p className="text-lg font-semibold">{test.company}</p>
                                        <article className="text-gray-500">
                                            {test.companyTestimonial}
                                        </article>
                                    </div>
                                </div>
                            </SwiperSlide>
                        ))
                    }
                </Swiper>
                </section>
            <div className="lg:mt-40 grid place-items-end">
                <ServiceRegisterAuth serviceId={8} serviceName={t('routes.third-sector')} />
            </div>
        </>
    );
};

export default ThirdSector;