import { Reveal, Stagger, StaggerItem } from "@/components/marketing/reveal";

const capabilities = [
  {
    index: "01",
    title: "Markdown backlog",
    body: "Plan / Epic / Task files in git. Frontmatter is the schema agents and humans both read.",
    mono: "plans/Plan-*/Epic-*/Task-*.md",
  },
  {
    index: "02",
    title: "Bidirectional sync",
    body: "Importer mirrors YAML into Postgres. Cursor mappings keep slugs aligned with agent ids.",
    mono: "watch:markdown-backlog",
  },
  {
    index: "03",
    title: "MCP lifecycle",
    body: "claim_task → work → complete_task. Auditable runs instead of ad-hoc object patches.",
    mono: "workspace_id scoped",
  },
  {
    index: "04",
    title: "Convoy gates",
    body: "Role-based subagents with human approval between architect, implementer, and reviewer.",
    mono: "ready → in_progress → done",
  },
  {
    index: "05",
    title: "Full workspace",
    body: "Docs, boards, forms, whiteboards — one object model, not a task queue bolted on.",
    mono: "multitenant · workspace_id",
  },
  {
    index: "06",
    title: "Model routing",
    body: "Per-role tiers in convoy frontmatter — fast implementers, premium architects.",
    mono: "model_policy: composer-fast",
  },
] as const;

export function FeaturesSection() {
  return (
    <section id="features" className="marketing-paper-grain border-b border-foreground bg-background py-24 sm:py-32">
      <div className="relative mx-auto max-w-6xl px-4 sm:px-6">
        <Reveal className="mb-16 grid gap-8 lg:grid-cols-12 lg:items-end">
          <div className="lg:col-span-8">
            <p className="font-mono-brand text-[11px] uppercase tracking-[0.24em] text-muted-foreground">Capabilities</p>
            <h2 className="mt-4 font-marketing text-[clamp(2rem,5vw,3.5rem)] font-semibold leading-[1.05] tracking-[-0.03em]">
              Built for the agent pipeline era — not the slide-deck era.
            </h2>
          </div>
          <p className="font-marketing text-sm leading-relaxed text-muted-foreground lg:col-span-4 lg:text-right">
            Swiss grid. Zero decoration. Every line earns its place.
          </p>
        </Reveal>

        <Stagger className="grid border border-foreground lg:grid-cols-2 [&>*]:border-b [&>*]:border-foreground [&>*:last-child]:border-b-0 lg:[&>*:nth-child(odd)]:border-r lg:[&>*:nth-last-child(-n+2)]:border-b-0">
          {capabilities.map((item) => (
            <StaggerItem key={item.index} className="p-8">
              <p className="font-mono-brand text-[11px] text-matter">{item.index}</p>
              <h3 className="mt-4 font-marketing text-xl font-semibold tracking-[-0.02em]">{item.title}</h3>
              <p className="mt-3 font-marketing text-sm leading-relaxed text-muted-foreground">{item.body}</p>
              <p className="mt-6 font-mono-brand text-[11px] text-foreground">{item.mono}</p>
            </StaggerItem>
          ))}
        </Stagger>
      </div>
    </section>
  );
}