<script setup lang="ts">
// P17 新手指南 —— 对应 lanhu 设计稿「新手指南.PSD」(image_id 14219f33-...)
import heroBg      from '@/assets/guide/hero-bg.png'
import cardSpot    from '@/assets/guide/card-spot.png'
import cardFutures from '@/assets/guide/card-futures.png'
import cardFaq     from '@/assets/guide/card-faq.png'

const guideCards = [
  { id: 'spot',    title: '如何进行现货交易', image: cardSpot,    href: '#spot' },
  { id: 'futures', title: '如何进行合约交易', image: cardFutures, href: '#futures' },
  { id: 'faq',    title: '常见问题',         image: cardFaq,    href: '#faq' },
]

const spotSteps = [
  '注册账号并完成认证（KYC）：通过本平台官网或下载 App，注册后绑定手机号/邮箱，上传身份证等资料完成实名认证（解锁提币和更高额度）。',
  '充值资金：进入「资产」→「充值」页面。新手推荐：用银行卡/支付宝快捷购买 USDT（稳定不波动），或者从其他钱包转入 USDT/BTC 等。小贴士：第一次充值建议小额测试。',
  '进入现货交易页面：点击「交易」→「现货交易」。',
  '选择交易对：在搜索「BTC/USDT」「ETH/USDT」等热门币种，点击进入交易界面（左侧是 K 线图）。',
  '下单买入：立即按当前价成交（适合急着买/卖），或限价：自己设置想要的价格，系统自动帮你成交（更划算，推荐新手）。输入数量或金额 → 检查手续费 → 点击「买入」或「卖出」确认。',
  '查看结果：交易成功后，在「资产」页面看到持有的币；在「订单历史」查看记录。',
]

const futuresBullets = [
  '看涨 → 开多（Long）',
  '看跌 → 开空（Short）',
  '支持杠杆（放大收益也放大风险），没有到期日，可以一直持仓，适合有经验的用户做短线或对冲。',
]

const futuresSteps = [
  '资金划转：「资产」页面 → 「划转」 → 把现货账户的 USDT 转到「合约账户」。',
  '进入合约页面：点击「交易」→「合约交易」→ 选择「USDT 永续合约」（如 BTCUSDT 永续）。',
  '设置参数：杠杆：新手强烈建议 2–5 倍，最高别超过 10 倍！稳定交易者可自行选择杠杆倍数。模式：选「全仓模式」（推荐）或「逐仓模式」。',
  '下单开仓：预测涨 → 点击「开多」；预测跌 → 点击「开空」。输入数量 → 必须设置止盈止损（防大亏！）→ 确认下单。',
  '管理仓位：在「持仓」页面查看实时数字、保证金率、强平价格，需要时追加保证金。',
  '平仓获利或达到目标后点击「平仓」，利润自动回到合约账户，可到钱包划转。',
]

const futuresWarnings = [
  '每小时有资金费率结算（持仓要留意）。',
  '高杠杆容易爆仓（保证金不够被强制平仓），永远只用闲钱，严格止损！',
]

const faqList = [
  { q: '现货和合约到底有什么区别？', a: '现货是真实买币种持有，只能涨了赚钱；合约是「猜价格」，能涨跌都赚，但有杠杆和爆仓风险。' },
  { q: '新手应该先玩现货还是合约？', a: '100% 先玩现货。熟悉市场再慢慢尝试低杠杆合约。' },
  { q: '合约会爆仓吗？怎么避免？', a: '会。当亏损接近保证金时会被强平。设止损、低杠杆、小仓位，不追涨杀跌。' },
  { q: '手续费怎么算？', a: '现货约 0.1%，合约有 Maker/Taker + 资金费率。详细看「费率」页面。' },
  { q: '怎么充值和提现到银行卡？', a: '充值用 C2C 买币或钱包转账；提现先卖币换 USDT，再走 C2C 卖出。需要 KYC，请走银行转账到本行，小额先测试。' },
  { q: '杠杆越高越好吗？', a: '不是！杠杆越高风险越大，新手用 2–5 倍最稳，高杠杆最容易瞬间归零。' },
  { q: '资金费率是什么意思？', a: '永续合约每 8 小时多空双方互相支付费率，让合约价格贴近现货价格。' },
  { q: '平台安全吗？我的钱会不会丢？', a: '本平台采用冷热钱包分离储备，自己也要保管好密码、开启 2FA、不点不明链接、定期修改密码。' },
  { q: '亏损了怎么办？', a: '先停止交易，复盘原因。交易是长期学习过程，切勿借钱做 All in。' },
  { q: '交易犯法吗？', a: '香港及大陆用户请遵守当地法规，建议使用持牌合规平台，并注意税务申报。内地用户请遵守当地法律法规。' },
]
</script>

<template>
  <main class="page-main">
    <!-- ── Hero ────────────────────────────────────────── -->
    <section class="hero" :style="{ backgroundImage: `url(${heroBg})` }">
      <div class="hero-overlay" />
      <div class="page-container hero-inner">
        <h1 class="hero-title">新手指南</h1>
        <p class="hero-desc">新手必读，操作指南，进阶精通，行业热点尽在数字学堂，帮助一站式，省时省力轻松数字货币学习！</p>

        <div class="guide-cards">
          <a
            v-for="g in guideCards"
            :key="g.id"
            :href="g.href"
            class="guide-card"
          >
            <div class="guide-card-media">
              <img :src="g.image" :alt="g.title" />
            </div>
            <p class="guide-card-label">iBit</p>
            <p class="guide-card-title">{{ g.title }}</p>
          </a>
        </div>
      </div>
    </section>

    <!-- ── Content ─────────────────────────────────────── -->
    <div class="page-container content">
      <!-- 现货交易 -->
      <section class="guide-section" id="spot">
        <h2 class="guide-h2">如何进行现货交易</h2>

        <h3 class="guide-h3">现货交易是什么？</h3>
        <p class="guide-p">
          现货交易是指在当时的市场价格即时买入或卖出加密货币（如 BTC、ETH、USDT），交易完成后您真正持有这些数字资产。可以长期持有、转账提取，或用于支付、DeFi 等。
          特点：操作简单、无杠杆、风险较低，最适合新手和长期投资者。
        </p>

        <h3 class="guide-h3">现货交易操作步骤（本平台示例）：</h3>
        <ol class="guide-ol">
          <li v-for="(s, i) in spotSteps" :key="i">{{ s }}</li>
        </ol>
      </section>

      <!-- 合约交易 -->
      <section class="guide-section" id="futures">
        <h2 class="guide-h2">如何进行合约交易</h2>

        <h3 class="guide-h3">合约交易是什么？</h3>
        <p class="guide-p">
          合约交易是对加密货币价格涨跌的预测交易。合约不需要真正持有币，只通过预测价格涨跌来赚钱。
        </p>
        <ul class="guide-ul">
          <li v-for="(b, i) in futuresBullets" :key="i">{{ b }}</li>
        </ul>

        <h3 class="guide-h3">合约交易操作步骤（本平台示例）：</h3>
        <ol class="guide-ol">
          <li v-for="(s, i) in futuresSteps" :key="i">{{ s }}</li>
        </ol>

        <h3 class="guide-h3 guide-h3--warn">重要提醒：</h3>
        <ul class="guide-ul">
          <li v-for="(w, i) in futuresWarnings" :key="i">{{ w }}</li>
        </ul>
      </section>

      <!-- FAQ -->
      <section class="guide-section" id="faq">
        <h2 class="guide-h2">常见问题解答（FAQ）</h2>
        <div class="faq-list">
          <div v-for="(item, i) in faqList" :key="i" class="faq-item">
            <p class="faq-q">Q{{ i + 1 }}：{{ item.q }}</p>
            <p class="faq-a">A：{{ item.a }}</p>
          </div>
        </div>
      </section>
    </div>
  </main>
</template>

<style scoped>
/* ── Hero ── */
.hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.55) 0%,
    rgba(10,10,10,0.3) 45%,
    rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero-title {
  font-size: 56px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-3);
  letter-spacing: 2px;
}
.hero-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 auto var(--space-12);
  max-width: 640px;
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: rgba(20, 20, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(6px);
}
.guide-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.guide-card-media {
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}
.guide-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guide-card-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  padding-left: var(--space-1);
}
.guide-card-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  padding-left: var(--space-1);
  padding-bottom: var(--space-2);
}

/* ── Content ── */
.content {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  max-width: 960px;
}

.guide-section {
  margin-bottom: var(--space-16);
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.guide-section:last-child { margin-bottom: 0; }

.guide-h2 {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(240, 185, 11, 0.2);
  position: relative;
}
.guide-h2::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.guide-h3 {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.guide-h3--warn { color: var(--color-primary); }

.guide-p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

.guide-ol {
  list-style: decimal;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.guide-ol li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.75;
  padding-left: var(--space-1);
}

.guide-ul {
  list-style: disc;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.guide-ul li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── FAQ ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.faq-item {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.faq-a {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── 移动端 ── */
@media (max-width: 768px) {
  .hero { padding: var(--space-10) 0 var(--space-8); }
  .hero-title { font-size: 36px; }
  .guide-cards { grid-template-columns: 1fr; gap: var(--space-4); }
  .content { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .guide-section { margin-bottom: var(--space-10); }
}
</style>
