<script setup>
useSeoMeta({
  title: 'Pricing — IDconvert',
  description: 'Simple credit-based pricing. Start with 1 free conversion. No subscription required.',
})

const ui = useUiStore()
const auth = useAuthStore()

const packs = [
  { id: 'starter', name: 'Starter', price: '$19',  credits: 5,  perCredit: '$3.80', popular: false },
  { id: 'studio',  name: 'Studio',  price: '$59',  credits: 20, perCredit: '$2.95', popular: true  },
  { id: 'agency',  name: 'Agency',  price: '$149', credits: 60, perCredit: '$2.48', popular: false },
]

const features = [
  '1 free conversion included for new accounts',
  'Pre-conversion scan report',
  'Font detection and install guide',
  'Layout preserved via linked text boxes',
  'Images, tables and hyperlinks included',
  'Files deleted after 1 hour',
  'Email support',
]

function handleGetPack() {
  if (!auth.isLoggedIn) { ui.openAuthModal('register'); return }
  ui.openPurchaseModal()
}
</script>

<template>
  <div class="min-h-[calc(100vh-60px)] bg-gray-100 px-4 py-16">
    <div class="max-w-4xl mx-auto">

      <h1 class="text-4xl font-bold text-gray-900 text-center mb-3">Choose your plan</h1>
      <p class="text-center text-gray-500 mb-10">Simple credit pricing. No subscription. Credits never expire.</p>

      <!-- Free conversion banner -->
      <div v-if="!auth.isLoggedIn || !auth.freeUsed"
        class="bg-green-50 border border-green-400 rounded-lg px-5 py-4 flex items-center gap-3 mb-8 max-w-2xl mx-auto">
        <span class="text-green-500 font-bold text-lg flex-shrink-0">✓</span>
        <p class="text-sm text-gray-800">
          Every account includes <strong>1 free conversion</strong> to try IDconvert before purchasing credits.
        </p>
      </div>

      <!-- Pack cards -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div
          v-for="pack in packs"
          :key="pack.id"
          :class="[
            'relative bg-white rounded-xl p-7 flex flex-col gap-4',
            pack.popular ? 'border-2 border-[#1a56db] shadow-md' : 'border border-gray-200',
          ]"
        >
          <span v-if="pack.popular"
            class="absolute -top-3.5 right-5 bg-[#1a56db] text-white text-xs font-semibold px-3 py-0.5 rounded-full">
            Popular
          </span>

          <h2 class="text-lg font-bold text-gray-900">{{ pack.name }}</h2>
          <div>
            <span class="text-4xl font-bold text-gray-900">{{ pack.price }}</span>
          </div>
          <div class="text-sm text-gray-500">{{ pack.credits }} credits</div>
          <div class="text-xs text-gray-400">{{ pack.perCredit }} per conversion</div>

          <ul class="space-y-2 flex-1 my-2">
            <li v-for="f in features" :key="f" class="flex items-start gap-2 text-xs text-gray-600">
              <span class="text-green-500 flex-shrink-0 mt-0.5">✓</span>
              {{ f }}
            </li>
          </ul>

          <BaseButton variant="primary" full-width @click="handleGetPack">
            Get {{ pack.name }}
          </BaseButton>
        </div>
      </div>

      <p class="text-xs text-gray-400 text-center">
        Credits never expire. Use them at your own pace.
      </p>
    </div>
  </div>
</template>
