<script setup lang="ts">
// P10 交易介绍 — 现货 / 合约 / 跟单优势
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCoinsStore } from '@/stores/coins'
import heroCube    from '@/assets/trade/hero-cube.png'
import heroBg      from '@/assets/trade/hero-bg.png'
import futuresGlow from '@/assets/trade/futures-glow.png'
import iconBeginner from '@/assets/trade/icon-beginner.png'
import iconTime     from '@/assets/trade/icon-time.png'
import iconLearn    from '@/assets/trade/icon-learn.png'
import iconRisk     from '@/assets/trade/icon-risk.png'
import iconEmotion  from '@/assets/trade/icon-emotion.png'
import iconProfit   from '@/assets/trade/icon-profit.png'

const router = useRouter()
const coinsStore = useCoinsStore()

onMounted(() => {
  coinsStore.fetchCoins()
})

// 合约交易区块 — 中间 2x2 合约卡（4 个），悬浮高亮、点击跳转
// 优先展示 BTC/ETH/LTC/BNB；不足则补前几个可用交易对
const PREFERRED = ['BTC/USDT', 'ETH/USDT', 'LTC/USDT', 'BNB/USDT']
const featuredContracts = computed(() => {
  const all = coinsStore.coins
  const byPref: typeof all = []
  for (const sym of PREFERRED) {
    const hit = all.find(c => c.symbol === sym)
    if (hit) byPref.push(hit)
  }
  // 不足 4 个，用其它交易对补齐
  for (const c of all) {
    if (byPref.length >= 4) break
    if (!byPref.includes(c)) byPref.push(c)
  }
  return byPref.slice(0, 4)
})

function formatPct(chg: string) {
  const n = parseFloat(chg) * 100
  if (!Number.isFinite(n)) return '0.00%'
  const sign = n > 0 ? '+' : ''
  return `${sign}${n.toFixed(2)}%`
}

function gotoFutures(symbol: string) {
  router.push({ name: 'futures', params: { symbol: symbol.replace('/', '-') } })
}

const copyBenefits = [
  { icon: iconBeginner, title: '适合新手',   desc: '无需专业知识或长期学习，即可跟随经验丰富的交易者操作，快速入门。' },
  { icon: iconTime,     title: '节省时间',   desc: '交易全自动执行，无需盯盘行动，适合上班族或忙碌投资人士。' },
  { icon: iconLearn,    title: '学习机会',   desc: '通过观察高手实盘策略，自然提升自身的交易水平。' },
  { icon: iconRisk,     title: '分散风险',   desc: '可同时跟多位交易者，实现投资组合多元化。' },
  { icon: iconEmotion,  title: '去除情绪干扰', desc: '避免情绪、自意愿等情绪影响，决策更理性。' },
  { icon: iconProfit,   title: '潜在被动收益', desc: '选对高手，有机会实现稳定盈利。' },
]

</script>

<template>
  <main class="page-main">
    <!-- 现货交易 -->
    <section class="trade-section spot-section" :style="{ backgroundImage: `url(${heroBg})` }">
      <div class="spot-overlay" />
      <div class="page-container trade-inner">
        <div class="trade-content">
          <h1 class="trade-title">稳定、高效的现货<br>交易体验</h1>
          <p class="trade-desc">
            iBit 现货交易支持多种订单类型，界面简洁直观，帮助用户在不同市场情况下灵活发行交易策略…
          </p>
          <RouterLink to="/spot/BTC-USDT" class="trade-btn">
            <span class="btn-bracket">[</span> 现货交易 <span class="btn-bracket">]</span>
          </RouterLink>
        </div>
        <div class="trade-visual spot-visual">
          <img :src="heroCube" alt="3D Cube" class="hero-cube-img" />
        </div>
      </div>
    </section>

    <!-- 合约交易 -->
    <section class="trade-section futures-section">
      <div class="page-container trade-inner">
        <div class="trade-visual futures-visual">
          <!-- 合约示意图：底图（橘色光晕 + 金边矩形 + 中心盾牌）+ 上层 4 张可交互卡 -->
          <div class="futures-diagram" :style="{ backgroundImage: `url(${futuresGlow})` }">
            <button
              v-for="(item, idx) in featuredContracts"
              :key="item?.symbol ?? idx"
              class="diagram-card"
              :class="[`pos-${idx}`, { 'is-placeholder': !item }]"
              :disabled="!item"
              @click="item && gotoFutures(item.symbol)"
            >
              <template v-if="item">
                <p class="card-symbol">{{ item.symbol }}</p>
                <p class="card-type">永续</p>
                <p
                  class="card-chg"
                  :class="parseFloat(item.chg) >= 0 ? 'is-up' : 'is-down'"
                >
                  {{ formatPct(item.chg) }}
                </p>
              </template>
            </button>
          </div>
        </div>
        <div class="trade-content">
          <h2 class="trade-title">面向专业用户的<br>合约交易系统</h2>
          <p class="trade-desc">
            CV 合约交易提供永续合约产品，支持灵活杠杆选择，开通进阶善的风险控制机制保障交易秩序…
          </p>
          <RouterLink to="/market" class="trade-btn">
            <span class="btn-bracket">[</span> 合约交易 <span class="btn-bracket">]</span>
          </RouterLink>
        </div>
      </div>
    </section>

    <!-- 跟单优势 -->
    <section class="section copy-section">
      <div class="page-container">
        <h2 class="section-title">快速入门 解放双手</h2>
        <div class="copy-label dark-card">
          <span class="btn-bracket">[</span> 跟单交易 <span class="btn-bracket">]</span>
        </div>
        <div class="copy-grid">
          <div v-for="b in copyBenefits" :key="b.title" class="copy-card">
            <img :src="b.icon" :alt="b.title" class="copy-icon-img" />
            <h3 class="copy-title">{{ b.title }}</h3>
            <p class="copy-desc">{{ b.desc }}</p>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
/* ── 通用 ── */
.trade-section {
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}
.trade-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}
.trade-inner.reverse { direction: rtl; }
.trade-inner.reverse > * { direction: ltr; }

.trade-title {
  font-size: 40px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: var(--space-4);
}
.trade-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.trade-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  transition: background var(--transition);
}
.trade-btn:hover { background: rgba(240,185,11,0.1); }
.btn-bracket { font-size: 18px; font-weight: var(--fw-bold); }

/* ── Section 1: 现货交易 ── */
.spot-section {
  background-color: var(--color-bg-secondary);
  background-size: cover;
  background-position: center top;
}
.spot-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-bg-secondary) 40%, transparent 100%);
  z-index: 0;
}
.spot-visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hero-cube-img {
  width: 100%;
  max-width: 520px;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(240,185,11,0.25));
}

/* ── Section 2: 合约交易 ── */
.futures-section { background: var(--color-bg-primary); }

.futures-visual { display: flex; justify-content: center; }

/* 合约示意图：底图 = 橘色光晕 + 金边矩形 + 中心盾牌（切图），上层 = 4 张可交互卡
   注意：底图 918x602 本身带很多上下空白光晕，容器收紧到更方的比例 +
   background-size 100%/100% 让金边矩形压扁到更接近设计稿比例 */
.futures-diagram {
  position: relative;
  width: 65%;
  max-width: 540px;
  aspect-ratio: 1.25 / 1;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 卡片：绝对定位，中心对齐底图矩形的 4 个角
   → 每张卡以 transform: translate(±50%, ±50%) 为锚，
     再通过 top/left/right/bottom 百分比把锚点对到矩形的拐角 */
.diagram-card {
  position: absolute;
  width: 36%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
  background: rgba(18, 18, 20, 0.55);
  border: 1px solid rgba(240, 185, 11, 0.35);
  border-radius: 22px;
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(6px);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}
.diagram-card.pos-0 { top: 22%;    left: 14%;  transform: translate(-50%, -50%); }
.diagram-card.pos-1 { top: 22%;    right: 14%; transform: translate( 50%, -50%); }
.diagram-card.pos-2 { bottom: 22%; left: 14%;  transform: translate(-50%,  50%); }
.diagram-card.pos-3 { bottom: 22%; right: 14%; transform: translate( 50%,  50%); }

.diagram-card:hover:not(.is-placeholder) {
  border-color: var(--color-primary);
  background: rgba(240, 185, 11, 0.1);
  box-shadow: 0 0 0 1px rgba(240, 185, 11, 0.6),
              0 12px 36px rgba(240, 185, 11, 0.28);
}
.diagram-card.pos-0:hover:not(.is-placeholder) { transform: translate(-50%, -50%) scale(1.04); }
.diagram-card.pos-1:hover:not(.is-placeholder) { transform: translate( 50%, -50%) scale(1.04); }
.diagram-card.pos-2:hover:not(.is-placeholder) { transform: translate(-50%,  50%) scale(1.04); }
.diagram-card.pos-3:hover:not(.is-placeholder) { transform: translate( 50%,  50%) scale(1.04); }

.diagram-card.is-placeholder {
  cursor: default;
  opacity: 0.5;
}
.card-symbol {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.card-type {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.card-chg {
  margin-top: 4px;
  font-size: 22px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.card-chg.is-up   { color: var(--color-up,   #00d084); }
.card-chg.is-down { color: var(--color-down, #ff4d4f); }

/* ── Section 3: 跟单优势 ── */
.copy-section { background: var(--color-bg-secondary); }

/* 设计稿里区块标题 + 跟单交易 tag 都是左对齐（全局 .section-title 是居中，这里覆盖） */
.copy-section :deep(.section-title) {
  text-align: left;
  margin-bottom: var(--space-6);
}

.copy-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  margin-bottom: var(--space-12);
  color: var(--color-primary);
  font-size: var(--text-body);
}

.copy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-12);
  row-gap: var(--space-12);
}

/* 每张卡独立一条金色分隔线，通过 grid column-gap 形成左右分割 */
.copy-card {
  position: relative;
  padding-bottom: var(--space-5);
}
.copy-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(240, 185, 11, 0.35);
}
.copy-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: var(--space-3);
}
.copy-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.copy-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── 移动端 ── */
@media (max-width: 768px) {
  .trade-section { padding: var(--space-10) 0; }
  .trade-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .trade-inner.reverse { direction: ltr; }
  .trade-visual { display: none; }
  .trade-title { font-size: 28px; }
  .copy-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
</style>
