import { BlueBG, TelematicsLandingImage, TelematicsServicesCardImage, } from '@/assets/svg'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H1, H5, } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'
import ContactForm2 from './ContactForm2'
import SafetyScore from '@/app/[locale]/(marketing)/solutions/geolocalisation-suivi-de-flotte/components/HeroCompoennts/SafetyScoreCard'
import TripsCard from '@/app/[locale]/(marketing)/solutions/geolocalisation-suivi-de-flotte/components/HeroCompoennts/TripsCard'
import DriverComportmentCard from '@/app/[locale]/(marketing)/solutions/geolocalisation-suivi-de-flotte/components/HeroCompoennts/DriverComportmentCard'

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

    const vehicle_status = {
        engine: { ignition_status: { value: true }, rpm: { value: 2000 }, temperature: { value: 88 }, oil_level: { value: 67 }, working_status: { value: true }, },
        fuel: { level: { value: 39 }, volume: { value: 22.2 }, remaining_range: { value: 280 }, consumed_fuel: { value: 13.1 }, },
        speed: { current_speed: { value: 30 }, overspeeding_status: { value: false }, overspeeding_speed: { value: null, date: null }, },
        pedal: { throttle_pedal_level: { value: false }, brake_pedal_status: { value: true }, pedal_clutch_status: { value: false }, }
    }

    return (
        <section className='relative w-full '>
            <div className='grid grid-cols-1 lg:grid-cols-2 gap-4 max-w-[1920px]  justify-between mx-auto  '>
                <div className='flex flex-col w-full pl-4 pr-4 lg:pr-0 lg:pl-20 lg:py-20 lg:max-w-[90%] xl:max-w-[82%] max-lg:items-center '>
                    <H1 className='!text-[24px] lg:!text-[32px] !text-gray-800 '>{t("Réduisez jusqu'à 30% Vos Coûts de Flotte Grâce à la Géolocalisation par l’IA !")}</H1>
                    <H5 className="!font-normal !text-gray-500 max-sm:text-sm mt-2 lg:max-w-[548px] text-[16px] lg:text-[18px]">
                        {t("Découvrez comment notre IA transforme le suivi GPS en un puissant levier d'économies, de productivité et de sécurité pour votre parc automobile Demandez votre démo personnalisée !")}
                    </H5>
                    <div className='mt-4 flex flex-col '>
                        <ContactForm2 />
                    </div>

                </div>
                <div className='relative w-full max-lg: '>
                    <div className='absolute w-full left-0 right-0 mx-auto h-[200px] '>
                        <CustomImage
                            pageTitle={""}
                            src={BlueBG}
                            alt="custom dashboard playground"
                            fill
                            className='object-cover'
                            priority={true}
                        />
                    </div>
                    <div className='max-sm:translate-y-0 max-sm:translate-x-20 max-lg:translate-y-10 max-lg:relative max-lg:flex max-lg:justify-end  lg:absolute items-end -top-10 lg:top-28 xl:-right-40 2xl:-right-[214px] h-full w-full scale-110'>
                        <div className='relative w-full max-w-[525px] lg:max-w-[715px] h-[436px] overflow-visible  lg:shadow-lg rounded-md'>
                            <CustomImage
                                pageTitle={""}
                                src={TelematicsLandingImage}
                                alt="custom dashboard playground"
                                fill
                                className='object-contain  '
                                priority={true}
                            />
                            <div className='w-[144px] h-[120px] absolute -left-10 -bottom-10 max-lg:hidden'>
                                <CustomImage
                                    pageTitle={""}
                                    src={TelematicsServicesCardImage}
                                    alt="custom dashboard playground"
                                    className='object-contain   '
                                    priority={true}
                                />
                            </div>
                        </div>
                    </div>
                    <div className='grid max-lg:hidden grid-cols-4  gap-80 absolute -bottom-10 max-xl:scale-75 max-xl:-translate-y-40 '>
                        <SafetyScore vehicle_status={vehicle_status} />
                        <TripsCard />
                        <DriverComportmentCard />
                    </div>
                </div>
            </div>

        </section>
    )
}

export default Ads2Hero