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

const principles = [
  {
    title: "Frontmatter is law",
    body: "If it is not in YAML at the top of the file, it is not part of the contract. Agents read the same fields humans edit.",
  },
  {
    title: "Repo-native backlog",
    body: "plans/ lives in git. Submatter syncs — it does not replace your source of truth.",
  },
  {
    title: "Humans at the gates",
    body: "Convoys pause for approval. Nothing merges because an agent got confident.",
  },
  {
    title: "Tenant-scoped everything",
    body: "workspace_id on every row. Multitenancy is not a migration you schedule for later.",
  },
] as const;

export function ManifestSection() {
  return (
    <section id="manifest" className="marketing-paper-grain border-b border-foreground bg-background py-24 sm:py-32">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <Reveal className="mb-16">
          <p className="font-mono-brand text-[11px] uppercase tracking-[0.24em] text-muted-foreground">Manifest</p>
          <h2 className="mt-4 max-w-3xl font-marketing text-[clamp(2rem,5vw,3.25rem)] font-semibold leading-[1.08] tracking-[-0.03em]">
            We are not building another chat box with a kanban view glued on.
          </h2>
        </Reveal>

        <div className="grid gap-0 border border-foreground lg:grid-cols-2">
          {principles.map((item, i) => (
            <Reveal key={item.title} delay={i * 0.06}>
              <article
                className={`border-foreground p-8 ${i % 2 === 0 ? "lg:border-r" : ""} ${i < 2 ? "border-b" : ""}`}
              >
                <h3 className="font-marketing text-lg font-semibold tracking-[-0.02em]">{item.title}</h3>
                <p className="mt-3 font-marketing text-sm leading-relaxed text-muted-foreground">{item.body}</p>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.2} className="mt-16 border-l-4 border-matter pl-6">
          <p className="font-marketing text-lg leading-relaxed text-foreground">
            Subagents. Frontmatter. One workspace.
          </p>
          <p className="mt-2 font-mono-brand text-[11px] text-muted-foreground">
            kind: manifest · version: 2 · status: locked
          </p>
        </Reveal>
      </div>
    </section>
  );
}