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

const PressReleaseHero = () => {
    const t = useTranslations()
    return (
        <main className="flex flex-col px-2 justify-center items-center gap-10 bg-lightBackground py-32 relative overflow-hidden">
            <ParticlesSVG className={"max-lg:hidden absolute right-48 bottom-14  scale-[2] z-[0]"} />
            <ParticlesSVG className={"absolute left-0 top-0 sm:top-8  lg:left-48 lg:top-14  scale-[-1] sm:scale-[-1.5] lg:scale-[-2]  z-[0]"} />
            <div className=' flex flex-col gap-2 items-center  text-center z-[1]' >
                <H1 className='sm:w-[90%] !text-xl !lg:text-3xl'>{t("Press release")}</H1>
                <P className='sm:w-[90%] '>{t("Here you will find the latest company news and press material from Dadycar")}</P>
           <div className='flex items-center gap-4 pt-4'>
            <Button className='flex items-center group'>{t("Download document")} <ArrowHeadSVG className="w-5 h-5 -rotate-90 group-hover:translate-x-1 duration-200"/></Button>
            <Button variant={"outline"}>{t("Contact us")}</Button>

           </div>
            </div>
        </main>
    )
}

export default PressReleaseHero