const days = [
  {
    day: 1,
    icon: "👋",
    title: "认识数字游民",
    desc: "了解数字游民的真正含义，评估这种生活方式是否适合你，破除常见误解。",
    color: "bg-sky-500",
  },
  {
    day: 2,
    icon: "💡",
    title: "发现远程技能",
    desc: "掌握最受欢迎的远程工作技能，从编程、设计到内容创作，找到你的方向。",
    color: "bg-cyan-500",
  },
  {
    day: 3,
    icon: "💰",
    title: "构建收入体系",
    desc: "自由职业、远程全职、被动收入、在线课程，构建可持续的多元收入来源。",
    color: "bg-teal-500",
  },
  {
    day: 4,
    icon: "🛠️",
    title: "工具武装",
    desc: "生产力工具、通讯协作、项目管理、云服务，打造你的移动办公装备库。",
    color: "bg-emerald-500",
  },
  {
    day: 5,
    icon: "📋",
    title: "签证与法律",
    desc: "数字游民签证政策、税务规划、海外保险、银行账户，搞定法律合规问题。",
    color: "bg-amber-500",
  },
  {
    day: 6,
    icon: "🗺️",
    title: "目的地指南",
    desc: "热门数字游民城市推荐，生活成本对比、网速测评、社区活跃度一目了然。",
    color: "bg-orange-500",
  },
  {
    day: 7,
    icon: "🚀",
    title: "启程出发",
    desc: "打包清单、过渡计划、第一站选择建议，从规划到行动的最后一步。",
    color: "bg-rose-500",
  },
];

export default function Roadmap() {
  return (
    <section id="roadmap" 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">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
            7天<span className="gradient-text">学习路径</span>
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
            从入门到出发，每天一个主题，循序渐进开启你的数字游民之旅。
          </p>
        </div>

        {/* 参考 openclaw101.dev：卡片网格，非时间轴 */}
        <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {days.map((d) => (
            <a
              key={d.day}
              href={`/day/${d.day}`}
              className="card-hover group flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md"
            >
              <div className="flex items-center gap-3">
                <div
                  className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white ${d.color}`}
                >
                  DAY {d.day}
                </div>
                <span className="text-xl">{d.icon}</span>
                <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600">
                  {d.title}
                </h3>
              </div>
              <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600">
                {d.desc}
              </p>
              <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600">
                查看详情 →
              </span>
            </a>
          ))}
        </div>

        {/* Training camp CTA */}
        <div className="mt-16 overflow-hidden rounded-2xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 p-8 text-center sm:p-10">
          <div className="mb-2 text-sm font-semibold text-amber-600">
            🎓 实战训练营
          </div>
          <h3 className="text-2xl font-bold text-slate-900">
            数字游民实战课
          </h3>
          <p className="mx-auto mt-3 max-w-xl text-slate-600">
            21节视频课程，手把手带你从零规划专属数字游民路线，打通远程工作全流程
          </p>
          <a
            href="/course"
            className="mt-6 inline-flex items-center gap-2 rounded-full bg-amber-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-amber-600"
          >
            了解详情 →
          </a>
        </div>
      </div>
    </section>
  );
}