"use client";

import { motion } from "framer-motion";
import { ArrowRight, Mail } from "lucide-react";
import GlowButton from "@/components/ui/GlowButton";
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
import type { Dictionary, Locale } from "@/lib/dictionaries";

interface CTAProps {
  locale: Locale;
  dict: Dictionary;
}

export default function CTA({ locale, dict }: CTAProps) {
  return (
    <section className="relative w-full py-24 sm:py-32">
      <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={viewportConfig}
          variants={stagger(0.08)}
          className="relative overflow-hidden rounded-3xl border border-purple-400/30 bg-gradient-to-br from-purple-500/10 via-surface/60 to-purple-700/10 px-8 py-16 text-center backdrop-blur-md sm:px-16 sm:py-24"
        >
          {/* Background effects */}
          <div className="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-purple-500/20 blur-3xl" />
          <div className="absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-purple-400/15 blur-3xl" />
          <div className="absolute inset-0 grid-bg opacity-30 [mask-image:radial-gradient(ellipse_at_center,#000_20%,transparent_70%)]" />

          <div className="relative mx-auto max-w-3xl">
            <motion.h2
              variants={fadeUp}
              className="font-display text-display-lg font-medium tracking-tight"
            >
              <span className="text-gradient-fade">{dict.cta.title}</span>
              <br />
              <span className="text-gradient-purple">
                {dict.cta.titleAccent}
              </span>
            </motion.h2>

            <motion.p
              variants={fadeUp}
              className="mx-auto mt-6 max-w-xl text-base leading-relaxed text-text-secondary sm:text-lg"
            >
              {dict.cta.subtitle}
            </motion.p>

            <motion.div
              variants={fadeUp}
              className="mt-10 flex flex-wrap items-center justify-center gap-3"
            >
              <GlowButton
                href={`/${locale}/contact`}
                variant="primary"
                size="lg"
                icon={<ArrowRight className="h-4 w-4" />}
              >
                {dict.cta.contact}
              </GlowButton>

              <GlowButton
                href={`mailto:${dict.cta.email}`}
                variant="secondary"
                size="lg"
                icon={<Mail className="h-4 w-4" />}
                iconPosition="left"
              >
                {dict.cta.email}
              </GlowButton>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}