<view class="page safe-bottom">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left" bindtap="onBack">
      <image src="/images/icon-back.png" class="unified-back-icon" mode="aspectFit"></image>
      <text class="unified-back-text">返回</text>
    </view>
    <text class="unified-header-title">等级权益</text>
    <view class="unified-header-right"></view>
  </view>

  <view class="content" style="padding-top: {{totalNavHeight}}px">
    <!-- 加载中 -->
    <view class="loading-state" wx:if="{{loading}}">
      <text>正在加载权益内容...</text>
    </view>

    <!-- 权益内容 -->
    <view class="benefits-container" wx:elif="{{currentPackage}}">
      <view class="package-header" style="{{currentPackage.gradient}}">
        <view class="header-main">
          <app-icon name="crown" size="80" color="#ffffff" />
          <view class="header-info">
            <text class="package-title">{{currentPackage.title}}</text>
            <text class="package-subtitle">{{currentPackage.subtitle}}</text>
          </view>
        </view>
        <view class="header-decoration"></view>
      </view>

      <view class="benefits-section">
        <view class="section-title">
          <view class="title-line"></view>
          <text>专属权益内容</text>
          <view class="title-line"></view>
        </view>

        <view class="benefits-list">
          <view class="benefit-item" wx:for="{{currentPackage.benefits}}" wx:key="*this">
            <view class="check-icon">
              <app-icon name="check" size="36" color="{{currentPackage.checkColor}}" />
            </view>
            <text class="benefit-text">{{item}}</text>
          </view>
        </view>
      </view>

      <view class="footer-tip">
        <text>如有疑问，请咨询在线客服</text>
      </view>
    </view>

    <!-- 未找到内容 -->
    <view class="empty-state" wx:else>
      <app-icon name="info" size="100" color="#9CA3AF" />
      <text>暂无该等级的权益说明</text>
      <button class="btn-reset back-btn" bindtap="onBack">返回我的</button>
    </view>
  </view>
</view>