const resources = [
  {
    lang: "中文",
    tag: "📖 入门指南",
    title: "数字游民完全入门手册",
    desc: "从概念到实践，系统化的数字游民入门指南，含远程工作、签证、财务全攻略",
    source: "少数派",
    color: "bg-sky-50 text-sky-700 border-sky-200",
  },
  {
    lang: "EN",
    tag: "📖 经典书籍",
    title: "The 4-Hour Workweek — Tim Ferriss",
    desc: "数字游民圣经，重新定义工作与生活的关系，构建「新富族」生活方式",
    source: "Amazon",
    color: "bg-amber-50 text-amber-700 border-amber-200",
  },
  {
    lang: "中文",
    tag: "☁️ 远程求职",
    title: "国内远程工作机会汇总 — 电鸭社区",
    desc: "最大的中文远程工作社区，收录数千个远程岗位，涵盖开发、设计、运营等领域",
    source: "电鸭社区",
    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
  },
  {
    lang: "EN",
    tag: "🗺️ 目的地",
    title: "Nomad List — Best Cities for Digital Nomads",
    desc: "全球数字游民城市数据库，含生活成本、网速、安全指数、社区活跃度等指标",
    source: "Nomad List",
    color: "bg-violet-50 text-violet-700 border-violet-200",
  },
  {
    lang: "中文",
    tag: "📹 视频教程",
    title: "从程序员到数字游民 — 我的转型之路",
    desc: "真实经历分享：如何从 996 转型为自由的数字游民，含收入、签证、生活细节",
    source: "Bilibili",
    color: "bg-rose-50 text-rose-700 border-rose-200",
  },
  {
    lang: "EN",
    tag: "💰 财务规划",
    title: "Tax Planning for Digital Nomads — Complete Guide",
    desc: "数字游民税务规划权威指南：税务居民身份、双重征税协定、合规架构搭建",
    source: "SafetyWing",
    color: "bg-teal-50 text-teal-700 border-teal-200",
  },
  {
    lang: "中文",
    tag: "🛠️ 工具评测",
    title: "远程工作者必备工具清单 2026",
    desc: "50+ 工具横评：协作、会议、设计、开发、生产力工具深度体验与推荐",
    source: "即刻",
    color: "bg-orange-50 text-orange-700 border-orange-200",
  },
  {
    lang: "EN",
    tag: "🔬 深度文章",
    title: "State of Digital Nomads 2026 — Annual Report",
    desc: "2026年度数字游民状态报告：3500万全球数字游民的收入、工作、生活数据洞察",
    source: "A Brother Abroad",
    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
  },
  {
    lang: "中文",
    tag: "📱 社区",
    title: "数字游民部落 — 中文社区指南",
    desc: "连接全球数字游民：经验分享、城市攻略、合租搭伴、线下 Meetup",
    source: "微信公众号",
    color: "bg-cyan-50 text-cyan-700 border-cyan-200",
  },
  {
    lang: "EN",
    tag: "📋 签证",
    title: "Digital Nomad Visa Guide — 50+ Countries",
    desc: "全球 50+ 国家数字游民签证政策汇总，含申请条件、费用、停留期限对比",
    source: "VisaGuide.World",
    color: "bg-lime-50 text-lime-700 border-lime-200",
  },
  {
    lang: "中文",
    tag: "🏠 共居空间",
    title: "全球最佳 Coliving 空间推荐",
    desc: "精选 30+ 数字游民共居空间：巴厘岛、清迈、里斯本、麦德林……含价格与评测",
    source: "数字游民部落",
    color: "bg-pink-50 text-pink-700 border-pink-200",
  },
  {
    lang: "EN",
    tag: "💼 自由职业",
    title: "Freelancing 101 — From Zero to First Client",
    desc: "从零开始接单指南：Upwork/Fiverr/Toptal 平台对比、定价策略、客户沟通技巧",
    source: "freeCodeCamp",
    color: "bg-sky-50 text-sky-700 border-sky-200",
  },
];

const sourceStats = [
  { value: "200+", label: "篇资源" },
  { value: "80", label: "中文资源" },
  { value: "120+", label: "英文资源" },
  { value: "12", label: "大分类" },
];

export default function Resources() {
  return (
    <section id="resources" className="bg-slate-50 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <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">
            从少数派到 Nomad List，从 B站 到 freeCodeCamp
            —— 一站式获取数字游民最佳资源。
          </p>
        </div>

        {/* Stats */}
        <div className="mt-10 flex flex-wrap items-center justify-center gap-4 text-sm">
          {sourceStats.map((s) => (
            <div key={s.label} className="flex items-center gap-1.5">
              <span className="font-bold text-sky-600">{s.value}</span>
              <span className="text-slate-500">{s.label}</span>
            </div>
          ))}
        </div>

        {/* Resource grid */}
        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {resources.map((r, i) => (
            <div
              key={i}
              className="resource-card flex flex-col rounded-xl border border-slate-100 bg-white p-5 shadow-sm"
            >
              <div className="mb-3 flex items-center gap-2">
                <span
                  className={`rounded-md border px-2 py-0.5 text-xs font-semibold ${r.color}`}
                >
                  {r.lang}
                </span>
                <span className="text-xs text-slate-400">{r.tag}</span>
              </div>
              <h3 className="mb-2 text-sm font-bold leading-snug text-slate-900">
                {r.title}
              </h3>
              <p className="mb-4 flex-1 text-xs leading-relaxed text-slate-500">
                {r.desc}
              </p>
              <div className="flex items-center justify-between">
                <span className="text-xs font-medium text-slate-400">
                  {r.source}
                </span>
                <span className="cursor-pointer text-xs font-medium text-sky-600 transition-colors hover:text-sky-700">
                  访问 ↗
                </span>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-10 text-center">
          <button className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-700 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50">
            查看全部 200+ 篇资源 →
          </button>
        </div>
      </div>
    </section>
  );
}