import { type FC } from 'react'
import Stats from './components/Stats'
import Services from './components/Services'
import Orders from './components/Orders'
import NewOrderImage from '@/assets/images/new_order.png'
import { t } from '@/locale'
import Button from '@/components/Button'
import { AddSquare, MessageQuestion } from 'iconsax-react'
import { COLORS } from '@/constants/colors'
import SupportImage from '@/assets/images/support1.png'
import { Paths } from '@/config/Paths'
import { Link } from 'react-router-dom'

const Home: FC = () => {
    return (
        <div className='flex gap-6'>
            <div className='flex-1'>
                <Stats />
                <Services />
                <Orders />
            </div>
            <div className='min-w-[267px] mt-5'>
                <div className='bg-white rounded-3xl p-6'>
                    <img src={NewOrderImage} className='w-[98px] mx-auto' />
                    <h4 className='mt-4 text-center font-medium'>
                        {t('home.submitNewOrder')}
                    </h4>
                    <Link to={Paths.newOrder}>
                        <Button
                            className='mt-2.5'>
                            <div className='flex gap-1'>
                                <AddSquare size={20} color='#292D32' />
                                <div className=''>{t('home.submitNewOrderButton')}</div>
                            </div>
                        </Button>
                    </Link>
                </div>

                <div className='mt-7 bg-white rounded-3xl p-6 relative'>
                    <h4>
                        {t('home.specialSolution')}
                    </h4>
                    <p className='mt-2 text-[#7B7E8B] text-xs'>
                        {t('home.specialSolutionDescription')}
                    </p>

                    <div className='mt-2 flex flex-col gap-2'>
                        <div className='flex gap-2 items-center text-xs'>
                            <div className='size-1.5 rounded-full bg-primary'></div>
                            <div>{t('home.specialSolutionFeature1')}</div>
                        </div>
                        <div className='flex gap-2 items-center text-xs'>
                            <div className='size-1.5 rounded-full bg-primary'></div>
                            <div>{t('home.specialSolutionFeature2')}</div>
                        </div>
                        <div className='flex gap-2 items-center text-xs'>
                            <div className='size-1.5 rounded-full bg-primary'></div>
                            <div>{t('home.specialSolutionFeature3')}</div>
                        </div>
                    </div>

                    <Button
                        label={t('home.freeConsultation')}
                        className='mt-12'
                    />

                    <div className='mt-2.5 bg-primary/11 py-6 px-4 rounded-[13px]'>
                        <div className='flex justify-between items-center'>
                            <div className='flex gap-2 items-center'>
                                <MessageQuestion size={20} color={COLORS.primary} />
                                <div className='text-xs font-light'>{t('home.contactUs')}</div>
                            </div>
                            <div>{t('home.phoneNumber')}</div>
                        </div>
                    </div>

                    <img src={SupportImage} className='w-[50px] absolute bottom-[159px] left-2' />
                </div>
            </div>
        </div>
    )
}

export default Home