<template>
  <div class="max-w-7xl mx-auto px-4 py-12">
    <!-- Hero Section -->
    <div class="text-center mb-16">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ $t('nav.pricing') }}</h1>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">
        {{ $t('pricing.subtitle') }}
      </p>
    </div>

    <!-- Pricing Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
      <!-- Starter Plan -->
      <div class="bg-white rounded-lg shadow-md p-8 relative">
        <div class="text-center">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">{{ $t('pricing.starter.name') }}</h3>
          <p class="text-gray-600 mb-6">{{ $t('pricing.starter.description') }}</p>
          <div class="mb-6">
            <span class="text-4xl font-bold text-gray-900">${{ $t('pricing.starter.price') }}</span>
            <span class="text-gray-600">/{{ $t('pricing.starter.period') }}</span>
          </div>
          <ul class="space-y-3 text-left mb-8">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.starter.features.0') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.starter.features.1') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.starter.features.2') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.starter.features.3') }}
            </li>
          </ul>
          <NuxtLink 
            :to="localePath('/contact')" 
            class="w-full bg-gray-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-gray-700 transition-colors block text-center"
          >
            {{ $t('pricing.starter.cta') }}
          </NuxtLink>
        </div>
      </div>

      <!-- Professional Plan -->
      <div class="bg-white rounded-lg shadow-lg p-8 relative border-2 border-blue-600">
        <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
          <span class="bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
            {{ $t('pricing.professional.popular') }}
          </span>
        </div>
        <div class="text-center">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">{{ $t('pricing.professional.name') }}</h3>
          <p class="text-gray-600 mb-6">{{ $t('pricing.professional.description') }}</p>
          <div class="mb-6">
            <span class="text-4xl font-bold text-gray-900">${{ $t('pricing.professional.price') }}</span>
            <span class="text-gray-600">/{{ $t('pricing.professional.period') }}</span>
          </div>
          <ul class="space-y-3 text-left mb-8">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.professional.features.0') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.professional.features.1') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.professional.features.2') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.professional.features.3') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.professional.features.4') }}
            </li>
          </ul>
          <NuxtLink 
            :to="localePath('/contact')" 
            class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors block text-center"
          >
            {{ $t('pricing.professional.cta') }}
          </NuxtLink>
        </div>
      </div>

      <!-- Enterprise Plan -->
      <div class="bg-white rounded-lg shadow-md p-8 relative">
        <div class="text-center">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">{{ $t('pricing.enterprise.name') }}</h3>
          <p class="text-gray-600 mb-6">{{ $t('pricing.enterprise.description') }}</p>
          <div class="mb-6">
            <span class="text-4xl font-bold text-gray-900">{{ $t('pricing.enterprise.price') }}</span>
          </div>
          <ul class="space-y-3 text-left mb-8">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.enterprise.features.0') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.enterprise.features.1') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.enterprise.features.2') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.enterprise.features.3') }}
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
              </svg>
              {{ $t('pricing.enterprise.features.4') }}
            </li>
          </ul>
          <NuxtLink 
            :to="localePath('/contact')" 
            class="w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition-colors block text-center"
          >
            {{ $t('pricing.enterprise.cta') }}
          </NuxtLink>
        </div>
      </div>
    </div>

    <!-- FAQ Section -->
    <div class="bg-gray-50 rounded-lg p-8">
      <h2 class="text-3xl font-bold text-center mb-8">{{ $t('pricing.faq.title') }}</h2>
      <div class="max-w-3xl mx-auto space-y-6">
        <div v-for="(faq, index) in faqs" :key="index" class="bg-white rounded-lg p-6">
          <h3 class="text-lg font-semibold mb-2">{{ faq.question }}</h3>
          <p class="text-gray-600">{{ faq.answer }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { t } = useI18n()
const localePath = useLocalePath()

const faqs = computed(() => [
  {
    question: t('pricing.faq.items.0.question'),
    answer: t('pricing.faq.items.0.answer')
  },
  {
    question: t('pricing.faq.items.1.question'),
    answer: t('pricing.faq.items.1.answer')
  },
  {
    question: t('pricing.faq.items.2.question'),
    answer: t('pricing.faq.items.2.answer')
  },
  {
    question: t('pricing.faq.items.3.question'),
    answer: t('pricing.faq.items.3.answer')
  }
])

// SEO设置
useSeoMeta({
  title: () => t('pricing.seo.title'),
  description: () => t('pricing.seo.description'),
  ogTitle: () => t('pricing.seo.title'),
  ogDescription: () => t('pricing.seo.description')
})
</script>
