"use client";

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

export function CTASection() {
  return (
    <section className="py-24 overflow-hidden">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          className="relative rounded-3xl overflow-hidden"
        >
          {/* Background */}
          <div className="absolute inset-0 gradient-brand" />
          <div
            className="absolute inset-0 opacity-20"
            style={{
              backgroundImage: `radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(255,255,255,0.3) 0%, transparent 50%)`,
            }}
          />

          {/* Content */}
          <div className="relative z-10 text-center text-white py-20 px-8">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
            >
              <span className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 rounded-full text-sm font-medium mb-6">
                <Zap className="w-4 h-4" fill="white" />
                Gratis Selamanya
              </span>
              <h2 className="text-4xl md:text-6xl font-bold mb-6">
                Siap Memulai?
              </h2>
              <p className="text-xl text-white/80 max-w-2xl mx-auto mb-10 leading-relaxed">
                Bergabunglah dengan ribuan pelajar yang sudah merasakan manfaat QuizB.
                Daftar sekarang dan mulai perjalanan belajarmu!
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href="/register"
                  className="group flex items-center justify-center gap-2 px-8 py-4 bg-white text-indigo-600 font-bold text-lg rounded-2xl hover:bg-white/90 transition-all shadow-2xl hover:-translate-y-1"
                >
                  Daftar Gratis
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </Link>
                <Link
                  href="/explore"
                  className="flex items-center justify-center gap-2 px-8 py-4 bg-white/20 text-white font-semibold text-lg rounded-2xl hover:bg-white/30 transition-all"
                >
                  Coba Tanpa Daftar
                </Link>
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}