import { CustomCard } from '@/components/ui/cards'
import { H3, P, S } from '@/components/ui/typography'
import React from 'react'
import image from "../../../../../../assets/svg/geolocalisationTrajet.jpg"
import { LocationSVG, MobilePicture, SensorPicture } from '@/assets/svg'

import { CustomLine } from '@/components/ui/lines'
import { useTranslations } from 'next-intl'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { metaTitles } from '@/components/metaData/metaTitles'

const GeolocalisationTrajet1 = () => {
    const t = useTranslations();

    return (
        <section
            className="relative flex flex-col justify-between items-start bg-white w-full max-lg:mt-20 pb-6"
            style={{ backgroundImage: `url(${image.src})`, backgroundSize: 'cover', backgroundPosition: 'center',borderRadius:'20px' }}
        >
            <div className="absolute inset-0 rounded-[20px] bg-gradient-to-r from-black/60 via-black/0 to-transparent z-0"></div>

            <div className='mx-4 lg:mx-10 my-10 lg:my-20 md:mx-16 z-10 '>
                <H3 className='text-white  max-w-[461px]'>{t("Identification du Conducteur et Sécurité Accrue")}</H3>
                <P className='text-white  max-w-[461px] mt-4'>{t("Associez chaque trajet à un conducteur (badge RFID, application mobile Dadycar Go) pour une traçabilité complète Notifications instantanées en cas d'incident ou de comportement de conduite dangereux La géolocalisation GPS facilite la récupération rapide en cas de vol")}</P>
                <CustomCard className='flex items-center  gap-2 max-w-[488px] mt-12 max-lg:!py-1'>
                    <CustomImage pageTitle={metaTitles?.solutionsGeolocalisationMeta_Title} src={MobilePicture} className='max-sm:w-[50px] object-contain sm:min-w-[111px] h-[96px] ' alt='geolocalisation mobile application' />
                    <div className='flex flex-col'>
                        <P className='font-[600] max-sm:!text-[10px]'>{t("With the Dadycar Go App")}</P>
                        <S className='text-[#71717A] max-sm:text-[10px] max-lg:!leading-3'>{t("Assign each trip to your drivers in just a few clicks")}</S>
                    </div>
                </CustomCard>
                <div className=' md:mt-44 md:ml-[200px] lg:ml-[300px] xl:ml-[600px]'>
                    <CustomCard className='flex items-center  gap-2 w-fit-content mt-10  max-lg:!py-1'>
                        <CustomImage pageTitle={metaTitles?.solutionsGeolocalisationMeta_Title} src={SensorPicture} className='max-sm:w-[50px] object-contain sm:min-w-[140px] h-[96px] ' alt='sensor' />
                        <div className='flex flex-col'>
                            <P className='font-[600] text-nowrap max-sm:!text-[10px]'>{t("Using Our Sensor Badge")}</P>
                            <S className='text-[#71717A] max-w-[315px] max-sm:text-[10px] max-lg:!leading-3'>{t("Instantly identify your drivers and track their routes accurately and securely")}</S>
                        </div>
                    </CustomCard>
                </div>
            </div>
            <CustomLine color='#A4A59D' height='250px' width='180px' endIcon={<LocationSVG className={"text-[#A4A59D]"} />} r={20} points={[{ x: 20, y: 75 }, { x: 20, y: 200 }]} className='absolute bottom-[225px] left-[100px] max-md:hidden' />
            <CustomLine color='#A4A59D' height='200px' width='130px' endIcon={<LocationSVG className={"text-[#A4A59D]"} />} r={20} points={[{ x: 190, y: 75 }, { x: 60, y: 75 }, { x: 60, y: 150 }]} className='absolute bottom-[0px] md:bottom-[40px] md:left-[135px] lg:left-[235px] xl:left-[535px] max-md:hidden' />
        </section>
    )
}

export default GeolocalisationTrajet1