<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">The problem</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Specs say one thing. Code does another.
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-12">
      The moment a PR merges, some spec somewhere becomes wrong. Nobody notices until a new hire reads it, a customer hits a bug, or an audit fails.
    </p>

    <div class="grid md:grid-cols-2 gap-6 sm:gap-8">
      <!-- Problem -->
      <div class="rounded-xl p-6 sm:p-8 bg-surface-light-elevated dark:bg-surface-elevated border border-border-light dark:border-slate-800">
        <h3 class="font-display font-semibold text-lg text-slate-900 dark:text-white mb-4">Without Specwright</h3>
        <ul class="space-y-3">
          <li v-for="item in problems" :key="item" class="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-400">
            <span class="text-red-500 mt-0.5 shrink-0">&times;</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>

      <!-- Solution -->
      <div class="rounded-xl p-6 sm:p-8 bg-gradient-to-br from-accent-500 to-cyan-400 text-white">
        <h3 class="font-display font-semibold text-lg mb-4">With Specwright</h3>
        <ul class="space-y-3">
          <li v-for="item in solutions" :key="item" class="flex items-start gap-2 text-sm text-white/90">
            <span class="mt-0.5 shrink-0">&check;</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const problems = [
  'Specs go stale within weeks — nobody trusts them',
  'PRs are reviewed without any spec context',
  'Tickets close but nobody verifies the code matches the spec',
  'READMEs, ADRs, and guides rot silently',
  '"What percentage is done?" requires a meeting',
  'New engineers have no idea what\'s been built or why',
]

const solutions = [
  'Agent verifies code against spec acceptance criteria',
  'Every PR analyzed against all indexed docs',
  'Stale docs flagged before anyone reads them',
  'Doc-update PRs generated automatically on merge',
  'Tickets sync bidirectionally from spec sections',
  'One search across every doc in every repo',
]
</script>
