<script setup lang="ts">
// P12 费率页 — 合约交易标准费 / VIP六大核心权益 / VIP等级晋升规则
import hero3d   from '@/assets/fees/hero-3d.png'
import vipCrown from '@/assets/fees/vip-crown.png'

interface VipTier {
  level: string
  minHolding: string
  minVolume: string
  spotMaker: string
  spotTaker: string
  futuresMaker: string
  futuresTaker: string
}

const vipTiers: VipTier[] = [
  { level: 'VIP1', minHolding: '≥50,000 USDT',    minVolume: '≥10,000,000 USDT',    spotMaker: '0.16%', spotTaker: '0.18%', futuresMaker: '0.036%', futuresTaker: '0.050%' },
  { level: 'VIP2', minHolding: '≥150,000 USDT',   minVolume: '≥50,000,000 USDT',    spotMaker: '0.14%', spotTaker: '0.16%', futuresMaker: '0.032%', futuresTaker: '0.048%' },
  { level: 'VIP3', minHolding: '≥300,000 USDT',   minVolume: '≥100,000,000 USDT',   spotMaker: '0.12%', spotTaker: '0.14%', futuresMaker: '0.026%', futuresTaker: '0.040%' },
  { level: 'VIP4', minHolding: '≥600,000 USDT',   minVolume: '≥1,000,000,000 USDT', spotMaker: '0.10%', spotTaker: '0.12%', futuresMaker: '0.020%', futuresTaker: '0.030%' },
  { level: 'VIP5', minHolding: '≥1,000,000 USDT', minVolume: '≥1,500,000,000 USDT', spotMaker: '0.10%', spotTaker: '0.12%', futuresMaker: '0.020%', futuresTaker: '0.030%' },
]

const vipBenefits = [
  {
    title: '交易手续费特权',
    desc: '合约交易手续费最低至 (Maker/Taker)\n现货交易手续费最低至',
    highlight: true,
    stats: [
      { val: '0.02% / 0.03%', label: '合约 Maker/Taker' },
      { val: '0.1%',          label: '现货最低' },
    ],
  },
  {
    title: '专属服务支持',
    desc: '配备 1 对 1 VIP 客户经理，提供个性化的专属技术支持与平台服务，快速响应每一项需求。',
    highlight: false,
  },
  {
    title: '活动与收益增强',
    desc: '优先参与热门活动（如申购、高息理财、空投活动等）平台高收益项目，获取更多额外收益。',
    highlight: false,
  },
  {
    title: '尊贵节日礼遇',
    desc: '节日限定礼盒（端午节、中秋）· iBit 限量品周边公仔不定期送达，特属身份礼遇尽显。',
    highlight: false,
  },
  {
    title: '安全保障升级',
    desc: 'VIP 客户将受到更高级别风险策略与资产保障系统的优先保护，你的资金安全是我们的首要任务。',
    highlight: false,
  },
  {
    title: '生态尊享体验',
    desc: '受邀参与 iBit 生态线下沙龙、圈门交流会、圈村岛沙滩派对，抢先把握前沿机遇。',
    highlight: false,
  },
]
</script>

<template>
  <main class="page-main">
    <!-- Section 1 标准费率 -->
    <section class="banner-section">
      <div class="page-container banner-inner">
        <div class="banner-left">
          <h1 class="banner-title">合约交易标准费</h1>
          <div class="rate-cards">
            <div class="rate-card dark-card">
              <p class="rate-card-label">现货交易标准费率</p>
              <div class="rate-row">
                <span>Maker 挂单 手续费</span><strong class="num">0.05%</strong>
              </div>
              <div class="rate-row">
                <span>Taker 吃单 手续费</span><strong class="num">0.05%</strong>
              </div>
            </div>
            <div class="rate-card dark-card">
              <p class="rate-card-label">合约交易标准费率</p>
              <div class="rate-row">
                <span>Maker 挂单 手续费</span><strong class="num">0.05%</strong>
              </div>
              <div class="rate-row">
                <span>Taker 吃单 手续费</span><strong class="num">0.05%</strong>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-deco">
          <img :src="hero3d" alt="Standard fee visual" class="hero-3d-img" />
        </div>
      </div>
    </section>

    <!-- Section 2 VIP权益 -->
    <section class="section vip-section">
      <div class="page-container">
        <div class="vip-head">
          <img :src="vipCrown" alt="VIP crown" class="vip-crown-img" />
          <h2 class="section-title">iBit VIP<br>六大核心权益</h2>
        </div>

        <div class="benefits-grid">
          <div
            v-for="b in vipBenefits"
            :key="b.title"
            class="benefit-card dark-card"
            :class="{ 'benefit-highlight': b.highlight }"
          >
            <h3 class="benefit-title">{{ b.title }}</h3>
            <p class="benefit-desc">{{ b.desc }}</p>
            <div v-if="b.stats" class="benefit-stats">
              <div v-for="s in b.stats" :key="s.label" class="stat">
                <div class="stat-val num">{{ s.val }}</div>
                <div class="stat-label">{{ s.label }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section 3 VIP等级表格 -->
    <section class="section section-table">
      <div class="page-container">
        <h2 class="tier-title">VIP等级晋升规则</h2>
        <p class="tier-desc">系统将根据您 30 天内的交易额自动评估，满足条件即可快速升级，轻松尊享 VIP 待遇。</p>
        <div class="table-wrap dark-card">
          <table class="tier-table">
            <thead>
              <tr>
                <th>VIP 等级</th>
                <th>最低持仓量 (USDT)</th>
                <th>近 30 日成交额</th>
                <th>现货 Maker</th>
                <th>现货 Taker</th>
                <th>合约 Maker</th>
                <th>合约 Taker</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="tier in vipTiers" :key="tier.level">
                <td class="td-level">
                  <span class="vip-chip" :class="`chip-${tier.level.toLowerCase()}`">{{ tier.level }}</span>
                </td>
                <td class="num">{{ tier.minHolding }}</td>
                <td class="num">{{ tier.minVolume }}</td>
                <td class="num">{{ tier.spotMaker }}</td>
                <td class="num">{{ tier.spotTaker }}</td>
                <td class="num">{{ tier.futuresMaker }}</td>
                <td class="num">{{ tier.futuresTaker }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
/* ── Section 1: Banner ── */
.banner-section {
  background: var(--color-bg-secondary);
  padding: var(--space-16) 0 var(--space-12);
  position: relative;
  overflow: hidden;
}
.banner-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.banner-title {
  font-size: 48px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-6);
}
.rate-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 420px;
}
.rate-card { padding: var(--space-4) var(--space-5); }
.rate-card-label {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  padding: 4px 0;
}
.rate-row strong {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: 16px;
}
.banner-deco {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-3d-img {
  width: 100%;
  max-width: 560px;
  object-fit: contain;
  filter: drop-shadow(0 0 48px rgba(240,185,11,0.3));
}

/* ── Section 2: VIP 权益 ── */
.vip-section { background: var(--color-bg-primary); padding-top: var(--space-16); }
.vip-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.vip-crown-img {
  width: 120px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(240,185,11,0.35));
}
.vip-head .section-title {
  text-align: center;
  margin-bottom: 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.benefit-card {
  padding: var(--space-6);
  transition: border-color var(--transition), transform var(--transition);
}
.benefit-card:hover {
  border-color: rgba(240,185,11,0.4);
  transform: translateY(-2px);
}
.benefit-highlight {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(240,185,11,0.12) 0%, rgba(240,185,11,0.02) 100%);
  border-color: rgba(240,185,11,0.5);
}
.benefit-title {
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.benefit-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.7;
  white-space: pre-line;
}
.benefit-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.stat-val {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.1;
}
.stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Section 3: VIP 等级表 ── */
.section-table { background: var(--color-bg-secondary); }
.tier-title {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.tier-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.table-wrap {
  overflow-x: auto;
  padding: var(--space-2) var(--space-4);
}
.tier-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.tier-table th {
  padding: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-align: left;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.tier-table td {
  padding: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table tbody tr:hover td { background: rgba(240,185,11,0.04); }

.vip-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: var(--fw-bold);
  font-family: var(--font-family-num);
}
.chip-vip1 { background: rgba(240,185,11,0.12); color: var(--color-primary); border: 1px solid rgba(240,185,11,0.35); }
.chip-vip2 { background: rgba(240,185,11,0.18); color: var(--color-primary); border: 1px solid rgba(240,185,11,0.45); }
.chip-vip3 { background: rgba(240,185,11,0.25); color: var(--color-primary); border: 1px solid rgba(240,185,11,0.55); }
.chip-vip4 { background: rgba(240,185,11,0.35); color: #111;                 border: 1px solid rgba(240,185,11,0.7); }
.chip-vip5 { background: var(--color-primary);  color: #111;                 border: 1px solid var(--color-primary); }

/* ── 移动端 ── */
@media (max-width: 960px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-highlight { grid-column: span 2; }
}
@media (max-width: 768px) {
  .banner-section { padding: var(--space-10) 0; }
  .banner-inner { grid-template-columns: 1fr; }
  .banner-title { font-size: 32px; }
  .banner-deco { order: -1; }
  .hero-3d-img { max-width: 360px; }
  .benefits-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .benefit-highlight { grid-column: span 1; }
  .benefit-stats { gap: var(--space-5); }
  .stat-val { font-size: 22px; }
  .vip-crown-img { width: 88px; }
}
</style>
