const phases = [
  {
    phase: "对齐",
    description: "身份、策略与叙事口径一致，避免「各说各话」",
    status: "进行中",
  },
  {
    phase: "贯通",
    description: "人机链路在一条交付故事线下可走通，关键闸门有据可查",
    status: "规划中",
  },
  {
    phase: "规模化",
    description: "编队模板与审批策略可按组织复制，而不是单次项目手工拼装",
    status: "展望",
  },
];

export function Roadmap() {
  return (
    <section className="py-20 sm:py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium tracking-widest text-accent uppercase">
            阶段性方向
          </p>
          <h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
            三层递进
          </h2>
          <p className="mt-4 text-sm text-muted-foreground">
            仅给出时间无序的递进意象，方便对齐讨论；不绑定季度、不设里程碑编号
          </p>
        </div>

        <div className="mt-16">
          <div className="relative">
            {/* Connection Line */}
            <div className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-gradient-to-b from-accent/50 via-border to-border hidden lg:block" />
            
            <div className="grid gap-8 lg:grid-cols-3">
              {phases.map((item, index) => (
                <div key={item.phase} className="relative">
                  {/* Circle Indicator */}
                  <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full border-2 border-accent/30 bg-background">
                    <span className="text-2xl font-bold text-accent">{index + 1}</span>
                  </div>
                  
                  <div className="rounded-xl border border-border bg-card/50 p-6 text-center">
                    <span className="inline-block rounded-full bg-accent/10 px-3 py-1 text-xs font-medium text-accent">
                      {item.status}
                    </span>
                    <h3 className="mt-4 text-xl font-bold">{item.phase}</h3>
                    <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                      {item.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}