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

/**
 * H5 Activity / Campaign Landing Page
 *
 * 活动落地页 - 通过微信/社交媒体分享的促销活动页面
 * 包含：倒计时、优惠券卡片、活动规则、分享栏
 */

const H5ActivityPage: React.FC = () => {
  return (
    <view className="activity-page">
      {/* Hero Banner */}
      <view className="hero-banner">
        <view className="hero-badge">
          <text className="hero-badge-icon">🔥</text>
          <text className="hero-badge-text">{t('activity_flash')}</text>
        </view>
        <text className="hero-title">{t('activity_title')}</text>
        <text className="hero-subtitle">{t('activity_subtitle')}</text>

        {/* Countdown Timer */}
        <view className="countdown-section">
          <text className="countdown-label">{t('activity_countdown')}</text>
          <view className="countdown-timer">
            <view className="countdown-block">
              <text className="countdown-num">02</text>
            </view>
            <text className="countdown-sep">:</text>
            <view className="countdown-block">
              <text className="countdown-num">18</text>
            </view>
            <text className="countdown-sep">:</text>
            <view className="countdown-block">
              <text className="countdown-num">45</text>
            </view>
            <text className="countdown-sep">:</text>
            <view className="countdown-block countdown-block-ms">
              <text className="countdown-num-ms">32</text>
            </view>
          </view>
        </view>
      </view>

      {/* Featured Coupon Cards */}
      <view className="coupon-section">
        <view className="section-header">
          <text className="section-title">{t('activity_featured')}</text>
          <text className="section-subtitle">{t('activity_limited')}</text>
        </view>

        {[
          {
            brand: 'Starbucks',
            brandInitial: 'S',
            name: '星巴克 ¥50 礼品卡',
            originalPrice: '¥50.00',
            discountPrice: '¥35.00',
            discount: '7折',
            tag: t('activity_tag_hot'),
          },
          {
            brand: 'Amazon',
            brandInitial: 'A',
            name: 'Amazon ¥200 购物券',
            originalPrice: '¥200.00',
            discountPrice: '¥156.00',
            discount: '7.8折',
            tag: t('activity_tag_selling'),
          },
          {
            brand: 'Nike',
            brandInitial: 'N',
            name: 'Nike ¥100 运动券',
            originalPrice: '¥100.00',
            discountPrice: '¥72.00',
            discount: '7.2折',
            tag: t('activity_tag_new'),
          },
        ].map((coupon, i) => (
          <view key={i} className="coupon-card">
            {/* Discount Badge */}
            <view className="coupon-badge">
              <text className="coupon-badge-text">{coupon.tag}</text>
            </view>

            {/* Card Top: Brand + Image */}
            <view className="coupon-card-top">
              <view className="coupon-image-area">
                <text className="coupon-image-icon">🎫</text>
              </view>
              <view className="coupon-discount-tag">
                <text className="coupon-discount-text">{coupon.discount}</text>
              </view>
            </view>

            {/* Card Body */}
            <view className="coupon-card-body">
              <view className="coupon-brand-row">
                <view className="coupon-brand-avatar">
                  <text className="coupon-brand-initial">{coupon.brandInitial}</text>
                </view>
                <text className="coupon-brand-name">{coupon.brand}</text>
              </view>
              <text className="coupon-name">{coupon.name}</text>
              <view className="coupon-price-row">
                <text className="coupon-price-symbol">¥</text>
                <text className="coupon-price-value">{coupon.discountPrice.replace('¥', '')}</text>
                <text className="coupon-original-price">{coupon.originalPrice}</text>
              </view>
            </view>

            {/* Buy Button */}
            <view className="coupon-buy-btn">
              <text className="coupon-buy-text">{t('activity_buy_now')}</text>
            </view>
          </view>
        ))}
      </view>

      {/* Activity Rules */}
      <view className="rules-section">
        <view className="rules-header">
          <view className="rules-icon">
            <text className="rules-icon-text">📋</text>
          </view>
          <text className="rules-title">{t('activity_rules')}</text>
        </view>

        <view className="rules-list">
          {[
            t('activity_rule_1'),
            t('activity_rule_2'),
            t('activity_rule_3'),
            t('activity_rule_4'),
            t('activity_rule_5'),
            t('activity_rule_6'),
            t('activity_rule_7'),
          ].map((rule, i) => (
            <view key={i} className="rule-item">
              <view className="rule-dot" />
              <text className="rule-text">{rule}</text>
            </view>
          ))}
        </view>
      </view>

      {/* Share Bar */}
      <view className="share-bar">
        <view className="share-info">
          <text className="share-count-icon">👥</text>
          <text className="share-count-text">已有 2,386 人参与</text>
        </view>
        <view className="share-btn">
          <text className="share-btn-icon">📤</text>
          <text className="share-btn-text">{t('share_to_friends')}</text>
        </view>
      </view>

      {/* Brand Footer */}
      <view className="brand-footer">
        <view className="footer-logo">
          <view className="footer-logo-box">
            <text className="footer-logo-text">G</text>
          </view>
          <text className="footer-logo-name">Genex</text>
        </view>
        <text className="footer-slogan">{t('app_platform_slogan')}</text>
        <text className="footer-copyright">© 2026 Genex. All rights reserved.</text>
      </view>
    </view>
  );
};

export default H5ActivityPage;

/*
CSS (H5活动页样式 - 对应 index.scss):

.activity-page {
  min-height: 100vh;
  background: #F8F9FC;
  padding-bottom: 180rpx;
}

/* === Hero Banner === */
.hero-banner {
  background: linear-gradient(135deg, #6C5CE7 0%, #9B8FFF 100%);
  padding: 80rpx 40rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 0 40rpx 40rpx;
  position: relative;
  overflow: hidden;
}
.hero-banner::after {
  content: '';
  position: absolute;
  width: 400rpx; height: 400rpx;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  top: -100rpx; right: -80rpx;
}
.hero-badge {
  display: flex;
  align-items: center;
  padding: 8rpx 24rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 999rpx;
  margin-bottom: 24rpx;
}
.hero-badge-icon { font-size: 24rpx; margin-right: 8rpx; }
.hero-badge-text { font-size: 24rpx; color: white; font-weight: 500; }

.hero-title {
  font-size: 44rpx;
  font-weight: 700;
  color: white;
  text-align: center;
  letter-spacing: 2rpx;
}
.hero-subtitle {
  font-size: 28rpx;
  color: rgba(255,255,255,0.8);
  margin-top: 12rpx;
  text-align: center;
}

/* Countdown */
.countdown-section {
  margin-top: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.countdown-label {
  font-size: 24rpx;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16rpx;
}
.countdown-timer {
  display: flex;
  align-items: center;
}
.countdown-block {
  width: 72rpx; height: 72rpx;
  background: rgba(0,0,0,0.25);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-block-ms {
  width: 60rpx; height: 60rpx;
  background: rgba(0,0,0,0.15);
  border-radius: 10rpx;
}
.countdown-num {
  font-size: 36rpx;
  font-weight: 700;
  color: white;
  font-family: 'DIN Alternate', 'Roboto Mono', monospace;
}
.countdown-num-ms {
  font-size: 28rpx;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  font-family: 'DIN Alternate', 'Roboto Mono', monospace;
}
.countdown-sep {
  font-size: 28rpx;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  margin: 0 8rpx;
}

/* === Coupon Section === */
.coupon-section {
  padding: 32rpx;
}
.section-header {
  margin-bottom: 24rpx;
}
.section-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #141723;
  display: block;
}
.section-subtitle {
  font-size: 24rpx;
  color: #A0A8BE;
  margin-top: 4rpx;
  display: block;
}

.coupon-card {
  background: white;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #F1F3F8;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.04);
}
.coupon-badge {
  position: absolute;
  top: 0; left: 0;
  background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
  padding: 6rpx 20rpx 6rpx 16rpx;
  border-radius: 0 0 16rpx 0;
  z-index: 2;
}
.coupon-badge-text {
  font-size: 22rpx;
  font-weight: 700;
  color: white;
}

.coupon-card-top {
  height: 200rpx;
  background: linear-gradient(135deg, #F3F1FF 0%, #E8E4FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.coupon-image-area {
  width: 160rpx; height: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coupon-image-icon { font-size: 80rpx; opacity: 0.5; }
.coupon-discount-tag {
  position: absolute;
  top: 16rpx; right: 16rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  padding: 8rpx 20rpx;
  border-radius: 999rpx;
}
.coupon-discount-text {
  font-size: 24rpx;
  font-weight: 700;
  color: white;
}

.coupon-card-body {
  padding: 24rpx 28rpx;
}
.coupon-brand-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.coupon-brand-avatar {
  width: 40rpx; height: 40rpx;
  background: #F1F3F8;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}
.coupon-brand-initial {
  font-size: 22rpx;
  font-weight: 700;
  color: #6C5CE7;
}
.coupon-brand-name {
  font-size: 24rpx;
  color: #5C6478;
}
.coupon-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #141723;
  display: block;
  margin-bottom: 16rpx;
}
.coupon-price-row {
  display: flex;
  align-items: flex-end;
}
.coupon-price-symbol {
  font-size: 24rpx;
  font-weight: 700;
  color: #6C5CE7;
  margin-bottom: 4rpx;
}
.coupon-price-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #6C5CE7;
  line-height: 1;
  margin-right: 12rpx;
}
.coupon-original-price {
  font-size: 24rpx;
  color: #A0A8BE;
  text-decoration: line-through;
  margin-bottom: 4rpx;
}

.coupon-buy-btn {
  margin: 0 28rpx 28rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coupon-buy-text {
  font-size: 28rpx;
  font-weight: 600;
  color: white;
  letter-spacing: 2rpx;
}

/* === Rules Section === */
.rules-section {
  margin: 0 32rpx;
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  border: 1rpx solid #F1F3F8;
}
.rules-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #F1F3F8;
}
.rules-icon {
  width: 48rpx; height: 48rpx;
  background: #F3F1FF;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}
.rules-icon-text { font-size: 28rpx; }
.rules-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #141723;
}

.rules-list { padding: 0; }
.rule-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rpx;
}
.rule-dot {
  width: 10rpx; height: 10rpx;
  background: #6C5CE7;
  border-radius: 50%;
  margin-top: 14rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.rule-text {
  font-size: 24rpx;
  color: #5C6478;
  line-height: 1.6;
}

/* === Share Bar === */
.share-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 120rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-top: 1rpx solid #F1F3F8;
  box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.share-info {
  display: flex;
  align-items: center;
}
.share-count-icon { font-size: 32rpx; margin-right: 8rpx; }
.share-count-text {
  font-size: 24rpx;
  color: #5C6478;
}
.share-btn {
  display: flex;
  align-items: center;
  padding: 16rpx 40rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 999rpx;
}
.share-btn-icon { font-size: 28rpx; margin-right: 8rpx; }
.share-btn-text {
  font-size: 28rpx;
  font-weight: 600;
  color: white;
}

/* === Brand Footer === */
.brand-footer {
  padding: 60rpx 32rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.footer-logo-box {
  width: 48rpx; height: 48rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}
.footer-logo-text {
  font-size: 28rpx;
  font-weight: 700;
  color: white;
}
.footer-logo-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #141723;
}
.footer-slogan {
  font-size: 22rpx;
  color: #A0A8BE;
  margin-bottom: 8rpx;
}
.footer-copyright {
  font-size: 20rpx;
  color: #C8CDDA;
}
*/