import { Battery2SmallSVG, BlueCar2SVG, BlueCarSmallSVG, BlueFuelSVG, BlueHalfCarSVG, BlueLockSVG, DesktopSVG, FuelSVG, GPS, Light3SVG, Link2LineSVG, LinkLine3SVG, LinkLine4SVG, LinkLine5SVG, LinkLine6SVG, LinkLine7SVG, LinkLine8SVG, LinkLine9SVG, LinkLineSVG, LinkPhonePCSVG, OdomoterSVG, OpenDoors, PhoneVibrSVG, PowerSVG, Server2SVG, ServerSVG, SmallCarShieldSVG, SmallLightSVG } from '@/assets/svg'
import { CustomCard } from '@/components/ui/cards'
import { H3, P, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const PredictiveMaintenancePresentation4 = () => {
    const t = useTranslations()
    return (
        <section className='flex flex-col items-center justify-center gap-10 lg:gap-20   '>
            <div className='flex flex-col items-center gap-2 '>
                <H3 className='text-center'>
                    {t("Telematics data at the heart of predictive maintenance")}
                </H3>
                <P className='text-center lg:max-w-[1000px]'>{t("Thanks to onboard sensors and OEM connectivity, Dadycar collects key data about your vehicles in real time This information is analyzed by our AI to detect the slightest signs of drift")}</P>
            </div>
            {/* Dekstop view */}
            <div className='hidden lg:block w-[968px] mx-auto h-[441px] relative'>
                {/* TOP SIDE */}
                <CustomCard className='absolute top-0 left-0 h-[250px] w-[348px] grid grid-cols-2 gap-4'>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <PowerSVG />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Engine")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <FuelSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Fuel")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Level")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <Battery2SmallSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Battery")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Level")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <SmallLightSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Lights")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <SmallCarShieldSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Car Lock")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <OdomoterSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Vehicle")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Speed")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <OpenDoors className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Doors")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <GPS className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Vehicle Range")}</S>
                        </div>
                    </div>
                </CustomCard>
                <div className='absolute top-[75px] left-[348px]'>
                    <LinkLineSVG />
                </div>
                <div className='absolute top-[35px] left-[416px] flex flex-col gap-4'>
                    <CustomCard className='w-[253px] p-[8px] border-none shadow-lg'>
                        <div className='flex items-center gap-2 w-full'>
                            <div className='flex items-center justify-center w-[56px] h-[56px] rounded-[6px] bg-[#E7F3FD]'>
                                <DesktopSVG />
                            </div>
                            <div className='flex-1 flex flex-col'>
                                <S>{t("Dadycar Fleet")}</S>
                                <S className='mt-1 !text-[13px] !font-[400] !text-gray-500'>{t("Used for tracking")}</S>
                            </div>
                        </div>
                    </CustomCard>

                    <CustomCard className='w-[253px] p-[8px] border-none shadow-lg'>
                        <div className='flex items-center gap-2 w-full'>
                            <div className='flex items-center justify-center w-[56px] h-[56px] rounded-[6px] bg-[#E7F3FD]'>
                                <PhoneVibrSVG />
                            </div>
                            <div className='flex-1 flex flex-col'>
                                <S>{t("Dadcyar Go")}</S>
                                <S className='mt-1 !text-[13px] !font-[400] !text-gray-500'>{t("Used for track & Control")}</S>
                            </div>
                        </div>
                    </CustomCard>
                </div>

                <div className='absolute top-[75px] left-[669px]'>
                    <Link2LineSVG />
                </div>

                <div className='absolute top-[75px] left-[727px] w-[72px] h-[72px] flex flex-col justify-center items-center border-[1px] border-gray-300 bg-gray-100 rounded-[6px]'>
                    <div>
                        <ServerSVG />
                    </div>
                    <S className='!text-[11px] !text-gray-600 !font-[600] '>{t("Server")}</S>
                </div>

                <div className='absolute top-[110px] left-[799px]'>
                    <LinkLine3SVG />
                </div>

                <CustomCard className='absolute top-[35px] left-[831px] w-[126px] h-[132px] border-none shadow-lg flex flex-col items-center justify-center'>
                    <div>
                        <Server2SVG />
                    </div>
                    <S className='!text-[12px] !text-gray-600 !font-[600] text-center'>{t("Telematics Box")}</S>
                </CustomCard>
                {/* BOTTOM SIDE */}

                <div className='absolute left-0 -bottom-4  '>
                    <BlueCar2SVG className="" />
                </div>
                <div className='absolute bottom-8 left-[420px]'>
                    <LinkLine4SVG />
                </div>

                <div className='absolute bottom-[99px] left-[357px]'>
                    <LinkLine5SVG />
                </div>

                <div className='absolute left-[460px] -bottom-6 flex items-center gap-4 z-10'>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <BlueFuelSVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Windows Closer")}</S>
                    </CustomCard>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <BlueHalfCarSVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Trunk Release")}</S>
                    </CustomCard>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <Light3SVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Turn Signals control")}</S>
                    </CustomCard>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <BlueLockSVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Lock & Unlock")}</S>
                    </CustomCard>
                </div>

                <CustomCard className='absolute top-[190px] right-0 w-[126px] h-[85px] border-none shadow-lg flex flex-col items-center justify-center'>
                    <S className='!text-[12px] !text-gray-700 text-center'>{t("CAN - Control")}</S>
                </CustomCard>

                <div className='absolute top-[170px] right-[40px]'>
                    <LinkLine6SVG className='h-32' />
                </div>

            </div>

            {/* Mobile view */}
            <div className='w-full lg:hidden mx-auto h-[1310px] relative flex flex-col items-center'>
                <CustomCard className=' h-[250px] w-[348px] grid grid-cols-2 gap-4'>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <PowerSVG />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Engine")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <FuelSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Fuel")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Level")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <Battery2SmallSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Battery")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Level")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <SmallLightSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Lights")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <SmallCarShieldSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Car Lock")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <OdomoterSVG className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Vehicle")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Speed")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <OpenDoors className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Doors")}</S>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Status")}</S>
                        </div>
                    </div>
                    <div className='flex items-center gap-2'>
                        <div className='w-[36px] h-[36px] flex items-center justify-center bg-[#F3F3F4] rounded-full'>
                            <GPS className="w-[19px] h-[19px] text-gray-500" />
                        </div>
                        <div className='flex flex-col'>
                            <S className='!text-gray-600 !text-[13px] !font-[400]'>{t("Vehicle Range")}</S>
                        </div>
                    </div>
                </CustomCard>

                <div className='absolute top-[250px]'>
                    <LinkLine7SVG />
                </div>

                 <div className='absolute top-[300px]'>
                    <LinkLine7SVG />
                </div>

                <CustomCard className='absolute top-[270px] p-[12px] w-[168px] h-[200px] border-none shadow-lg'>
                    <div>
                        <LinkPhonePCSVG />
                    </div>
                    <div className='flex-1 flex flex-col mt-2'>
                        <S>{t("Fleet Platforms")}</S>
                        <S className=' !text-[12px] !font-[400] !text-gray-500'>{t("Data is sent to mobile app & Fleet software")}</S>
                    </div>
                </CustomCard>

                <div className='absolute top-[490px] w-[72px] h-[72px] flex flex-col justify-center items-center border-[1px] border-gray-300 bg-gray-100 rounded-[6px]'>
                    <div>
                        <ServerSVG />
                    </div>
                    <S className='!text-[11px] !text-gray-600 !font-[600] '>{t("Server")}</S>
                </div>

                <CustomCard className='absolute top-[582px] w-[126px] h-[132px] border-none shadow-lg flex flex-col items-center justify-center'>
                    <div>
                        <ServerSVG />
                    </div>
                    <S className='!text-[12px] !text-gray-600 !font-[600] text-center'>{t("Telematics Box")}</S>
                </CustomCard>

                <div className='absolute top-[714px]'>
                    <LinkLine6SVG />
                </div>

                <CustomCard className='absolute top-[735px] w-[126px] h-[55px] border-none shadow-lg flex flex-col items-center justify-center'>
                    <S className='!text-[12px] !text-gray-700 text-center'>{t("CAN - Control")}</S>
                </CustomCard>

                <div className='absolute top-[790px] ml-16'>
                    <LinkLine8SVG />
                </div>

                <div className='absolute top-[790px] mr-16'>
                    <LinkLine9SVG />
                </div>

                <div className='absolute top-[840px] grid grid-cols-2 gap-4 z-10'>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <BlueFuelSVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Windows Closer")}</S>
                    </CustomCard>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <BlueHalfCarSVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Trunk Release")}</S>
                    </CustomCard>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <Light3SVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Turn Signals control")}</S>
                    </CustomCard>
                    <CustomCard className='w-[90px] border-none shadow-lg flex flex-col items-center justify-center'>
                        <div>
                            <BlueLockSVG />
                        </div>
                        <S className='!text-[12px] !text-gray-700 !font-[400] text-center'>{t("Lock & Unlock")}</S>
                    </CustomCard>
                </div>

                <div className='absolute top-[1150px]  '>
                    <BlueCarSmallSVG className="" />
                </div>

            </div>
        </section>
    )
}

export default PredictiveMaintenancePresentation4