<script setup lang="ts">
// P 品牌信息 —— 文案来源 docs/品牌信息.md

const heroStats = [
  { value: '2023', label: '成立年份' },
  { value: '新加坡', label: '注册地' },
  { value: '马来西亚', label: '运营中心' },
  { value: '美国 MSB', label: '金融牌照' },
]

const teamCores = [
  {
    title: '技术团队',
    desc: '来自 Google、Amazon、华为的资深工程架构师组成，拥有十年以上高并发金融级系统实战经验，构建行业领先的低延迟、高吞吐、安全至上的底层基础设施。',
    icon: '⚙️',
  },
  {
    title: '交易团队',
    desc: '集结前火币（Huobi）核心交易班底成员，对市场微观结构、流动性管理、风险控制和用户行为有着极致深刻的理解。',
    icon: '📈',
  },
]

const flagshipProducts = [
  {
    tag: '明星功能',
    title: '无损跟单',
    desc: '突破传统跟单"盈亏共担"的痛点，通过智能风控合约、动态仓位管理和专业交易员筛选机制，实现"跟单无额外损失"的创新体验。无论市场如何波动，用户都能在跟随顶级策略的同时，将本金风险控制在可预期范围内。',
    highlights: ['智能风控合约', '动态仓位管理', '专业交易员筛选'],
  },
  {
    tag: '全新生态',
    title: '生态钱包',
    desc: '超越传统钱包的"存储"功能，集成智能资产管理、多链一键跨链、DeFi 协议聚合、NFT 资产展示以及 Web4 入口，支持在一个界面内完成交易、理财、社交和生态参与。内置 AI 助手，提供个性化市场洞察与投资建议。',
    highlights: ['多链跨链', 'DeFi 聚合', 'AI 投顾'],
  },
  {
    tag: '专业交易',
    title: '现货 / 合约 / 杠杆',
    desc: '提供高性能的现货、合约与杠杆交易，深度聚合全球流动性，即将上线 Web3.5 社交交易、DAO 治理和 AI 驱动的投资组合管理工具。所有产品围绕"安全、无损、智能、生态"四大核心设计理念打造。',
    highlights: ['全球流动性聚合', 'Web3.5 社交交易', 'AI 投资组合'],
  },
]

const metrics = [
  { value: '10,000+', label: '日活用户', note: '稳定突破' },
  { value: '$10M+', label: '单日交易额', note: '持续增长' },
  { value: '50+', label: '覆盖国家地区', note: '亚欧中东拉美' },
  { value: '24/7', label: '全球服务', note: '全天候支持' },
]

const roadmap = [
  { year: 'Phase 1', title: '原生生态代币', desc: '推出平台原生代币，实现平台价值与用户利益深度绑定' },
  { year: 'Phase 2', title: '法币通道扩展', desc: '拓展更多法币通道与本地化服务，覆盖全球更多地区' },
  { year: 'Phase 3', title: '开放开发者平台', desc: '打造开放的开发者平台，吸引全球 Web3 项目方入驻' },
  { year: 'Phase 4', title: 'AI × 跨链突破', desc: '实现 AI 交易、智能风控与跨链技术的进一步突破' },
]

const securityPillars = [
  { title: '多签冷热分离', desc: '冷热钱包物理隔离，多重离线签名保护用户资产。' },
  { title: '实时风控监控', desc: '全链路风控系统，异常交易实时识别与处置。' },
  { title: '定期第三方审计', desc: '独立安全机构定期审计，代码与资金透明可验。' },
  { title: '全球合规', desc: '严格遵守运营地监管要求，所有新功能上线前经过内外部安全测试。' },
]
</script>

<template>
  <main class="page-main">
    <!-- ── Hero ────────────────────────────────────────── -->
    <section class="brand-hero">
      <div class="hero-glow" aria-hidden="true" />
      <div class="page-container hero-inner">
        <p class="hero-eyebrow">OUR BRAND</p>
        <h1 class="hero-title">
          iBit<br>
          <span class="hero-title-sub">从 Web3 迈向 Web4 的全球加密交易新生态</span>
        </h1>
        <p class="hero-desc">
          iBit 成立于 2023 年，是一家专注于全球加密数字资产交易的创新型交易所。我们注册于新加坡，运营中心位于马来西亚，
          并持有美国 MSB 金融牌照，以合规、专业、安全为核心，致力于为全球用户提供高效、智能、安全的加密资产交易服务，
          以及 Web3.5 到 Web4 的全新生态基础设施。
        </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>

    <!-- ── 起源与初心 ──────────────────────────────────── -->
    <section class="brand-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 起源与初心 <span class="bracket">]</span>
        </h2>
        <p class="section-p">
          2023 年，全球加密市场在经历多次周期洗礼后，监管合规、技术创新和用户体验成为行业新共识。
          一群来自顶级科技公司和头部交易所的资深专家共同发现：现有交易平台虽多，真正能兼顾顶级安全、极致用户体验与长期生态价值的却凤毛麟角。
        </p>
        <p class="section-p">
          iBit 由此诞生。我们希望重新定义加密交易 —— 不仅仅是「买卖」，而是让每一位用户都能在安全、无损、高效的环境中，
          轻松参与全球加密价值流动，并自然过渡到下一代 Web4 智能生态。
        </p>
        <p class="section-p">
          新加坡的注册地选择了国际金融中心的严谨与开放，马来西亚的运营中心保障了高效的全球服务响应，美国 MSB 金融牌照则是对合规经营的郑重承诺。
          这三地布局，构成了 iBit 从诞生之初就具备的国际化、专业化基因。
        </p>
      </div>
    </section>

    <!-- ── 双核团队 ────────────────────────────────────── -->
    <section class="brand-section brand-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 顶级团队 · 技术与交易双核驱动 <span class="bracket">]</span>
        </h2>
        <div class="team-grid">
          <div v-for="t in teamCores" :key="t.title" class="team-card">
            <div class="team-icon">{{ t.icon }}</div>
            <h3 class="team-title">{{ t.title }}</h3>
            <p class="team-desc">{{ t.desc }}</p>
          </div>
        </div>
        <p class="section-p team-quote">
          技术极客与交易老兵的强强结合，让 iBit 得以在成立短短时间内打造出远超行业平均水平的产品体验和风控能力。
        </p>
      </div>
    </section>

    <!-- ── 王牌产品 ────────────────────────────────────── -->
    <section class="brand-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 王牌产品 · 重新定义交易与资产管理 <span class="bracket">]</span>
        </h2>
        <div class="product-list">
          <article v-for="p in flagshipProducts" :key="p.title" class="product-item">
            <div class="product-tag">{{ p.tag }}</div>
            <h3 class="product-title">{{ p.title }}</h3>
            <p class="product-desc">{{ p.desc }}</p>
            <ul class="product-highlights">
              <li v-for="h in p.highlights" :key="h">
                <span class="dot">·</span>{{ h }}
              </li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <!-- ── 数据表现 ────────────────────────────────────── -->
    <section class="brand-section brand-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 亮眼数据与市场认可 <span class="bracket">]</span>
        </h2>
        <p class="section-p">
          自 2023 年底正式运营以来，iBit 凭借过硬的产品力和用户口碑实现了高速增长。
          服务用户覆盖亚洲、欧洲、中东及拉美多个地区，正在成为越来越多全球用户信赖的加密资产门户。
        </p>
        <div class="metric-grid">
          <div v-for="m in metrics" :key="m.label" class="metric-card">
            <div class="metric-value">{{ m.value }}</div>
            <div class="metric-label">{{ m.label }}</div>
            <div class="metric-note">{{ m.note }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 愿景与 Roadmap ──────────────────────────────── -->
    <section class="brand-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 愿景 · 构建 Web3 到 Web4 的生态体系 <span class="bracket">]</span>
        </h2>
        <p class="section-p">
          在 Web3 阶段，我们聚焦交易、资产安全和智能理财；在 Web4 阶段，我们将引入更多 AI 原生应用、去中心化身份（DID）、
          跨链智能合约编排、链上社交、元宇宙资产互通以及 DAO 共治机制，让加密不再是「少数玩家的游戏」，
          而成为普通用户也能轻松参与、持续受益的全球价值网络。
        </p>

        <h3 class="sub-heading">未来三年 Roadmap</h3>
        <ol class="roadmap">
          <li v-for="(r, i) in roadmap" :key="r.title">
            <div class="rm-index">{{ String(i + 1).padStart(2, '0') }}</div>
            <div class="rm-content">
              <p class="rm-phase">{{ r.year }}</p>
              <p class="rm-title">{{ r.title }}</p>
              <p class="rm-desc">{{ r.desc }}</p>
            </div>
          </li>
        </ol>
      </div>
    </section>

    <!-- ── 安全合规 ────────────────────────────────────── -->
    <section class="brand-section brand-section--alt">
      <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 class="security-grid">
          <div v-for="s in securityPillars" :key="s.title" class="security-card">
            <h4 class="security-title">{{ s.title }}</h4>
            <p class="security-desc">{{ s.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ── CTA ─────────────────────────────────────────── -->
    <section class="brand-cta">
      <div class="page-container cta-inner">
        <h2 class="cta-title">iBit — 看见未来，掌控价值</h2>
        <p class="cta-desc">
          我们诚邀全球有志于加密事业的伙伴、项目方、KOL 和用户加入 iBit 生态，
          一起从 Web3 迈向 Web4，共同构建一个更开放、更智能、更普惠的全球价值网络。
        </p>
        <div class="cta-row">
          <RouterLink to="/download" class="cta-btn cta-btn--primary">
            <span class="bracket">[</span> 下载 App <span class="bracket">]</span>
          </RouterLink>
          <RouterLink to="/about" class="cta-btn">
            <span class="bracket">[</span> 关于我们 <span class="bracket">]</span>
          </RouterLink>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
/* ── Hero ── */
.brand-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  left: 50%;
  top: -20%;
  width: 900px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240,185,11,0.2) 0%, transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 1000px; }
.hero-eyebrow {
  font-size: var(--text-caption);
  letter-spacing: 4px;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}
.hero-title {
  font-size: 56px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}
.hero-title-sub {
  display: block;
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}
.hero-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-10);
  max-width: 820px;
}

.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);
}

/* ── Section 通用 ── */
.brand-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-primary);
}
.brand-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;
  margin-bottom: var(--space-4);
  max-width: 960px;
}

.sub-heading {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
}

/* ── 团队双核 ── */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.team-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;
}
.team-card:hover { border-color: var(--color-primary); }
.team-icon {
  font-size: 28px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 185, 11, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.team-title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.team-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.team-quote {
  margin-top: var(--space-4);
  font-style: italic;
  color: var(--color-text-secondary);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary);
}

/* ── 王牌产品 ── */
.product-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.product-item {
  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;
}
.product-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.product-tag {
  display: inline-block;
  padding: 2px var(--space-3);
  background: rgba(240, 185, 11, 0.12);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.product-title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.product-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-4);
}
.product-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
}
.product-highlights li {
  font-size: var(--text-small);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
}
.product-highlights .dot {
  color: var(--color-primary);
  margin-right: var(--space-1);
  font-weight: var(--fw-bold);
}

/* ── 数据 ── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.metric-card {
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.metric-value {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric-label {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
}
.metric-note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Roadmap ── */
.roadmap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}
.roadmap li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.rm-index {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}
.rm-phase {
  font-size: var(--text-caption);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
}
.rm-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}
.rm-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── 安全支柱 ── */
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.security-card {
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.security-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.security-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── CTA ── */
.brand-cta {
  padding: var(--space-16) 0;
  background: radial-gradient(ellipse at center, rgba(240,185,11,0.08) 0%, transparent 70%),
              var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
}
.cta-inner { text-align: center; max-width: 760px; }
.cta-title {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.cta-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-8);
}
.cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  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); }
.cta-btn--primary {
  background: var(--color-primary);
  color: #000;
}
.cta-btn--primary:hover { opacity: 0.92; background: var(--color-primary); }

/* ── 移动端 ── */
@media (max-width: 960px) {
  .hero-title { font-size: 40px; }
  .hero-title-sub { font-size: 18px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .brand-hero { padding: var(--space-10) 0; }
  .hero-title { font-size: 32px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .brand-section { padding: var(--space-10) 0; }
  .brand-cta { padding: var(--space-10) 0; }
  .cta-title { font-size: 24px; }
}
</style>
