"use client";

import { motion } from "framer-motion";
import { ArrowRight, Sparkles } from "lucide-react";
import Link from "next/link";

export default function CTA() {
  return (
    <section className="py-24 bg-black relative overflow-hidden">
      <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
        >
          <div className="inline-flex items-center gap-2 bg-lime-400 text-black px-4 py-2 text-xs font-bold tracking-wider rounded-full mb-8">
            <Sparkles className="w-4 h-4" />
            LIMITED TIME
          </div>

          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-white mb-6 leading-tight">
            Ready to Showcase
            <br />
            <span className="text-lime-400">
              Your Masterpiece?
            </span>
          </h2>

          <p className="text-zinc-400 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
            Join hundreds of talented artists from SJEC in this creative
            celebration. Submit your artwork and let the world vote for your
            talent.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/register"
              className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-10 py-5 text-base font-bold tracking-wide hover:bg-lime-300 transition-all hover:scale-105 rounded-full shadow-xl shadow-lime-400/25"
            >
              REGISTER NOW
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link
              href="/rules"
              className="inline-flex items-center justify-center gap-2 bg-transparent text-white px-10 py-5 text-base font-bold tracking-wide border-2 border-zinc-700 hover:border-lime-400 hover:text-lime-400 transition-all rounded-full"
            >
              VIEW RULES
            </Link>
          </div>

          {/* Deadline Notice */}
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3 }}
            className="mt-12 inline-flex items-center gap-3 bg-zinc-900 border border-zinc-800 px-6 py-3 rounded-full"
          >
            <span className="w-3 h-3 bg-red-500 rounded-full animate-pulse" />
            <span className="text-zinc-400 font-medium">
              Submissions close on <span className="text-lime-400 font-bold">February 28, 2026</span>
            </span>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}