"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { FINAL_CTAS } from "~/lib/data";
import { Button } from "~/components/ui/button";

export function FinalCta() {
  return (
    <section className="relative overflow-hidden py-20 md:py-28">
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-violet-950/80 via-[#0a0a1a] to-cyan-950/60" />
      <div
        className="absolute inset-0 opacity-30"
        style={{
          backgroundImage: `
            radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.2) 0%, transparent 50%)
          `,
        }}
      />

      <div className="container relative mx-auto px-4 md:px-6">
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          className="text-center"
        >
          <span className="text-4xl">✨</span>
          <h2 className="mt-4 text-2xl font-bold text-white md:text-3xl">
            从这里开始你的数字游民路径
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-white/40">
            先选择最适合你的入口，然后开始行动。
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mt-12 flex flex-col items-center gap-4 sm:flex-row sm:flex-wrap sm:justify-center"
        >
          {FINAL_CTAS.map((cta, i) => (
            <motion.div
              key={cta.label}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              whileHover={{ scale: 1.03 }}
            >
              <Link
                href={cta.href}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Button
                  variant={i === 0 ? "default" : "outline"}
                  size="lg"
                  className="min-w-[220px]"
                >
                  <span className="mr-2">{cta.emoji}</span>
                  {cta.label}
                </Button>
              </Link>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}