---
import Layout from '../../layouts/Layout.astro';
import Breadcrumb from '../../components/Breadcrumb.astro';
import { APP_NAME } from '../../config/app';
import { Image } from 'astro:assets';
import step1 from '../../../public/faq/how-to-become-member/step-1.png';
import step2 from '../../../public/faq/how-to-become-member/step-2.png';

const title = `${APP_NAME} - ${APP_NAME}`;
const description = `了解如何成为${APP_NAME}会员，解锁专属学习特权，享受海量优质内容。`;
const keywords = `${APP_NAME},会员开通,会员权益,知识学习,会员服务`;
---
<Layout title={title} description={description} keywords={keywords}>
    <Breadcrumb data={[{ title: '常见问题', link: '/faq' }, { title: '如何成为会员', link: '#' }]} />
        
    <article class="faq-content">
      <header class="faq-header">
        <h1>如何成为《知识回声》会员？</h1>
      </header>

      <div class="content">
        <p>本文将详细介绍如何成为《知识回声》会员、会员能享有哪些专属权益，以及注册开通的步骤指南。</p>

        <section class="section">
          <h2>一、《知识回声》是什么？</h2>
          <p>《知识回声》是一款聚焦<strong>阅读 + 讲堂</strong>双核心板块的学习类 App，网罗海量优质书籍内容和专家讲解课程，覆盖：</p>
          <ul class="feature-list">
            <li>📚 文学、历史、科技、艺术等图书</li>
            <li>🎁 专家讲堂、深度解读、知识速听</li>
            <li>🧠 个性推荐、精读精讲、高效成长</li>
          </ul>
        </section>

        <section class="section">
          <h2>二、为什么要成为会员？</h2>
          <p>会员用户将获得超越普通用户的<strong>学习自由度与使用特权</strong>，核心优势包括：</p>

          <div class="benefits-table">
            <table>
              <thead>
                <tr>
                  <th>权益类别</th>
                  <th>会员专属内容</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>📖 精品课程深度学习</td>
                  <td>名师授课，系统梳理文化与历史脉络，启迪思考，丰富视野。</td>
                </tr>
                <tr>
                  <td>🏷️ 超多经典图书阅读</td>
                  <td>百余本人文历史景点。精选好书，内容权威，涵盖多个历史时代与文化主图。</td>
                </tr>
                <tr>
                  <td>🎙️ 专业有声书随心听</td>
                  <td>优质配音，沉浸式体验，解放双眼，随时随地汲取知识。</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="section">
          <h2>三、如何成为《知识回声》会员？只需三步！</h2>

          <div class="steps">
            <div class="step">
              <h3>1️⃣ 步骤一：下载并登录 App</h3>
              <ul>
                <li>在应用商店搜索"知识回声"，下载并安装</li>
                <li>注册并登录你的账号（支持手机号）</li>
              </ul>
              <Image src={step1} alt="步骤一" loading="lazy" />
            </div>

            <div class="step">
              <h3>2️⃣ 步骤二：进入会员中心</h3>
              <ul>
                <li>打开 App 首页，点击右下角"我的"</li>
                <li>进入<strong>会员中心</strong>，了解各项权益</li>
              </ul>
              <Image src={step2} alt="步骤二" loading="lazy" />
            </div>

            <div class="step">
              <h3>3️⃣ 步骤三：选择会员方案并开通</h3>
              <ul>
                <li>选择月度 / 季度 / 年度会员</li>
                <li>支持支付宝、微信等多种支付方式</li>
                <li>支付成功后，系统自动为你激活会员身份</li>
              </ul>
            </div>
          </div>
        </section>

        <div class="cta">
          <a rel="nofollow" title="立即下载" href="https://appgallery.huawei.com/app/C113905377" target="_blank" class="download-button">立即下载《知识回声》App</a>
        </div>
      </div>
    </article>
</Layout>

<style>
  .faq-detail {
    background: #f8f9fa;
    min-height: 100vh;
    padding: 2rem 0;
  }

  .container {
    /* max-width: 800px; */
    margin: 0 auto;
    padding: 0 1rem;
  }

  .faq-content {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .faq-header {
    margin-bottom: 2rem;
    text-align: center;
  }

  .faq-header h1 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
    line-height: 1.4;
  }

  .lead {
    font-size: 1.1rem;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  .section {
    margin-bottom: 3rem;
  }

  .section h2 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
  }

  .section h3 {
    font-size: 1.2rem;
    color: #333;
    margin: 1.5rem 0 1rem;
  }

  .feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
  }

  .feature-list li {
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 1.1rem;
  }

  .benefits-table {
    margin: 1.5rem 0;
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
  }

  th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
  }

  th {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
  }

  tr:last-child td {
    border-bottom: none;
  }

  .steps {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }

  .step {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid #007bff;
  }

  .step h3 {
    margin-top: 0;
    /* color: #007bff; */
  }

  .step ul {
    margin: 1rem 0 0;
    padding-left: 1.5rem;
  }

  .step li {
    margin-bottom: 0.5rem;
    color: #4a4a4a;
  }

  .success-message {
    text-align: center;
    font-size: 1.2rem;
    color: #28a745;
    margin: 2rem 0;
    padding: 1rem;
    background: #e8f5e9;
    border-radius: 8px;
  }

  .faq-list {
    margin: 1.5rem 0;
  }

  .faq-item {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .faq-item h3 {
    color: #007bff;
    margin: 0 0 0.5rem;
  }

  .faq-item p {
    margin: 0;
    color: #4a4a4a;
  }

  .cta {
    text-align: center;
    margin: 3rem 0 1rem;
  }

  .download-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .download-button:hover {
    background: #0056b3;
    transform: translateY(-2px);
  }

  img {
        max-width: 50%;
        height: auto;
    }

  @media (max-width: 768px) {

    img {
        max-width: 100%;
        height: auto;
    }

    .faq-content {
      padding: 1.5rem;
    }

    .faq-header h1 {
      font-size: 1.75rem;
    }

    .lead {
      font-size: 1rem;
    }

    .section h2 {
      font-size: 1.3rem;
    }

    .step {
      padding: 1.25rem;
    }
  }
</style>
