import {  LinesGradient, PhoneLeft2Image, PhoneRightImage } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { Button } from '@/components/ui/buttons/Button'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H3, S } from '@/components/ui/typography'
import { CheckCircle2Icon } from 'lucide-react'
import { useTranslations } from 'next-intl'

import React from 'react'

const CartCarburantMobileCTA = () => {
    const t = useTranslations()
    return (
        <section className='flex flex-col relative justify-center items-center bg-white'>
            <div className='flex flex-col lg:flex-row items-center justify-between p-8 z-10'>
                <div className='flex flex-col gap-10'>
                    <H3>{t("Integrate your fuel cards using Dadycar GO")}</H3>
                    <div className='flex flex-col gap-3'>
                        <div className='flex items-center gap-2'>
                            <CheckCircle2Icon className={"fill-green-600 text-white min-w-7 h-7"} />
                            <S className='text-muted-foreground'>{t("Drivers can track their fuel consumption and mileage in real time directly through our mobile app")}</S>
                        </div>
                        <div className='flex items-center gap-2'>
                            <CheckCircle2Icon className={"fill-green-600 text-white min-w-7 h-7"} />
                            <S className='text-muted-foreground'>{t("Drivers can easily submit travel information and fuel receipts")}</S>
                        </div>
                        <div className='flex items-center gap-2'>
                            <CheckCircle2Icon className={"fill-green-600 text-white min-w-7 h-7"} />
                            <S className='text-muted-foreground'>{t("Receive notifications about inefficient driving behaviors or anomalies")}</S>
                        </div>
                    </div>
                    <Button className='w-fit'>{t("Request a demo")}</Button>
                </div>
                <div className='flex w-full justify-end items-center pt-32 sm:pt-28 lg:pt-20   '>
                    <div className='relative animate-float  group '>
                        <span className='absolute h-[100px] sm:h-[250px] w-10 sm:w-20 top-20 z-10 group-hover:opacity-0 duration-300   right-0 bg-black/50 blur-2xl '></span>
                        <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={PhoneLeft2Image} alt='dadycar mobile app' className='  object-contain translate-x-12 sm:translate-x-20 hover:translate-x-12 duration-500' />
                    </div>
                    <div className='relative animate-float2 z-20'>
                        <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={PhoneRightImage} alt='dadycar mobile app' className=' relative object-contain -translate-x-12 sm:-translate-x-24 -translate-y-16 hover:translate-y-[-80px] duration-500 ' />
                    </div>
                </div>
            </div>
            <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='' className='hidden lg:block  absolute bottom-0 right-0 w-[700px] h-[400px] rotate-180' />
        </section>
    )
}

export default CartCarburantMobileCTA