<!--pages/login/login.wxml — 忠于 H5 原型，使用 TDesign 组件 -->
<view class="page" style="padding-top: {{statusBarHeight}}px;">
  <!-- 动态背景层 -->
  <image class="login-bg-layer" src="/assets/images/login-bg-animated.svg" mode="scaleToFill" />

  <!-- 装饰元素：模拟 blur 圆形 -->
  <view class="deco-circle deco-circle--1"></view>
  <view class="deco-circle deco-circle--2"></view>
  <view class="deco-circle deco-circle--3"></view>

  <!-- 顶部区域 - Logo 和名称 -->
  <view class="hero">
    <!-- Logo：浮动动画 -->
    <view class="logo-wrap float-animation">
      <view class="logo-box">
        <image class="logo-icon" src="/assets/icons/logo-billiard.svg" mode="aspectFit" />
      </view>
      <!-- 装饰点 -->
      <view class="logo-dot logo-dot--tr"></view>
      <view class="logo-dot logo-dot--bl"></view>
    </view>

    <!-- 应用名称 -->
    <text class="app-name">球房运营助手</text>
    <text class="app-desc">为台球厅提升运营效率的内部管理工具</text>

    <!-- 功能亮点 -->
    <view class="features">
      <view class="feature-item">
        <view class="feature-icon-svg feature-icon-svg--task">
          <image class="feature-svg-img" src="/assets/icons/feature-task.svg" mode="aspectFit" />
        </view>
        <text class="feature-text">任务管理</text>
      </view>
      <view class="feature-item">
        <view class="feature-icon-svg feature-icon-svg--board">
          <image class="feature-svg-img" src="/assets/icons/feature-board.svg" mode="aspectFit" />
        </view>
        <text class="feature-text">数据看板</text>
      </view>
      <view class="feature-item">
        <view class="feature-icon-svg feature-icon-svg--ai">
          <image class="feature-svg-img" src="/assets/icons/feature-ai.svg" mode="aspectFit" />
        </view>
        <text class="feature-text">智能助手</text>
      </view>
    </view>
  </view>

  <!-- 底部区域 - 登录按钮和协议 -->
  <view class="bottom-area">
    <!-- 微信登录按钮 -->
    <view class="login-btn-wrap {{(!agreed || loading) ? 'login-btn--disabled' : 'login-btn--active'}}" bindtap="onLogin">
      <image wx:if="{{!loading}}" class="wechat-icon" src="/assets/icons/icon-wechat.svg" mode="aspectFit" />
      <t-loading wx:if="{{loading}}" theme="circular" size="32rpx" color="#fff" />
      <text class="login-btn-text">使用微信登录</text>
    </view>

    <!-- 协议勾选 -->
    <view class="agreement" bindtap="onAgreeChange">
      <view class="checkbox {{agreed ? 'checkbox--checked' : ''}}">
        <t-icon wx:if="{{agreed}}" name="check" size="18rpx" color="#fff" />
      </view>
      <view class="agreement-text-wrap">
        <text class="agreement-text">我已阅读并同意</text>
        <text class="link">《用户协议》</text>
        <text class="agreement-text">和</text>
        <text class="link">《隐私政策》</text>
      </view>
    </view>

    <!-- 底部说明 -->
    <text class="footer-tip">仅限球房内部员工使用</text>
  </view>
</view>

<dev-fab />
