<script setup lang="ts">
import MarketingNav from '@/components/marketing/MarketingNav.vue'
import MarketingFooter from '@/components/marketing/MarketingFooter.vue'

const sections = [
  {
    title: 'Getting Started',
    items: [
      { label: 'Self-Hosting Guide', href: 'https://github.com/Gerner-Ventures/gv-exp-specwright/blob/main/docs/self-hosting.md', description: 'Deploy Specwright on your own infrastructure with Helm or Docker Compose.' },
      { label: 'Writing Your First Spec', href: 'https://github.com/Gerner-Ventures/gv-exp-specwright/blob/main/docs/specs/_template.md', description: 'Spec format reference with frontmatter, sections, and acceptance criteria.' },
      { label: 'SPECWRIGHT.yaml Config', href: 'https://github.com/Gerner-Ventures/gv-exp-specwright/blob/main/docs/config.md', description: 'Per-repo configuration for agent behavior, ticket sync, and analysis.' },
    ],
  },
  {
    title: 'CLI',
    items: [
      { label: 'CLI Reference', href: 'https://github.com/Gerner-Ventures/gv-exp-specwright#cli', description: 'All specwright commands: init, plan, verify, status, start, done, sync, search.' },
      { label: 'Claude Code Skills', href: 'https://github.com/Gerner-Ventures/gv-exp-specwright/tree/main/plugin/skills', description: 'Built-in skills: /sw:context, /sw:verify, /sw:update, /sw:status, /sw:task, and more.' },
    ],
  },
  {
    title: 'Integration',
    items: [
      { label: 'MCP Server Setup', href: 'https://github.com/Gerner-Ventures/gv-exp-specwright#mcp', description: 'Connect Specwright to Claude Code, Cursor, or any MCP-compatible editor.' },
      { label: 'GitHub App', href: 'https://github.com/apps/gv-specwright', description: 'Install the GitHub App to enable PR analysis and webhook integration.' },
      { label: 'Ticket Sync', href: 'https://github.com/Gerner-Ventures/gv-exp-specwright/blob/main/docs/ticket-sync.md', description: 'Bidirectional sync with Jira, Linear, and GitHub Issues.' },
    ],
  },
]
</script>

<template>
  <div class="min-h-screen flex flex-col">
    <MarketingNav />
    <main class="flex-1 max-w-3xl mx-auto px-4 sm:px-6 py-12 sm:py-16">
      <h1 class="font-display font-bold text-3xl text-slate-900 dark:text-white mb-2">Documentation</h1>
      <p class="text-base text-slate-500 mb-10">Guides and references for setting up and using Specwright.</p>

      <div class="space-y-10">
        <section v-for="section in sections" :key="section.title">
          <h2 class="font-display font-semibold text-lg text-slate-900 dark:text-white mb-4">{{ section.title }}</h2>
          <div class="space-y-3">
            <a
              v-for="item in section.items"
              :key="item.label"
              :href="item.href"
              target="_blank"
              rel="noopener noreferrer"
              class="block p-4 rounded-lg 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"
            >
              <div class="flex items-center gap-2 mb-1">
                <span class="text-sm font-semibold text-slate-900 dark:text-white">{{ item.label }}</span>
                <svg class="w-3.5 h-3.5 text-slate-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                </svg>
              </div>
              <p class="text-sm text-slate-500">{{ item.description }}</p>
            </a>
          </div>
        </section>
      </div>
    </main>
    <MarketingFooter />
  </div>
</template>
