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("Centralized Management Platform")}
                </H3>
                <P className='text-center lg:max-w-[1000px]'>{t("A powerful dashboard for managers, providing an overview of fleet utilization, predictive maintenance, costs, and activity reports")}</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