'use client';

import Link from 'next/link';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';

export const CtaSection = () => {
  const { t } = useTextController();

  return (
    <section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
      <div className='container mx-auto'>
        <div className='flex flex-col items-center text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('home.cta.title')}
          </h2>
          <p className='mb-8 max-w-2xl'>{t('home.cta.description')}</p>
          <div className='flex flex-col gap-4 sm:flex-row'>
            <Link href='#'>
              <Button variant='secondary'>
                {t('common.buttons.purchaseCardAtGasStations')}
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};