<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { Check } from 'lucide-vue-next'
</script>

<template>
  <div>
    <!-- Header -->
    <section class="pt-20 pb-12">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Pricing</h1>
        <p class="text-lg text-neutral-400">Simple. Transparent. No hidden tiers.</p>
      </div>
    </section>

    <!-- Pricing Cards -->
    <section class="pb-20">
      <div class="max-w-5xl mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- Base License -->
          <div class="bg-neutral-900 border-2 border-oxide-500/40 rounded-xl p-8 relative">
            <div class="absolute -top-3 left-1/2 -translate-x-1/2">
              <span class="px-3 py-1 bg-oxide-600 text-white text-xs font-semibold rounded-full uppercase tracking-wider">Most Popular</span>
            </div>
            <div class="text-center mb-6">
              <h3 class="text-xl font-bold text-neutral-100 mb-2">Base License</h3>
              <div class="flex items-baseline justify-center gap-1">
                <span class="text-4xl font-bold text-oxide-400">$50</span>
              </div>
              <p class="text-sm text-neutral-500 mt-1">One server. Lifetime access.</p>
              <p class="text-xs text-oxide-400/70 mt-1">Launch Price</p>
            </div>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Full control plane
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Auto-Wiper with rollback
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Plugin management
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Public server site
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Multi-admin RBAC
              </li>
            </ul>
            <RouterLink to="/register" class="block w-full py-3 bg-oxide-600 hover:bg-oxide-700 text-white text-center font-semibold rounded-lg transition-colors">
              Get Started
            </RouterLink>
          </div>

          <!-- Webstore Add-On -->
          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
            <div class="text-center mb-6">
              <h3 class="text-xl font-bold text-neutral-100 mb-2">Webstore Add-On</h3>
              <div class="flex items-baseline justify-center gap-1">
                <span class="text-4xl font-bold text-neutral-200">$10</span>
                <span class="text-neutral-500">/mo</span>
              </div>
              <p class="text-sm text-neutral-500 mt-1">Integrated monetization platform.</p>
            </div>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Item catalog
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Stripe + PayPal
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Auto-delivery via RCON
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Transaction history
              </li>
            </ul>
            <button class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
              Coming Soon
            </button>
          </div>

          <!-- Modules -->
          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
            <div class="text-center mb-6">
              <h3 class="text-xl font-bold text-neutral-100 mb-2">Modules</h3>
              <div class="flex items-baseline justify-center gap-1">
                <span class="text-4xl font-bold text-neutral-200">$9.99</span>
                <span class="text-neutral-500">+</span>
              </div>
              <p class="text-sm text-neutral-500 mt-1">Optional feature expansions.</p>
            </div>
            <ul class="space-y-3 mb-8">
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Analytics & insights
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Discord bot integration
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                Cloud backups
              </li>
              <li class="flex items-center gap-3 text-sm text-neutral-300">
                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
                More on the roadmap
              </li>
            </ul>
            <RouterLink to="/site/roadmap" class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
              View Roadmap
            </RouterLink>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
