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>

        <div className="relative mt-16">
          {/* Desktop: vertical timeline line */}
          <div className="absolute top-0 bottom-0 left-[27px] hidden w-0.5 bg-gradient-to-b from-sky-200 via-amber-200 to-rose-200 lg:left-1/2 lg:block lg:-translate-x-px" />

          <div className="space-y-6 lg:space-y-8">
            {days.map((d, i) => (
              <div
                key={d.day}
                className={`relative lg:flex lg:items-center lg:gap-8 ${
                  i % 2 === 0 ? "lg:flex-row" : "lg:flex-row-reverse"
                }`}
              >
                {/* Timeline dot (desktop) */}
                <div className="absolute left-1/2 top-8 z-10 hidden h-4 w-4 -translate-x-1/2 rounded-full border-4 border-white shadow-sm lg:block"
                  style={{ background: `var(--tw-shadow-color, #0ea5e9)` }}
                >
                  <div className={`h-full w-full rounded-full ${d.color}`} />
                </div>
                <div className="hidden lg:block lg:w-1/2" />

                <div className="card-hover w-full rounded-2xl border border-slate-100 bg-white p-6 shadow-sm lg:w-1/2">
                  <div className="flex items-start gap-4">
                    <div
                      className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-white text-sm font-bold ${d.color}`}
                    >
                      DAY {d.day}
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="mb-1 flex items-center gap-2">
                        <span className="text-xl">{d.icon}</span>
                        <h3 className="text-lg font-bold text-slate-900">
                          {d.title}
                        </h3>
                      </div>
                      <p className="text-sm leading-relaxed text-slate-600">
                        {d.desc}
                      </p>
                      <a
                        href={`/day/${d.day}`}
                        className="mt-3 inline-block text-sm font-medium text-sky-600 transition-colors hover:text-sky-700"
                      >
                        查看详情 →
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </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>
  );
}
