"use client";

import { Link, useTranslation } from "@/i18n/navigation";
import ShopCard from "./ShopCard";

const linkKeys = ["guide", "discord", "tools", "github", "feishu", "destinations"] as const;
const linkIcons: Record<(typeof linkKeys)[number], string> = {
  guide: "📖",
  discord: "💬",
  tools: "🛒",
  github: "📦",
  feishu: "📝",
  destinations: "🗺️",
};

export default function Community() {
  const { t } = useTranslation("community");
  return (
    <section id="community" className="py-20 sm:py-28 dark:bg-slate-950">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* 电商独立站卡片 */}
        <div id="shop">
          <ShopCard />
        </div>

        {/* 数字游民社区 - 优化布局 */}
        <div className="mb-20">
          <Link
            href="/join"
            className="group block overflow-hidden rounded-2xl border border-sky-200/80 bg-gradient-to-br from-sky-50 via-white to-cyan-50/60 p-8 shadow-sm transition-all duration-300 hover:border-sky-300 hover:shadow-xl hover:shadow-sky-100/50 dark:border-sky-800/80 dark:from-sky-900/30 dark:via-slate-900 dark:to-cyan-900/20 dark:hover:border-sky-700 dark:hover:shadow-sky-900/30 sm:p-10"
          >
            <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex-1">
                <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-sky-100 px-4 py-1.5 text-sm font-semibold text-sky-700 dark:bg-sky-900/50 dark:text-sky-300">
                  <span className="text-lg">👥</span>
                  {t("nomadCommunity")}
                </div>
                <h3 className="mb-3 text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-3xl">
                  {t("joinTitle")}
                </h3>
                <p className="mb-4 max-w-xl text-base leading-relaxed text-slate-600 dark:text-slate-400">
                  {t("joinDesc")}
                </p>
                <div className="flex flex-wrap gap-3">
                  <span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm dark:bg-slate-800/90 dark:text-slate-300">
                    {t("applyForm")}
                  </span>
                  <span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm dark:bg-slate-800/90 dark:text-slate-300">
                    {t("approveJoin")}
                  </span>
                </div>
              </div>
              <div className="flex shrink-0 items-center gap-4 rounded-2xl bg-white/90 p-6 shadow-md backdrop-blur-sm transition-transform dark:bg-slate-800/90 group-hover:scale-[1.02] sm:p-8">
                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50">
                  📝
                </div>
                <div className="text-left">
                  <div className="font-bold text-slate-800 dark:text-slate-200">
                    {t("applyNow")}
                  </div>
                  <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                    {t("applyHint")}
                  </div>
                </div>
              </div>
            </div>
          </Link>
        </div>

        <div className="text-center">
          <div className="mb-2 text-sm font-semibold text-slate-400 dark:text-slate-500">
            {t("openSource")}
          </div>
          <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
            {t("contributeTitle")} <span className="gradient-text">{t("contributeHighlight")}</span>
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
            {t("contributeSubtitle")}
            <br />
            {t("contributeSubtitle2")}
          </p>
        </div>

        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {linkKeys.map((key) => (
            <div
              key={key}
              className="card-hover flex items-start gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
            >
              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl dark:bg-slate-800">
                {linkIcons[key]}
              </span>
              <div>
                <h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
                <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
                <span className="mt-2 inline-block text-sm font-medium text-sky-600">
                  {t(`links.${key}.label`)}
                </span>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 text-center">
          <div className="mb-4 text-lg font-bold text-slate-900 dark:text-slate-100">
            {t("betterTitle")}
          </div>
          <p className="mb-6 text-slate-600 dark:text-slate-400">
            {t("betterDesc")}
            <br />
            {t("betterDesc2")}
          </p>
          <button className="inline-flex items-center gap-2 rounded-full bg-slate-900 px-8 py-3 font-semibold text-white transition-colors hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200">
            {t("starFork")}
          </button>
        </div>
      </div>
    </section>
  );
}