"use client";
import { useEffect, useState } from 'react';
import Breadcrumb from '@/ui/breadcrumb';
import ServiceRegisterAuth from '@/ui/service-register-auth';
import EvBag from "@/assets/used-icons/EvBag.svg";
import EvGroup from "@/assets/used-icons/EvGroup.svg";
import EvFour from "@/assets/used-icons/EvFour.svg";
import EvTrade from "@/assets/used-icons/EvTrade.png";
import EvBox from "@/assets/used-images/EvBoxBg.png";
import IvoryList from "@/assets/icons/IvoryGold.svg";
import { useTranslation } from 'react-i18next';

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

    const berkman = t('evaluate.berkman', { returnObjects: true }) as any;
    const talassure = t('evaluate.talassure', { returnObjects: true }) as any;

    const evaluates = [EvBag, EvTrade, EvGroup, EvFour];
    const [section, setSection] = useState({
        sec: berkman,
        id: 1
    });

    useEffect(() => {
        const berkman = t('evaluate.berkman', { returnObjects: true }) as any;
        const talassure = t('evaluate.talassure', { returnObjects: true }) as any;

        if (section.id === 1) {
            setSection({ sec: berkman, id: 1 });
        } else {
            setSection({ sec: talassure, id: 2 });
        }
    }, [i18n.language, section.id]);
    
    return (
        <>
            <Breadcrumb pages={[t('routes.services'), t('routes.evaluations')]} />
            <div className='layout'>
                <div className='grid justify-items-center gap-3 relative border pt-4 px-4 rounded-xl pb-12'>
                    <h2 className='services-header after:-bottom-1'>
                        {t('routes.evaluations')}
                    </h2>
                    <article className='text-semi-gray text-lg'>
                        {t('evaluate.desc-one')}
                    </article>
                    <div className='flex gap-3 absolute text-lg -bottom-4 max-lg:text-base'>
                        <button className={`${section.id === 1 ? 'text-white bg-secondary-tw' : 'bg-white text-secondary-tw'} w-60 py-1 rounded-lg border max-lg:w-auto max-lg:px-6`} onClick={() => setSection({ sec: berkman, id: 1 })}>
                            {t('evaluate.berkman-ev')}
                        </button>
                        <button className={`${section.id === 2 ? 'text-white bg-secondary-tw' : 'bg-white text-secondary-tw'} w-60 py-1 rounded-lg border max-lg:w-auto max-lg:px-6`} onClick={() => setSection({ sec: talassure, id: 2 })}>
                            {t('evaluate.talassure-ev')}
                        </button>
                    </div>
                </div>
                <div className='space-y-10'>
                      <div className='col-span-3 flex justify-center mt-8 relative rounded-md h-[220px] lg:h-[350px] max-lg:col-span-1'>
                            <img src={EvBox} alt={t("routes.evaluations")} className='w-full h-full object-cover rounded-md' />
                            <div className='absolute top-8 max-lg:top-2 z-20 space-y-2 px-4'>
                                <p className='text-secondary-tw sm:text-sm text-xl text-center md:text-start max-lg:text-lg'>
                                    {section.sec?.title}
                                </p>
                                <p className='text-white   text-sm md:text-lg text-center md:text-start' >
                                    {section.sec?.desc}
                                </p>
                            </div>
                            <div className='ev-box absolute z-0 rounded-md '></div>
                        </div>
                    <section className={`grid  gap-4 mt-10  max-lg:grid-cols-2 ${section.id === 1 ? 'grid-cols-5 max-xl:grid-cols-4' : 'grid-cols-4 max-xl:grid-cols-3'}`}>
                      
                        {
                            section?.sec?.details.map((detail, i) => (
                                <div className='border p-2 md:p-4 text-center space-y-3 rounded-lg col-span-1' key={i}>
                                    <p className='text-secondary-tw text-lg'>
                                        {detail?.title}
                                    </p>
                                    <p>
                                        {detail?.desc}
                                    </p>
                                </div>
                            ))
                        }
                    </section>
                    <div className='flex items-center justify-center gap-2'>
                        <span>
                            <img src={IvoryList} alt="" />
                        </span>
                        <p className='text-lg font-bold'>
                            {t('evaluate.ev-uses')}
                        </p>
                        <span className='rotate-180'>
                            <img src={IvoryList} alt=""  />
                        </span>
                    </div>
                    <div className={`grid justify-items-center gap-4 max-xl:grid-cols-2 max-lg:grid-cols-1 ${section.sec.evaluates.length <= 3 ? 'grid-cols-3' : 'grid-cols-4'} px-2`}>
                        {
                            section.sec?.evaluates?.map((ev, i) => (
                                <div key={i} className='bg-primary-tw text-white border p-4 rounded-lg relative text-start space-y-2'>
                                    <span className='bg-secondary-tw flex justify-center items-center size-10 rounded-full absolute -top-4 -right-4'>
                                        <img src={evaluates[i]} alt={ev?.title} className={`${ev?.icon?.includes('png') ? 'w-7' : 'w-6'}`} />
                                    </span>
                                    <p className='text-lg font-bold'>
                                        {ev?.title}
                                    </p>
                                    <p className='text-gray-100 text-base' style={{ lineHeight: '20px' }}>
                                        {ev?.desc}
                                    </p>
                                </div>
                            ))
                        }

                    </div>
                </div>
            </div>

            <ServiceRegisterAuth serviceId={2} serviceName={t('routes.evaluations')} />
        </>
    );
};

export default Evaluations