import { NoTouchSVG, PersonPicture } from '@/assets/svg'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { P, S } from '@/components/ui/typography'
import { Eye } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const PredictiveMaintenancePresentation1 = () => {
    const t = useTranslations()

    return (
        <section className=" w-full bg-white   rounded-md mt-20 p-6">
            <div className='flex flex-col xl:flex-row justify-between items-center gap-10'>

                <CustomImage pageTitle={""} src={PersonPicture} className="min-w-full max-w-full xl:min-w-[620px] xl:max-w-[620px] h-[329px] sm:h-[595px] object-cover rounded-md" alt="Adopt the energy transition" />
                <div className="flex flex-col w-full gap-4">
                    <div className='bg-[#FDE3E34D] rounded-[12px] p-[20px] flex flex-col gap-2'>
                        <div className='flex  items-center gap-2'>
                            <NoTouchSVG className={"text-[#EF4444] min-w-8 min-h-8  max-w-8 max-h-8 "} />
                            <P className=' text-[20px] lg:text-[18px] font-[600] text-gray-700'>{t("Costly unforeseen breakdowns")}</P>
                        </div>
                        <S className=' text-gray-600 !text-[16px] !font-normal'>{t("Without an early warning system, vehicles break down unexpectedly, often in the middle of a mission These unplanned stops cause delivery delays, disrupted schedules, urgent repair costs, and sometimes even the loss of customers On a fleet scale, this represents a real drag on productivity")}</S>
                    </div>
                    <div className='bg-[#FDE3E34D] rounded-[12px] p-[20px] flex flex-col gap-2'>
                        <div className='flex  items-center gap-2'>
                            <Eye className={"text-[#EF4444] min-w-8 min-h-8  max-w-8 max-h-8 "} />
                            <P className=' text-[20px] lg:text-[18px] font-[600] text-gray-700'>{t("Over-maintenance that increases costs")}</P>
                        </div>
                        <S className=' text-gray-600 !text-[16px] !font-normal'>{t("Lacking reliable data on the actual condition of vehicles, many companies implement inflexible, often excessive, preventative maintenance This results in unnecessary expenses for interventions, parts, and the downtime of vehicles that could have remained operational longer Overmaintenance is a silent financial drain")}</S>
                    </div>

                </div>
            </div>
            <div className='bg-[#FDE3E34D] rounded-[12px] p-[20px] flex flex-col gap-2 mt-6'>
                <div className='flex  items-center gap-2'>
                    <Eye className={"text-[#EF4444] min-w-8 min-h-8  max-w-8 max-h-8 "} />
                    <P className=' text-[20px] lg:text-[18px] font-[600] text-gray-700'>{t("Reduced vehicle availability")}</P>
                </div>
                <S className=' text-gray-600 !text-[16px] !font-normal'>{t("When maintenance relies solely on fixed schedules or late alerts, fleet availability becomes difficult to manage Repeatedly unavailable vehicles disrupt operational planning, reduce delivery capacity, and create tension within teams The result: weakened overall performance, dissatisfied customers, and a damaged brand image")}</S>
            </div>
        </section>
    )
}

export default PredictiveMaintenancePresentation1