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

const { track } = usePostHog()

function trackCta(label: string) {
  track('landing_cta_click', { label })
}
</script>

<template>
  <section class="relative overflow-hidden">
    <!-- Subtle gradient background (light mode only — dark mode uses flat bg) -->
    <div class="absolute inset-0 bg-gradient-to-b from-brand-50/60 via-accent-50/30 to-transparent dark:from-transparent dark:via-transparent dark:to-transparent pointer-events-none"></div>

    <div class="relative max-w-4xl mx-auto px-4 sm:px-6 pt-20 sm:pt-28 pb-16 text-center">
      <p class="font-mono text-xs uppercase tracking-[0.15em] text-accent-500 mb-4">
        Spec-driven development platform
      </p>

      <h1 class="font-display font-bold text-4xl sm:text-5xl lg:text-6xl text-slate-900 dark:text-white leading-[1.1] mb-6">
        Your specs run the show.
        <span class="gradient-text">Code follows.</span>
      </h1>

      <p class="text-lg sm:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-4">
        Specwright turns structured specs into a live control plane. AI agents verify code against acceptance criteria, sync tickets bidirectionally, and flag when reality drifts from the plan.
      </p>

      <p class="text-sm text-slate-500 dark:text-slate-500 max-w-xl mx-auto mb-8">
        Install a GitHub App. Write specs in markdown. The agent handles PR reviews, ticket sync, and code-aware verification&mdash;across your entire org.
      </p>

      <div class="flex justify-center gap-4 flex-wrap">
        <a
          href="https://github.com/apps/gv-specwright/installations/new"
          class="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-base font-semibold text-white bg-gradient-to-r from-accent-500 to-cyan-400 hover:opacity-90 transition-opacity"
          @click="trackCta('hero_install')"
        >
          Install on GitHub
        </a>
        <a
          href="#demo"
          class="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-base font-medium text-slate-600 dark:text-slate-400 border border-border-light dark:border-slate-700 hover:border-slate-400 dark:hover:border-slate-500 transition-colors"
          @click="trackCta('hero_demo')"
        >
          See It In Action
        </a>
      </div>
    </div>
  </section>
</template>
