<view class="page">
  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
    <view class="nav-back" bindtap="onBack">‹ 返回</view>
    <view class="page-header-title">使用设置</view>
    <view class="page-header-subtitle">选择模式和区域</view>
  </view>

  <view class="page-content">
    <view class="page-title">选择模式</view>

    <view class="mode-selector">
      <view class="mode-option {{selectedMode === 0 ? 'active' : ''}}" bindtap="onSelectMode" data-value="0">
        <text class="mode-icon">🔄</text>
        <view class="mode-label">普通模式</view>
        <view class="mode-sub">6色循环</view>
      </view>
      <view class="mode-option {{selectedMode === 1 ? 'active' : ''}} {{subExpired ? 'locked' : ''}}" bindtap="onSelectMode" data-value="1">
        <text class="mode-icon">✨</text>
        <view class="mode-label">智能模式</view>
        <view class="mode-sub" wx:if="{{!subExpired}}">剩余{{subDays}}天</view>
        <view class="mode-sub" wx:else>订阅解锁</view>
      </view>
    </view>

    <view class="page-title" style="font-size:28rpx;">选择区域</view>
    <view class="mode-tip" wx:if="{{selectedMode === 0}}">普通模式固定 10 分钟，使用区域默认全区域，不可调整</view>

    <view class="face-map">
      <view class="face-region forehead {{regions[2].checked ? 'active' : ''}} {{selectedMode === 0 ? 'disabled' : ''}}" bindtap="onToggleRegion" data-idx="2">上区</view>
      <view class="face-region left-cheek {{regions[0].checked ? 'active' : ''}} {{selectedMode === 0 ? 'disabled' : ''}}" bindtap="onToggleRegion" data-idx="0">左区</view>
      <view class="face-region right-cheek {{regions[1].checked ? 'active' : ''}} {{selectedMode === 0 ? 'disabled' : ''}}" bindtap="onToggleRegion" data-idx="1">右区</view>
      <view class="face-region nose {{regions[4].checked ? 'active' : ''}} {{selectedMode === 0 ? 'disabled' : ''}}" bindtap="onToggleRegion" data-idx="4">中区</view>
      <view class="face-region chin {{regions[3].checked ? 'active' : ''}} {{selectedMode === 0 ? 'disabled' : ''}}" bindtap="onToggleRegion" data-idx="3">下区</view>
    </view>

    <button class="btn-primary" bindtap="onStart" disabled="{{submitting}}" loading="{{submitting}}">
      开始使用
    </button>

    <view class="error-text" wx:if="{{error}}">{{error}}</view>
  </view>
</view>
