<script setup lang="ts">
// P 关于我们 —— 文案来源 docs/关于我们.md

const heroStats = [
  { label: '成立于', value: '2023' },
  { label: '注册地', value: '新加坡' },
  { label: '合规牌照', value: '美国 · 新加坡 MSB' },
  { label: '全天候客服', value: '24 / 7' },
]

const highlights = [
  {
    title: '快速交易体验',
    desc: '用户友好、方便、舒适的交易体验，透明的流程和微秒级的撮合系统。',
    icon: '⚡',
  },
  {
    title: '抗风险价格机制',
    desc: '利用多种来源支撑交易对指数和数据，保护用户在极端行情下免受风险和损失。',
    icon: '🛡️',
  },
  {
    title: '资金安全保障',
    desc: '多重离线签名进行存取款，深度冷存储、银行级风控，保障用户资产安全。',
    icon: '🔒',
  },
  {
    title: '顶级技术团队',
    desc: '世界一流的技术团队支持产品开发，持续优化系统性能与用户体验。',
    icon: '⚙️',
  },
  {
    title: '分级减持机制',
    desc: '根据市场波动合理触发风险控制，确保持续保护用户的宝贵资产。',
    icon: '📉',
  },
  {
    title: '24/7 客户支持',
    desc: '提供全天候专业客户支持，第一时间响应并解决用户问题。',
    icon: '💬',
  },
]
</script>

<template>
  <main class="page-main">
    <!-- Hero -->
    <section class="about-hero">
      <div class="page-container hero-inner">
        <p class="hero-eyebrow">ABOUT US</p>
        <h1 class="hero-title">关于 iBit Exchange</h1>
        <p class="hero-desc">
          iBit Exchange 成立于 2023 年，注册在新加坡，拥有美国、新加坡等国际相关牌照，
          是加密货币交易领域的专业参与者。平台坚持以用户为中心，拥有专业的团队、稳定的行情数据、
          安全的软件系统与多样化的交易方式。
        </p>

        <ul class="hero-stats">
          <li v-for="s in heroStats" :key="s.label">
            <span class="stat-value">{{ s.value }}</span>
            <span class="stat-label">{{ s.label }}</span>
          </li>
        </ul>
      </div>
    </section>

    <!-- Intro -->
    <section class="about-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 专注于快速、透明、舒适的交易体验 <span class="bracket">]</span>
        </h2>
        <p class="section-p">
          iBit 交易所专注于提供快速、透明、舒适的交易体验，已成为全球用户值得信赖的选择。平台的综合服务，
          包括强大的抗风险价格机制、资金安全保障和顶级技术支持，使其成为寻求安全、高效的加密货币交易环境的可靠目的地。
        </p>
      </div>
    </section>

    <!-- Highlights -->
    <section class="about-section about-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 平台六大核心优势 <span class="bracket">]</span>
        </h2>
        <div class="highlight-grid">
          <div v-for="h in highlights" :key="h.title" class="highlight-card">
            <div class="highlight-icon">{{ h.icon }}</div>
            <h3 class="highlight-title">{{ h.title }}</h3>
            <p class="highlight-desc">{{ h.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 全球合规运营 -->
    <section class="about-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 全球合规运营 <span class="bracket">]</span>
        </h2>
        <p class="section-p">
          iBit Exchange 是一家秉承全球合规运营的专业区块链衍生品交易平台。持有美国和新加坡的 MSB 牌照，
          提供成本可控、滑点低的永续合约产品。平台通过永续合约的深度撮合、完善的开仓与持仓机制、多元化的权益体系，
          为用户提供丰富的策略选择和舒适的交易体验。
        </p>
      </div>
    </section>

    <!-- 支持的加密货币 -->
    <section class="about-section about-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 优质资产 &amp; 社区共建 <span class="bracket">]</span>
        </h2>
        <p class="section-p">
          iBit 支持高潜力的加密货币，确保支持的资产范围多样化。平台实施质量保证体系来维持上市标准，
          并设立跟单计划保障用户收益；同时也为志同道合的个人组成的充满活力的社区敞开大门，
          促进合作共赢，助力用户在加密货币交易世界中持续成长。
        </p>
      </div>
    </section>

    <!-- Mobile App -->
    <section class="about-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 随时随地，掌上交易 <span class="bracket">]</span>
        </h2>
        <p class="section-p">
          后续交易所将陆续上架 App Store 和 Google Play。iBit 移动应用程序提供简化且直观的界面，
          让交易者灵活地执行交易、监控市场趋势并便捷地管理投资组合，无论身在何处都可随时随地进行交易。
        </p>
        <div class="cta-row">
          <RouterLink to="/download" class="cta-btn">
            <span class="bracket">[</span> 下载 App <span class="bracket">]</span>
          </RouterLink>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
/* ── Hero ── */
.about-hero {
  background: radial-gradient(ellipse at top, rgba(240, 185, 11, 0.12) 0%, transparent 60%),
              var(--color-bg-primary);
  padding: var(--space-16) 0 var(--space-12);
  border-bottom: 1px solid var(--color-border);
}
.hero-inner { max-width: 900px; }
.hero-eyebrow {
  font-size: var(--text-caption);
  letter-spacing: 4px;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.hero-title {
  font-size: 48px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: var(--space-5);
}
.hero-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-10);
  max-width: 720px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}
.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.stat-value {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.stat-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ── Sections ── */
.about-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-primary);
}
.about-section--alt { background: var(--color-bg-secondary); }
.content { max-width: 1080px; }

.section-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}
.bracket {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.section-p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.9;
  max-width: 960px;
}

/* ── Highlights ── */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.highlight-card {
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s, transform 0.2s;
}
.highlight-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.highlight-icon {
  font-size: 28px;
  margin-bottom: var(--space-4);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 185, 11, 0.1);
  border-radius: var(--radius-md);
}
.highlight-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.highlight-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── CTA ── */
.cta-row {
  margin-top: var(--space-8);
}
.cta-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);
  text-decoration: none;
  transition: background 0.2s;
}
.cta-btn:hover { background: rgba(240, 185, 11, 0.1); }

/* ── 移动端 ── */
@media (max-width: 768px) {
  .about-hero { padding: var(--space-10) 0; }
  .hero-title { font-size: 32px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .about-section { padding: var(--space-10) 0; }
  .highlight-grid { grid-template-columns: 1fr; }
}
</style>
