import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowRight } from 'lucide-react';

interface CTASectionProps {
  variant?: 'default' | 'minimal';
}

const CTASection: React.FC<CTASectionProps> = ({ variant = 'default' }) => {
  const { t } = useTranslation();

  if (variant === 'minimal') {
    return (
      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
            {t('marketing.cta.ready')}
          </h2>
          <p className="text-gray-600 dark:text-gray-400 mb-8">
            {t('marketing.cta.readySubtitle')}
          </p>
          <Link
            to="/signup"
            className="inline-flex items-center gap-2 px-6 py-3 text-base font-semibold text-white bg-brand-600 rounded-xl hover:bg-brand-700 transition-colors"
          >
            {t('marketing.cta.startFree')}
            <ArrowRight className="h-5 w-5" />
          </Link>
        </div>
      </section>
    );
  }

  return (
    <section className="py-20 lg:py-28 bg-gradient-to-br from-brand-600 to-brand-700 relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
      </div>

      <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
          {t('marketing.cta.ready')}
        </h2>
        <p className="text-lg sm:text-xl text-brand-100 mb-10 max-w-2xl mx-auto">
          {t('marketing.cta.readySubtitle')}
        </p>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link
            to="/signup"
            className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 shadow-lg shadow-black/10 transition-colors"
          >
            {t('marketing.cta.startFree')}
            <ArrowRight className="h-5 w-5" />
          </Link>
          <Link
            to="/contact"
            className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-white bg-white/10 rounded-xl hover:bg-white/20 border border-white/20 transition-colors"
          >
            {t('marketing.cta.talkToSales')}
          </Link>
        </div>

        <p className="mt-6 text-sm text-brand-200">
          {t('marketing.cta.noCredit')}
        </p>
      </div>
    </section>
  );
};

export default CTASection;
