import React from 'react';
// Taro mini-program component

/**
 * H5 Registration Guide Page
 *
 * 注册引导页 - 通过外部链接引导新用户注册
 * 包含：品牌展示、权益介绍、注册表单、社交登录、信任标识
 */

const H5RegisterPage: React.FC = () => {
  return (
    <view className="register-page">
      {/* Top Branding Section */}
      <view className="branding-section">
        <view className="brand-bg-circle-1" />
        <view className="brand-bg-circle-2" />
        <view className="brand-logo-box">
          <text className="brand-logo-letter">G</text>
        </view>
        <text className="brand-app-name">Genex</text>
        <text className="brand-tagline">全球券资产交易平台</text>
      </view>

      {/* Benefits Section */}
      <view className="benefits-section">
        <text className="benefits-title">为什么选择 Genex？</text>
        <view className="benefits-grid">
          {[
            {
              icon: '🎫',
              title: '海量优惠券',
              desc: '覆盖餐饮、购物、娱乐等20+品类，全球大牌低价好券',
            },
            {
              icon: '🔒',
              title: '安全交易',
              desc: '平台担保交易，资金托管机制，保障每一笔交易安全可靠',
            },
            {
              icon: '🤖',
              title: 'AI智能推荐',
              desc: '基于您的偏好智能推荐高性价比好券，省时又省钱',
            },
          ].map((benefit, i) => (
            <view key={i} className="benefit-card">
              <view className="benefit-icon-box">
                <text className="benefit-icon">{benefit.icon}</text>
              </view>
              <text className="benefit-title">{benefit.title}</text>
              <text className="benefit-desc">{benefit.desc}</text>
            </view>
          ))}
        </view>
      </view>

      {/* Registration Form */}
      <view className="form-section">
        <text className="form-title">创建您的账户</text>

        {/* Phone Input */}
        <view className="form-input-group">
          <view className="form-input-wrap">
            <text className="form-input-icon">📱</text>
            <view className="form-input-prefix">
              <text className="form-prefix-text">+86</text>
              <text className="form-prefix-arrow">▼</text>
            </view>
            <input
              className="form-input"
              placeholder="请输入手机号"
              type="number"
              maxlength={11}
            />
          </view>
        </view>

        {/* SMS Code Input */}
        <view className="form-input-group">
          <view className="form-input-wrap form-code-wrap">
            <view className="form-code-left">
              <text className="form-input-icon">🔑</text>
              <input
                className="form-input"
                placeholder="请输入验证码"
                type="number"
                maxlength={6}
              />
            </view>
            <view className="form-code-btn">
              <text className="form-code-btn-text">获取验证码</text>
            </view>
          </view>
        </view>

        {/* Terms Checkbox */}
        <view className="form-terms">
          <view className="terms-checkbox">
            <view className="terms-checkbox-inner" />
          </view>
          <view className="terms-text-wrap">
            <text className="terms-text-normal">我已阅读并同意</text>
            <text className="terms-text-link">《用户协议》</text>
            <text className="terms-text-normal">和</text>
            <text className="terms-text-link">《隐私政策》</text>
          </view>
        </view>

        {/* Primary CTA Button */}
        <view className="register-btn">
          <text className="register-btn-text">立即注册</text>
        </view>

        {/* Social Login Divider */}
        <view className="social-divider">
          <view className="social-divider-line" />
          <text className="social-divider-text">其他登录方式</text>
          <view className="social-divider-line" />
        </view>

        {/* WeChat Login */}
        <view className="wechat-login-btn">
          <text className="wechat-login-icon">💬</text>
          <text className="wechat-login-text">微信一键登录</text>
        </view>

        {/* Already Have Account */}
        <view className="login-link-row">
          <text className="login-link-text">已有账号？</text>
          <text className="login-link-action">立即登录</text>
        </view>
      </view>

      {/* Trust Badges */}
      <view className="trust-section">
        <view className="trust-badges">
          {[
            { icon: '🛡️', label: '安全认证' },
            { icon: '✅', label: '用户保障' },
            { icon: '🔐', label: '隐私保护' },
          ].map((badge, i) => (
            <view key={i} className="trust-badge-item">
              <text className="trust-badge-icon">{badge.icon}</text>
              <text className="trust-badge-label">{badge.label}</text>
            </view>
          ))}
        </view>
        <text className="trust-footer-text">您的信息受到银行级加密保护</text>
      </view>
    </view>
  );
};

export default H5RegisterPage;

/*
CSS (H5注册引导页样式 - 对应 index.scss):

.register-page {
  min-height: 100vh;
  background: #F8F9FC;
}

/* === Branding Section === */
.branding-section {
  background: linear-gradient(135deg, #6C5CE7 0%, #9B8FFF 100%);
  padding: 100rpx 40rpx 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 48rpx 48rpx;
}
.brand-bg-circle-1 {
  position: absolute;
  width: 320rpx; height: 320rpx;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  top: -60rpx; right: -40rpx;
}
.brand-bg-circle-2 {
  position: absolute;
  width: 200rpx; height: 200rpx;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  bottom: -20rpx; left: -30rpx;
}
.brand-logo-box {
  width: 120rpx; height: 120rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  border: 2rpx solid rgba(255,255,255,0.3);
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
}
.brand-logo-letter {
  font-size: 56rpx;
  font-weight: 700;
  color: white;
}
.brand-app-name {
  font-size: 44rpx;
  font-weight: 700;
  color: white;
  letter-spacing: 4rpx;
}
.brand-tagline {
  font-size: 26rpx;
  color: rgba(255,255,255,0.8);
  margin-top: 8rpx;
  letter-spacing: 2rpx;
}

/* === Benefits Section === */
.benefits-section {
  padding: 40rpx 32rpx 0;
}
.benefits-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #141723;
  display: block;
  margin-bottom: 24rpx;
}
.benefits-grid {
  display: flex;
  gap: 16rpx;
}
.benefit-card {
  flex: 1;
  background: white;
  border-radius: 20rpx;
  padding: 28rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1rpx solid #F1F3F8;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
}
.benefit-icon-box {
  width: 72rpx; height: 72rpx;
  background: #F3F1FF;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.benefit-icon { font-size: 36rpx; }
.benefit-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #141723;
  display: block;
  margin-bottom: 8rpx;
}
.benefit-desc {
  font-size: 20rpx;
  color: #5C6478;
  line-height: 1.5;
}

/* === Form Section === */
.form-section {
  padding: 40rpx 32rpx;
}
.form-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #141723;
  display: block;
  margin-bottom: 32rpx;
}
.form-input-group {
  margin-bottom: 20rpx;
}
.form-input-wrap {
  display: flex;
  align-items: center;
  height: 100rpx;
  background: white;
  border-radius: 20rpx;
  padding: 0 28rpx;
  border: 2rpx solid #F1F3F8;
}
.form-input-wrap:focus-within {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 4rpx rgba(108,92,231,0.1);
}
.form-input-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.form-input-prefix {
  display: flex;
  align-items: center;
  padding-right: 16rpx;
  margin-right: 16rpx;
  border-right: 1rpx solid #F1F3F8;
}
.form-prefix-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #141723;
}
.form-prefix-arrow {
  font-size: 16rpx;
  color: #A0A8BE;
  margin-left: 6rpx;
}
.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #141723;
  background: transparent;
}

.form-code-wrap { padding: 0; }
.form-code-left {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 28rpx;
}
.form-code-btn {
  height: 100rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  border-left: 1rpx solid #F1F3F8;
}
.form-code-btn-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #6C5CE7;
  white-space: nowrap;
}

/* Terms Checkbox */
.form-terms {
  display: flex;
  align-items: flex-start;
  margin: 28rpx 0 36rpx;
}
.terms-checkbox {
  width: 36rpx; height: 36rpx;
  border: 2rpx solid #D0D5E0;
  border-radius: 8rpx;
  margin-right: 12rpx;
  margin-top: 2rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.terms-checkbox.checked {
  background: #6C5CE7;
  border-color: #6C5CE7;
}
.terms-checkbox-inner {
  width: 16rpx; height: 16rpx;
}
.terms-text-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.terms-text-normal {
  font-size: 24rpx;
  color: #5C6478;
}
.terms-text-link {
  font-size: 24rpx;
  color: #6C5CE7;
  font-weight: 500;
}

/* Register Button */
.register-btn {
  height: 100rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(108,92,231,0.35);
}
.register-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}
.register-btn-text {
  font-size: 32rpx;
  font-weight: 600;
  color: white;
  letter-spacing: 4rpx;
}

/* Social Divider */
.social-divider {
  display: flex;
  align-items: center;
  margin: 48rpx 0;
}
.social-divider-line {
  flex: 1;
  height: 1rpx;
  background: #E4E7F0;
}
.social-divider-text {
  margin: 0 24rpx;
  font-size: 24rpx;
  color: #A0A8BE;
  white-space: nowrap;
}

/* WeChat Login */
.wechat-login-btn {
  height: 100rpx;
  background: #07C160;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wechat-login-btn:active {
  opacity: 0.9;
}
.wechat-login-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}
.wechat-login-text {
  font-size: 30rpx;
  font-weight: 600;
  color: white;
}

/* Login Link */
.login-link-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32rpx;
}
.login-link-text {
  font-size: 26rpx;
  color: #5C6478;
}
.login-link-action {
  font-size: 26rpx;
  font-weight: 600;
  color: #6C5CE7;
}

/* === Trust Section === */
.trust-section {
  padding: 40rpx 32rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-badges {
  display: flex;
  justify-content: center;
  gap: 48rpx;
  margin-bottom: 20rpx;
}
.trust-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-badge-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}
.trust-badge-label {
  font-size: 22rpx;
  font-weight: 500;
  color: #5C6478;
}
.trust-footer-text {
  font-size: 20rpx;
  color: #A0A8BE;
  margin-top: 8rpx;
}
*/
