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

const WhyProcessSteps = () => {
    const t = useTranslations("")
    return (
        <section className='flex flex-col items-center  justify-center gap-10 lg:gap-20'>
            <div className="flex flex-col gap-2 max-lg:text-center  ">
                    <H2>{t("Get started with DadyCar today")}</H2>
                </div>
            <div className='flex  flex-col  items-center lg:flex-row '>
                <CustomCard className='h-[400px] p-8 flex flex-col gap-8 w-[330px]  lg:w-[300px] xl:w-[330px] shadow  border-none'>
                    <div className='flex flex-col items-center'>
                        <H2 className='bg-primary w-24 h-24  rounded-full flex items-center justify-center text-white max-sm:!text-2xl'>01</H2>
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Create your account")}</H6>
                        <P>{t("The first step is to create your account on DadyCar It’s quick and easy!")}</P>
                    </div>
                    <Button className='w-fit'>{t("Create your account")}</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='h-[400px] p-8 flex flex-col gap-8 w-[330px]  lg:w-[300px] xl:w-[330px] shadow  border-none'>
                    <div className='flex flex-col items-center'>
                        <H2 className='bg-primary w-24 h-24  rounded-full flex items-center justify-center text-white max-sm:!text-2xl'>02</H2>
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Fill up data")}</H6>
                        <P>{t("You can fill in your information manually or directly upload your CSV files No worries, we support you every step of the way to ensure that your files are in the right format")}</P>
                    </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='h-[400px] p-8 flex flex-col gap-8 w-[330px]  lg:w-[300px] xl:w-[330px] shadow  border-none'>
                    <div className='flex flex-col items-center'>
                        <H2 className='bg-primary w-24 h-24  rounded-full flex items-center justify-center text-white max-sm:!text-2xl'>03</H2>
                    </div>
                    <div className='flex flex-col gap-2'>
                        <H6>{t("Start your adventure")}</H6>
                        <P>{t("Once your account is set up, you can start managing your vehicles, generating reports and accessing all the awesome features")}</P>
                    </div>
                </CustomCard>
            </div>
        </section>
    )
}

export default WhyProcessSteps