<script setup lang="ts">
import TerminalMockup from './TerminalMockup.vue'
</script>

<template>
  <section id="cli" class="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
    <p class="font-mono text-xs uppercase tracking-[0.15em] text-accent-500 text-center mb-3">Developer experience</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Specs where you already work
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-12">
      A CLI for your terminal, skills for Claude Code, and MCP for any AI editor. No context switching.
    </p>

    <div class="grid lg:grid-cols-2 gap-6 sm:gap-8">
      <!-- CLI commands -->
      <TerminalMockup title="specwright CLI">
        <div class="space-y-4">
          <div>
            <div><span class="text-accent-500">$</span> <span class="text-slate-900 dark:text-white">specwright setup</span></div>
            <div class="text-slate-500 dark:text-slate-500 ml-2">Created docs/specs/_template.md</div>
            <div class="text-slate-500 dark:text-slate-500 ml-2">Created SPECWRIGHT.yaml</div>
          </div>
          <div>
            <div><span class="text-accent-500">$</span> <span class="text-slate-900 dark:text-white">specwright plan docs/specs/payments.md</span></div>
            <div class="text-slate-500 dark:text-slate-500 ml-2">Payments Overhaul &mdash; 3 sections, 9 ACs</div>
            <div class="ml-2 mt-1 text-slate-600 dark:text-slate-400">
              <div>&sect;3.2 Retry Logic&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-amber-500">[todo]</span>&nbsp;&nbsp;3 ACs</div>
              <div>&sect;3.3 Idempotency Keys&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-amber-500">[todo]</span>&nbsp;&nbsp;4 ACs</div>
              <div>&sect;4.1 Monitoring&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-amber-500">[todo]</span>&nbsp;&nbsp;2 ACs</div>
            </div>
          </div>
          <div>
            <div><span class="text-accent-500">$</span> <span class="text-slate-900 dark:text-white">specwright verify docs/specs/payments.md</span></div>
            <div class="ml-2 mt-1 text-slate-600 dark:text-slate-400">
              <div>&sect;3.2 Retry Logic</div>
              <div class="ml-2"><span class="text-emerald-500">&#10003;</span> AC1 Exponential backoff&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-emerald-500">[realized]</span></div>
              <div class="ml-2"><span class="text-amber-500">&#9888;</span> AC2 Max 3 retries&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-amber-500">[conflict]</span></div>
              <div class="ml-2"><span class="text-slate-400">&#9744;</span> AC3 Idempotency key&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-slate-400">[not found]</span></div>
            </div>
          </div>
          <div>
            <div><span class="text-accent-500">$</span> <span class="text-slate-900 dark:text-white">specwright status</span></div>
            <div class="ml-2 mt-1 text-slate-600 dark:text-slate-400">
              <div>Payments Overhaul&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-accent-500">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span><span class="text-slate-300 dark:text-slate-700">&#9608;&#9608;&#9608;&#9608;</span>&nbsp;&nbsp;62%</div>
              <div>Auth Migration&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-emerald-500">&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;&#9608;</span>&nbsp;&nbsp;100%</div>
            </div>
          </div>
        </div>
      </TerminalMockup>

      <!-- Claude Code / MCP -->
      <TerminalMockup title="Claude Code + MCP">
        <div class="space-y-4">
          <div>
            <div class="text-slate-500 dark:text-slate-500"># In Claude Code, Cursor, or VS Code:</div>
          </div>
          <div>
            <div><span class="text-accent-500">&gt;</span> <span class="text-slate-900 dark:text-white">"What does the spec say about retry handling?"</span></div>
          </div>
          <div class="text-cyan-500 dark:text-cyan-400">
            <div>From payments-overhaul.md &sect;3.2:</div>
            <div class="ml-2">Exponential backoff, max 3 retries, with jitter.</div>
            <div class="ml-2">Idempotency key preserved across retries.</div>
          </div>
          <div class="text-cyan-500 dark:text-cyan-400">
            <div>Current code (src/payments/retry.ts:42):</div>
            <div class="ml-2 text-amber-400">Max retries is 5 &mdash; conflicts with spec.</div>
          </div>
          <div class="border-t border-border-light dark:border-slate-800 pt-4">
            <div><span class="text-accent-500">&gt;</span> <span class="text-slate-900 dark:text-white">/sw:task &sect;3.2</span></div>
          </div>
          <div class="text-cyan-500 dark:text-cyan-400">
            <div>Starting task: &sect;3.2 Retry Logic</div>
            <div class="ml-2">&#9744; AC1: Exponential backoff</div>
            <div class="ml-2">&#9744; AC2: Max 3 retries</div>
            <div class="ml-2">&#9744; AC3: Preserve idempotency key</div>
            <div class="mt-1">Let me implement each AC...</div>
          </div>
        </div>
      </TerminalMockup>
    </div>
  </section>
</template>
