import Link from 'next/link';
import { FiArrowRight } from 'react-icons/fi';

export function CTA() {
  return (
    <section className="mx-auto max-w-7xl px-4 pb-24 sm:px-6 lg:px-8">
      <div className="relative overflow-hidden rounded-[32px] bg-gradient-to-br from-brand-600 via-brand-500 to-brand-400 px-8 py-16 text-center shadow-2xl shadow-brand-500/30 sm:px-16">
        <div
          aria-hidden
          className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute -bottom-24 -left-10 h-64 w-64 rounded-full bg-white/10 blur-3xl"
        />

        <h2 className="relative mx-auto max-w-2xl text-3xl font-bold text-white sm:text-4xl">
          Узнайте реальное SEO-состояние вашего сайта прямо сейчас
        </h2>
        <p className="relative mx-auto mt-4 max-w-xl text-brand-50">
          Бесплатная проверка без регистрации карты. Первый отчёт — за 2 минуты.
        </p>

        <div className="relative mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <Link
            href="/register"
            className="flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-brand-600 shadow-lg transition-transform hover:-translate-y-0.5"
          >
            Начать бесплатный аудит
            <FiArrowRight className="h-4 w-4" />
          </Link>
          <a
            href="#features"
            className="rounded-full border border-white/40 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/10"
          >
            Посмотреть возможности
          </a>
        </div>
      </div>
    </section>
  );
}