import { Battery1SmallSVG, BatterySVG1, BibotSVG, BlueArrowLeftSVG, CarShieldSmallSVG, CarShieldSVG, DoorsSmallSVG, DoorsSVG, DriverPerson, EngineOnSmallSVG, EngineOnSVG, GreenLeafSVG, GreenShieldSVG, Light2SmallSVG, Light2SVG, LightSmallSVG, LightSVG, ParisMap, RedBannerSVG, YellowArrowUPSVG } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H1, H3, H5, P, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const ThirdSection = () => {
    const t = useTranslations()
    return (
        <section className=" w-full mt-20">
            <div>
                <H1 className='!text-[20px] lg:!text-[28px] text-gray-800 !font-[600] text-center'>{t("A complete solution for your problem")}</H1>
                <div className='flex items-center justify-center mt-2'>
                    <H5 className='!text-[16px] lg:!text-[18px] text-gray-500 !font-[400] text-center max-w-[538px]'>{t("Check the provided FAQ list, if you didn’t your answers please contact us via email or via support center")}</H5>
                </div>
            </div>

            <div className='flex flex-col xl:flex-row gap-10 mt-20 items-start lg:items-center w-full'>
                <div className='flex-1'>
                    <div>
                        <H3 className='!text-[24px] lg:!text-[28px] !font-[600] !text-gray-800'>{t("Accurate and enhanced GPS tracking with alerts and telematics data")}</H3>
                        <P className='!text-gray-600 mt-4 lg:mt-6'>{t("Enjoy ultra-precise GPS tracking enhanced with smart alerts and advanced telematics data, View your journeys in real time, anticipate incidents, optimize your operations, and make informed decisions, A complete solution for total control of your fleet")}</P>
                        <div className='mt-6'>
                            <Button url='#contact' className="w-full sm:w-fit bg-[#0F82EA]">{t("Start now!")}</Button>
                        </div>
                    </div>
                </div>
                <div className='flex-1 w-full gap-2 grid grid-cols-1 sm:grid-cols-2'>
                    <div className='gap-2'>
                        <CustomCard className='w-full'>
                            <div className='h-[127px] md:h-[217px] w-full relative'>
                                <CustomImage
                                    pageTitle={""}
                                    src={ParisMap}
                                    alt="custom dashboard playground"
                                    fill
                                    className='object-cover'
                                    priority={true}
                                />
                            </div>
                            <div className='lg:mt-4'>
                                <S className='!text-[8px] !lg:text-[13px] !font-[500] !text-gray-600'>{t("Real-time Vehicle Location")}</S>
                            </div>
                        </CustomCard>
                        <CustomCard className='mt-4'>
                            <div className='flex items-center gap-2'>
                                <div>
                                    <BlueArrowLeftSVG />
                                </div>
                                <div className='flex flex-col'>
                                    <S className='!text-gray-700 !font-[500] text-[9px] lg:text-[14px]'>{t("Harsh Cornering")}</S>
                                    <S className='text-[7px] lg:!text-[11px] text-gray-500 !font-[400]'>02:03:19</S>
                                </div>
                            </div>
                            <div className='my-2 w-[1px] h-[14px] bg-gray-200 ml-2' />
                            <div className='flex items-center gap-2'>
                                <div>
                                    <YellowArrowUPSVG />
                                </div>
                                <div className='flex flex-col'>
                                    <S className='!text-gray-700 !font-[500] text-[9px] lg:text-[14px]'>{t("Harsh Cornering")}</S>
                                    <S className='text-[7px] lg:!text-[11px]] text-gray-500 !font-[400]'>02:03:19</S>
                                </div>
                            </div>
                            <div className='my-2 w-[1px] h-[14px] bg-gray-200 ml-1.5' />
                            <div className='flex items-center gap-2'>
                                <div>
                                    <RedBannerSVG />
                                </div>
                                <div className='flex flex-col'>
                                    <S className='!text-gray-700 !font-[500] text-[9px] lg:text-[14px]'>{t("Harsh Cornering")}</S>
                                    <S className='text-[7px] lg:!text-[11px]] text-gray-500 !font-[400]'>02:03:19</S>
                                </div>
                            </div>
                        </CustomCard>
                    </div>
                    <div className='gap-2'>
                        <CustomCard className='w-full h-fit p-[16px] lg:p-[24px]'>
                            <div className='flex flex-wrap items-center gap-x-4'>
                                <div className='relative w-[44px] h-[44px] lg:w-[74px] lg:h-[74px]'>
                                    <CustomImage
                                        pageTitle={""}
                                        src={DriverPerson}
                                        alt="custom dashboard playground"
                                        fill
                                        className='object-cover'
                                        priority={true}
                                    />
                                </div>
                                <div>
                                    <S className='!text-[8px] lg:!text-[13px] !text-gray-800 !font-[500]'>Alexandre Bernard</S>
                                    <div className='flex items-center gap-4 lg:mt-2  '>
                                        <div className='flex items-center gap-1 border-[1px] border-[#F3F3F4] rounded-[2px] px-[10px] py-[5px]'>
                                            <div>
                                                <GreenShieldSVG />
                                            </div>
                                            <S className='!text-gray-700 !font-[400] !text-[8px] lg:!text-[12px]'>77</S>
                                        </div>
                                        <div className=' !text-[8px] lg:!text-[12px] flex items-center gap-1 border-[1px] border-[#F3F3F4] rounded-[2px] px-[10px] py-[5px]'>
                                            <div>
                                                <GreenLeafSVG />
                                            </div>
                                            <S className=' !text-[8px] lg:!text-[12px] !text-gray-700 !font-[400]'>90</S>
                                        </div>
                                    </div>
                                    <div className='mt-2 !bg-[#E7F3FD] px-[6px] py-[5px] lg:px-[10px] lg:py-[8px] border-[1px] border-[#E7F3FD] rounded-[5px]'>
                                        <div className='flex items-center gap-2'>
                                            <div>
                                                <BibotSVG />
                                            </div>
                                            <div className='flex flex-col'>
                                                <S className='!text-[7px] lg:!text-[11px] text-[#3194ED] !font-[400]'>Recommendation</S>
                                                <S className='!text-[8px] lg:!text-[12px] text-[#0F82EA] !font-[600] -mt-2 lg:mt-0'>Electrical Vehicle</S>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='lg:mt-4'>
                                <S className='!font-[500] text-[8px] lg:!text-[13px] !text-gray-600'>{t("Driver performance monitoring")}</S>
                            </div>
                        </CustomCard>
                        <CustomCard className='p-[9px] lg:p-[16px] mt-4'>
                            <div className='grid grid-cols-2 gap-4'>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#41C174] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <EngineOnSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <EngineOnSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Engine")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-[#41C174] !font-[600]'>On</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#F3F3F4] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <BatterySVG1 />
                                        </div>
                                        <div className='lg:hidden'>
                                            <Battery1SmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Battery")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-gray-700 !font-[600]'>70%</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#0F82EA1A] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <LightSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <LightSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Near Lights")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-[#0F82EA] !font-[600]'>On</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#0F82EA1A] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <Light2SVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <Light2SmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Far Light")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-[#0F82EA] !font-[600]'>On</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#F3F3F4] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <CarShieldSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <CarShieldSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Car Lock")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-gray-700 !font-[600]'>Off</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#F3F3F4] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <DoorsSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <DoorsSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Doors")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-gray-700 !font-[600]'>Open</S>
                                    </div>
                                </div>
                            </div>
                            <div className='lg:mt-4'>
                                <S className='!font-[500] text-[8px] lg:!text-[13px] !text-gray-600'>{t("Vehicle Telematiques & data")}</S>
                            </div>
                        </CustomCard>
                    </div>
                </div>
            </div>

        </section>
    )
}

export default ThirdSection