import { CustomCard } from '@/components/ui/cards'
import {  H3, H5, S } from '@/components/ui/typography'
import {  ShieldAlert } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const Ads2Presentation2 = () => {
    const t = useTranslations()
  return (
    <section className='flex flex-col gap-6 max-lg:pb-24'>
        <H3 className='text-center'>{t("Les avantages clés de la géolocalisation par l’IA de Dadycar")}</H3>
        <div className=' mx-auto flex flex-col gap-4'>

        <div className='grid grid-cols-1 lg:grid-cols-2  gap-4 '>
              <CustomCard className='lg:w-[411px] shadow-lg border-none rounded-lg flex items-start gap-4 p-4'>
                  <ShieldAlert className='bg-primary/10 text-[#E7F3FD] rounded-md fill-primary min-w-10 min-h-10 p-1' />
                  <div className='flex flex-col gap-1'>
                      <H5>{t("Économisez jusqu'à 30% de Carburant :")}</H5>
                      <S className='text-gray-500 !font-normal'>{t("Optimisation d'itinéraires et analyse d'écoconduite par IA")}</S>
                  </div>
              </CustomCard>
              <CustomCard className='lg:w-[411px] shadow-lg border-none rounded-lg flex items-start gap-4 p-4'>
                  <ShieldAlert className='bg-primary/10 text-[#E7F3FD] rounded-md fill-primary min-w-10 min-h-10 p-1' />
                  <div className='flex flex-col gap-1'>
                      <H5>{t("Anticipez les Pannes (Maintenance Prédictive IA) :")}</H5>
                      <S className='text-gray-500 !font-normal'>{t("Réduisez les immobilisations et les frais de réparation")}</S>
                  </div>
              </CustomCard>
              <CustomCard className='lg:w-[411px] shadow-lg border-none rounded-lg flex items-start gap-4 p-4'>
                  <ShieldAlert className='bg-primary/10 text-[#E7F3FD] rounded-md fill-primary min-w-10 min-h-10 p-1' />
                  <div className='flex flex-col gap-1'>
                      <H5>{t("Boostez Votre Productivité :")}</H5>
                      <S className='text-gray-500 !font-normal'>{t("Moins d'administratif, meilleure planification grâce aux analyses IA")}</S>
                  </div>
              </CustomCard>
              <CustomCard className='lg:w-[411px] shadow-lg border-none rounded-lg flex items-start gap-4 p-4'>
                  <ShieldAlert className='bg-primary/10 text-[#E7F3FD] rounded-md fill-primary min-w-10 min-h-10 p-1' />
                  <div className='flex flex-col gap-1'>
                      <H5>{t("Sécurité Renforcée :")}</H5>
                      <S className='text-gray-500 !font-normal'>{t("Alertes IA sur les comportements à risque et géorepérage intelligent")}</S>
                  </div>
              </CustomCard>
        </div>
         <CustomCard className=' shadow-lg border-none rounded-lg flex items-start gap-4 p-4'>
                  <ShieldAlert className='bg-primary/10 text-[#E7F3FD] rounded-md fill-primary min-w-10 min-h-10 p-1' />
                  <div className='flex flex-col gap-1'>
                      <H5>{t("ROI Rapide et Garanti")}</H5>
                      <S className='text-gray-500 !font-normal'>{t("Des résultats concrets visibles en quelques mois seulement")}</S>
                  </div>
              </CustomCard>
        </div>
        
    </section>
  )
}

export default Ads2Presentation2