const categories = [
  {
    icon: "💬",
    title: "远程协作",
    count: 12,
    tools: [
      { name: "Slack", desc: "团队沟通" },
      { name: "Notion", desc: "知识管理" },
      { name: "Linear", desc: "项目追踪" },
      { name: "Figma", desc: "协同设计" },
    ],
    color: "from-sky-500 to-cyan-500",
    bg: "bg-sky-50",
    text: "text-sky-700",
  },
  {
    icon: "🎥",
    title: "视频会议",
    count: 8,
    tools: [
      { name: "Zoom", desc: "视频会议" },
      { name: "Google Meet", desc: "在线会议" },
      { name: "Around", desc: "轻量会议" },
      { name: "Loom", desc: "异步视频" },
    ],
    color: "from-violet-500 to-purple-500",
    bg: "bg-violet-50",
    text: "text-violet-700",
  },
  {
    icon: "📋",
    title: "项目管理",
    count: 10,
    tools: [
      { name: "Trello", desc: "看板管理" },
      { name: "Asana", desc: "任务管理" },
      { name: "Monday", desc: "工作流" },
      { name: "ClickUp", desc: "全能协作" },
    ],
    color: "from-emerald-500 to-teal-500",
    bg: "bg-emerald-50",
    text: "text-emerald-700",
  },
  {
    icon: "💻",
    title: "开发工具",
    count: 15,
    tools: [
      { name: "VS Code", desc: "代码编辑" },
      { name: "GitHub", desc: "代码托管" },
      { name: "Vercel", desc: "部署平台" },
      { name: "Cursor", desc: "AI 编程" },
    ],
    color: "from-blue-500 to-indigo-500",
    bg: "bg-blue-50",
    text: "text-blue-700",
  },
  {
    icon: "🎨",
    title: "设计工具",
    count: 9,
    tools: [
      { name: "Figma", desc: "UI 设计" },
      { name: "Canva", desc: "图形设计" },
      { name: "Framer", desc: "网页设计" },
      { name: "Midjourney", desc: "AI 作图" },
    ],
    color: "from-pink-500 to-rose-500",
    bg: "bg-pink-50",
    text: "text-pink-700",
  },
  {
    icon: "💳",
    title: "财务工具",
    count: 7,
    tools: [
      { name: "Wise", desc: "跨境转账" },
      { name: "PayPal", desc: "在线支付" },
      { name: "Stripe", desc: "收款平台" },
      { name: "Deel", desc: "薪酬合规" },
    ],
    color: "from-amber-500 to-orange-500",
    bg: "bg-amber-50",
    text: "text-amber-700",
  },
  {
    icon: "🔒",
    title: "安全与 VPN",
    count: 6,
    tools: [
      { name: "NordVPN", desc: "网络安全" },
      { name: "1Password", desc: "密码管理" },
      { name: "Authy", desc: "双因素认证" },
      { name: "ProtonMail", desc: "加密邮件" },
    ],
    color: "from-slate-500 to-gray-600",
    bg: "bg-slate-50",
    text: "text-slate-700",
  },
  {
    icon: "📝",
    title: "生产力",
    count: 11,
    tools: [
      { name: "Obsidian", desc: "笔记系统" },
      { name: "Todoist", desc: "待办清单" },
      { name: "RescueTime", desc: "时间追踪" },
      { name: "Arc", desc: "浏览器" },
    ],
    color: "from-teal-500 to-cyan-500",
    bg: "bg-teal-50",
    text: "text-teal-700",
  },
];

const toolStats = [
  { value: "50+", label: "精选工具" },
  { value: "8", label: "分类" },
  { value: "15", label: "开发工具" },
  { value: "12", label: "协作工具" },
];

export default function Tools() {
  return (
    <section id="tools" className="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-4 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700">
            🚀 50+ 精选工具
          </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">
            数字游民必备工具精选，覆盖远程协作、开发、设计、财务等 8 大分类。
          </p>
        </div>

        <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {categories.map((cat) => (
            <div
              key={cat.title}
              className="card-hover group overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm"
            >
              <div className={`h-1.5 bg-gradient-to-r ${cat.color}`} />
              <div className="p-5">
                <div className="mb-3 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="text-2xl">{cat.icon}</span>
                    <h3 className="font-bold text-slate-900">{cat.title}</h3>
                  </div>
                  <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${cat.bg} ${cat.text}`}>
                    {cat.count}
                  </span>
                </div>
                <div className="space-y-2">
                  {cat.tools.map((tool) => (
                    <div
                      key={tool.name}
                      className="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-sm transition-colors group-hover:bg-slate-100/80"
                    >
                      <span className="font-medium text-slate-700">
                        {tool.name}
                      </span>
                      <span className="text-slate-400">{tool.desc}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Stats bar */}
        <div className="mt-14 grid grid-cols-2 gap-4 sm:grid-cols-4">
          {toolStats.map((s) => (
            <div
              key={s.label}
              className="rounded-2xl border border-slate-100 bg-white p-5 text-center shadow-sm"
            >
              <div className="text-3xl font-extrabold text-sky-600">
                {s.value}
              </div>
              <div className="mt-1 text-sm text-slate-500">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}