<script setup lang="ts">
const channels = [
  {
    name: 'X (Twitter)',
    desc: '关注官方英文账号 @iBit，获取国际视野的即时资讯、行业洞见及平台最新动态。',
    href: 'https://x.com/ibit',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`,
  },
  {
    name: 'Telegram',
    desc: '加入中文社群，与全球华语用户实时交流，获取中文支持、活动通知及专业答疑。',
    href: 'https://t.me/ibitcn',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 1 0 24 12 12 12 0 0 0 11.944 0zm5.921 7.406-2.063 9.723c-.148.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.41 14.028l-2.96-.924c-.643-.204-.657-.643.136-.953l11.566-4.461c.537-.194 1.006.131.713.716z"/></svg>`,
  },
  {
    name: 'TikTok',
    desc: '关注 @iBit.com，观看交易教程、市场解读、平台活动精彩集锦及投资科普。',
    href: 'https://www.tiktok.com/@ibit.com',
    svg: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.77a4.85 4.85 0 0 1-1.01-.08z"/></svg>`,
  },
]

const benefits = [
  '实时掌握全球市场行情、平台公告及重大活动信息',
  '参与社区讨论、AMA问答及交易策略分享，提升投资能力',
  '享受专属福利、早期项目空投及限时奖励活动',
  '直接向官方团队反馈意见，共同推动平台持续优化',
]
</script>

<template>
  <main class="page-main">
    <!-- Hero -->
    <section class="community-hero">
      <div class="page-container hero-inner">
        <p class="hero-eyebrow">COMMUNITY</p>
        <h1 class="hero-title">加入 iBit 社群</h1>
        <p class="hero-desc">
          iBit 交易所始终坚持"用户至上、透明共生"的核心理念，致力于为全球加密货币交易者打造一个专业、活跃且安全可靠的社区生态。
          加入 iBit 社群，您不仅能第一时间获取平台最新动态、深度市场分析和独家交易机会，
          更能与来自世界各地的投资者、KOL 及行业专家零距离互动，共享智慧、共创价值。
        </p>
      </div>
    </section>

    <!-- Benefits -->
    <section class="community-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 在这里，您可以 <span class="bracket">]</span>
        </h2>
        <ul class="benefit-list">
          <li v-for="b in benefits" :key="b" class="benefit-item">
            <span class="benefit-dot" />
            {{ b }}
          </li>
        </ul>
      </div>
    </section>

    <!-- Channels -->
    <section class="community-section community-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> 官方社区渠道 <span class="bracket">]</span>
        </h2>
        <div class="channel-grid">
          <a
            v-for="c in channels"
            :key="c.name"
            :href="c.href"
            class="channel-card"
            target="_blank"
            rel="noopener"
          >
            <!-- eslint-disable-next-line vue/no-v-html -->
            <span class="channel-icon" v-html="c.svg" />
            <h3 class="channel-name">{{ c.name }}</h3>
            <p class="channel-desc">{{ c.desc }}</p>
            <span class="channel-cta">立即加入 →</span>
          </a>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="community-section">
      <div class="page-container content cta-section">
        <p class="cta-text">
          iBit 社群是连接用户与平台的桥梁，更是每一位成员共同成长的家园。无论您是资深交易者还是新手投资者，
          这里都将为您提供最专业、最贴心的陪伴与支持。
        </p>
        <p class="cta-highlight">立即行动，加入 iBit 社群，开启您的智能交易新篇章！</p>
      </div>
    </section>
  </main>
</template>

<style scoped>
.community-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;
  max-width: 720px;
}

.community-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-primary);
}
.community-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); }

.benefit-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.benefit-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 9px;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.channel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.channel-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(240, 185, 11, 0.1);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}
.channel-icon :deep(svg) { width: 24px; height: 24px; }
.channel-name {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.channel-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
  flex: 1;
}
.channel-cta {
  font-size: var(--text-small);
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

.cta-section { max-width: 800px; }
.cta-text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.9;
  margin-bottom: var(--space-6);
}
.cta-highlight {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .community-hero { padding: var(--space-10) 0; }
  .hero-title { font-size: 32px; }
  .community-section { padding: var(--space-10) 0; }
  .channel-grid { grid-template-columns: 1fr; }
}
</style>
