"use client";
import { useTranslation } from "react-i18next";

import Breadcrumb from '@/ui/breadcrumb';
import ServiceRegisterAuth from '@/ui/service-register-auth';

import TrainingKitsImg from "@/assets/used-images/training-kits-img.png";

const TrainingKits = () => {
    const { t } = useTranslation();
    const services = t('kits.services', { returnObjects: true }) as any[];
    return (
        <>
            <Breadcrumb pages={[t('routes.services'), t('routes.training-kits')]} />
            <div className="layout">
                <section className='grid grid-cols-[65%_34%] items-center gap-3 p-1 max-lg:grid-cols-1'>
                    <div className='border-2 border-dashed p-4 space-y-4 text-start rounded-lg h-full'>
                        <h2 className='services-header after:-bottom-1 after:w-1/2'>
                            {t('kits.title')}
                        </h2>
                        <article className='text-common-text text-lg'>
                            {t('kits.desc')}
                        </article>
                    </div>
                    <div className='h-fll lg:h-72 rounded-lg overflow-hidden border '>
                        <img src={TrainingKitsImg} alt={t("routes.training-kits")} className='object-cover w-full h-full rounded-lg' />
                    </div>
                </section>
                <section className='space-y-8'>
                    <div className='flex justify-center w-full'>
                        <h2 className='services-header after:-bottom-1'>
                            {t('kits.what')}
                        </h2>
                    </div>
                    <div className='grid grid-cols-2 max-lg:grid-cols-1 gap-10'>
                        {
                            services?.map((service, i: number) => (
                                <div className='relative rounded-tr-[4rem] rounded-bl-[4rem] rounded-br-xl rounded-tl-xl bg-[#E6E6E614] border py-[2rem] px-4' key={i}>
                                    <div className='flex justify-center items-center'>
                                        <p className='text-white bg-secondary-tw px-8 rounded-md relative w-fit -top-12 z-20 py-1'>
                                            {service.title}
                                        </p>
                                    </div>
                                    <ul className='space-y-4'>
                                        {service?.description?.map((desc, dId) => (
                                            <li key={dId} className='text-start'>
                                                <div className='flex items-center gap-2'>
                                                    <span className='size-5 flex justify-center items-center text-white bg-secondary-tw rounded-full text-xs'>{++dId}</span>
                                                    <span>{desc.title}</span>
                                                </div>
                                                <p className='text-semi-gray text-sm mr-6'>
                                                    {desc.detail}
                                                </p>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            ))
                        }
                    </div>
                </section>
            </div>

            <ServiceRegisterAuth serviceId={3} serviceName={t('routes.training-kits')} />

        </>
    );
};


export default TrainingKits;