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

const entries = [
  {
    date: '2026-02-26',
    version: '0.9.0',
    title: 'Marketing site revamp',
    items: [
      'New landing page built with Vue 3 + Tailwind CSS',
      'Interactive PR analysis demo',
      'CLI showcase section with terminal mockups',
      'Pricing section with managed cloud waitlist',
      'Product mockup replacing static screenshots',
    ],
  },
  {
    date: '2026-02-25',
    version: '0.8.0',
    title: 'PostHog OpenTelemetry logging',
    items: [
      'Backend logs forwarded to PostHog via OpenTelemetry OTLP',
      'Configurable log level filtering',
      'Cron job instrumentation (sync, stale check, key cleanup)',
    ],
  },
  {
    date: '2026-02-24',
    version: '0.7.0',
    title: 'CLI expansion + /sw:task skill',
    items: [
      '7 new CLI commands: plan, verify, status, start, done, sync, search',
      'New /sw:task Claude Code skill for guided spec-driven development',
      'Web tasks view for browsing actionable work items',
      'Full-text search page with faceted filters',
    ],
  },
]
</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">Changelog</h1>
      <p class="text-base text-slate-500 mb-10">What's new in Specwright.</p>

      <div class="space-y-10">
        <article v-for="entry in entries" :key="entry.version" class="relative pl-6 border-l-2 border-border-light dark:border-slate-800">
          <div class="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent-500"></div>
          <div class="flex items-baseline gap-3 mb-2">
            <span class="font-mono text-sm font-semibold text-accent-500">v{{ entry.version }}</span>
            <span class="text-xs text-slate-400">{{ entry.date }}</span>
          </div>
          <h2 class="font-display font-semibold text-lg text-slate-900 dark:text-white mb-2">{{ entry.title }}</h2>
          <ul class="space-y-1">
            <li v-for="item in entry.items" :key="item" class="text-sm text-slate-600 dark:text-slate-400 flex items-start gap-2">
              <span class="text-accent-500 mt-0.5 shrink-0">&bull;</span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </article>
      </div>
    </main>
    <MarketingFooter />
  </div>
</template>
