<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">Integrations</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Connects to your stack
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-12">
      Specwright plugs into the tools your team already uses. No migration required.
    </p>

    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
      <div
        v-for="group in integrations"
        :key="group.title"
        class="rounded-xl p-5 bg-surface-light-elevated dark:bg-surface-elevated border border-border-light dark:border-slate-800"
      >
        <h4 class="font-display font-semibold text-base text-slate-900 dark:text-white mb-3">{{ group.title }}</h4>
        <ul class="space-y-1.5">
          <li v-for="item in group.items" :key="item" class="text-sm text-slate-600 dark:text-slate-400">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const integrations = [
  {
    title: 'Source Control',
    items: ['GitHub (native)'],
  },
  {
    title: 'Tickets',
    items: ['Jira', 'Linear', 'GitHub Issues'],
  },
  {
    title: 'Dev Tools',
    items: ['Claude Code (MCP + skills)', 'Cursor (MCP)', 'specwright CLI'],
  },
  {
    title: 'Observability',
    items: ['PostHog (analytics)', 'OpenTelemetry (logs)'],
  },
]
</script>
