import { Zap2SVG } from '@/assets/svg'
import { CustomLine, IntegrationLine } from '@/components/ui/lines'
import { H2, P, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

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

    const content = {
        title:"Various Integrations to Optimize Your Vehicle Management",
        description:"With Dadycar, simplify your operations and maximize your efficiency with connected solutions for optimal fleet management",
        integrations: [
            {
                title: "Insurers",
                description: "Easily integrate your insurance contracts for smooth and centralized management"
            },
            {
                title: "Oil Suppliers",
                description: "Access fuel consumption data and optimize your costs by integrating your fuel suppliers"
            },
            {
                title: "Energy Specialists",
                description: "Manage your electric vehicles in direct connection with your energy suppliers"
            },
            {
                title: "SIV & ANTAI",
                description: "Connect your vehicles to registration and violation systems to ensure compliance"
            },
            {
                title: "Maintenance",
                description: "Ensure accurate tracking of maintenance and repairs with dedicated integrations"
            },
            {
                title: "Expense Reports",
                description: "Simplify the management of travel expenses with connected tools"
            },
        ]
    }
    const IntegrationCard = ({ className, index }: { className?: string, index: number }) => {

        return (
            <div className={`absolute flex flex-col items-center w-12 gap-4 text-center group/parent ${className} `}>
                <div className='bg-lightBackground shadow-lg min-w-12 min-h-12 flex justify-center items-center text-primary  group-hover/parent:bg-primary duration-300 rounded-none group-hover/parent:rounded-3xl'>
                    <Zap2SVG className={"group-hover/parent:scale-[1.2] duration-200  group-hover/parent:text-white  "} />
                    <span className='  absolute w-[48px] h-[48px]   animate-customPing bg-primary/0 opacity-0 group-hover/parent:bg-primary/20 duration-1000 rounded-full z-[-1]'></span>
                </div>
                <div className='flex flex-col lg:gap-1'>
                    <S className=''>{t(content?.integrations[index]?.title)}</S>
                    <P className='max-sm:!text-[10px] max-sm:leading-3 !text-[12px] w-36 leading-4  lg:h-4 sm:group-hover/parent:opacity-100 sm:opacity-0 duration-300 group-hover/parent:translate-y-0 lg:translate-y-1 ease-in-out lg:blur-[2px] group-hover/parent:blur-0' >
                        {t(content?.integrations[index]?.description)}
                    </P>
                </div>
            </div>
        )
    }

    return (
        <div className='flex flex-col items-center gap-10 lg:gap-20'>
            {/* Desktop */}
            <div className="flex flex-col gap-2 text-center">
                <H2>{t(content?.title)}</H2>
                <P>{t(content?.description)}</P>
            </div>
            <div>
                <section className='flex flex-col justify-center items-center   relative min-w-[1000px] min-h-[270px] group max-lg:hidden max-xl:scale-[0.77]'>
                    <CustomLine height='270px' width='700px' color='hsla(240, 6%, 90%, 1)' r={5} points={[{ x: 15, y: 15 }, { x: 685, y: 15 }, { x: 685, y: 255 }, { x: 15, y: 255 }, { x: 15, y: 15 }]} className='absolute  ' />
                    <IntegrationLine height='270px' width='700px' color='hsla(240, 6%, 90%, 1)' dasharray='15 15' r={5} points={[{ x: 30, y: 30 }, { x: 670, y: 30 }, { x: 670, y: 240 }, { x: 30, y: 240 }, { x: 30, y: 30 }]} className='absolute ' />
                    <CustomLine height='270px' width='700px' color='hsla(240, 6%, 90%, 1)' r={5} points={[{ x: 45, y: 45 }, { x: 655, y: 45 }, { x: 655, y: 225 }, { x: 45, y: 225 }, { x: 45, y: 45 }]} className='absolute ' />
                    {/* Cards */}
                    <IntegrationCard index={0} className='top-[4px] left-[calc(33%-24px)]' />
                    <IntegrationCard index={1} className='top-[4px] left-[calc(50%-24px)]' />
                    <IntegrationCard index={2} className='top-[4px] left-[calc(66%-24px)]' />


                    <IntegrationCard index={3} className='top-[215px] left-[calc(66%-24px)]' />
                    <IntegrationCard index={4} className='top-[215px] left-[calc(50%-24px)]' />
                    <IntegrationCard index={5} className='top-[215px] left-[calc(33%-24px)]' />

                </section>
                {/* Mobile */}
                <section className='flex flex-col items-center    relative min-h-[800px] min-w-[270px] group lg:hidden bg'>
                    <CustomLine height="800px" width="335px" color="hsla(240, 6%, 90%, 1)" r={5} points={[{ x: 15, y: 15 }, { x: 320, y: 15 }, { x: 320, y: 785 }, { x: 15, y: 785 }, { x: 15, y: 15 }]} className="absolute" />
                    <CustomLine height="800px" width="335px" color="hsla(240, 6%, 90%, 1)" dasharray="15 15" r={5} points={[{ x: 30, y: 30 }, { x: 305, y: 30 }, { x: 305, y: 770 }, { x: 30, y: 770 }, { x: 30, y: 30 }]} className="absolute" />
                    <CustomLine height="800px" width="335px" color="hsla(240, 6%, 90%, 1)" r={5} points={[{ x: 45, y: 45 }, { x: 290, y: 45 }, { x: 290, y: 755 }, { x: 45, y: 755 }, { x: 45, y: 45 }]} className="absolute" />
                    {/* Cards */}
                    <IntegrationCard index={0} className='left-[-28px] top-[calc(14%-24px)] !flex-row !text-left'  />
                <IntegrationCard index={1} className='left-[-28px] top-[calc(42%-24px)] !flex-row !text-left' />
                <IntegrationCard index={2} className='left-[-28px] top-[calc(70%-24px)] !flex-row !text-left' />
        
                <IntegrationCard index={3} className='right-[-28px] top-[calc(68%+100px)] !flex-row-reverse !text-left' />
                <IntegrationCard index={4} className='right-[-28px] top-[calc(40%+100px)] !flex-row-reverse !text-left' />
                <IntegrationCard index={5} className='right-[-28px] top-[calc(12%+100px)] !flex-row-reverse !text-left'  />
                </section>
            </div>
        </div>
    )
}

export default ConstructionIntegration2