import { Car12Image, Car13Image, User1Image } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { CustomCard } from '@/components/ui/cards'
import { CustomLine } from '@/components/ui/lines'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'

import React from 'react'

const ANTAIHeroGraphics = () => {
    const t = useTranslations()
    return (
        <section className=' flex justify-center items-center'>
            <div className='relative w-full  sm:w-[656px] h-[504px]'>

                <CustomImage pageTitle={metaTitles?.integrationsANTAIMeta_Title} priority={true} src={User1Image} className=' object-cover rounded-lg scale-x-[-1] w-full h-full' alt='antai integration' />
                    <div className=' '>
                        <div className='absolute top-[32px] left-[80px] sm:left-[160px] flex flex-col gap-1 '>
                            <S className='text-white'>50€</S>
                            <S className='text-gray-300 !font-normal'>VW Passat [RR-410-WU]</S>
                        </div>
                        <CustomLine height='65px' width='42px' color='#ffffff' r={10} points={[{ x: 15, y: 65 }, { x: 15, y: 15 }, { x: 50, y: 15 }]} className='absolute top-10 left-12 sm:left-24 z-[1]  ' />
                        <span className='w-4 h-4 bg-white  rounded-full absolute top-[104px] left-[56px] sm:left-[103px] z-10'></span>
                    </div>

                    <CustomCard className='bg-white/10 flex items-center gap-2 rounded-md absolute top-24 left-4 sm:left-16 w-[290px] border-none p-4 backdrop-blur-lg duration-200 hover:bg-white/20'>
                        <CustomImage pageTitle={metaTitles?.integrationsANTAIMeta_Title} priority={true} src={Car12Image} className='w-16 h-16  rounded-md object-cover  ' alt='new antai vehicle alert' />
                        <div className='flex flex-col '>
                            <S className='!font-semibold text-white'>{t("New Antai")}</S>
                            <S className='text-gray-300 text-[13px] !font-normal '>{t("Failure to respect the red traffic light")}</S>
                        </div>
                    </CustomCard>
                    <CustomCard className='bg-white/10 flex items-center gap-2 rounded-md absolute top-52 left-4 sm:left-16 w-[290px] border-none p-4 backdrop-blur-lg duration-200 hover:bg-white/20'>
                        <CustomImage pageTitle={metaTitles?.integrationsANTAIMeta_Title} priority={true} src={Car13Image} className='w-16 h-16  rounded-md object-cover  ' alt='new antai vehicle alert' />
                        <div className='flex flex-col '>
                            <S className='!font-semibold text-white'>{t("New Antai")}</S>
                            <S className='text-gray-300 text-[13px] !font-normal '>{t("Using a hand-held phone while driving")}</S>
                        </div>
                    </CustomCard>
                </div>
        </section>
    )
}

export default ANTAIHeroGraphics