import {  DadycarBoxeImage, GeolocalsiationMapImage, LocationSVG } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { CustomLine } from '@/components/ui/lines'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H3,  S } from '@/components/ui/typography'
import { Cog, Fuel, Gauge, Map } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

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

    return (
        <section className=" w-full grid grid-cols-1 lg:grid-cols-2 items-center gap-10  rounded-lg mt-20 p-6">
            <div className="flex flex-col w-full gap-4">
                <H3>{t("Des boîtiers sur-mesure pour une flotte 100 % connectée")}</H3>
                <S className='text-gray-500'>{t("Pour les véhicules non connectés, nous procédons à l’installation de boîtiers télématiques externes, permettant la collecte et la transmission automatique des données vers nos serveurs")}</S>
                <Button className='w-fit'>{t("Start now")}</Button>

            </div>
            <div className='relative w-[640px] h-[403px] max-lg:h-[200px]  max-xl:-translate-x-14 max-xl:scale-75 max-sm:-translate-x-[198px] max-lg:scale-50'>
                <CustomImage pageTitle={metaTitles.solutionsGeolocalisationMeta_Title} src={DadycarBoxeImage} className="h-[214px] w-[250px] object-cover absolute  left-1/2 transform -translate-x-1/2  top-0" alt="dadycar-boxe" />
                <CustomLine height='150px' width='110px' startIcon={<LocationSVG className={"text-primary"} />} r={10} points={[{ x: 90, y: 15 }, { x: 15, y: 15 }, { x: 15, y: 120 },]} className='absolute top-[100px] left-[27%]' />
                <CustomLine height='110px' width='150px' startIcon={<LocationSVG className={"text-primary"} />} r={10} points={[{ x: 15, y: 15 }, { x: 120, y: 15 }, { x: 120, y: 90 },]} className='absolute top-[150px] right-[20%]' />
                <CustomCard className='border-none shadow-lg p-7 flex flex-col gap-8 absolute bottom-[-100%] lg:bottom-[6%] left-[8%]'>
                    <div className='flex  items-center justify-between gap-8'>
                        <div className='flex  items-center gap-4'>
                            <Cog className='w-10 h-10 bg-gray-100 text-gray-500  rounded-full p-2' />
                            <div className='flex flex-col gap-1'>
                                <S className='text-gray-500 !font-normal'>RPM</S>
                                <S className='text-gray-700'>1500</S>
                            </div>
                        </div>
                        <div className='flex  items-center gap-4'>
                            <Map className='w-10 h-10 bg-gray-100 text-gray-500  rounded-full p-2' />
                            <div className='flex flex-col gap-1'>
                                <S className='text-gray-500 !font-normal'>{t("Mileage")}</S>
                                <S className='text-gray-700'>66 449 km</S>
                            </div>
                        </div>
                    </div>
                    <div className='flex  justify-between items-center gap-8'>
                        <div className='flex  items-center gap-4'>
                            <Gauge className='w-10 h-10 bg-gray-100 text-gray-500  rounded-full p-2' />
                            <div className='flex flex-col gap-1'>
                                <S className='text-gray-500 !font-normal'>{t("Speed")}</S>
                                <S className='text-gray-700'>65 km/h</S>
                            </div>
                        </div>
                        <div className='flex  items-center gap-4'>
                            <Fuel className='w-10 h-11 bg-gray-100 text-gray-500  rounded-full p-2' />
                            <div className='flex flex-col gap-1'>
                                <S className='text-gray-500 !font-normal'>{t("Fuel")}</S>
                                <S className='text-gray-700'>80%</S>
                            </div>
                        </div>
                    </div>
                </CustomCard>
                                <CustomCard className='border-none shadow-lg  flex flex-col gap-8 absolute bottom-[-100%] lg:bottom-[6%] right-[-4%] rounded-md w-[254px] h-[175px]'>
                                                    <CustomImage pageTitle={metaTitles.solutionsGeolocalisationMeta_Title} src={GeolocalsiationMapImage} className=" object-cover w-full h-full rounded-md" alt="geolocalisation-map" />
                                </CustomCard>
            </div>

        </section>
    )
}

export default GeolocalisationPresentation5