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("The Burden of Manual Tracking and Scattered Data")}</P>
                        </div>
                        <S className=' text-gray-600 !text-[16px] !font-normal'>{t("Between your fuel card statements, logbooks, and consumption estimates, tracking expenses is often a manual, time-consuming, and error-prone process This fragmented data prevents you from having a clear and reliable overview, making it particularly difficult to identify waste and anomalies")}</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("Lack of Visibility on Actual Effectiveness and Anomalies")}</P>
                        </div>
                        <S className=' text-gray-600 !text-[16px] !font-normal'>{t("How can you tell if a fill-up is suspicious or if fuel consumption is abnormally high without cross-referencing map information with actual vehicle data? Without this synergy, you're navigating blindly, unable to reliably detect excessive fuel consumption, non-compliant fill-ups, or fraudulent uses that directly impact your fuel budget")}</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("The Difficulty of Optimizing Without Accurate Information")}</P>
                </div>
                <S className=' text-gray-600 !text-[16px] !font-normal'>{t("Without a detailed analysis of the energy performance of each vehicle and driver, any attempt at optimization remains superficial How can you make strategic decisions to reduce costs if you don't have concrete, centralized data on the true efficiency of your fleet?")}</S>
            </div>
        </section>
    )
}

export default PredictiveMaintenancePresentation1