/*
  Moat section — "what makes this different from v0 / Lovable / Bolt".

  The story isn't "generate apps + iterate" — every conversational app
  builder does that. The story is the surface AROUND the build:

    • Full code editor with file explorer (not just chat-driven edits)
    • Connection framework (OAuth + API-key vault, generic over services)
    • Cron framework (schedule the deployed app's recurring work)
    • Subagents framework (parallel work spawned as tools, transcripts persisted)
    • Plugins (26-card catalog, each installed via chat — Architect integrates)
    • Build-time AND run-time intelligence (the deployed app keeps using LLM)

  Each card is a one-liner with concrete proof. No marketing soup.
*/

// Order matters — these render top-to-bottom in a 3-column auto-flow grid.
// Lead with the moat-defining surfaces (Connections / Plugins / Cron /
// Subagents) since those are what differentiate AutoArchitect from
// generic app builders. Mid-list goes to the runtime + per-app backend
// + archetype layers. Studio + mock-first close as supporting context.
const MOAT_ITEMS = [
  {
    icon: 'plug',
    label: 'Connections vault',
    body: 'Generic OAuth dance + API-key store, scoped per project. Architect builds with shape-correct mocks; you wire real credentials post-build via a single drawer. The same code path flips from mock to live without touching a file.',
    proof: '200+ connector skills · mock-first build · OAuth & API key · per-project vault',
  },
  {
    icon: 'stack',
    label: 'Growing plugin catalog',
    body: 'Themes, auth, billing, RAG, analytics, file storage, comments — install via chat. Architect writes the integration code; you watch the kanban card move.',
    proof: '25+ plugins shipped · install_prompt drives Architect · per-project scope',
  },
  {
    icon: 'clock',
    label: 'Cron jobs',
    body: 'Schedule recurring work in the deployed app: chat the user, run a bash command, hit a connection, spawn a subagent. 30-second tick scheduler.',
    proof: '4 action types · cron expressions · activity-fed event log',
  },
  {
    icon: 'sparkle',
    label: 'Subagents in parallel',
    body: 'When work parallelises, Architect spawns focused subagents as tools — typed budget, tool subset, transcripts persisted, parent supervises.',
    proof: 'spawn_agent tool · 2-level hard tree · transcript replay',
  },
  {
    icon: 'cpu',
    label: 'Runtime intelligence',
    body: 'The deployed app calls back to the LLM at run-time, not just build-time. RAG queries, llm_extract, llm_classify — the app stays smart after ship.',
    proof: 'Knowledge plugin · /api/knowledge/query · embedding-backed retrieval',
  },
  {
    icon: 'cpu',
    label: 'Per-app backend layer',
    body: 'Every generated app ships with a workspace/api/*.ts directory. Drop a one-liner export default { __collection: "contacts" } and you get full CRUDL persisted in a per-project KV — no Hono boilerplate, no separate backend deploy.',
    proof: 'Auto-CRUDL one-liner · custom handlers · useApi hook on the frontend · health checks always wired',
  },
  {
    icon: 'sparkle',
    label: 'Archetype scaffolds',
    body: 'Short prompts ("build me a CRM") trigger Plan Mode: Architect picks from a curated archetype catalog (CRM, kanban, knowledge base, appointment booking…), writes a PRD with acceptance criteria, then builds against that bar. Quality compounds across builds.',
    proof: '10+ archetypes · auto-discovery · acceptance criteria → kanban cards',
  },
  {
    icon: 'code',
    label: 'Full code editor',
    body: 'Monaco editor with the workspace\'s real files — drop into any line, edit, save. Not a chat-only black box.',
    proof: 'Real file tree · TS / JSX intellisense · Save = workspace version bump',
  },
  {
    icon: 'plug',
    label: 'Mock-first iteration',
    body: 'Architect builds against shape-correct mocks before any creds are wired. First successful live call captures + anonymizes a real response, used as the highest-fidelity preview mock thereafter — preview keeps looking like YOUR data even with no auth.',
    proof: 'Spec-driven mocks · captured anonymized samples · 4-tier fallback chain',
  },
  {
    icon: 'stack',
    label: 'Studio surface',
    body: 'The Studio is where you drive Architect: chat, kanban, code editor, deploy, costs, connection drawer, persisted live activity feed. Refresh-survive: tool events recover from the runtime if you closed the tab mid-build.',
    proof: 'Live tool feed · drag-drop kanban · Monaco code editor · sticky deploy URLs',
  },
];

const MoatSection = () => (
  <section style={{ paddingTop: 96, paddingBottom: 56, position: 'relative' }}>
    <Container wide>
      <div style={{ maxWidth: 760, marginBottom: 36 }}>
        <SectionLabel index={0} label="WHY AUTOARCHITECT" />
        <DisplayTitle size={48}>
          Not another <Italic>app generator.</Italic>
        </DisplayTitle>
        <p style={{
          marginTop: 16, fontSize: 16, color: 'var(--fg-2)',
          maxWidth: 660, lineHeight: 1.55,
        }}>
          Every conversational builder ships chat → app. AutoArchitect ships
          chat → app <strong style={{ color: 'var(--fg-1)' }}>plus the platform around it</strong>:
          real code editor, OAuth vault, cron scheduler, parallel subagents,
          a 25+ plugin catalog, and runtime intelligence the deployed app
          inherits. End-to-end. Self-hosted, with the code in your hands.
        </p>
        <p style={{
          marginTop: 12, fontSize: 14.5, color: 'var(--fg-3)',
          maxWidth: 660, lineHeight: 1.55,
        }}>
          Architect builds the app with mocks shaped to real APIs, then the
          left rail tells you exactly which connections need credentials.
          Nothing to plumb mid-build. Nothing hidden behind a SaaS wall.
          v0 / Lovable / Bolt stop at "the website is generated."
        </p>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
        gap: 16,
      }}>
        {MOAT_ITEMS.map((item) => {
          const Icon = I[item.icon] || I.sparkle;
          return (
            <div
              key={item.label}
              className="force-dark-panel"
              style={{
                background: 'var(--bg-1)',
                border: '1px solid var(--line-2)',
                borderRadius: 12,
                padding: 20,
                position: 'relative',
                overflow: 'hidden',
              }}
            >
              {/* Subtle accent line at the top */}
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                background: 'linear-gradient(90deg, var(--accent), var(--accent-2))',
                opacity: 0.7,
              }} />
              <div style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                width: 32, height: 32, borderRadius: 8,
                background: 'var(--accent-soft)',
                color: 'var(--accent-2)',
                marginBottom: 14,
              }}>
                <Icon size={16} />
              </div>
              <h3 style={{
                margin: 0, fontSize: 16, fontWeight: 600,
                color: 'var(--fg-1)',
                letterSpacing: '-0.01em',
              }}>
                {item.label}
              </h3>
              <p style={{
                margin: '8px 0 12px', fontSize: 13.5, lineHeight: 1.55,
                color: 'var(--fg-2)',
                textWrap: 'pretty',
              }}>
                {item.body}
              </p>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 10.5,
                color: 'var(--fg-3)',
                letterSpacing: '0.04em',
                paddingTop: 10,
                borderTop: '1px dashed var(--line-1)',
              }}>
                {item.proof}
              </div>
            </div>
          );
        })}
      </div>
    </Container>
  </section>
);

window.MoatSection = MoatSection;