const features = [
  {
    icon: "🌏",
    title: "地点自由",
    desc: "在世界任何角落工作——咖啡馆、海滩、共享空间，你的办公室就是整个地球。告别固定工位，拥抱无限可能。",
  },
  {
    icon: "⚡",
    title: "技能变现",
    desc: "编程、设计、写作、营销、咨询……用你的专业技能换取全球收入，构建多元化的收入体系。",
  },
  {
    icon: "🔄",
    title: "工作生活平衡",
    desc: "自主安排时间，工作与旅行完美融合。按照自己的节奏生活，找到真正属于你的生活方式。",
  },
];

export default function Features() {
  return (
    <section id="features" 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">
          <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 className="hidden sm:block" />
            它让你在探索世界的同时，持续创造价值。
          </p>
        </div>

        <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((f) => (
            <div
              key={f.title}
              className="card-hover rounded-2xl border border-slate-100 bg-white p-8 shadow-sm"
            >
              <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-sky-50 text-3xl">
                {f.icon}
              </div>
              <h3 className="mb-3 text-xl font-bold text-slate-900">
                {f.title}
              </h3>
              <p className="leading-relaxed text-slate-600">{f.desc}</p>
            </div>
          ))}
        </div>

        <div className="mt-12 text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-5 py-2 text-sm font-medium text-amber-700">
            <span>🔥</span>
            全球已有超过 <span className="font-bold">3500 万</span> 数字游民
          </div>
        </div>
      </div>
    </section>
  );
}