import { DadyAI } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H3, P } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const PredictiveMaintenancePresentation3 = () => {
    const t = useTranslations()
    return (
        <section className="w-full mt-20">
            <div className='flex flex-col-reverse lg:flex-row items-center gap-x-20 gap-y-10'>
                <div className='flex-1'>
                    <div>
                        <H3 className='!text-[24px] lg:!text-[28px]'>{t("Dadycar’s AI agent, the intelligent brain of your fleet")}</H3>
                        <P className='!text-gray-600 mt-4 lg:mt-6'>{t("Get instant answers, access key data, get detailed recommendations, and automate your daily tasks with our AI agent")}</P>
                        <div className='mt-6'>
                            <Button url='#contact' className="w-fit bg-[#0F82EA] text-[14px] lg:text-[16px] font-[500]">{t("Learn more")}</Button>
                        </div>
                    </div>
                </div>
                <div className='lg:flex-1 w-full h-[500px] relative '>
                    <CustomImage
                        pageTitle={""}
                        src={DadyAI}
                        alt="custom dashboard playground"
                        fill
                        className='object-fill'
                        priority={true}
                    />
                </div>
            </div>
        </section>
    )
}

export default PredictiveMaintenancePresentation3