/*
  Compare — the category wedge made concrete. Two maps:
    studio   → vs the codegen builders (Lovable / v0 / Bolt / Cursor / Claude).
    business → vs automation hubs + the "AI employee / cofounder" cohort.
  Rows are the capabilities they STOP at that we don't. Honest, not fabricated.
*/
const COMPARE = {
  studio: {
    label: 'THE DIFFERENCE · VS. THE CODE GENERATORS',
    title: <>They stop at the <Italic>screen</Italic>.</>,
    sub: 'Prototype tools hand you a UI to finish yourself. Here is the exact line where they stop — and the Architect keeps going.',
    cols: ['Lovable · v0 · Bolt', 'Cursor · Claude Code', 'AutoArchitect Studio'],
    rows: [
      ['Real backend + processes (Postgres/cron) in the app', 'Hosted BaaS only', 'Edits your local code', true],
      ['Multi-page state survives iteration', 'Regen churns prior files', 'Context gaps on big repos', true],
      ['Any domain, no templates', 'Template convergence', 'Codebase-dependent', true],
      ['Self-hosted · MIT · BYO-LLM', 'Mostly closed SaaS', 'Editor, not a platform', true],
      ['Verification loop before it ships', 'None', 'None', true],
      ['No per-generation token slot-machine', 'Credit/token burn', 'Token/quota burn', true],
    ],
  },
  business: {
    label: 'THE DIFFERENCE · VS. AUTOMATION & AI-EMPLOYEE TOOLS',
    title: <>They wire tools. <Italic>We run the company</Italic>.</>,
    sub: 'Automation connects apps you already bought; AI-employee tools ship one bot. Here is where they stop — and the AI team keeps operating.',
    cols: ['Zapier · Make · n8n · Trigger.dev', 'AI-employee / cofounder', 'AutoArchitect Business'],
    rows: [
      ['Generates the underlying apps too', 'Wire / code jobs on existing SaaS', 'Orchestrates existing SaaS', true],
      ['An AI team, not one bot', 'Task-bots / nodes', 'Single agent / function', true],
      ['End-user accounts + roles (RBAC)', 'No', 'No', true],
      ['Runs 24/7 across customers’ channels', 'Runs workflows', 'Per-function', true],
      ['Human approval on the big calls', 'n/a', 'Limited', true],
      ['Open-core engine you can own', 'No', 'All closed', true],
    ],
  },
};

const CheckChip = () => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 22, height: 22, borderRadius: 999,
    background: 'var(--accent-soft)', border: '1px solid var(--line-3)',
  }}>
    <I.check size={13} style={{ color: 'var(--accent-2)' }} strokeWidth={2.5} />
  </span>
);

const Compare = ({ mode }) => {
  const c = COMPARE[mode] || COMPARE.studio;
  // Bracket the winner column (last) with accent borders + a faint tint — no
  // solid flood-fill (that read as a "toy" slab).
  const win = { background: 'rgba(245,158,11,0.06)', borderLeft: '1px solid var(--accent)', borderRight: '1px solid var(--accent)' };
  return (
    <Section>
      <Container wide>
        <div style={{ maxWidth: 720, marginBottom: 34 }}>
          <SectionLabel index={3} label={c.label} />
          <DisplayTitle size={52}>{c.title}</DisplayTitle>
          {c.sub && <p style={{ marginTop: 18, fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, maxWidth: 640 }}>{c.sub}</p>}
        </div>
        <div style={{ overflowX: 'auto', border: '1px solid var(--line-2)', borderRadius: 16 }}>
          <table className="compare-table" style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5, minWidth: 720 }}>
            <thead>
              <tr>
                <th style={{ textAlign: 'left', padding: '16px 18px', color: 'var(--fg-3)', fontWeight: 500, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', width: '36%' }}>Capability</th>
                {c.cols.map((col, i) => {
                  const isWin = i === c.cols.length - 1;
                  return (
                    <th key={col} style={{
                      textAlign: 'left', padding: '16px 18px', fontFamily: 'var(--font-mono)',
                      fontSize: 11, letterSpacing: '0.04em',
                      color: isWin ? 'var(--accent-2)' : 'var(--fg-3)', fontWeight: isWin ? 700 : 500,
                      ...(isWin ? { ...win, borderTop: '1px solid var(--accent)' } : {}),
                    }}>{col}</th>
                  );
                })}
              </tr>
            </thead>
            <tbody>
              {c.rows.map((r, ri) => {
                const last = ri === c.rows.length - 1;
                return (
                  <tr key={ri} style={{ borderTop: '1px solid var(--line-1)' }}>
                    <td style={{ padding: '15px 18px', color: 'var(--fg-1)' }}>{r[0]}</td>
                    <td style={{ padding: '15px 18px', color: 'var(--fg-3)' }}><span style={{ color: 'var(--fg-4)' }}>— </span>{r[1]}</td>
                    <td style={{ padding: '15px 18px', color: 'var(--fg-3)' }}><span style={{ color: 'var(--fg-4)' }}>— </span>{r[2]}</td>
                    <td style={{ padding: '15px 18px', ...win, ...(last ? { borderBottom: '1px solid var(--accent)' } : {}) }}><CheckChip /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Container>
    </Section>
  );
};