<template>
  <section id="how-it-works" 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">The feedback loop</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      How specs stay alive
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-12">
      Specwright creates a continuous loop between specs, code, and tickets. Every PR makes the system smarter. Every merge keeps docs accurate.
    </p>

    <div class="max-w-3xl mx-auto">
      <div class="space-y-0">
        <div v-for="(step, i) in steps" :key="i" class="grid grid-cols-[3rem_1fr] gap-4">
          <div class="flex flex-col items-center">
            <div class="w-3 h-3 rounded-full bg-gradient-to-r from-accent-500 to-cyan-400 mt-1.5 shrink-0"></div>
            <div v-if="i < steps.length - 1" class="w-0.5 grow bg-border-light dark:bg-slate-800 min-h-8"></div>
          </div>
          <div class="pb-6">
            <h4 class="font-display font-semibold text-base text-slate-900 dark:text-white mb-1">{{ step.title }}</h4>
            <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{{ step.description }}</p>
          </div>
        </div>
      </div>

      <div class="text-center mt-4 p-4 rounded-xl bg-surface-light-elevated dark:bg-surface-elevated border border-border-light dark:border-slate-800">
        <p class="text-sm font-medium text-accent-500">
          Updated docs feed back into the knowledge base &mdash; richer context for the next PR.
        </p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const steps = [
  {
    title: 'PM writes a structured spec',
    description: 'Define requirements, acceptance criteria, owners, and teams in markdown. Specs live in your repo — version controlled, reviewable, always the source of intent.',
  },
  {
    title: 'Agent indexes all markdown',
    description: 'On every push, Specwright indexes specs, READMEs, ADRs, architecture docs, and guides. Every doc becomes searchable and available as context for AI analysis.',
  },
  {
    title: 'Tickets created from spec sections',
    description: 'Each spec section generates a ticket in Jira, Linear, or GitHub Issues. Links are embedded as hidden comments. Engineers work tickets as normal.',
  },
  {
    title: 'Engineer opens a PR',
    description: 'The agent analyzes the diff against all indexed docs. It evaluates whether acceptance criteria are realized, flags conflicts, and identifies undocumented behavior.',
  },
  {
    title: 'PR merges, docs update',
    description: 'The agent generates doc-update PRs for any affected markdown. Spec sections auto-transition to "done" when the code verifies all acceptance criteria.',
  },
  {
    title: 'Stale docs flagged proactively',
    description: 'A scheduled scan compares doc freshness against code changes. If code changed but docs didn\'t, the agent opens an issue with links to the relevant PRs.',
  },
]
</script>
