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

const rows = [
  { label: "Markdown backlog in git", sbmtr: true, linear: false, notion: "partial", convoy: false },
  { label: "MCP claim / complete", sbmtr: true, linear: false, notion: false, convoy: true },
  { label: "Full workspace surface", sbmtr: true, linear: "partial", notion: true, convoy: false },
  { label: "Role-based convoys", sbmtr: true, linear: false, notion: false, convoy: true },
  { label: "Human approval gates", sbmtr: true, linear: false, notion: false, convoy: "partial" },
] as const;

function Cell({ value }: { value: boolean | string }) {
  if (value === true) return <span className="font-mono-brand text-agent">yes</span>;
  if (value === false) return <span className="text-muted-foreground/50">—</span>;
  return <span className="font-mono-brand text-matter">{value}</span>;
}

export function ComparisonSection() {
  return (
    <section className="border-b border-border bg-background py-20 sm:py-28">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <Reveal className="mb-10 max-w-2xl">
          <p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-muted-foreground">Compare</p>
          <h2 className="mt-4 font-marketing text-3xl font-semibold tracking-[-0.02em] text-foreground">
            The agent-native lane
          </h2>
        </Reveal>

        <Reveal delay={0.08}>
          <div className="overflow-x-auto">
            <table className="w-full min-w-[640px] border-collapse text-left text-sm">
              <thead>
                <tr className="border-b-2 border-foreground">
                  <th className="py-3 pr-4 font-marketing font-medium text-muted-foreground" scope="col">
                    Capability
                  </th>
                  <th
                    className="px-4 py-3 font-display text-xs font-extrabold tracking-[0.2em] text-foreground"
                    scope="col"
                  >
                    SBMTR
                  </th>
                  <th className="px-4 py-3 font-marketing font-medium text-muted-foreground" scope="col">
                    Linear
                  </th>
                  <th className="px-4 py-3 font-marketing font-medium text-muted-foreground" scope="col">
                    Notion
                  </th>
                  <th className="px-4 py-3 font-marketing font-medium text-muted-foreground" scope="col">
                    Convoy tools
                  </th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row) => (
                  <tr key={row.label} className="border-b border-border">
                    <td className="py-4 pr-4 font-marketing text-foreground">{row.label}</td>
                    <td className="px-4 py-4">
                      <Cell value={row.sbmtr} />
                    </td>
                    <td className="px-4 py-4">
                      <Cell value={row.linear} />
                    </td>
                    <td className="px-4 py-4">
                      <Cell value={row.notion} />
                    </td>
                    <td className="px-4 py-4">
                      <Cell value={row.convoy} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Reveal>
      </div>
    </section>
  );
}