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 { metaTitles } from '@/components/metaData/metaTitles'
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 CartCarburanPresentation = () => {
    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("Your Lever to Transform These Challenges into Opportunities")}</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-[838px]'>{t("Faced with these obstacles, Dadycar provides a concrete solution for your business by intelligently merging data from your fuel card and your connected vehicles (OEM) A solution designed to meet the challenges of mobility professionals in France")}</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("No more manual tracking and scattered data: make way for intelligent centralization")}</H3>
                        <P className='!text-gray-600 mt-4 lg:mt-6'>{t("Dadycar eliminates the hassle of manual tracking by automatically merging data from your fuel cards and data from connected vehicles (OEM) All key information (transactions, mileage, consumption) is centralized on a single, intuitive platform The result: you save time, reduce errors, and finally have a clear and consistent view of your fuel expenses")}</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=' w-full gap-2 grid grid-cols-1 sm:grid-cols-2 max-w-[715px]'>
                    <div className='gap-2'>
                        <CustomCard className='w-full border-none shadow-lg shadow-black/5'>
                            <div className='h-[127px] md:h-[217px] w-full relative'>
                                <CustomImage
                                    pageTitle={metaTitles.solutionsGeolocalisationMeta_Title}
                                    src={ParisMap}
                                    alt="custom dashboard playground"
                                    fill
                                    className='object-cover rounded-md'
                                />
                            </div>
                            <div className='lg:mt-4 bg-gray-100 rounded-md px-2 py-1'>
                                <S className='!font-[500] text-[8px] lg:!text-[13px] !text-gray-600'>{t("Real-time Vehicle Location")}</S>
                            </div>
                        </CustomCard>
                        <CustomCard className='border-none shadow-lg shadow-black/5 mt-2'>
                            <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 border-none shadow-lg shadow-black/5'>
                            <div className='flex  items-center gap-x-4 shadow-lg shadow-black/5 rounded-md p-2'>
                                <div className='relative min-w-[44px] min-h-[44px] lg:min-w-[74px] lg:min-h-[74px]'>
                                    <CustomImage
                                        pageTitle={""}
                                        src={DriverPerson}
                                        alt="custom dashboard playground"
                                        fill
                                        className='object-cover'

                                    />
                                </div>
                                <div className='w-full'>
                                    <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] !w-full'>
                                        <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 bg-gray-100 rounded-md px-2 py-1'>
                                <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 border-none shadow-lg shadow-black/5'>
                            <div className='grid grid-cols-2 gap-4'>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px]  shadow-md 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:min-w-[44px] lg:min-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:min-w-[44px] lg:min-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 bg-gray-100 rounded-md px-2 py-1'>
                                <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 CartCarburanPresentation