import { AlarmSVG, PredictiveMaintenanceSchemaSVG, Robot2SVG, SchemaFrameSVG, TeltonikaImage } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H3, P, S } from '@/components/ui/typography'
import { Calendar } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const PredictiveMaintenanceHowItWork = () => {
    const t = useTranslations()
    return (
        <section className='flex flex-col gap-10 lg:gap-24 lg:text-center items-center justify-center'>
            <div>
                <H3 className='!text-[24px] lg:!text-[28px]'>{t("How does predictive maintenance work with Dadycar?")}</H3>
                <P className='!text-gray-600 mt-4 lg:mt-6'>{t("The Dadycar platform combines artificial intelligence, OEM connectivity, and telematics sensors to ensure constant monitoring of each vehicle's health Here are the key steps:")}</P>

            </div>
            <div className='relative w-[1200px] h-[276px] max-lg:hidden '>
                <div className='absolute inset-x-0 flex justify-center items-center'>
                    <PredictiveMaintenanceSchemaSVG />
                    <S className='text-gray-500 !text-[12px] absolute left-[250px] max-w-[200px] -top-10 '>{t("If all is well, we continue collecting data")}</S>
                    {/* data collect */}
                    <div className='flex flex-col gap-4 items-start absolute left-[105px] top-12'>
                        <CustomCard className='border-none w-[62px] h-[62px]'>
                            <CustomImage
                                pageTitle={metaTitles.integrationsPredectiveMaintenanceMeta_Title}
                                src={TeltonikaImage}
                                alt="DadycarBoxe"
                                className='object-contain w-full h-full scale-125 '
                            />
                        </CustomCard>
                        <div className='flex flex-col gap-1 text-left max-w-[214px]'>
                            <S>{t("Real-time data collection")}</S>
                            <S className='text-gray-500 !text-[12px]'>{t("via integrated sensors (Flespi, Linkbycar, etc): engine temperature, brake wear, oil level, battery voltage, etc")}</S>
                        </div>
                    </div>
                    {/* ai analyse */}
                    <div className='flex flex-col gap-4 items-start absolute left-[370px] top-12'>
                        <CustomCard className='border-none w-[62px] h-[62px] flex items-center justify-center'>
                            <Robot2SVG />
                        </CustomCard>
                        <div className='flex flex-col gap-1 text-left max-w-[214px]'>
                            <S>{t("Analysis by artificial intelligence")}</S>
                            <S className='text-gray-500 !text-[12px]'>{t("from Dadycar, which detects anomalies, deviations and risky behavior")}</S>
                        </div>
                    </div>
                    {/* Alertes ai */}
                    <div className='flex flex-col gap-4 items-start absolute right-[217px] top-12'>
                        <CustomCard className='border-none w-[62px] h-[62px] flex items-center justify-center'>
                            <AlarmSVG className='text-primary' />
                        </CustomCard>
                        <div className='flex flex-col gap-1 text-left max-w-[214px]'>
                            <S>{t("Smart alerts and personalized recommendations")}</S>
                            <S className='text-gray-500 !text-[12px]'>{t("notifications to anticipate maintenance, replace a part before it breaks down, or review driving practices")}</S>
                        </div>
                    </div>
                    {/* Pllaning */}
                    <div className='flex flex-col gap-4 items-start absolute right-[-80px] top-12'>
                        <CustomCard className='border-none w-[62px] h-[62px] flex items-center justify-center'>
                            <Calendar className='text-primary w-8 h-8' />
                        </CustomCard>
                        <div className='flex flex-col gap-1 text-left max-w-[214px]'>
                            <S>{t("Automatic maintenance scheduling")}</S>
                            <S className='text-gray-500 !text-[12px]'>{t("and synchronization with partner garages")}</S>
                        </div>
                    </div>
                </div>
            </div>


            {/* Mobile version  */}
            <div className='relative  lg:hidden flex flex-col gap-14 '>
                <div className='absolute left-0 top-16 z-[-1]'>
                    <SchemaFrameSVG />
                </div>
                <div className='flex  gap-4 items-start  '>
                    <CustomCard className='border-none min-w-[64px] h-[64px]'>
                        <CustomImage
                            pageTitle={metaTitles.integrationsPredectiveMaintenanceMeta_Title}
                            src={TeltonikaImage}
                            alt="DadycarBoxe"
                            className='object-contain w-full h-full scale-125 '
                        />
                    </CustomCard>
                    <div className='flex flex-col gap-1 text-left '>
                        <S>{t("Real-time data collection")}</S>
                        <S className='text-gray-500 !text-[12px]'>{t("via integrated sensors (Flespi, Linkbycar, etc): engine temperature, brake wear, oil level, battery voltage, etc")}</S>
                    </div>
                </div>
                <div className='flex  gap-4 items-start  '>
                    <CustomCard className='border-none min-w-[62px] min-h-[62px] flex items-center justify-center'>
                        <Robot2SVG />
                    </CustomCard>
                    <div className='flex flex-col gap-1 text-left '>
                        <S>{t("Analysis by artificial intelligence")}</S>
                        <S className='text-gray-500 !text-[12px]'>{t("from Dadycar, which detects anomalies, deviations and risky behavior")}</S>
                    </div>
                </div>
                {/* Alertes ai */}
                <div className='flex  gap-4 items-start  '>
                    <CustomCard className='border-none min-w-[62px] min-h-[62px] flex items-center justify-center'>
                        <AlarmSVG className='text-primary' />
                    </CustomCard>
                    <div className='flex flex-col gap-1 text-left '>
                        <S>{t("Smart alerts and personalized recommendations")}</S>
                        <S className='text-gray-500 !text-[12px]'>{t("notifications to anticipate maintenance, replace a part before it breaks down, or review driving practices")}</S>
                    </div>
                </div>
                {/* Pllaning */}
                <div className='flex  gap-4 items-start  right-[-80px] top-12'>
                    <CustomCard className='border-none min-w-[62px] min-h-[62px] flex items-center justify-center'>
                        <Calendar className='text-primary w-8 h-8' />
                    </CustomCard>
                    <div className='flex flex-col gap-1 text-left '>
                        <S>{t("Automatic maintenance scheduling")}</S>
                        <S className='text-gray-500 !text-[12px]'>{t("and synchronization with partner garages")}</S>
                    </div>
                </div>

            </div>
        </section>
    )
}

export default PredictiveMaintenanceHowItWork