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

export default function CTA({ data }: { data?: any }) {
  const t = useTranslations('Home.cta');
  const locale = useLocale();

  return (
    <Section className="bg-primary text-white py-32 relative overflow-hidden">
      <div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
      <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />

      <Container className="relative z-10">
        <div className="flex flex-col lg:flex-row items-center justify-between gap-16">
          <div className="max-w-3xl text-center lg:text-left">
            <Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white mb-6">
              <span className="text-white">{data?.title || t('title')}</span>
            </Heading>
            <p className="text-lg md:text-xl text-white/70 leading-relaxed">
              {data?.description || t('description')}
            </p>
          </div>
          <div className="flex-shrink-0">
            <Button href={`/${locale}/contact`} variant="accent" size="xl" className="group px-12">
              {data?.buttonLabel || t('button')}
              <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
            </Button>
          </div>
        </div>
      </Container>
    </Section>
  );
}