"use client";

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

const linkKeys = ["github", "destinations", "appDownload"] as const;
const linkIcons: Record<(typeof linkKeys)[number], string> = {
  github: "📦",
  destinations: "🗺️",
  appDownload: "📱",
};
const linkHrefs: Record<(typeof linkKeys)[number], { href: string; newTab?: boolean }> = {
  github: { href: "https://github.com" },
  destinations: { href: "#" },
  appDownload: { href: "/app" },
};

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 id="resources" className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
            <span className="gradient-text">{t("resourcesTitle")}</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) => {
            const { href, newTab } = linkHrefs[key];
            const content = (
              <>
                <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>
              </>
            );
            return (
              <Link
                key={key}
                href={href}
                target={newTab ? "_blank" : undefined}
                rel={newTab ? "noopener noreferrer" : undefined}
                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"
              >
                {content}
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}