{% extends "base.html" %}
{% set title = "会员" %}
{% set page = "vip" %}

{% block content %}
<section class="page-header" style="background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); color: white; padding: 60px 20px; border-radius: 20px; text-align: center; margin-bottom: 32px; box-shadow: var(--shadow-lg);">
  <h1 style="font-size: 2.5rem; margin-bottom: 16px; color: white;"><i class="ri-vip-crown-fill" style="color: #ffd700; margin-right: 8px;"></i>选择会员方案</h1>
  <p style="font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto;">开通后可下载 VIP 资源，支持续费叠加有效期</p>
</section>

<div id="vipStatus" class="card" style="display:none; margin-bottom: 24px; text-align: center; background: linear-gradient(to right, rgba(14, 165, 233, 0.05), rgba(14, 165, 233, 0.1)); border: 1px solid rgba(14, 165, 233, 0.2);"></div>

<h2 style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
  <i class="ri-price-tag-3-line" style="color: var(--brand);"></i> 会员套餐
</h2>
<div id="planList" class="grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px;"></div>

<div id="vipMsg" class="form-msg" style="display:none; margin-bottom: 24px;"></div>

<h2 style="display: flex; align-items: center; gap: 8px; margin-top: 32px; margin-bottom: 16px;">
  <i class="ri-shield-star-line" style="color: var(--brand);"></i> 会员权益
</h2>
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;">
  <div class="card" style="padding: 24px; border-radius: 16px; transition: transform 0.2s, box-shadow 0.2s;">
    <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(14, 165, 233, 0.1); color: var(--brand); display: grid; place-items: center; margin-bottom: 16px;">
      <i class="ri-download-cloud-2-line" style="font-size: 1.5rem;"></i>
    </div>
    <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 1.25rem;">VIP 资源下载</h3>
    <div class="muted" style="line-height: 1.6;">一键下载海量高质量商业级源码和设计资源，权益实时生效，无需等待。</div>
  </div>
  <div class="card" style="padding: 24px; border-radius: 16px; transition: transform 0.2s, box-shadow 0.2s;">
    <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(16, 185, 129, 0.1); color: #10b981; display: grid; place-items: center; margin-bottom: 16px;">
      <i class="ri-time-line" style="font-size: 1.5rem;"></i>
    </div>
    <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 1.25rem;">续费叠加</h3>
    <div class="muted" style="line-height: 1.6;">购买或续费会员会在现有到期时间上自动顺延，多买多送，保障您的权益不流失。</div>
  </div>
  <div class="card" style="padding: 24px; border-radius: 16px; transition: transform 0.2s, box-shadow 0.2s;">
    <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(139, 92, 246, 0.1); color: #8b5cf6; display: grid; place-items: center; margin-bottom: 16px;">
      <i class="ri-file-list-3-line" style="font-size: 1.5rem;"></i>
    </div>
    <h3 style="margin-top: 0; margin-bottom: 8px; font-size: 1.25rem;">订单记录</h3>
    <div class="muted" style="line-height: 1.6;">在“个人中心”中可随时查看清晰明了的订单与会员状态，每一笔消费都有迹可循。</div>
  </div>
</div>
{% endblock %}