const links = [
  {
    icon: "📖",
    title: "入门指南",
    desc: "完整的数字游民入门教程",
    label: "开始学习 ↗",
  },
  {
    icon: "💬",
    title: "Discord 社区",
    desc: "与全球数字游民实时交流",
    label: "加入社区 ↗",
  },
  {
    icon: "🛒",
    title: "工具集市",
    desc: "发现、评测和分享远程工具",
    label: "浏览工具 ↗",
  },
  {
    icon: "📦",
    title: "GitHub",
    desc: "开源项目，欢迎 Star 和 PR",
    label: "访问仓库 ↗",
  },
  {
    icon: "📝",
    title: "飞书知识库",
    desc: "7天入门指南 · 中文图文教程",
    label: "查看文档 ↗",
  },
  {
    icon: "🗺️",
    title: "目的地数据库",
    desc: "全球数字游民城市信息",
    label: "探索城市 ↗",
  },
];

export default function Community() {
  return (
    <section id="community" className="py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Community cards */}
        <div className="mb-20 grid gap-6 md:grid-cols-2">
          <a
            href="/join"
            className="block rounded-2xl border border-sky-200 bg-gradient-to-br from-sky-50 to-cyan-50 p-8 transition-all hover:shadow-lg"
          >
            <div className="mb-2 text-sm font-semibold text-sky-600">
              👥 数字游民社区
            </div>
            <h3 className="mb-3 text-xl font-bold text-slate-900">
              加入全球华人数字游民网络
            </h3>
            <p className="mb-6 text-sm leading-relaxed text-slate-600">
              填写申请表加入社区
              <br />
              1000+ 数字游民 · 每周线上分享 · 城市攻略
            </p>
            <div className="flex items-center justify-center rounded-xl bg-white/80 p-6 shadow-sm backdrop-blur-sm">
              <div className="flex items-center gap-4">
                <div className="flex h-14 w-14 items-center justify-center rounded-full bg-sky-100 text-3xl">
                  📝
                </div>
                <div className="text-left">
                  <div className="font-bold text-slate-800">
                    立即申请加入 →
                  </div>
                  <div className="mt-1 text-xs text-slate-400">
                    填写简单表单，审核通过即可入群
                  </div>
                </div>
              </div>
            </div>
          </a>

          <a
            href="/course"
            className="block rounded-2xl border border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50 p-8 transition-all hover:shadow-lg"
          >
            <div className="mb-2 text-sm font-semibold text-amber-600">
              🎬 数字游民实战课
            </div>
            <h3 className="mb-3 text-xl font-bold text-slate-900">
              打造 7×24 小时自动化收入系统
            </h3>
            <div className="mb-4 flex flex-wrap gap-3">
              <span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
                🔥 实战训练营
              </span>
              <span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
                📹 视频教程
              </span>
              <span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
                ¥199
              </span>
            </div>
            <p className="mb-6 text-sm leading-relaxed text-slate-600">
              7 天打造你的远程工作体系 · 从入门到精通
            </p>
            <div className="flex items-center justify-center rounded-xl bg-white/80 p-6 shadow-sm backdrop-blur-sm">
              <div className="text-center">
                <div className="text-5xl">🎓</div>
                <div className="mt-3 text-sm font-medium text-slate-600">
                  点击查看课程详情 →
                </div>
              </div>
            </div>
          </a>
        </div>

        {/* Open source contribution */}
        <div className="text-center">
          <div className="mb-2 text-sm font-semibold text-slate-400">
            🤝 开源共建
          </div>
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            社区与<span className="gradient-text">贡献</span>
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
            数字游民指南是开源项目，致力于做最好的中文数字游民资源聚合站。
            <br />
            欢迎补充资源、改进内容、分享经验。
          </p>
        </div>

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

        <div className="mt-12 text-center">
          <div className="mb-4 text-lg font-bold text-slate-900">
            🌟 一起让数字游民指南变得更好
          </div>
          <p className="mb-6 text-slate-600">
            发现了好资源？写了旅居心得？有工具推荐？
            <br />
            提一个 PR，你的贡献将帮助更多人。
          </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">
            ⭐ Star & Fork on GitHub
          </button>
        </div>
      </div>
    </section>
  );
}