<!-- 首次引导页 —— 选择2个免费频道 -->
<view class="onboarding-page">
  <!-- 顶部区域 -->
  <view class="header" style="padding-top: {{statusBarHeight + 10}}px;">
    <text class="header-title">选择感兴趣的频道</text>
    <view class="header-sub">
      <text class="sub-text">可免费选择 2 个</text>
      <text class="sub-warn">选择后不可更换</text>
    </view>
  </view>

  <!-- 频道网格 -->
  <scroll-view scroll-y enhanced show-scrollbar="{{false}}" class="grid-scroll">
    <view class="grid">
      <view
        wx:for="{{domains}}"
        wx:key="id"
        class="grid-item {{selectedIds.indexOf(item.id) > -1 ? 'selected' : ''}}"
        bindtap="onToggle"
        data-id="{{item.id}}"
      >
        <!-- 图标 -->
        <view class="item-icon" style="background: {{item.bgColor}};">
          <text class="icon-emoji">{{item.icon}}</text>
        </view>
        <!-- 名称 -->
        <text class="item-name">{{item.name}}</text>
        <text class="item-tag">{{item.tag}}</text>

        <!-- 选中对勾 -->
        <view class="check-mark" wx:if="{{selectedIds.indexOf(item.id) > -1}}">
          <text class="check-icon">✓</text>
        </view>
      </view>
    </view>
  </scroll-view>

  <!-- 底部确认按钮 -->
  <view class="footer">
    <button
      class="confirm-btn {{isValid ? 'active' : 'disabled'}}"
      bindtap="onConfirm"
      disabled="{{!isValid}}"
    >
      确认选择 {{selectedIds.length > 0 ? '(' + selectedIds.length + '/2)' : ''}}
    </button>
  </view>

  <t-message id="t-message" />
</view>
