import { Car5Image } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import { SmallCalendarTimeline } from '@/components/ui/charts'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H3,  H6, P, S } from '@/components/ui/typography'
import { BadgeCheckIcon } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

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

    return (
        <section className="w-full pt-10 px-6 sm:px-0">
            <div className='flex flex-col lg:flex-row items-center gap-x-16 gap-y-10'>
                <div className='flex-1'>
                    <div>
                        <H3 className='!text-[24px] lg:!text-[28px] font-[600] !text-gray-800'>{t("Simplified organization of convoys")}</H3>
                        <P className='!text-gray-600  !text-[16px] mt-4'>{t("Drive and track all vehicle transfers, from point A to point B, with perfect visibility")} </P>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Real-Time Planning and Monitoring")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("From a dedicated interface, plan, assign to a driver and follow each stage of the transport live for total control of the operation")}</P>
                        </div>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("Flexible Booking")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Book a trip in just a few clicks by choosing a vehicle for a one-way or round trip, for a perfect adaptation to your logistical needs")}</P>
                        </div>
                        <div className='mt-6' >
                            <div className='flex items-center gap-2'>
                                <BadgeCheckIcon fill='hsl(var(--primary))' className='text-white  w-[24px] h-[24px]' />
                                <P className='!text-gray-700 font-[600]  !text-[16px]'>{t("History and Traceability")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Access the detailed history of all shipments carried out at any time to analyze your operations and maintain perfect traceability")}</P>
                        </div>
                        <div className='mt-6'>
                            <Button className="w-fit bg-[#0F82EA] text-[14px] lg:text-[16px]">{t("Request a Demo")}</Button>
                        </div>
                    </div>
                </div>
                <div className='flex-1 flex flex-col gap-2'>
                    <CustomCard className='flex items-center gap-4 w-full'>
                        <CustomImage pageTitle={metaTitles?.featuresWorkflowMeta_Title} src={Car5Image} className='w-16 h-16 object-contain' alt='vehicle telematics' />
                        <div className='flex flex-col gap-2 w-full'>
                            <div className='flex items-center justify-between gap-4'>
                                <div className='flex flex-col gap-0'>
                                    <H6 className='max-sm:text-sm'>Peugeot 208</H6>
                                    <S className='text-[#71717A] !font-[400] !text-[13px]'>A3B1246</S>
                                </div>
                                <S className='bg-green-500 p-1 px-3 text-center rounded-2xl text-white max-sm:text-[10px] !text-[12px]'>Active</S>
                            </div>
                            <div className='flex max-sm:flex-col items-start gap-2 sm:items-center justify-between max-sm:!text-[10px]  sm:gap-10'>
                                <div className='flex flex-col '>
                                    <S className='text-[#71717A] !font-[400] !text-[13px]'>{t("Driver")}</S>
                                    <S className='!text-[16px] !font-[400] !text-[#0F82EA]'>Francois leBoix</S>
                                </div>
                                <div className='flex flex-col '>
                                    <S className='text-[#71717A] !font-[400] !text-[13px]'>{t("Odometer")}</S>
                                    <S className='text-[#18181B] !font-[400] !text-[16px]'>132,00 km</S>
                                </div>
                                <div className='flex flex-col '>
                                    <S className='text-[#71717A] !font-[400] !text-[13px]'>{t("Fuel")}</S>
                                    <S className='text-primary max-sm:!text-[10px] flex items-center gap-1'>{"72%"} <S className='!text-[11px] !font-normal text-[#18181B]'>382Km</S></S>
                                </div>
                            </div>
                        </div>
                    </CustomCard>
                    <SmallCalendarTimeline events={{ titles: ["Ismail Doron", "Luri Lenni"], times: ["09:00am", "10:00am", "11:00am", "12:00am"] }} />
                </div>
            </div>
        </section>
    )
}

export default GestionParcConvoyage