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

const GestionParcMainFunctions = () => {
    const t = useTranslations()
    const content = {
        pieChart: {
            title: "Vehicles per site",
            unit: "",
            data: [
                { service: t("Montmartre"), value: 102, fill: "#41C174" },
                { service: t("Bercy"), value: 36, fill: "#EF4444" },
                { service: t("Belleville"), value: 10, fill: "#F7BC58" },
                { service: t("Others"), value: 52, fill: "#A9A9A9" },
            ],

            config: {
                value: {
                    label: "Request",
                },
            }
        },
    }

    return (
        <section className="pt-10 px-6 sm:px-0">
            <div>
                <H3 className='text-center !text-[28px] !font-[600] !text-[#27272A]'>
                    {t("The main features of Dadycar software")}
                </H3>
                <P className='text-center max-w-[810px] mx-auto mt-4 lg:mt-2 !text-[16px] !text-[#52525B] !font-[400]'>{t("Dadycar isn't just a tool; it's your strategic copilot, Discover an ecosystem of features designed for maximum efficiency")} :</P>
            </div>
            <div className='flex flex-col-reverse lg:flex-row items-center gap-x-16 gap-y-10 mt-20'>
                <div className='flex-1'>
                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
                        <CustomCard className='w-full border-none shadow-lg shadow-black/5'>
                            <div className='h-[127px] md:h-[217px] w-full relative'>
                                <CustomImage
                                    pageTitle={metaTitles.solutionsGeolocalisationMeta_Title}
                                    src={ParisMap}
                                    alt="custom dashboard playground"
                                    fill
                                    className='object-cover rounded-md'
                                />
                            </div>
                            <div className='lg:mt-4 bg-gray-50 rounded-md px-2 py-1'>
                                <S className='!font-[500] text-[8px] lg:!text-[13px] !text-gray-600'>{t("Real-time Vehicle Location")}</S>
                            </div>
                        </CustomCard>
                        <CustomCard className='flex-1 border-none shadow-lg'>
                            <PieChartCard content={content.pieChart} className=' lg:h-[180px] ' />
                        </CustomCard>
                    </div>
                    <CustomCard className='mt-4 p-[20px]'>
                        <P className='text-[10px] lg:!text-[16px] !text-gray-700 !font-[600]'>{t("Trip Statistics")}</P>
                        <div className='grid grid-cols-1 lg:grid-cols-4 mt-4'>
                            <div>
                                <P className='!text-[#09090B] !font-[600] text-[15px] lg:!text-[20px] mt-0 lg:mt-2 text-center'>35:23 m</P>
                                <P className='!text-[#09090B80] !font-[400] text-[8px] lg:!text-[10px] !leading-[14px] underline mt-2 text-center'>{t("Average journey time")}</P>
                            </div>
                            <div>
                                <P className='!text-[#09090B] !font-[600] text-[15px] lg:!text-[20px] mt-0 lg:mt-2 text-center'>12</P>
                                <P className='!text-[#09090B80] !font-[400] text-[8px] lg:!text-[10px] !leading-[14px] underline mt-2 text-center'>{t("N° of trips per day")}</P>
                            </div>
                            <div>
                                <P className='!text-[#09090B] !font-[600] text-[15px] lg:!text-[20px] mt-0 lg:mt-2 text-center'>20 m</P>
                                <P className='!text-[#09090B80] !font-[400] text-[8px] lg:!text-[10px] !leading-[14px] underline mt-2 text-center'>{t("Minutes between each trip")}</P>
                            </div>
                            <div>
                                <P className='!text-[#09090B] !font-[600] text-[15px] lg:!text-[20px] mt-0 lg:mt-2 text-center'>120123 Km</P>
                                <P className='!text-[#09090B80] !font-[400] text-[8px] lg:!text-[10px] !leading-[14px] underline mt-2 text-center'>{t("Average km traveled this month")}</P>
                            </div>
                        </div>
                    </CustomCard>
                </div>
                <div className='flex-1'>
                    <div>
                        <H3 className='!text-[24px] lg:!text-[28px] font-[600] !text-gray-800'>{t("Optimized vehicle management")}</H3>
                        <P className='!text-gray-600  !text-[16px] mt-4'>{t("From order to resale, manage the complete life cycle of your vehicles with disconcerting ease")} </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("Total Visibility and Control")} :</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Import your fleet in one click (Excel, CSV) and view its status in real time, Our advanced filters allow you to find any vehicle or information in seconds")}</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("Real-Time Performance")}</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("Geolocate your vehicles, analyze journeys (distance, consumption, driving time) and define geofencing zones to receive automatic alerts")}</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("Life Cycle Management")}</P>
                            </div>
                            <P className='!text-gray-600  !text-[16px] mt-2'>{t("From ordering new vehicles from your suppliers to managing rental contracts (LLD/LMD), Dadycar centralizes everything for perfect anticipation")}</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>
        </section>
    )
}

export default GestionParcMainFunctions