"use client";

import { motion } from "framer-motion";
import { content } from "@/lib/content";
import { fadeUp, staggerContainer, staggerItem } from "@/lib/animations";

const cta = content.ar.cta;

export default function CTASection() {
  return (
    <section className="py-20 md:py-28 bg-slate-900 relative overflow-hidden">
      {/* Decorative grid dots pattern */}
      <div
        className="absolute inset-0 opacity-[0.07]"
        style={{
          backgroundImage:
            "radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px)",
          backgroundSize: "32px 32px",
        }}
      />

      {/* Gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-b from-slate-900/80 via-transparent to-slate-900/80" />

      <div className="container mx-auto px-4 md:px-6 relative z-10">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-80px" }}
          variants={staggerContainer}
          className="bg-slate-800/50 border border-slate-700/50 backdrop-blur-sm rounded-2xl p-10 md:p-16 max-w-3xl mx-auto text-center"
        >
          <motion.h2
            variants={staggerItem}
            className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4"
          >
            {cta.headline}
          </motion.h2>

          <motion.p
            variants={staggerItem}
            className="text-lg md:text-xl text-slate-300 mb-10 max-w-xl mx-auto"
          >
            {cta.subheadline}
          </motion.p>

          <motion.div
            variants={staggerItem}
            className="flex flex-col sm:flex-row items-center justify-center gap-4"
          >
            <a
              href="#contact"
              className="inline-flex items-center justify-center px-8 py-4 text-lg font-bold bg-white text-slate-900 rounded-xl hover:bg-slate-100 transition-colors w-full sm:w-auto"
            >
              {cta.ctaPrimary}
            </a>
            <a
              href="#contact"
              className="inline-flex items-center justify-center px-8 py-4 text-lg font-medium border-2 border-white/30 text-white rounded-xl hover:bg-white/10 transition-colors w-full sm:w-auto"
            >
              {cta.ctaSecondary}
            </a>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}
