<template>
  <section id="capabilities" 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">Capabilities</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Everything specs need to drive development
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-12">
      Install as a GitHub App across your entire org. Write specs, push code, let the agent handle the rest.
    </p>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
      <div
        v-for="(feature, i) in features"
        :key="i"
        class="rounded-xl p-6 bg-surface-light-elevated dark:bg-surface-elevated border border-border-light dark:border-slate-800 hover:border-accent-400 dark:hover:border-accent-600 transition-colors"
      >
        <p class="font-mono text-xs uppercase tracking-wider text-accent-500 mb-3">{{ feature.label }}</p>
        <h3 class="font-display font-semibold text-lg text-slate-900 dark:text-white mb-2">{{ feature.title }}</h3>
        <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{{ feature.description }}</p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const features = [
  {
    label: '01 / parse',
    title: 'Structured Spec Parser',
    description: 'Markdown with frontmatter, numbered sections, acceptance criteria, and status tracking. Specs are the input; agents are the runtime.',
  },
  {
    label: '02 / verify',
    title: 'Code-Aware Verification',
    description: 'The agent reads code to verify that acceptance criteria are actually implemented — not just that a ticket was closed. CLI and PR-level verification.',
  },
  {
    label: '03 / review',
    title: 'Spec-Aware PR Analysis',
    description: 'When a PR opens, Claude analyzes the diff against all relevant docs. It identifies which spec sections are addressed, flags discrepancies, and catches stale docs.',
  },
  {
    label: '04 / sync',
    title: 'Bidirectional Ticket Sync',
    description: 'Spec sections generate tickets in Jira, Linear, or GitHub Issues. Close a ticket and the spec updates; mark a section done and the ticket closes.',
  },
  {
    label: '05 / dashboard',
    title: 'Coverage Dashboard',
    description: 'Track spec completion across sections and acceptance criteria. Org-wide coverage by repo, team, and status. Know exactly what\'s shipped vs. planned.',
  },
  {
    label: '06 / cli',
    title: 'CLI & Agent Skills',
    description: 'The specwright CLI provides plan, verify, status, start, and done commands. Claude Code skills give agents spec context for task-driven development.',
  },
]
</script>
