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

const steps = [
  {
    n: "01",
    title: "Write in plans/",
    body: "YAML frontmatter on every Plan, Epic, and Task. Versioned in git like the rest of your codebase.",
    code: "plans/Plan-*/Epic-*/Task-*.md",
  },
  {
    n: "02",
    title: "Sync to Submatter",
    body: "Importer mirrors frontmatter into Postgres. Cursor mappings keep agent ids aligned with slugs.",
    code: "watch:markdown-backlog",
  },
  {
    n: "03",
    title: "Agents claim work",
    body: "Subagents call MCP tools against a scoped workspace_id. Runs appear in fleet history.",
    code: "claim_task → complete_task",
  },
  {
    n: "04",
    title: "Humans gate convoys",
    body: "Reviewer and architect roles pause for approval. Status flows back to markdown on merge.",
    code: "ready → in_progress → done",
  },
] as const;

export function HowItWorksSection() {
  return (
    <section id="pipeline" className="border-b border-border bg-card py-20 sm:py-28">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <Reveal className="mb-14 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
          <div className="max-w-xl">
            <p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
              How it works
            </p>
            <h2 className="mt-4 font-marketing text-3xl font-semibold tracking-[-0.02em] text-foreground sm:text-4xl">
              From frontmatter to shipped
            </h2>
          </div>
          <p className="max-w-sm font-marketing text-sm text-muted-foreground lg:text-right">
            Interactive product demo pattern — show the file, show the pipeline, show the gate.
          </p>
        </Reveal>

        <Stagger className="relative grid gap-0 md:grid-cols-4">
          <div
            className="absolute left-0 right-0 top-8 hidden h-px bg-border md:block"
            aria-hidden
          />
          {steps.map((step) => (
            <StaggerItem key={step.n} className="relative border-t border-border pt-8 md:border-t-0 md:pt-0">
              <div className="md:px-4 md:first:pl-0 md:last:pr-0">
                <div className="mb-6 flex items-center gap-3">
                  <span className="flex size-8 items-center justify-center rounded-full border border-border bg-background font-mono-brand text-xs text-foreground">
                    {step.n}
                  </span>
                  <span className="hidden h-px flex-1 bg-border md:block" aria-hidden />
                </div>
                <h3 className="font-marketing text-base font-semibold text-foreground">{step.title}</h3>
                <p className="mt-2 font-marketing text-sm leading-relaxed text-muted-foreground">{step.body}</p>
                <p className="mt-4 font-mono-brand text-[11px] text-primary">{step.code}</p>
              </div>
            </StaggerItem>
          ))}
        </Stagger>
      </div>
    </section>
  );
}