import React from 'react'
import { H1, P } from '@/components/ui/typography'
import { ParticlesSVG } from '@/assets/svg'
import { Button } from '@/components/ui/buttons/Button'
import { useTranslations } from 'next-intl'
interface Props {
    title: string,
    description: string
}

const GlossaireHero: React.FC<Props> = ({ title, description }) => {
    const t = useTranslations()

    return (
        <main className="flex flex-col px-2 justify-center items-center gap-4 lg:gap-8 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='text-gray-800 !text-[24px] lg:!text-[28px] max-w-[633px] !leading-[35px]'>{title}</H1>
                <P className='max-w-[729px] mt-1 lg:mt-2 !text-[15px] lg:!text-[20px] !font-[400] !text-gray-500'>{description}</P>
            </div>
            <div className='z-[1] flex w-full justify-center'>
                <Button>{t("Request a Demo")}</Button>
            </div>
        </main>
    )
}

export default GlossaireHero