import {  BrandsImage, LinesGradient} from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H3, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const CartCarburantMarketCTA = () => {
    const t = useTranslations()
    return (
        <section className='flex flex-col relative justify-center items-center bg-white h-[302px] w-full overflow-hidden'>
            <div className='flex flex-col items-center justify-center gap-2'>
                <H3 className='text-gray-800 font-semibold'>{t("Compatibility with market leaders")}</H3>
                <P className='text-center text-gray-500'>{t("Integrate data from your connected vehicles (OEM) with data from your fuel card transactions, for precise monitoring of the consumption of your automobile fleet")}</P>
            </div>
                <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={BrandsImage} alt="market leaders" className='object-contain w-[918px] h-[72px] z-50 mt-4' />
            {/* <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={LinesGradient} alt="" className='hidden lg:block absolute top-0 left-0 w-[700px] h-[400px]' /> */}
            <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={LinesGradient} alt="market leaders" className='hidden lg:block  absolute -bottom-20 -left-80  w-[700px] h-[400px] rotate-180 scale-x-[-1]' />
            <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={LinesGradient} alt="market leaders" className='hidden lg:block  absolute -bottom-20 -right-80  w-[700px] h-[400px] rotate-180' />
        </section>
    )
}

export default CartCarburantMarketCTA