"use client";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import CoachingImg from "@/assets/used-images/login.png";
import Breadcrumb from "@/ui/breadcrumb";
import ServiceRegisterAuth from "@/ui/service-register-auth";

const Coaching = () => {
    const { t, i18n } = useTranslation();
    const returnedFirstSection = t('coaching.first-section', { returnObjects: true }) as any;
    const returnedSecondSection = t('coaching.second-section', { returnObjects: true }) as any;

    const [firstSection, setFirstSection] = useState({
        id: 0,
        content: returnedFirstSection[0].content
    });
    const [secondSection, setSecondSection] = useState({
        id: 0,
        content: returnedSecondSection[0].content
    });

    useEffect(() => {
        if (i18n.language) {
            setFirstSection({
                id: 0,
                content: returnedFirstSection[0].content
            });
            setSecondSection({
                id: 0,
                content: returnedSecondSection[0].content
            });
        };

    }, [i18n.language]);

    return (
        <>
            <Breadcrumb pages={[t('routes.services'), t('routes.coaching')]} />
            <div className="layout">

                <section className="relative">
                    <div className="h-[17rem] w-[30rem] max-lg:w-full z-0 relative max-lg:z-20">
                        <img src={CoachingImg} alt={t("routes.coaching")} className="rounded-md w-full h-full object-cover" />
                    </div>
                    <div className="absolute -bottom-8  end-0 w-9/12 border rounded-md p-4 bg-white z-20 space-y-8 max-lg:w-full max-lg:relative max-lg:top-0">
                        <h2 className="services-header">
                            {t('routes.coaching')}
                        </h2>
                        <article className="text-semi-gray text-start">
                            {t('coaching.desc-one')}
                        </article>
                    </div>
                </section>

                <section className="py-4 px-10 my-11 space-y-4 bg-primary-tw rounded-md max-lg:px-4" >
                    <p className="text-2xl text-center text-white ">
                        {t('coaching.title-two')}
                    </p>
                    <article className="text-[#D9D9D9] text-center">
                        {t('coaching.desc-two')}
                    </article>
                </section>

                {/* المرحله الأولى */}
                <section className="grid grid-cols-5 gap-10 w-full h-60 max-lg:flex max-lg:flex-col max-lg:h-full mb-6">
                    <div className="col-span-1 w-full max-lg:col-auto">
                        <p className="text-start mb-2 text-lg">
                            {t('coaching.first-step')}
                        </p>
                        <div className="space-y-3 max-lg:space-y-0 max-lg:flex max-lg:w-full max-lg:gap-2 flex-wrap">
                            {returnedFirstSection.map((sec) => (
                                <button key={sec.id}
                                    className={`w-full max-lg:w-48 py-2 border rounded-xl ${firstSection.id === sec.id ? 'text-white bg-secondary-tw' : 'text-common-text bg-transparent'} transition-all delay-0 ease-in-out max-lg:text-nowrap max-lg:px-4`}
                                    onClick={() => setFirstSection({
                                        id: sec.id,
                                        content: sec.content
                                    })}
                                >
                                    {sec.title}
                                </button>
                            ))}
                        </div>
                    </div>
                    <div className="flex items-start w-full h-60 gap-2 col-span-4 max-lg:flex-col max-lg:h-full">
                        {
                            returnedFirstSection.map(sec => (
                                <div key={sec.id}
                                    className={`${firstSection.id === sec.id ? 'w-full max-lg:h-full' : 'box-with-bg w-16 cursor-pointer max-lg:w-full'} p-4 h-60 max-lg:h-auto border rounded-md transition-all delay-0 ease-in-out`}
                                    onClick={() => firstSection.id !== sec.id && setFirstSection({ id: sec.id, content: sec.content })}
                                >
                                    {firstSection.id !== sec.id && <p>{sec.title}</p>}
                                    {firstSection.id === sec.id &&
                                        <div className="space-y-3">
                                            {
                                                firstSection?.content?.map((item, i) => (
                                                    <div key={i}>
                                                        <div className="flex items-center gap-2">
                                                            <span className="flex justify-center items-center size-5 text-center rounded-full bg-primary-tw text-white text-sm" style={{ fontSize: '12px' }}>
                                                                {++i}
                                                            </span>
                                                            <p className="text-lg">
                                                                {item.title}
                                                            </p>
                                                        </div>
                                                        <p className="text-md text-semi-gray text-start">
                                                            {item.description}
                                                        </p>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                    }
                                </div>
                            ))
                        }

                    </div>
                </section>

                {/* المرحله الثانية */}
                <section className="grid grid-cols-5 gap-10 w-full h-60 max-lg:flex max-lg:flex-col max-lg:h-full">
                    <div className="col-span-1 w-full max-lg:col-auto">
                        <p className="text-start mb-2 text-lg">
                            {t('coaching.sec-step')}
                        </p>
                        <div className="space-y-3 max-lg:space-y-0 max-lg:flex max-lg:w-full max-lg:gap-2 flex-wrap">
                            {returnedSecondSection.map((sec) => (
                                <button key={sec.id}
                                    className={`w-full max-lg:w-48 py-2 border rounded-xl ${secondSection.id === sec.id ? 'text-white bg-secondary-tw' : 'text-common-text bg-transparent'} transition-all delay-0 ease-in-out max-lg:text-nowrap max-lg:px-4`}
                                    onClick={() => setSecondSection({
                                        id: sec.id,
                                        content: sec.content
                                    })}
                                >
                                    {sec.title}
                                </button>
                            ))}
                        </div>
                    </div>
                    <div className="flex items-start w-full h-60 max-lg:h-full gap-2 col-span-4 max-lg:flex-col">
                        {
                            returnedSecondSection.map(sec => (
                                <div key={sec.id}
                                    className={`${secondSection.id === sec.id ? 'w-full' : 'box-with-bg w-16 cursor-pointer max-lg:w-full'} p-4 h-60 max-lg:h-full border rounded-md transition-all delay-0 ease-in-out`}
                                    onClick={() => secondSection.id !== sec.id && setSecondSection({ id: sec.id, content: sec.content })}
                                >
                                    {secondSection.id !== sec.id && <p>{sec.title}</p>}
                                    {secondSection.id === sec.id &&
                                        <div className="space-y-3">
                                            {
                                                secondSection?.content?.map((item, i) => (
                                                    <div key={i}>
                                                        <div className="flex items-center gap-2">
                                                            <span className="flex justify-center items-center size-5 text-center rounded-full bg-primary-tw text-white text-sm" style={{ fontSize: '12px' }}>
                                                                {++i}
                                                            </span>
                                                            <p className="text-lg">
                                                                {item.title}
                                                            </p>
                                                        </div>
                                                        <p className="text-md text-semi-gray text-start">
                                                            {item.description}
                                                        </p>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                    }
                                </div>
                            ))
                        }
                    </div>
                </section>

                <ServiceRegisterAuth serviceId={4} serviceName={t('routes.coaching')} />
            </div>
        </>
    );
};

export default Coaching;