"use client";

import { useRef, useEffect } from "react";
import { motion, useAnimation, useInView, Variants } from "framer-motion";
import { ArrowRight, Sparkles, CheckCircle } from "lucide-react";

export default function CTA() {
  const controls = useAnimation();
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.3 });

  useEffect(() => {
    if (isInView) {
      controls.start("visible");
    }
  }, [controls, isInView]);

  const fadeUp: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] }
    }
  };

  return (
    <section className="relative py-12 overflow-hidden bg-gradient-to-br from-sky-950 via-sky-900 to-sky-950">
      
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(14,165,233,0.2)_0%,transparent_60%)]" />
      
      <motion.div
        className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(56,189,248,0.1)_0%,transparent_70%)]"
        animate={{
          scale: [1, 1.1, 1],
          opacity: [0.5, 0.8, 0.5]
        }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
      />

      <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12">
        <motion.div
          ref={ref}
          variants={fadeUp}
          initial="hidden"
          animate={controls}
          className="flex justify-center"
        >
          <div className="w-full max-w-2xl">
            <div className="relative bg-white/10 backdrop-blur-xl rounded-xl border border-white/20 shadow-lg overflow-hidden">
              
              <div className="relative p-5 md:p-6">
                <div className="text-center">
                  {/* Badge */}
                  <div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-3">
                    <Sparkles className="w-3 h-3 text-sky-400" />
                    <span className="text-[8px] font-black tracking-wider text-white uppercase">Join PKI</span>
                  </div>

                  {/* Heading */}
                  <h2 className="text-lg sm:text-xl md:text-2xl font-black leading-tight text-white mb-1.5">
                    Ready to Transform Your{' '}
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-blue-300">
                      Workplace?
                    </span>
                  </h2>

                  {/* Description */}
                  <p className="text-[11px] sm:text-xs text-slate-300 leading-relaxed max-w-md mx-auto mb-4">
                    Join thousands of professionals making an eternal impact in their careers.
                  </p>

                  {/* CTA Button */}
                  <button className="group inline-flex items-center gap-2 px-5 py-2 bg-white text-sky-900 rounded-full font-bold shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105">
                    <span className="text-[11px] tracking-wide">Join PKI Community</span>
                    <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
                  </button>

                  {/* Trust Text */}
                  <p className="mt-3 text-[8px] text-slate-400 flex items-center justify-center gap-2">
                    <CheckCircle className="w-2.5 h-2.5 text-green-400" />
                    Free lifetime access • No credit card required
                  </p>
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}