import React from 'react';
import Link from 'next/link';
import { useTranslations, useLocale } from 'next-intl';
import { Section, Container } from '../../components/ui';

export default function CTA() {
  const t = useTranslations('Home.cta');
  const locale = useLocale();

  return (
    <Section className="bg-primary text-white py-24">
      <Container>
        <div className="flex flex-col md:flex-row items-center justify-between gap-8">
          <h2 className="text-3xl md:text-4xl font-bold max-w-2xl">
            {t('title')}
          </h2>
          <Link href={`/${locale}/contact`} className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
            {t('button')}
            <span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
              &rarr;
            </span>
          </Link>
        </div>
      </Container>
    </Section>
  );
}