heicode-win/website/components/paradigm.tsx

import { CheckCircle2 } from "lucide-react";

const paradigms = [
  {
    name: "个人开发者",
    tagline: "单人工作流，完整的交付追踪",
    description: "独立开发者也需要记录「做了什么」「为什么这样做」「如何验证」",
    minTeam: 1,
    maxTeam: 1,
    roles: ["开发者（全栈角色）"],
    features: [
      "构想→实现→验证→发布",
      "本地与远程一体化",
      "关键产物自动对齐",
      "自我审计与版本追踪",
    ],
  },
  {
    name: "瀑布范式",
    tagline: "阶段闸门与可审计链条",
    description: "适合强合规、长评审链的组织语境",
    minTeam: 5,
    maxTeam: 9,
    roles: ["WF-BA 业务分析师", "WF-ARC 架构师", "WF-DEV 工程师", "WF-QA 测试", "WF-REL 发布运维"],
    features: [
      "规格→设计→实现→验证→上线",
      "阶段闸门强、评审链长",
      "关键闸门不被静默跳过",
      "可扩展至 9 个专岗",
    ],
  },
  {
    name: "敏捷范式",
    tagline: "短迭代与跨职能闭环",
    description: "适合快速试错的产品语境",
    minTeam: 3,
    maxTeam: 8,
    roles: ["AG-PO 产品负责人", "AG-DEV 工程师", "AG-QA 测试"],
    features: [
      "迭代短、反馈密",
      "跨职能团队闭环",
      "独立质量门禁",
      "可扩展双轨并行",
    ],
  },
];

export function Paradigm() {
  return (
    <section id="paradigm" 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-muted-foreground">
            无论规模如何，都能保持交付过程的可追溯与责任清晰
          </p>
        </div>

        <div className="mt-16 grid gap-8 lg:grid-cols-3">
          {paradigms.map((paradigm) => (
            <div
              key={paradigm.name}
              className="rounded-xl border border-border bg-card/50 p-8"
            >
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-2xl font-bold">{paradigm.name}</h3>
                  <p className="mt-1 text-sm text-accent">{paradigm.tagline}</p>
                </div>
                <div className="text-right">
                  <p className="text-3xl font-bold">{paradigm.minTeam}-{paradigm.maxTeam}</p>
                  <p className="text-xs text-muted-foreground">执行单元</p>
                </div>
              </div>

              <p className="mt-4 text-sm text-muted-foreground">
                {paradigm.description}
              </p>

              <div className="mt-6 border-t border-border pt-6">
                <p className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
                  最小编队角色
                </p>
                <div className="flex flex-wrap gap-2">
                  {paradigm.roles.map((role) => (
                    <span
                      key={role}
                      className="rounded-md bg-secondary px-2 py-1 text-xs font-mono"
                    >
                      {role}
                    </span>
                  ))}
                </div>
              </div>

              <div className="mt-6 border-t border-border pt-6">
                <p className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
                  特征
                </p>
                <ul className="space-y-2">
                  {paradigm.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm">
                      <CheckCircle2 className="h-4 w-4 text-accent" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 rounded-xl border border-accent/30 bg-accent/5 p-6 text-center">
          <p className="text-sm text-muted-foreground">
            <span className="font-medium text-foreground">超出协调上限时</span>：
            拆分子系统、拆分 Squad 或引入共享平台能力，而不是在同一队列上无限堆角色
          </p>
        </div>
      </div>
    </section>
  );
}