<template>
  <div class="help-center-page">
    <!-- 现代化页面头部 -->
    <div class="page-header-modern">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <svg viewBox="0 0 24 24" class="back-icon">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
          </svg>
        </button>
        <div class="header-info">
          <div class="header-text">
            <h1 class="header-title">帮助中心</h1>
            <p class="header-subtitle">常见问题解答与使用指南</p>
          </div>
        </div>
        <button class="guide-btn" @click="openUserGuide">
          <svg viewBox="0 0 24 24" class="guide-icon">
            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
            <line x1="7" y1="8" x2="17" y2="8" stroke="currentColor" stroke-width="2"/>
            <line x1="7" y1="12" x2="17" y2="12" stroke="currentColor" stroke-width="2"/>
            <line x1="7" y1="16" x2="13" y2="16" stroke="currentColor" stroke-width="2"/>
          </svg>
          <span>使用指南</span>
        </button>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="help-content">
      <!-- FAQ 列表 -->
      <div class="faq-container">
        <div class="faq-list">
          <div class="faq-item-modern" v-for="(faq, index) in faqList" :key="index">
            <div class="faq-question-modern">
              <div class="question-marker-modern">
                <span class="marker-text">Q{{ index + 1 }}</span>
              </div>
              <div class="question-content">
                <h3 class="question-title">{{ faq.question }}</h3>
                <svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="6,9 12,15 18,9"></polyline>
                </svg>
              </div>
            </div>
            <div class="faq-answer-modern">
              <div class="answer-content">
                <p>{{ faq.answer }}</p>
                <div v-if="faq.tips" class="answer-tips">
                  <svg class="tip-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" y1="16" x2="12" y2="12"/>
                    <line x1="12" y1="8" x2="12.01" y2="8"/>
                  </svg>
                  <span>{{ faq.tips }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 免责声明 -->
      <div class="disclaimer-modern">
        <div class="disclaimer-header">
          <svg class="disclaimer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
            <line x1="12" y1="9" x2="12" y2="13"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
          <span class="disclaimer-title">免责声明</span>
        </div>
        <div class="disclaimer-content">
          <p>彩票中奖号码是随机产生的，没有任何方法可以保证100%中奖。购买彩票应该是基于娱乐目的，而并非一种可行的投资策略，建议您理性对待彩票，不要过度投入。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelpCenter',
  data() {
    return {
      faqList: [
        {
          question: '如何开通会员？',
          answer: '进入"我的"页，点击右上角悬浮的微信客服，添加微信客服后，发送付款截图，客服会发送给您一个兑换码，拿到兑换码后，页面右上角有一个兑换会员的按钮，填写后即完成兑换。完成兑换后，会员立即生效。',
          tips: '兑换码使用后立即生效，请妥善保管您的兑换码'
        },
        {
          question: '目前有两种会员可供选择',
          answer: '月度会员和年度会员，月度会员10元，年度会员100元。',
          tips: '年度会员更优惠，相当于获得2个月免费使用'
        },
        {
          question: '如何推测号码、查询活跃性图等？',
          answer: '进入"我的"页后，下滑到底部，有个数据分析模块，包含了表相查询、组合性分析、活跃性分析、接续性分析等（仅对会员开放）。',
          tips: '数据分析功能仅对会员开放，请先开通会员'
        }
      ]
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    openUserGuide() {
      // 跳转到使用指南页面
      this.$router.push('/user-guide')
    }
  }
}
</script>

<style scoped>
.help-center-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面头部 */
.page-header-modern {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.page-header-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:rgba(255,255,255,0.15);stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:rgba(255,255,255,0.05);stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Background waves --%3E%3Cpath d='M0,100 Q200,60 400,100 T800,100 L800,200 L0,200 Z' fill='rgba(255,255,255,0.08)'/%3E%3Cpath d='M0,120 Q200,80 400,120 T800,120 L800,200 L0,200 Z' fill='rgba(255,255,255,0.05)'/%3E%3C!-- Question marks (问号) --%3E%3Ccircle cx='120' cy='80' r='25' stroke='rgba(255,255,255,0.35)' stroke-width='3' fill='none'%3E%3Canimate attributeName='r' values='25;28;25' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M110,75 Q120,65 130,75 Q130,85 120,90' stroke='rgba(255,255,255,0.4)' stroke-width='3.5' fill='none' stroke-linecap='round'%3E%3Canimate attributeName='opacity' values='0.4;0.6;0.4' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3Ccircle cx='120' cy='98' r='3' fill='rgba(255,255,255,0.45)'%3E%3Canimate attributeName='r' values='3;4;3' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3C!-- Light bulb (灯泡) --%3E%3Ccircle cx='220' cy='85' r='18' stroke='rgba(255,255,255,0.35)' stroke-width='2.5' fill='rgba(255,255,255,0.15)'%3E%3Canimate attributeName='opacity' values='0.3;0.5;0.3' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M215,103 L225,103 M217,108 L223,108 M218,113 L222,113' stroke='rgba(255,255,255,0.35)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M220,75 L220,68 M208,80 L203,75 M232,80 L237,75' stroke='rgba(255,255,255,0.3)' stroke-width='2' stroke-linecap='round'%3E%3Canimate attributeName='opacity' values='0.3;0.6;0.3' dur='2.5s' repeatCount='indefinite'/%3E%3C/path%3E%3C!-- Info icon (信息图标) --%3E%3Ccircle cx='320' cy='90' r='22' stroke='rgba(255,255,255,0.35)' stroke-width='2.5' fill='none'%3E%3Canimate attributeName='r' values='22;26;22' dur='3.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ctext x='320' y='100' font-size='28' fill='rgba(255,255,255,0.45)' font-weight='bold' text-anchor='middle'%3Ei%3Canimate attributeName='opacity' values='0.45;0.65;0.45' dur='3.2s' repeatCount='indefinite'/%3E%3C/text%3E%3C!-- Support headset (客服耳机) --%3E%3Cpath d='M400,75 Q400,60 415,60 Q430,60 430,75 L430,95 M400,95 L400,100 Q400,105 405,105 L410,105 M430,95 L430,100 Q430,105 425,105 L420,105' stroke='rgba(255,255,255,0.4)' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Canimate attributeName='opacity' values='0.4;0.6;0.4' dur='2.8s' repeatCount='indefinite'/%3E%3C/path%3E%3Crect x='395' y='85' width='10' height='15' rx='2' fill='rgba(255,255,255,0.25)'/%3E%3Crect x='425' y='85' width='10' height='15' rx='2' fill='rgba(255,255,255,0.25)'/%3E%3C!-- FAQ badges (FAQ标记) --%3E%3Crect x='480' y='75' width='50' height='35' rx='8' stroke='rgba(255,255,255,0.35)' stroke-width='2.5' fill='rgba(255,255,255,0.12)'%3E%3Canimate attributeName='opacity' values='0.5;0.7;0.5' dur='3.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3Ctext x='505' y='98' font-size='16' fill='rgba(255,255,255,0.5)' font-weight='bold' text-anchor='middle'%3EFAQ%3C/text%3E%3C!-- Speech bubbles (对话气泡) --%3E%3Cpath d='M580,75 L630,75 Q640,75 640,85 L640,105 Q640,115 630,115 L600,115 L595,125 L595,115 L580,115 Q570,115 570,105 L570,85 Q570,75 580,75 Z' stroke='rgba(255,255,255,0.35)' stroke-width='2.5' fill='rgba(255,255,255,0.15)'%3E%3Canimate attributeName='opacity' values='0.4;0.6;0.4' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3Ccircle cx='590' cy='95' r='3' fill='rgba(255,255,255,0.45)'/%3E%3Ccircle cx='605' cy='95' r='3' fill='rgba(255,255,255,0.45)'/%3E%3Ccircle cx='620' cy='95' r='3' fill='rgba(255,255,255,0.45)'/%3E%3C!-- Book/guide icon (指南书) --%3E%3Crect x='680' y='70' width='45' height='55' rx='3' stroke='rgba(255,255,255,0.35)' stroke-width='2.5' fill='rgba(255,255,255,0.12)'%3E%3Canimate attributeName='y' values='70;65;70' dur='3.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cline x1='688' y1='85' x2='717' y2='85' stroke='rgba(255,255,255,0.35)' stroke-width='2'/%3E%3Cline x1='688' y1='95' x2='717' y2='95' stroke='rgba(255,255,255,0.35)' stroke-width='2'/%3E%3Cline x1='688' y1='105' x2='710' y2='105' stroke='rgba(255,255,255,0.35)' stroke-width='2'/%3E%3C!-- Sparkle stars --%3E%3Ccircle cx='170' cy='130' r='2.5' fill='rgba(255,255,255,0.7)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='370' cy='60' r='2' fill='rgba(255,255,255,0.6)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='2.8s' repeatCount='indefinite' begin='0.5s'/%3E%3C/circle%3E%3Ccircle cx='540' cy='130' r='2.5' fill='rgba(255,255,255,0.7)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3s' repeatCount='indefinite' begin='1s'/%3E%3C/circle%3E%3Ccircle cx='750' cy='130' r='2' fill='rgba(255,255,255,0.6)'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='2.6s' repeatCount='indefinite' begin='1.5s'/%3E%3C/circle%3E%3C!-- Decorative elements --%3E%3Ctext x='60' y='110' font-size='32' fill='rgba(255,255,255,0.2)' font-weight='bold'%3E%3F%3Canimate attributeName='opacity' values='0.2;0.35;0.2' dur='3s' repeatCount='indefinite'/%3E%3C/text%3E%3Ctext x='760' y='105' font-size='24' fill='rgba(255,255,255,0.18)' font-weight='bold'%3E%E2%9C%93%3C/text%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 1;
  z-index: 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  color: white;
  margin-right: 16px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.back-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.header-info {
  flex: 1;
}

/* 使用指南按钮 */
.guide-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.guide-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.guide-icon {
  width: 20px;
  height: 20px;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: white;
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

/* 主要内容 */
.help-content {
  max-width: 850px;
  margin: 0 auto;
  padding: 24px 20px;
}




/* FAQ 容器 */
.faq-container {
  margin-bottom: 32px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 现代化 FAQ 项目 */
.faq-item-modern {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.faq-item-modern:hover {
  box-shadow: 0 8px 24px rgba(79, 172, 254, 0.15);
  transform: translateY(-2px);
}

.faq-question-modern {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-question-modern:hover {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%);
}

.question-marker-modern {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-radius: 12px;
  padding: 8px 16px;
  margin-right: 16px;
  font-weight: 600;
  font-size: 14px;
  min-width: 48px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.question-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.expand-icon {
  width: 20px;
  height: 20px;
  stroke: #666;
  stroke-width: 2;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.faq-question-modern:hover .expand-icon {
  stroke: #4facfe;
  opacity: 1;
}

/* FAQ 答案 */
.faq-answer-modern {
  padding: 0 24px 24px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
}

.answer-content {
  padding-top: 20px;
}

.answer-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 16px 0;
}

.answer-tips {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid #4facfe;
  margin-top: 16px;
}

.tip-icon {
  width: 16px;
  height: 16px;
  stroke: #4facfe;
  stroke-width: 2;
  flex-shrink: 0;
}

.answer-tips span {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 现代化免责声明 */
.disclaimer-modern {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid #e9ecef;
  margin-bottom: 24px;
}

.disclaimer-header {
  background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
  color: white;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.disclaimer-icon {
  width: 24px;
  height: 24px;
  stroke: white;
  stroke-width: 2;
  flex-shrink: 0;
}

.disclaimer-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.disclaimer-content {
  padding: 20px 24px;
}

.disclaimer-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header-modern {
    padding: 16px 0;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .back-btn {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .back-icon {
    width: 20px;
    height: 20px;
  }
  
  .header-title {
    font-size: 20px;
  }
  
  .header-subtitle {
    font-size: 12px;
  }
  
  .guide-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .guide-icon {
    width: 18px;
    height: 18px;
  }
  
  .help-content {
    padding: 16px;
  }
  
  .faq-question-modern {
    padding: 16px 20px;
  }
  
  .faq-answer-modern {
    padding: 0 20px 20px 20px;
  }
  
  .question-title {
    font-size: 16px;
  }
  
  .answer-content p {
    font-size: 14px;
  }
  
  .disclaimer-content {
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 12px;
  }
  
  .help-content {
    padding: 12px;
  }
  
  .faq-question-modern {
    padding: 14px 16px;
  }
  
  .faq-answer-modern {
    padding: 0 16px 16px 16px;
  }
  
  .question-title {
    font-size: 15px;
  }
}
</style> 