import { DoubleCheckSVG } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { H2, H5, H6, S } from '@/components/ui/typography'
import { Brain, Lightbulb } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const Ads2Presentation = () => {
    const t = useTranslations()
  return (
    <section className='flex max-lg:flex-col items-center justify-between gap-10 '>
        <div className='flex flex-col gap-8 lg:w-1/2'>
            <H2 className=''>{t("Dadycar IA : Bien Plus qu'un Simple GPS !")}</H2>
            <S className='text-gray-500'>{t("Notre plateforme de géolocalisation et suivi de flotte utilise une Intelligence Artificielle unique pour analyser vos données en profondeur, anticiper les problèmes et vous fournir des recommandations proactives pour une gestion enfin sereine et rentable")}</S>
              <div className='flex  gap-4 bg-[#E7F3FD] p-4 rounded-md'>
                  <Lightbulb className='fill-primary text-primary min-w-6 min-h-6' />
                  <div>
                      <H5 className='text-primary'>{t("L'IA au service de votre flotte")}</H5>
                      <S className='text-primary !font-normal'>{t("Notre algorithme apprend en permanence des habitudes de votre flotte pour vous proposer des optimisations toujours plus pertinentes")}</S>
                  </div>
              </div>
          </div>
          <CustomCard className=' flex flex-col gap-4 shadow-lg rounded-lg lg:w-[444px] bg-white border-none'>
              <div className='flex items-center gap-4'>
                  <Brain className='bg-primary/10 p-2 text-primary rounded-full flex items-center min-w-10 min-h-10' />
                  <div>
                      <H6>{t("Analyse IA en temps réel")}</H6>
                      <S className='!font-normal'>{t("Détection des opportunités d'optimisation")}</S>
                  </div>
              </div>
              <div className='flex flex-col gap-3'>
                  <div className='flex items-center gap-4'>
                      <DoubleCheckSVG className='bg-[#E3F6EA] text-[#4FB277] p-1 rounded-full flex items-center min-w-7 min-h-7 max-w-7 maw-h-7' />
                      <S className='!font-normal'>{t("Optimisation des trajets en direct")}</S>
                  </div>
                  <div className='flex items-center gap-4'>
                      <DoubleCheckSVG className='bg-[#E3F7EA] text-[#4FB277] p-1 rounded-full flex items-center min-w-7 min-h-7 max-w-7 maw-h-7' />
                      <S className='!font-normal'>{t("Alertes de comportement à risque")}</S>
                  </div>
                  <div className='flex items-center gap-4'>
                      <DoubleCheckSVG className='bg-[#E3F7EA] text-[#4FB277] p-1 rounded-full flex items-center min-w-7 min-h-7 max-w-7 maw-h-7' />
                      <S className='!font-normal'>{t("Maintenance prédictive des véhicules")}</S>
                  </div>
                  <div className='flex items-center gap-4'>
                      <DoubleCheckSVG className='bg-[#E3F7EA] text-[#4FB277] p-1 rounded-full flex items-center min-w-7 min-h-7 max-w-7 maw-h-7' />
                      <S className='!font-normal'>{t("Rapports automatiques personnalisés")}</S>
                  </div>
              </div>
                <hr className=" h-0.5 border-t-0 bg-neutral-100 dark:bg-white/10" />
              <Button url='#contact'>{t("Voir l’IA en action")}</Button>
          </CustomCard>
    </section>
  )
}

export default Ads2Presentation