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

/**
 * E4. 券使用页 - 出示券码给商户扫描
 *
 * QR码 + 数字码 + 倒计时 + 亮度最大化
 */

const RedeemPage: React.FC = () => {
  return (
    <view className="redeem-page">
      {/* Coupon Info */}
      <view className="coupon-info">
        <text className="coupon-name">星巴克 ¥25 礼品卡</text>
        <text className="coupon-value">面值 ¥25.00</text>
      </view>

      {/* QR Code */}
      <view className="qr-section">
        <view className="qr-box">
          <view className="qr-placeholder">
            <text className="qr-icon">📱</text>
            <text className="qr-label">二维码</text>
          </view>
        </view>

        {/* Numeric Code */}
        <view className="code-display">
          <text className="code-text">8429 3751 0062</text>
        </view>

        {/* Countdown */}
        <view className="countdown">
          <text className="countdown-icon">⏱</text>
          <text className="countdown-text">有效时间 04:58</text>
        </view>

        <view className="refresh-btn">
          <text className="refresh-text">刷新券码</text>
        </view>
      </view>

      {/* Hint */}
      <view className="hint-box">
        <text className="hint-icon">ℹ️</text>
        <text className="hint-text">请将此码出示给商户扫描，屏幕已自动调至最高亮度</text>
      </view>
    </view>
  );
};

export default RedeemPage;

/*
CSS:

.redeem-page {
  min-height: 100vh; background: #141723;
  display: flex; flex-direction: column; align-items: center;
  padding: 48rpx 32rpx;
}

.coupon-info {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 48rpx;
}
.coupon-name { font-size: 36rpx; font-weight: 700; color: white; }
.coupon-value { font-size: 26rpx; color: rgba(255,255,255,0.6); margin-top: 8rpx; }

.qr-section {
  display: flex; flex-direction: column; align-items: center;
}

.qr-box {
  width: 420rpx; height: 420rpx; padding: 28rpx;
  background: white; border-radius: 24rpx;
}
.qr-placeholder {
  width: 100%; height: 100%;
  border: 2rpx solid #E4E7F0; border-radius: 16rpx;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.qr-icon { font-size: 120rpx; }
.qr-label { font-size: 24rpx; color: #A0A8BE; margin-top: 12rpx; }

.code-display {
  margin-top: 32rpx; padding: 16rpx 40rpx;
  background: rgba(255,255,255,0.1); border-radius: 999rpx;
}
.code-text {
  font-size: 40rpx; font-weight: 700; color: white;
  letter-spacing: 4rpx; font-family: monospace;
}

.countdown {
  display: flex; align-items: center;
  margin-top: 32rpx;
}
.countdown-icon { font-size: 28rpx; margin-right: 8rpx; }
.countdown-text { font-size: 26rpx; color: rgba(255,255,255,0.5); }

.refresh-btn { margin-top: 16rpx; }
.refresh-text { font-size: 26rpx; color: #9B8FFF; }

.hint-box {
  display: flex; align-items: center;
  margin-top: 64rpx; padding: 20rpx 24rpx;
  background: rgba(255,255,255,0.08); border-radius: 16rpx;
}
.hint-icon { font-size: 28rpx; margin-right: 12rpx; }
.hint-text { font-size: 22rpx; color: rgba(255,255,255,0.4); flex: 1; }
*/
