<script setup lang="ts">
// P17 新手指南 —— 对应 lanhu 设计稿「新手指南.PSD」(image_id 14219f33-...)
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
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 { t } = useI18n()

const guideCards = computed(() => [
  { id: 'spot',    title: t('guide.cardSpot'),    image: cardSpot,    href: '#spot' },
  { id: 'futures', title: t('guide.cardFutures'), image: cardFutures, href: '#futures' },
  { id: 'faq',     title: t('guide.cardFaq'),     image: cardFaq,    href: '#faq' },
])

const spotSteps = computed(() => [
  t('guide.spotStep1'),
  t('guide.spotStep2'),
  t('guide.spotStep3'),
  t('guide.spotStep4'),
  t('guide.spotStep5'),
  t('guide.spotStep6'),
])

const futuresBullets = computed(() => [
  t('guide.futuresBullet1'),
  t('guide.futuresBullet2'),
  t('guide.futuresBullet3'),
])

const futuresSteps = computed(() => [
  t('guide.futuresStep1'),
  t('guide.futuresStep2'),
  t('guide.futuresStep3'),
  t('guide.futuresStep4'),
  t('guide.futuresStep5'),
  t('guide.futuresStep6'),
])

const futuresWarnings = computed(() => [
  t('guide.futuresWarning1'),
  t('guide.futuresWarning2'),
])

const faqList = computed(() => [
  { q: t('guide.faq1Q'), a: t('guide.faq1A') },
  { q: t('guide.faq2Q'), a: t('guide.faq2A') },
  { q: t('guide.faq3Q'), a: t('guide.faq3A') },
  { q: t('guide.faq4Q'), a: t('guide.faq4A') },
  { q: t('guide.faq5Q'), a: t('guide.faq5A') },
  { q: t('guide.faq6Q'), a: t('guide.faq6A') },
  { q: t('guide.faq7Q'), a: t('guide.faq7A') },
  { q: t('guide.faq8Q'), a: t('guide.faq8A') },
  { q: t('guide.faq9Q'), a: t('guide.faq9A') },
  { q: t('guide.faq10Q'), a: t('guide.faq10A') },
])
</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">{{ t('guide.heroTitle') }}</h1>
        <p class="hero-desc">{{ t('guide.heroDesc') }}</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">{{ t('guide.spotTitle') }}</h2>

        <h3 class="guide-h3">{{ t('guide.spotWhat') }}</h3>
        <p class="guide-p">{{ t('guide.spotDesc') }}</p>

        <h3 class="guide-h3">{{ t('guide.spotStepsTitle') }}</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">{{ t('guide.futuresTitle') }}</h2>

        <h3 class="guide-h3">{{ t('guide.futuresWhat') }}</h3>
        <p class="guide-p">{{ t('guide.futuresDesc') }}</p>
        <ul class="guide-ul">
          <li v-for="(b, i) in futuresBullets" :key="i">{{ b }}</li>
        </ul>

        <h3 class="guide-h3">{{ t('guide.futuresStepsTitle') }}</h3>
        <ol class="guide-ol">
          <li v-for="(s, i) in futuresSteps" :key="i">{{ s }}</li>
        </ol>

        <h3 class="guide-h3 guide-h3--warn">{{ t('guide.futuresWarningTitle') }}</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">{{ t('guide.faqTitle') }}</h2>
        <div class="faq-list">
          <div v-for="(item, i) in faqList" :key="i" class="faq-item">
            <p class="faq-q">{{ t('guide.faqPrefixQ') }}{{ i + 1 }}：{{ item.q }}</p>
            <p class="faq-a">{{ t('guide.faqPrefixA') }}：{{ 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>
