<script setup lang="ts">
// P15 安全中心 — 多层防护 / 数字资产服务 / 法律与风险提示
import heroBitcoin from '@/assets/security/hero-bitcoin.png'
import riskVisual  from '@/assets/security/risk-visual.png'
import iconSpot    from '@/assets/security/icon-spot.png'
import iconFutures from '@/assets/security/icon-futures.png'
import iconLeverage from '@/assets/security/icon-leverage.png'
import iconCopy    from '@/assets/security/icon-copy.png'
import iconApi     from '@/assets/security/icon-api.png'

const securityCards = [
  {
    title: '资产安全',
    items: [
      '冷热钱包隔离储存',
      '多重签名保护每一笔出入金',
    ],
  },
  {
    title: '账户安全 (2FA)',
    items: [
      '双重身份验证 (2FA)',
      '登录与操作风险监控',
    ],
  },
  {
    title: '系统安全',
    items: [
      '多层防御架构',
      '持续安全监控与升级',
    ],
  },
]

const services = [
  { icon: iconSpot,     label: '现货交易' },
  { icon: iconFutures,  label: '合约交易' },
  { icon: iconLeverage, label: '杠杆交易' },
  { icon: iconCopy,     label: '策略 / 跟单交易' },
  { icon: iconApi,      label: 'API 接口服务' },
]

const legalItems = [
  {
    title: '风险提示',
    desc: '数字资产价格波动剧烈，交易存在较高风险。平台不对任何投资收益提供保证，请用户根据自身情况理性判断。',
  },
  {
    title: '用户协议 / 隐私政策',
    desc: '平台严格遵循相关法律法规，保护用户隐私与数据安全，详细条款请参见用户协议与隐私政策。',
    link: '/legal/terms',
  },
]
</script>

<template>
  <main class="page-main">
    <!-- Section 1 Hero -->
    <section class="hero-section">
      <div class="page-container hero-inner">
        <div class="hero-content">
          <h1 class="hero-title">多层防护<br>全面保障用户资产</h1>
          <p class="hero-desc">多种安全机制，为资产安全保驾护航</p>
          <div class="security-cards">
            <div v-for="card in securityCards" :key="card.title" class="security-card dark-card">
              <h3 class="security-card-title">{{ card.title }}</h3>
              <p v-for="item in card.items" :key="item" class="security-card-item">{{ item }}</p>
            </div>
          </div>
        </div>
        <div class="hero-visual">
          <img :src="heroBitcoin" alt="资产安全" class="hero-img" />
        </div>
      </div>
    </section>

    <!-- Section 2 服务范围 -->
    <section class="section services-section">
      <div class="page-container">
        <h2 class="section-title">覆盖多种交易场景的数字资产服务</h2>
        <p class="section-subtitle">满足不同阶段用户的交易需求</p>
        <div class="services-grid">
          <div v-for="s in services" :key="s.label" class="service-item">
            <div class="service-icon">
              <img :src="s.icon" :alt="s.label" />
            </div>
            <span class="service-label">{{ s.label }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Section 3 法律与风险 -->
    <section class="section legal-section">
      <div class="page-container">
        <h2 class="section-title">法律与风险提示</h2>
        <div class="legal-grid">
          <div class="legal-text">
            <div v-for="item in legalItems" :key="item.title" class="legal-block">
              <h3 class="legal-title">{{ item.title }}</h3>
              <p class="legal-desc">{{ item.desc }}</p>
              <RouterLink v-if="item.link" :to="item.link" class="legal-link">查看详情 →</RouterLink>
            </div>
          </div>
          <div class="legal-visual">
            <img :src="riskVisual" alt="风险提示" class="legal-img" />
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
/* ── Section 1 Hero ── */
.hero-section {
  background: var(--color-bg-secondary);
  padding: var(--space-16) 0 var(--space-12);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-title {
  font-size: 48px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
.hero-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.security-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.security-card {
  padding: var(--space-4) var(--space-4);
  position: relative;
}
.security-card::after {
  content: '';
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(240,185,11,0.6);
}
.security-card-title {
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.security-card-item {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.hero-visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hero-img {
  width: 100%;
  max-width: 560px;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(240,185,11,0.28));
}

/* ── Section 2 Services ── */
.services-section {
  background: var(--color-bg-primary);
  padding: var(--space-16) 0;
}
.services-section .section-title { text-align: center; margin-bottom: var(--space-2); }
.section-subtitle {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-12);
}
.services-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 120px;
}
.service-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}
.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(240,185,11,0.3));
}
.service-item:hover .service-icon { transform: translateY(-4px); }
.service-label {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ── Section 3 Legal ── */
.legal-section {
  background: var(--color-bg-secondary);
  padding: var(--space-16) 0;
}
.legal-section .section-title { margin-bottom: var(--space-10); }
.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.legal-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.legal-block {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.legal-block:last-child { border-bottom: none; }
.legal-title {
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.legal-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}
.legal-link {
  font-size: var(--text-small);
  color: var(--color-primary);
  transition: opacity var(--transition);
}
.legal-link:hover { opacity: 0.7; }

.legal-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.legal-img {
  width: 100%;
  max-width: 480px;
  object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(240,185,11,0.25));
}

/* ── 移动端 ── */
@media (max-width: 960px) {
  .security-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hero-section { padding: var(--space-10) 0; }
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-title { font-size: 32px; }
  .hero-img { max-width: 360px; }
  .security-cards { grid-template-columns: 1fr; }
  .services-grid { gap: var(--space-4); }
  .service-item { min-width: 80px; flex: 1 1 30%; }
  .service-icon { width: 56px; height: 56px; }
  .legal-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .legal-visual { order: -1; }
  .legal-img { max-width: 300px; }
}
</style>
