<script setup lang="ts">
import { ElMessageBox } from 'element-plus';

const models = [
  { name: 'o3', price: '40', desc: 'OpenAI 新一代模型，功能强大，适合多场景应用' },
  { name: 'o4-mini', price: '4.4', desc: '轻量级 GPT-4 体验，兼顾性能与成本' },
  { name: 'GPT-4.1', price: '8', desc: 'OpenAI 最新标准版模型，推理能力强' },
  { name: 'GPT-4.1-mini', price: '1.6', desc: '适合日常使用的 GPT-4.1 精简版' },
  { name: 'GPT-4.1-nano', price: '0.4', desc: '极致性价比，快速响应，适合轻量任务' },
  { name: 'GPT-4.5', price: '150', desc: 'OpenAI 高级旗舰模型，性能顶级' },
  { name: 'o3-mini', price: '4.4', desc: 'o3 系列的小型版本，轻便且高效' },
  { name: 'GPT-4o', price: '10', desc: '多模态旗舰模型，支持语音、图像、文本交互' },
  { name: 'GPT-4o-mini', price: '5', desc: 'GPT-4o 的轻量版本，功能丰富性价比高' },
  { name: 'grok-3', price: '15', desc: '由xAI推出，强调实时性和长上下文处理能力' },
  { name: 'grok-3-mini', price: '0.5', desc: 'grok-3 的轻量版，适用于基础任务' },
  { name: 'DeepSeek-chat', price: '1', desc: '国产大模型代表，主打中文语义理解' },
  { name: 'DeepSeek-R1', price: '2', desc: 'DeepSeek 系列中的推理加强模型' },
  { name: 'Phi-4', price: '0.5', desc: '微软推出的小而强大模型，适合部署边缘任务' },
  { name: 'Phi-4-reasoning', price: '0.3', desc: 'Phi-4 的逻辑推理优化版本' },
  { name: 'Phi-4-mini-instruct', price: '0.3', desc: '专为指令执行设计的微型模型' },
  { name: 'GPT-4-8K', price: '60', desc: 'GPT-4 模型支持 8K 上下文，适合大段输入任务' },
  { name: 'GPT-4-32K', price: '120', desc: 'GPT-4 支持最大 32K 上下文，适合复杂应用' },
];

function openContact() {
  ElMessageBox.alert('请添加站长微信获取充值方式，备注“AI”以便通过。', '联系站长', {
    confirmButtonText: '我知道了',
    type: 'info',
  });
}
</script>

<template>
  <div class="p-6 max-w-5xl mx-auto">
    <h1 class="text-3xl font-bold mb-4 text-center">
      全网AI模型 一键解锁 · 超高性价比
    </h1>
    <p class="text-center text-gray-600 mb-6">
      意心AI 为您集成市面上热门模型，订阅即享多模型使用权限，无需额外购买，真正做到一步到位。
    </p>

    <div class="bg-white shadow rounded-2xl overflow-hidden">
      <table class="w-full table-auto border-collapse">
        <thead class="bg-gray-100">
          <tr>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
              模型
            </th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
              市价（元/月）
            </th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
              简介
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="model in models" :key="model.name" class="border-t hover:bg-gray-50">
            <td class="px-4 py-2 text-sm font-medium text-gray-800">
              {{ model.name }}
            </td>
            <td class="px-4 py-2 text-sm">
              {{ model.price }}
            </td>
            <td class="px-4 py-2 text-sm text-gray-500">
              {{ model.desc || '-' }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-8 text-center">
      <h2 class="text-2xl font-semibold mb-2">
        一口价订阅，仅需 <span class="text-red-500 text-3xl font-bold">9.9元/月</span>
      </h2>
      <p class="text-gray-600 mb-4">
        即解锁以上全部模型，随时切换，无需单独付费。
      </p>
      <button class="bg-blue-600 hover:bg-blue-700 text-white text-lg px-6 py-2 rounded-xl transition" @click="openContact">
        立即订阅
      </button>
    </div>
  </div>
</template>

<style scoped>
th, td {
  border-bottom: 1px solid #e5e7eb;
}
</style>
