import { ArrowHeadSVG} from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { H1, H2} from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

const LandingHero = () => {
    const t = useTranslations()
    return (
        <section className='flex flex-col justify-center items-center text-center py-4 sm:py-[104px] bg-lightBackground  rounded-md px-4'>
            <div className=' 2xl:mx-96 flex flex-col gap-4'>
                <div className=''>
                    <H1 className="flex items-center justify-center text-center">
                        {t("Complete Fleet Management Software")} <br />
                        {t("Powerful and intuitive")}
                    </H1>                </div>
                <H2  as='h2' className='text-muted-foreground !font-normal !text-lg  max-sm:!text-sm'>{t("Simplified management of your fleet Track inspections, control your expenses and optimize your costs with ease")}</H2>
            </div>
            <div className='flex flex-col sm:flex-row items-center gap-2 mt-4'>
                <Button className='flex items-center group w-[190px] group'>{t("Request a demo")} <ArrowHeadSVG className={"-rotate-90 scale-125 group-hover:translate-x-1 transition  group-hover:scale-[1.5]"} /></Button>
                <Button className=' w-[190px] hover:bg-lightBackground border-transparent !duration-300 hover:border-primary border hover:text-primary' variant={"outline"} url={process.env.NEXT_PUBLIC_PLATFORM_REGISTER_URL}>{t("Test for free")}</Button>
            </div>
        </section>
    )
}

export default LandingHero