"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { ENTRY_CARDS } from "~/lib/data";

const CARD_STYLE = {
  blue: {
    border: "border-blue-200/80",
    bar: "bg-blue-500",
    emoji: "bg-blue-50",
  },
  emerald: {
    border: "border-emerald-200/80",
    bar: "bg-emerald-500",
    emoji: "bg-emerald-50",
  },
  rose: {
    border: "border-rose-200/80",
    bar: "bg-rose-500",
    emoji: "bg-rose-50",
  },
} as const;

export function Hero() {
  return (
    <section
      className="flex flex-1 flex-col justify-center px-5 pb-8"
      style={{
        paddingTop: "max(2rem, calc(1.5rem + var(--safe-top)))",
        paddingBottom: "max(2rem, calc(1.5rem + var(--safe-bottom)))",
      }}
    >
      <div className="mx-auto w-full max-w-md sm:max-w-lg">
        {/* 标题 */}
        <div className="text-center">
          <h1 className="text-[2rem] font-bold leading-tight sm:text-5xl">
            <span className="text-gradient">数字游民</span>
          </h1>
          <p className="mt-2 text-lg font-medium tracking-[0.2em] text-neutral-400 sm:text-xl">
            nomadro
          </p>
          <p className="mx-auto mt-4 max-w-xs text-[13px] leading-relaxed text-neutral-500 sm:max-w-sm sm:text-sm">
            游民导航 · 地理套利 · 直播工具箱
            <br />
            一站开启自由生活
          </p>
        </div>

        {/* 入口卡片 */}
        <div className="mt-10 flex flex-col gap-3">
          {ENTRY_CARDS.map((card) => {
            const style = CARD_STYLE[card.accent];
            return (
              <Link
                key={card.id}
                href={card.href}
                target="_blank"
                rel="noopener noreferrer"
                className={`group relative flex items-center gap-3.5 overflow-hidden rounded-2xl border bg-white p-4 shadow-sm transition-all active:scale-[0.98] active:shadow-none sm:gap-4 sm:p-5 ${style.border}`}
              >
                <span
                  className={`absolute left-0 top-0 h-full w-1 ${style.bar}`}
                />

                <span
                  className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl ${style.emoji}`}
                >
                  {card.emoji}
                </span>

                <div className="min-w-0 flex-1 pr-1">
                  <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                    <h2 className="text-[15px] font-semibold text-neutral-900 sm:text-base">
                      {card.label}
                    </h2>
                    {card.id === "live" && (
                      <span className="rounded bg-rose-500 px-1.5 py-px text-[10px] font-semibold leading-4 text-white">
                        LIVE
                      </span>
                    )}
                  </div>
                  <p className="mt-0.5 text-sm font-medium text-neutral-700">
                    {card.title}
                  </p>
                  <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-neutral-400">
                    {card.description}
                  </p>
                </div>

                <ChevronRight className="h-5 w-5 shrink-0 text-neutral-300" />
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}