import { MiniArrowSVG, ResponsiveSVG } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { CustomCard } from '@/components/ui/cards'
import {  H3,  H6,  P, } from '@/components/ui/typography'
import { Bus, Settings } from 'lucide-react'
import { useTranslations } from 'next-intl'
import React from 'react'

const OEMOperation = () => {
    const t = useTranslations()
    return (
        <section className='flex flex-col gap-20 items-center justify-center  '>
            <div className='text-center flexflex-col gap-2 items-center'>
                <H3>
                    {t("OEM integration process for your fleet")}
                </H3>
                <P>{t("Our transparent and efficient process ensures a smooth transition to optimized fleet management, harnessing the power of your vehicles' native data and improving mobility")}</P>
            </div>
             <div className='flex  flex-col  items-center lg:flex-row '>
                <CustomCard className='lg:h-[700px] xl:h-[640px] p-8 flex flex-col gap-8 w-[330px]  lg:w-[300px] xl:w-[400px] shadow  border-none'>
                    <div className='flex items-center justify-center'>
                    <div className='flex-col  bg-primary w-24 h-24 rounded-full flex items-center justify-center p-4 '>
                        <Bus className='w-14 h-14   text-white'/>
                    </div>
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Create your account")}</H6>
                        <div>
                            <P className='!text-foreground : font-medium'>{t("Partner Car Manufacturers:")}</P>
                            <P className='max-xl:text-sm'>{t("We work closely with a wide range of manufacturers to securely access the original on-board telematics data in your vehicles")}</P>
                        </div>
                        <div className='mt-4'>
                            <P className='!text-foreground : font-medium'>{t("Secure Transmission:")}</P>
                            <P className='max-xl:text-sm'>{t("Relevant information (GPS position, fuel consumption, fault codes, etc) is collected directly from the vehicle's computers and transmitted encrypted to our servers No physical intervention on the vehicle is required for this collection")}</P>
                        </div>
                    </div>
                    <Button className='w-fit'>{t("Start now")}</Button>
                </CustomCard>
                <div className='text-gray-400 max-lg:min-h-[40px]  lg:min-w-[40px] text-nowrap max-lg:rotate-90  z-[-1] flex items-center'>- - -<MiniArrowSVG className={"-rotate-90 w-3 h-3"}/></div>
                <CustomCard className='lg:h-[700px] xl:h-[640px] p-8 flex flex-col gap-8 w-[330px]  lg:w-[300px] xl:w-[400px] shadow  border-none'>
                    <div className='flex items-center justify-center'>
                    <div className='flex-col  bg-primary w-24 h-24 rounded-full flex items-center justify-center p-4 '>
                        <Settings className='w-14 h-14   text-white'/>
                    </div>
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Intelligent AI Analysis on Dadycar Servers")}</H6>
                        <div>
                            <P className='!text-foreground : font-medium'>{t("Highly Secure Dadycar Server:")}</P>
                            <P className='max-xl:text-sm'>{t("Your OEM data is centralized on our robust and secure cloud infrastructure, compliant with the highest standards")}</P>
                        </div>
                        <div className='mt-4'>
                            <P className='!text-foreground : font-medium'>{t("Power of Artificial Intelligence:")}</P>
                            <P className='max-xl:text-sm'>{t("Our proprietary AI algorithms continuously analyze the data stream, identify trends, predict maintenance needs, detect operating anomalies and evaluate driver driving behaviors")}</P>
                        </div>
                    </div>
                </CustomCard>
                <div className='text-gray-400 max-lg:min-h-[40px]  lg:min-w-[40px] text-nowrap max-lg:rotate-90  z-[-1] flex items-center'>- - -<MiniArrowSVG className={"-rotate-90 w-3 h-3"}/></div>
                <CustomCard className='lg:h-[700px] xl:h-[640px] p-8 flex flex-col gap-8 w-[330px]  lg:w-[300px] xl:w-[400px] shadow  border-none'>
                    <div className='flex items-center justify-center'>
                    <div className='flex-col  bg-primary w-24 h-24 rounded-full flex items-center justify-center p-4 '>
                        <ResponsiveSVG className='w-14 h-14   text-white'/>
                    </div>
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Visualization, Alerts and Decision Making via Dadycar Fleet & Dadycar GO")}</H6>
                        <div>
                            <P className='!text-foreground : font-medium'>{t("Intuitive Platforms:")}</P>
                            <P className='max-xl:text-sm'>{t("Access clear and customizable dashboards via our Dadycar Fleet web interface for fleet managers and the Dadycar GO mobile app for drivers")}</P>
                        </div>
                        <div className='mt-4'>
                            <P className='!text-foreground : font-medium'>{t("Alertes Proactives et Scores de Conduite :")}</P>
                            <P className='max-xl:text-sm'>{t("Receive instant notifications for critical events (required maintenance, risky driving, zone entry/exit) and benefit from detailed driving scores to coach your teams, improve safety and optimize eco-driving")}</P>
                        </div>
                    </div>
                </CustomCard>
            </div>
        </section>
    )
}

export default OEMOperation