"use client";

import Link from "next/link";
import { MapPin, Zap, Radio, ArrowRight } from "lucide-react";
import { motion } from "framer-motion";
import { ENTRY_PATHS } from "~/lib/data";

const ICON_MAP = {
  MapPin,
  Zap,
  Radio,
} as const;

const ACCENT_STYLES = {
  blue: {
    border: "border-blue-400/20 hover:border-blue-400/40",
    glow: "hover:shadow-blue-500/10",
    icon: "from-blue-500 to-cyan-500",
    text: "text-blue-300",
  },
  green: {
    border: "border-emerald-400/20 hover:border-emerald-400/40",
    glow: "hover:shadow-emerald-500/10",
    icon: "from-emerald-500 to-teal-500",
    text: "text-emerald-300",
  },
  rose: {
    border: "border-rose-400/20 hover:border-rose-400/40",
    glow: "hover:shadow-rose-500/10",
    icon: "from-rose-500 to-pink-500",
    text: "text-rose-300",
  },
} as const;

export function EntryGrid() {
  return (
    <section className="relative py-20 md:py-28">
      <div className="container 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-3xl">🚀</span>
          <h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
            选择你的入口
          </h2>
          <p className="mx-auto mt-3 max-w-2xl text-white/40">
            三大路径，对应不同的需求和阶段
          </p>
        </motion.div>

        <div className="mt-14 grid gap-5 md:grid-cols-3">
          {ENTRY_PATHS.map((path, i) => {
            const Icon = ICON_MAP[path.icon];
            const accent = ACCENT_STYLES[path.accent];
            return (
              <motion.div
                key={path.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-40px" }}
                transition={{ delay: i * 0.1 }}
                whileHover={{ y: -6 }}
              >
                <Link
                  href={path.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`group glass-card glass-card-hover block rounded-2xl p-6 shadow-lg ${accent.border} ${accent.glow}`}
                >
                  <div className="flex items-start justify-between">
                    <span className="text-3xl">{path.emoji}</span>
                    {path.id === "live" && (
                      <span className="flex items-center gap-1 rounded-full bg-rose-500/15 px-2 py-0.5 text-[10px] font-medium text-rose-300 ring-1 ring-rose-400/20">
                        <span className="h-1 w-1 rounded-full bg-rose-400 animate-pulse" />
                        nomadro.live
                      </span>
                    )}
                  </div>
                  <div className={`mt-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${accent.icon} shadow-lg`}>
                    <Icon className="h-5 w-5 text-white" />
                  </div>
                  <h3 className="mt-4 text-lg font-bold text-white">
                    {path.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-white/40">
                    {path.description}
                  </p>
                  <span className={`mt-5 inline-flex items-center gap-1.5 text-sm font-semibold ${accent.text} transition-all group-hover:gap-2.5`}>
                    {path.cta}
                    <ArrowRight className="h-4 w-4" />
                  </span>
                </Link>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}