import { Link } from '@tanstack/react-router';
import { Button } from '@/components/ui/button';
import { useTranslation } from 'react-i18next';
import { DEFAULT_LOGGED_IN_ROUTE } from '@/lib/routes';

export function WelcomeHero() {
  const { t } = useTranslation();

  return (
    <>
      <h1 className='text-4xl md:text-5xl lg:text-6xl font-bold mb-6'>{t('landing.hero.welcomeTitle')}</h1>
      <p className='text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto'>{t('landing.hero.welcomeDescription')}</p>
      <div className='flex justify-center items-center'>
        <Link to={DEFAULT_LOGGED_IN_ROUTE}>
          <Button
            size='lg'
            className='w-full sm:w-auto min-w-[150px]'>
            {t('landing.hero.getStartedButton')}
          </Button>
        </Link>
      </div>
    </>
  );
}