<template>
  <section 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">Setup</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Self-hosted, your data stays yours
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-12">
      Deploy with Helm or Docker Compose and connect your GitHub org. Three steps to spec-driven development.
    </p>

    <div class="grid sm:grid-cols-3 gap-8 max-w-4xl mx-auto">
      <div v-for="(step, i) in steps" :key="i" class="text-center">
        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-accent-500 to-cyan-400 text-white flex items-center justify-center font-display font-bold text-xl mx-auto mb-4">
          {{ i + 1 }}
        </div>
        <h3 class="font-display font-semibold text-lg text-slate-900 dark:text-white mb-2">{{ step.title }}</h3>
        <p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{{ step.description }}</p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const steps = [
  {
    title: 'Install the GitHub App',
    description: 'One click installs Specwright across your org. It subscribes to pushes, PRs, and issues. Select all repos or choose specific ones.',
  },
  {
    title: 'Deploy the platform',
    description: 'Use the Helm chart for Kubernetes or docker compose for local development. Requires an Anthropic API key for Claude agent capabilities.',
  },
  {
    title: 'Write specs and push',
    description: 'Add structured markdown to docs/specs/ in any repo. Optionally add SPECWRIGHT.yaml for per-repo config. Every push indexes your docs.',
  },
]
</script>
