<script setup lang="ts">
import { ref } from 'vue'
import { usePostHog } from '@/composables/usePostHog'

const { track } = usePostHog()
const email = ref('')
const submitted = ref(false)
const error = ref('')

const selfHostedFeatures = [
  'Full feature set — no limits',
  'Helm chart for Kubernetes',
  'Docker Compose for local',
  'Your data stays on your infrastructure',
  'Community support via GitHub',
]

const managedFeatures = [
  'Everything in Self-Hosted',
  'No infrastructure to manage',
  'Automatic updates & scaling',
  'Priority support + SLA',
  'SOC 2 compliance (planned)',
]

const comparison = [
  { feature: 'Spec parsing & indexing', selfHosted: '\u2713', managed: '\u2713' },
  { feature: 'PR analysis & review', selfHosted: '\u2713', managed: '\u2713' },
  { feature: 'Ticket sync (Jira, Linear, GitHub)', selfHosted: '\u2713', managed: '\u2713' },
  { feature: 'CLI & MCP integration', selfHosted: '\u2713', managed: '\u2713' },
  { feature: 'Coverage dashboard', selfHosted: '\u2713', managed: '\u2713' },
  { feature: 'Claude Code skills', selfHosted: '\u2713', managed: '\u2713' },
  { feature: 'Managed infrastructure', selfHosted: '\u2014', managed: '\u2713' },
  { feature: 'Auto updates', selfHosted: '\u2014', managed: '\u2713' },
  { feature: 'Priority support', selfHosted: '\u2014', managed: '\u2713' },
]

async function joinWaitlist() {
  if (!email.value) return
  error.value = ''
  try {
    const res = await fetch('/api/waitlist', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email.value }),
    })
    if (!res.ok) {
      const data = await res.json()
      error.value = data.error || 'Something went wrong'
      return
    }
    track('waitlist_signup', { email: email.value })
    submitted.value = true
    email.value = ''
  } catch {
    error.value = 'Network error — please try again'
  }
}
</script>

<template>
  <section id="pricing" 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">Pricing</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Self-hosted and free. Managed cloud coming soon.
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-12">
      Full feature set on both tiers. Choose the deployment model that fits your team.
    </p>

    <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
      <!-- Self-hosted -->
      <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-1">Self-Hosted</h3>
        <p class="text-3xl font-bold text-slate-900 dark:text-white mb-4">Free</p>
        <p class="text-sm text-slate-500 mb-6">Open source. Your infrastructure. Full control.</p>

        <ul class="space-y-2.5 mb-8">
          <li v-for="item in selfHostedFeatures" :key="item" class="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-400">
            <span class="text-accent-500 mt-0.5 shrink-0">&check;</span>
            <span>{{ item }}</span>
          </li>
        </ul>

        <a
          href="https://github.com/Gerner-Ventures/gv-exp-specwright/blob/main/docs/self-hosting.md"
          class="block text-center px-4 py-2.5 rounded-lg text-sm font-semibold border border-border-light dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:border-accent-400 dark:hover:border-accent-600 transition-colors"
        >
          View Setup Guide
        </a>
      </div>

      <!-- Managed Cloud -->
      <div class="rounded-xl p-6 sm:p-8 bg-surface-light dark:bg-surface-elevated border-2 border-accent-400 dark:border-accent-600 relative">
        <span class="absolute top-4 right-4 px-2 py-0.5 rounded-full text-xs font-semibold bg-accent-100 dark:bg-accent-900/50 text-accent-700 dark:text-accent-400">
          Coming Soon
        </span>

        <h3 class="font-display font-semibold text-lg text-slate-900 dark:text-white mb-1">Managed Cloud</h3>
        <p class="text-3xl font-bold text-slate-900 dark:text-white mb-4">TBD</p>
        <p class="text-sm text-slate-500 mb-6">We run it. You focus on shipping.</p>

        <ul class="space-y-2.5 mb-8">
          <li v-for="item in managedFeatures" :key="item" class="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-400">
            <span class="text-accent-500 mt-0.5 shrink-0">&check;</span>
            <span>{{ item }}</span>
          </li>
        </ul>

        <div v-if="!submitted">
          <p v-if="error" class="text-sm text-red-500 mb-2">{{ error }}</p>
          <form class="flex gap-2" @submit.prevent="joinWaitlist">
            <input
              v-model="email"
              type="email"
              placeholder="you@company.com"
              required
              class="flex-1 px-3 py-2.5 rounded-lg text-sm bg-surface-light-alt dark:bg-surface-alt border border-border-light dark:border-slate-700 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-accent-500/40"
            >
            <button
              type="submit"
              class="px-4 py-2.5 rounded-lg text-sm font-semibold text-white bg-gradient-to-r from-accent-500 to-cyan-400 hover:opacity-90 transition-opacity shrink-0"
            >
              Join Waitlist
            </button>
          </form>
        </div>
        <p v-else class="text-sm font-medium text-accent-500 text-center">
          You're on the list! We'll be in touch.
        </p>
      </div>
    </div>

    <!-- Feature comparison -->
    <div class="max-w-3xl mx-auto mt-12 overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-border-light dark:border-slate-800">
            <th class="text-left py-3 pr-4 font-semibold text-slate-900 dark:text-white">Feature</th>
            <th class="text-center py-3 px-4 font-semibold text-slate-900 dark:text-white">Self-Hosted</th>
            <th class="text-center py-3 pl-4 font-semibold text-slate-900 dark:text-white">Managed Cloud</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in comparison" :key="row.feature" class="border-b border-border-light/60 dark:border-slate-800/50">
            <td class="py-2.5 pr-4 text-slate-600 dark:text-slate-400">{{ row.feature }}</td>
            <td class="py-2.5 px-4 text-center text-accent-500">{{ row.selfHosted }}</td>
            <td class="py-2.5 pl-4 text-center text-accent-500">{{ row.managed }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</template>

