<template>
  <article
    :class="[
      'relative grid gap-3 rounded-2xl border border-gray-200 bg-white p-[18px] shadow-[0_14px_32px_rgba(0,0,0,0.08)] transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-1 hover:border-gray-300 hover:shadow-[0_20px_44px_rgba(0,0,0,0.12)]',
      highlight ? 'border-gray-300 shadow-[0_20px_48px_rgba(0,0,0,0.14)]' : '',
    ]"
  >
    <div
      v-if="badge"
      class="absolute right-4 top-3 rounded-full border border-gray-200 bg-gray-100 px-2.5 py-1.5 text-xs text-gray-700"
    >
      {{ badge }}
    </div>
    <div class="mt-2 flex items-center gap-2.5 text-gray-600">
      <div class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-gray-100 font-bold text-gray-800">
        A
      </div>
      <div class="font-semibold text-slate-900">{{ title }}</div>
      <div class="text-gray-400">· {{ subtitle }}</div>
    </div>
    <div class="text-3xl font-extrabold tracking-[-0.02em]">{{ price }}</div>
    <div v-if="note" class="text-gray-500">{{ note }}</div>
    <ul class="m-0 grid list-none gap-2 p-0">
      <li v-for="feature in features" :key="feature">
        <div class="grid grid-cols-[20px_1fr] items-center gap-2 text-sm text-gray-600">
          <CheckCircle2 class="h-4 w-4 text-blue-600" />
          <span>{{ feature }}</span>
        </div>
      </li>
    </ul>
    <a
      class="mt-1.5 flex items-center justify-between rounded-xl border border-gray-200 bg-gray-50 p-3 text-gray-600 transition-colors hover:bg-gray-100"
      :href="actionHref ?? `mailto:${site.contact.email}`"
    >
      <div class="font-semibold text-slate-900">{{ actionLabel ?? '咨询合作' }}</div>
      <div class="inline-flex items-center gap-1.5 text-xs text-gray-500">
        <span>{{ footerNote }}</span>
        <ChevronRight class="h-4 w-4 text-gray-400" />
      </div>
    </a>
  </article>
</template>

<script setup lang="ts">
import { CheckCircle2, ChevronRight } from 'lucide-vue-next'
import { site } from '@/config/site'

defineProps<{
  title: string
  subtitle: string
  badge?: string
  price: string
  note?: string
  features: string[]
  footerNote: string
  highlight?: boolean
  actionLabel?: string
  actionHref?: string
}>()
</script>
