import React from 'react';
import { t } from '@/i18n';
// Taro mini-program component

/**
 * E3. 登录/注册页
 *
 * 微信小程序：一键微信登录
 * H5：手机号+验证码
 */

const LoginPage: React.FC = () => {
  return (
    <view className="login-page">
      {/* Logo */}
      <view className="logo-section">
        <view className="logo-box">
          <text className="logo-text">G</text>
        </view>
        <text className="app-name">Genex</text>
        <text className="app-slogan">{t('app_slogan')}</text>
      </view>

      {/* WeChat Login (小程序) */}
      <view className="login-actions">
        <view className="wechat-btn">
          <text className="wechat-icon">💬</text>
          <text className="wechat-text">{t('login_wechat')}</text>
        </view>

        <view className="divider">
          <view className="divider-line" />
          <text className="divider-text">{t('login_or')}</text>
          <view className="divider-line" />
        </view>

        {/* Phone Login (H5) */}
        <view className="phone-section">
          <view className="input-wrap">
            <text className="input-icon">📱</text>
            <input className="input-field" placeholder={t('login_phone')} type="number" />
          </view>
          <view className="input-wrap code-wrap">
            <view className="code-input">
              <text className="input-icon">🔒</text>
              <input className="input-field" placeholder={t('login_code')} type="number" />
            </view>
            <view className="code-btn">
              <text className="code-btn-text">{t('login_send_code')}</text>
            </view>
          </view>
          <view className="login-btn">
            <text className="login-btn-text">{t('login_btn')}</text>
          </view>
        </view>

        {/* Terms */}
        <view className="terms">
          <text className="terms-text">{t('login_agree')}</text>
          <text className="terms-link">{`《${t('login_user_agreement')}》`}</text>
          <text className="terms-text">{t('login_and')}</text>
          <text className="terms-link">{`《${t('login_privacy_policy')}》`}</text>
        </view>
      </view>
    </view>
  );
};

export default LoginPage;

/*
CSS:

.login-page {
  min-height: 100vh; background: white;
  display: flex; flex-direction: column;
  padding: 0 64rpx;
}

.logo-section {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 160rpx; padding-bottom: 80rpx;
}
.logo-box {
  width: 120rpx; height: 120rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 28rpx;
  display: flex; align-items: center; justify-content: center;
}
.logo-text { color: white; font-size: 48rpx; font-weight: 700; }
.app-name { font-size: 40rpx; font-weight: 700; color: #141723; margin-top: 24rpx; }
.app-slogan { font-size: 26rpx; color: #A0A8BE; margin-top: 8rpx; }

.login-actions { flex: 1; }

.wechat-btn {
  display: flex; align-items: center; justify-content: center;
  height: 96rpx; background: #07C160; border-radius: 999rpx;
}
.wechat-icon { font-size: 36rpx; margin-right: 12rpx; }
.wechat-text { color: white; font-size: 30rpx; font-weight: 600; }

.divider {
  display: flex; align-items: center; margin: 48rpx 0;
}
.divider-line { flex: 1; height: 1rpx; background: #E4E7F0; }
.divider-text { margin: 0 24rpx; font-size: 24rpx; color: #A0A8BE; }

.input-wrap {
  display: flex; align-items: center;
  height: 96rpx; background: #F8F9FC;
  border-radius: 16rpx; padding: 0 24rpx;
  margin-bottom: 20rpx; border: 1rpx solid #E4E7F0;
}
.input-icon { font-size: 32rpx; margin-right: 16rpx; }
.input-field { flex: 1; font-size: 28rpx; background: transparent; }

.code-wrap { padding: 0; }
.code-input {
  flex: 1; display: flex; align-items: center;
  padding: 0 24rpx;
}
.code-btn {
  padding: 0 28rpx; height: 96rpx;
  display: flex; align-items: center;
  border-left: 1rpx solid #E4E7F0;
}
.code-btn-text { font-size: 24rpx; color: #6C5CE7; font-weight: 500; }

.login-btn {
  height: 96rpx; background: #6C5CE7; border-radius: 999rpx;
  display: flex; align-items: center; justify-content: center;
  margin-top: 16rpx;
}
.login-btn-text { color: white; font-size: 30rpx; font-weight: 600; }

.terms {
  display: flex; justify-content: center; align-items: center;
  padding: 48rpx 0; flex-wrap: wrap;
}
.terms-text { font-size: 22rpx; color: #A0A8BE; }
.terms-link { font-size: 22rpx; color: #6C5CE7; }
*/