import { Battery1SmallSVG, BatterySVG1, BibotSVG, CarShieldSmallSVG, CarShieldSVG, DoorsSmallSVG, DoorsSVG, DriverPerson, EngineOnSmallSVG, EngineOnSVG, GreenLeafSVG, GreenShieldSVG, Light2SmallSVG, Light2SVG, LightSmallSVG, LightSVG, LongArrowSVG2,  LongArrowY, ParisMap, TeltonikaImage } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import { CustomLine } from '@/components/ui/lines'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { S } from '@/components/ui/typography'
import {  CarFront, InfoIcon, Link } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const GeolocalisationPresentation6 = () => {
    const t = useTranslations()
    return (
        <section>
            <div className='flex flex-col lg:flex-row gap-10 mt-20 items-center justify-center w-full'>
                <div className='flex  max-lg:flex-col items-center gap-4'>
                    <div className='flex lg:flex-col justify-center items-center'>
                        <CustomCard className='border-none shadow-lg rounded-md w-[66px] h-[66px] flex items-center justify-center'>
                            <CarFront className='text-primary w-8 h-8' />
                        </CustomCard>
                        <Link className='text-primary bg-[#E7F3FD] rounded-full p-2 w-8 h-9 absolute  max-lg:-translate-x-4' />
                        <CustomLine height="150px" width="5px" color="hsla(240, 6%, 90%, 1)" dasharray="14 14" r={5} points={[{ x: 2, y: 2 }, { x: 2, y: 150 }]} className="max-lg:hidden" />
                        <CustomLine height="5px" width="150px" color="hsla(240, 6%, 90%, 1)" dasharray="14 14" r={5} points={[{ x: 2, y: 2 }, { x: 150, y: 2 }]} className="lg:hidden" />
                        <CustomCard className='border-none shadow-lg rounded-md w-[66px] !p-0 h-[66px] flex items-center justify-center'>
                            <CustomImage
                                pageTitle={metaTitles.solutionsGeolocalisationMeta_Title}
                                src={TeltonikaImage}
                                alt="DadycarBoxe"
                                className='object-contain w-[60px] '
                            />
                        </CustomCard>
                        <S className='mt-2 max-lg:ml-2'>{t("Boxe")}</S>
                    </div>
                    <div className='flex lg:flex-col justify-center items-center '>
                        <S className='text-center max-lg:w-28 max-lg:text-left'>{t("Sends Data")}</S>
                        <div className='max-lg:hidden'>
                            <LongArrowSVG2 />
                        </div>
                        <div className='lg:hidden '>
                            <LongArrowY />
                        </div>
                        <S className='text-gray-500 text-center max-w-[262px] !text-[12px]  max-lg:w-36 max-lg:text-left max-lg:ml-2'>{t("Les données du véhicule sont envoyées en temps réel à nos serveurs, puis présentées facilement dans votre espace dadycar")}</S>
                    </div>
                </div>
                <div className=' w-full gap-2 grid grid-cols-1 sm:grid-cols-2 max-w-[715px]'>
                    <div className='gap-2'>
                        <CustomCard className='w-full border-none shadow-lg shadow-black/5'>
                            <div className='h-[127px] md:h-[217px] w-full relative'>
                                <CustomImage
                                    pageTitle={metaTitles.solutionsGeolocalisationMeta_Title}
                                    src={ParisMap}
                                    alt="custom dashboard playground"
                                    fill
                                    className='object-cover rounded-md'
                                />
                            </div>
                            <div className='lg:mt-4 bg-gray-50 rounded-md px-2 py-1'>
                                <S className='!font-[500] text-[8px] lg:!text-[13px] !text-gray-600'>{t("Real-time Vehicle Location")}</S>
                            </div>
                        </CustomCard>
                        <CustomCard className='mt-4 border-none shadow-lg shadow-black/5 !bg-[#E7F3FD]' >
                            <InfoIcon className='w-6 h-6 text-primary mb-1' />
                            <S className='!font-normal text-primary !text-[12px]'>{t("External boitiers are placed only for non- connected vehicles, for connected ones, telematics are sent automaticaly by the vehicle to our servers, so you won’t need to install external boitier")}</S>
                        </CustomCard>
                    </div>
                    <div className='gap-2'>
                        <CustomCard className='w-full h-fit border-none shadow-lg shadow-black/5'>
                            <div className='flex  items-center gap-x-4 shadow-lg shadow-black/5 rounded-md p-2'>
                                <div className='relative min-w-[44px] min-h-[44px] lg:min-w-[74px] lg:min-h-[74px]'>
                                    <CustomImage
                                        pageTitle={""}
                                        src={DriverPerson}
                                        alt="custom dashboard playground"
                                        fill
                                        className='object-cover'

                                    />
                                </div>
                                <div className='w-full'>
                                    <S className='!text-[8px] lg:!text-[13px] !text-gray-800 !font-[500]'>Alexandre Bernard</S>
                                    <div className='flex items-center gap-4 lg:mt-2  '>
                                        <div className='flex items-center gap-1 border-[1px] border-[#F3F3F4] rounded-[2px] px-[10px] py-[5px]'>
                                            <div>
                                                <GreenShieldSVG />
                                            </div>
                                            <S className='!text-gray-700 !font-[400] !text-[8px] lg:!text-[12px]'>77</S>
                                        </div>
                                        <div className=' !text-[8px] lg:!text-[12px] flex items-center gap-1 border-[1px] border-[#F3F3F4] rounded-[2px] px-[10px] py-[5px]'>
                                            <div>
                                                <GreenLeafSVG />
                                            </div>
                                            <S className=' !text-[8px] lg:!text-[12px] !text-gray-700 !font-[400]'>90</S>
                                        </div>
                                    </div>
                                    <div className='mt-2 !bg-[#E7F3FD] px-[6px] py-[5px] lg:px-[10px] lg:py-[8px] border-[1px] border-[#E7F3FD] rounded-[5px] !w-full'>
                                        <div className='flex items-center gap-2'>
                                            <div>
                                                <BibotSVG />
                                            </div>
                                            <div className='flex flex-col'>
                                                <S className='!text-[7px] lg:!text-[11px] text-[#3194ED] !font-[400]'>Recommendation</S>
                                                <S className='!text-[8px] lg:!text-[12px] text-[#0F82EA] !font-[600] -mt-2 lg:mt-0'>Electrical Vehicle</S>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='lg:mt-4 bg-gray-50 rounded-md px-2 py-1'>
                                <S className='!font-[500] text-[8px] lg:!text-[13px] !text-gray-600'>{t("Driver performance monitoring")}</S>
                            </div>
                        </CustomCard>
                        <CustomCard className='p-[9px] lg:p-[16px] mt-4 border-none shadow-lg shadow-black/5'>
                            <div className='grid grid-cols-2 gap-4'>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px]  shadow-md lg:w-[44px] lg:h-[44px] rounded-full bg-[#41C174] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <EngineOnSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <EngineOnSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Engine")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-[#41C174] !font-[600]'>On</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#F3F3F4] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <BatterySVG1 />
                                        </div>
                                        <div className='lg:hidden'>
                                            <Battery1SmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Battery")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-gray-700 !font-[600]'>70%</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:min-w-[44px] lg:min-h-[44px] rounded-full bg-[#0F82EA1A] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <LightSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <LightSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Near Lights")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-[#0F82EA] !font-[600]'>On</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#0F82EA1A] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <Light2SVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <Light2SmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Far Light")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-[#0F82EA] !font-[600]'>On</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:min-w-[44px] lg:min-h-[44px] rounded-full bg-[#F3F3F4] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <CarShieldSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <CarShieldSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Car Lock")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-gray-700 !font-[600]'>Off</S>
                                    </div>
                                </div>
                                <div className='flex items-center gap-2'>
                                    <div className='w-[25px] h-[25px] lg:w-[44px] lg:h-[44px] rounded-full bg-[#F3F3F4] flex items-center justify-center'>
                                        <div className='hidden lg:block'>
                                            <DoorsSVG />
                                        </div>
                                        <div className='lg:hidden'>
                                            <DoorsSmallSVG />
                                        </div>
                                    </div>
                                    <div className='flex flex-col mt-1'>
                                        <S className='text-[7px] lg:!text-[13px] text-[#878787] !font-[400]'>{t("Doors")}</S>
                                        <S className='text-[9px] lg:!text-[16px] text-gray-700 !font-[600]'>Open</S>
                                    </div>
                                </div>
                            </div>
                            <div className='mt-2 lg:mt-4 bg-gray-50 rounded-md px-2 py-1'>
                                <S className='!font-[500] text-[8px] lg:!text-[13px] !text-gray-600'>{t("Vehicle Telematiques & data")}</S>
                            </div>
                        </CustomCard>
                    </div>
                </div>
            </div>

        </section>
    )
}

export default GeolocalisationPresentation6