import { Link } from 'react-router-dom';
import { ArrowRight, Sparkles } from 'lucide-react';
import { Reveal } from '@/components/ui/Animation';

export default function CTASection({
  title = 'Let’s build something exceptional together.',
  subtitle = 'Tell us about your goals and we’ll map out the fastest path to get there — no jargon, no pressure.',
  ctaLabel = 'Start a project',
  ctaTo = '/contact',
}: {
  title?: string;
  subtitle?: string;
  ctaLabel?: string;
  ctaTo?: string;
}) {
  return (
    <section className="section-padding container-wide py-24">
      <Reveal>
        <div className="relative overflow-hidden rounded-3xl bg-logo-gradient px-8 py-16 text-center shadow-soft-lg sm:px-16 sm:py-20">
          {/* decorative */}
          <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/20 blur-3xl" />
          <div className="pointer-events-none absolute -bottom-24 -left-16 h-72 w-72 rounded-full bg-accent-500/30 blur-3xl" />
          <div className="relative">
            <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-white backdrop-blur">
              <Sparkles size={14} /> We make tech easy
            </span>
            <h2 className="mx-auto mt-6 max-w-3xl text-3xl font-bold tracking-tight text-white text-balance sm:text-4xl lg:text-5xl">
              {title}
            </h2>
            <p className="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-white/80 sm:text-lg">
              {subtitle}
            </p>
            <Link
              to={ctaTo}
              className="mt-9 inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-primary-600 shadow-lg transition-all hover:scale-105 hover:shadow-xl active:scale-95"
            >
              {ctaLabel} <ArrowRight size={16} />
            </Link>
          </div>
        </div>
      </Reveal>
    </section>
  );
}