import { DoubleTimerSVG, SpeedTimerSVG, VideoDocumentSVG } from '@/assets/svg'
import { CustomCard } from '@/components/ui/cards'
import { H2, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

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

    return (
        <div className='flex flex-col gap-4 px-6 sm:px-0 '>
            <div className="flex flex-col items-center gap-2 text-center">
                <H2 className='!text-[#111827] !text-[30px] !font-[700] max-w-[770px] leading-[36px]'>{t("Optimize Your Maintenance Strategy with Dadycar")}</H2>
                <P className='max-w-[768px] mt-2'>{t("Turn your logistical challenges into a business advantage, With Dadycar, manage your maintenance service to improve your responsiveness, customer service, and margins")}</P>
            </div>
            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-6 gap-4'>
                <CustomCard className=' !p-[25px] h-full'>
                    <div className='flex flex-col lg:flex-row gap-4 items-center'>
                        <div className='w-[56px] h-[56px] rounded-[8px] bg-[#EFF6FF] flex items-center justify-center'>
                            <DoubleTimerSVG />
                        </div>
                        <P className='!text-[18px] !font-[700] !text-[#111827]'>{t("Strategic Cost Reduction")}</P>
                    </div>
                    <P className='!text-[#4B5563] !text-[16px] !font-[400] mt-4'>{t("Save money on fuel and maintenance, funds you can reinvest in training your teams or improving your equipment")}</P>
                </CustomCard>
                <CustomCard className=' !p-[25px] h-full'>
                    <div className='flex flex-col lg:flex-row gap-4 items-center'>
                        <div className='w-[56px] h-[56px] rounded-[8px] bg-[#EFF6FF] flex items-center justify-center'>
                            <SpeedTimerSVG />
                        </div>
                        <P className='!text-[18px] !font-[700] !text-[#111827]'>{t("Productivity and Brand Image")}</P>
                    </div>
                    <P className='!text-[#4B5563] !text-[16px] !font-[400] mt-4'>{t("Increase the number of interventions per day and per technician, Become the reliable partner your customers can count on and make every intervention a demonstration of your professionalism")}</P>
                </CustomCard>
                <CustomCard className='!p-[25px] h-full'>
                    <div className='flex flex-col lg:flex-row gap-4 items-center'>
                        <div className='w-[56px] h-[56px] rounded-[8px] bg-[#EFF6FF] flex items-center justify-center'>
                            <VideoDocumentSVG />
                        </div>
                        <P className='!text-[18px] !font-[700] !text-[#111827]'>{t("Data-Driven Decisions")}</P>
                    </div>
                    <P className='!text-[#4B5563] !text-[16px] !font-[400] mt-4'>{t("Access clear reports on your key indicators (cost per intervention, SLA compliance rate, average resolution time) to manage your strategy with unparalleled precision")}</P>
                </CustomCard>
            </div>
        </div>
    )
}

export default FlotteServiceIntegration2