import { Carousel } from '@material-tailwind/react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import BannerImage from '../../assets/images/banner2.jpeg'
import RobotImage from '../../assets/images/robot.jpeg'
import { ArrowLeft } from 'iconsax-react'
import TitleLine from '../../components/TitleLine'
import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
import Button from '../../components/Button'
import ServiceSection from '../../components/ServiceSection'

const OtherServices: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='w-full flex gap-6'>
            <div className='flex-1'>
                <Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
                    <div className='relative drtl'>
                        <img src={BannerImage} className='w-full max-h-[300px] h-full object-cover rounded-3xl' />
                        <div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
                            <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
                                {t('home.new')}
                            </button>

                            <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
                                <div>
                                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                                </div>
                                <div className='mt-3 text-border text-xs'>
                                    ۸ دقیقه مطالعه
                                </div>
                                <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
                                    <div>
                                        {t('home.study')}
                                    </div>
                                    <ArrowLeft size={14} color='white' />
                                </button>
                            </div>
                        </div>
                    </div>
                    <div className='relative drtl'>
                        <img src={BannerImage} className='w-full max-h-[300px] object-cover rounded-3xl' />
                        <div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
                            <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
                                {t('home.new')}
                            </button>

                            <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
                                <div>
                                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                                </div>
                                <div className='mt-3 text-border text-xs'>
                                    ۸ دقیقه مطالعه
                                </div>
                                <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
                                    <div>
                                        {t('home.study')}
                                    </div>
                                    <ArrowLeft size={14} color='white' />
                                </button>
                            </div>
                        </div>
                    </div>
                </Carousel>


                <div className='w-full mt-8'>
                    <TitleLine title={t('service.selected_danak')} />
                </div>

                <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
                    <div className='flex-1 min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
                        <div className='flex gap-2 items-center'>
                            <div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
                            <div className='xl:text-base text-sm'>
                                دی منو
                            </div>
                        </div>
                        <div className='mt-4 text-xs'>
                            <div className='font-extralight'>منو رستوران </div>
                            <p className='text-description mt-2'>
                                دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
                            </p>
                        </div>

                        <div className='mt-4'>
                            <Button
                                className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                            >
                                <div className='flex gap-2'>
                                    <div>{t('service.buy')}</div>
                                    <ArrowLeft color='black' size={16} />
                                </div>
                            </Button>
                        </div>
                    </div>
                    <div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
                        <div className='flex gap-2 items-center'>
                            <div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
                            <div className='xl:text-base text-sm'>
                                دی منو
                            </div>
                        </div>
                        <div className='mt-4 text-xs'>
                            <div className='font-extralight'>منو رستوران </div>
                            <p className='text-description mt-2'>
                                دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
                            </p>
                        </div>

                        <div className='mt-4'>
                            <Button
                                className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                            >
                                <div className='flex gap-2'>
                                    <div>{t('service.buy')}</div>
                                    <ArrowLeft color='black' size={16} />
                                </div>
                            </Button>
                        </div>
                    </div>
                    <div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
                        <div className='flex gap-2 items-center'>
                            <div className='xl:size-[50px] size-10 bg-[#FF7B00] rounded-xl'></div>
                            <div className='xl:text-base text-sm'>
                                دی منو
                            </div>
                        </div>
                        <div className='mt-4 text-xs'>
                            <div className='font-extralight'>منو رستوران </div>
                            <p className='text-description mt-2'>
                                دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
                            </p>
                        </div>

                        <div className='mt-4'>
                            <Button
                                className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                            >
                                <div className='flex gap-2'>
                                    <div>{t('service.buy')}</div>
                                    <ArrowLeft color='black' size={16} />
                                </div>
                            </Button>
                        </div>
                    </div>
                    <div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
                </div>

                <div className='w-full xl:-mt-7 mt-8'>
                    <TitleLine title={t('service.other_services')} />
                </div>

                <div className='flex w-full gap-6 items-center'>
                    <div className='flex w-full flex-wrap xl:gap-6 gap-4 items-center mt-8'>
                        <div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
                            <div className='flex justify-between items-center'>
                                <ServiceSection
                                />
                                <Button
                                    className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                                >
                                    <div className='flex gap-2'>
                                        <div>{t('service.buy')}</div>
                                        <ArrowLeft color='black' size={16} />
                                    </div>
                                </Button>
                            </div>

                        </div>
                        <div className='flex-1 min-w-full xl:min-w-0 bg-white rounded-3xl py-4 px-6'>
                            <div className='flex justify-between items-center'>
                                <ServiceSection
                                />
                                <Button
                                    className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
                                >
                                    <div className='flex gap-2'>
                                        <div>{t('service.buy')}</div>
                                        <ArrowLeft color='black' size={16} />
                                    </div>
                                </Button>
                            </div>

                        </div>
                    </div>

                </div>

                <div className='h-16 xl:hidden'></div>


            </div>
            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
                <img
                    src={RobotImage}
                    className='w-full backdrop-blur-[100px] h-[550px] object-cover'
                />

                <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
                    <div className='max-w-[80%] text-sm leading-6 text-white'>
                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                    </div>
                </div>
            </div>
        </div>
    )
}

export default OtherServices