<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="max-w-3xl mx-auto px-4 sm:px-6 py-16 sm:py-20 text-center">
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white mb-4">
      Stop maintaining docs. Let the agent do it.
    </h2>
    <p class="text-base text-slate-500 mb-8">
      Install the Specwright GitHub App on your organization. Self-hosted, open source, and free. Your specs will never go stale again.
    </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('footer_install')"
      >
        Install on GitHub
      </a>
      <a
        href="/app"
        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('footer_dashboard')"
      >
        Explore Dashboard
      </a>
      <a
        href="https://github.com/Gerner-Ventures/gv-exp-specwright"
        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('footer_source')"
      >
        View Source
      </a>
    </div>
  </section>
</template>
