"use client";

import Link from "next/link";
import { MapPin, BookOpen, Crown } from "lucide-react";
import { motion } from "framer-motion";
import { FINAL_CTAS } from "~/lib/data";
import { Button } from "~/components/ui/button";

const ICONS = [MapPin, BookOpen, Crown] as const;

export function FinalCta() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-violet-900 via-fuchsia-900 to-cyan-900 py-20 text-white md:py-28">
      <div className="container mx-auto px-4 md:px-6">
        <motion.h2
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          className="text-center text-2xl font-bold md:text-3xl"
        >
          ✨ 从这里开始你的数字游民路径
        </motion.h2>
        <motion.p
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          className="mx-auto mt-3 max-w-xl text-center text-neutral-300"
        >
          先选择最适合你的入口，然后开始行动。
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mt-12 flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:justify-center"
        >
          {FINAL_CTAS.map((cta, i) => {
            const Icon = ICONS[i];
            return (
              <Link
                key={cta.label}
                href={cta.href}
                target="_blank"
                rel="noopener noreferrer"
                className="group"
              >
                <Button
                  variant="outline"
                  size="lg"
                  className="w-full min-w-[200px] border-white/40 bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 hover:border-white/60 sm:w-auto"
                >
                  <Icon className="mr-2 h-4 w-4" />
                  {cta.label}
                </Button>
              </Link>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
}