import { AlarmSVG, PredictiveMaintenanceSchemaSVG, Robot2SVG, 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("Dadycar’s AI agent, the intelligent brain of your fleet")}</H3>
              <P className='!text-gray-600 mt-4 lg:mt-6'>{t("Get instant answers, access key data, get detailed recommendations, and automate your daily tasks with our AI agent")}</P>
           
          </div>
          <div className='relative w-[1200px] h-[276px] '>
            <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("Si tous est bien, on continue la collect des données")}</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("Collecte de données en temps réel")}</S>
                          <S className='text-gray-500 !text-[12px]'>{t("Via des capteurs intégrés (Flespi, Linkbycar, etc.) : température moteur, usure des freins, tension batterie…")}</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("Collecte de données en temps réel")}</S>
                          <S className='text-gray-500 !text-[12px]'>{t("Via des capteurs intégrés (Flespi, Linkbycar, etc.) : température moteur, usure des freins, tension batterie…")}</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("Collecte de données en temps réel")}</S>
                          <S className='text-gray-500 !text-[12px]'>{t("Via des capteurs intégrés (Flespi, Linkbycar, etc.) : température moteur, usure des freins, tension batterie…")}</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("Collecte de données en temps réel")}</S>
                          <S className='text-gray-500 !text-[12px]'>{t("Via des capteurs intégrés (Flespi, Linkbycar, etc.) : température moteur, usure des freins, tension batterie…")}</S>
                      </div>
                  </div>
              </div>
          </div>
      </section>
  )
}

export default PredictiveMaintenanceHowItWork