import { ArrowCanceledSVG, ChartBarSVG, ClockTimeSVG, PersonPicture,WarningSVG } from '@/assets/svg'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H3, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const SecondSections = () => {
    const t = useTranslations()

    return (
        <section className=" w-full bg-white flex flex-col xl:flex-row justify-between items-center gap-10  rounded-md mt-20 p-6">
            <CustomImage pageTitle={""} src={PersonPicture} className="min-w-full max-w-full xl:min-w-[620px] xl:max-w-[620px] h-[329px] sm:h-[595px] object-cover rounded-md" alt="Adopt the energy transition" />
            <div className="flex flex-col">
                <H3 className='!font-700 !text-[24px] !sm:text-[28px] !text-gray-800'>{t("Don't let fleet management capsize you")}</H3>
                <P className='mt-3 text-[16px] lg:!text-[18px] !font-[400] !text-gray-500'>Une mauvaise gestion de flotte peut faire exploser vos coûts opérationnels, un risque pour votre rentabilité, Comment arrive ce genre de situation ?</P>
                <div className='mt-6 grid grid-cols-1 lg:grid-cols-2 gap-y-4 gap-x-6'>
                    <div className='bg-[#FDE3E34D] rounded-[12px] p-[20px]'>
                        <WarningSVG />
                        <P className='mt-4 text-[16px] lg:text-[18px] font-[600] text-gray-700'>Coûts Carburant Incontrôlés ?</P>
                    </div>
                    <div className='bg-[#FDE3E34D] rounded-[12px] p-[20px]'>
                        <ChartBarSVG />
                        <P className='mt-4 text-[16px] lg:text-[18px] font-[600] text-gray-700'>Coûts du carburant hors de contrôle ?</P>
                    </div>
                    <div className='bg-[#FDE3E34D] rounded-[12px] p-[20px]'>
                        <ArrowCanceledSVG  />
                        <P className='mt-4  text-[16px] lg:text-[18px] font-[600] text-gray-700'>Itinéraires Non Optimisés = Temps Perdu ?</P>
                    </div>
                    <div className='bg-[#FDE3E34D] rounded-[12px] p-[20px]'>
                        <ClockTimeSVG className={"w-10 h-10 text-[#EF4444]"} />
                        <P className='mt-4 text-[16px] lg:text-[18px] font-[600] text-gray-700'>Gestion Administrative Chronophage ?</P>
                    </div>
                </div>

            </div>

        </section>
    )
}

export default SecondSections