import React from 'react';

/**
 * E2. H5页面 - 券分享页 + 活动落地页 + 注册引导页
 *
 * 券信息展示 + 「打开App购买」/「小程序购买」引导
 */

// === 券分享页 ===
export const SharePage: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(180deg, #6C5CE7 0%, #F8F9FC 40%)',
      fontFamily: "'Inter', -apple-system, sans-serif",
    }}>
      {/* Header */}
      <div style={{ padding: '48px 24px 0', textAlign: 'center' }}>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          padding: '8px 16px',
          background: 'rgba(255,255,255,0.2)',
          borderRadius: 999,
          color: 'white',
          fontSize: 13,
        }}>
          <span style={{ fontSize: 16 }}>💎</span>
          <span>来自 Genex 的分享</span>
        </div>
      </div>

      {/* Coupon Card */}
      <div style={{
        margin: '24px 20px',
        background: 'white',
        borderRadius: 20,
        boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
        overflow: 'hidden',
      }}>
        {/* Image */}
        <div style={{
          height: 180,
          background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <span style={{ fontSize: 64, opacity: 0.3 }}>🎫</span>
        </div>

        {/* Info */}
        <div style={{ padding: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: '#F1F3F8',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700, color: '#6C5CE7',
            }}>S</div>
            <span style={{ fontSize: 13, color: '#5C6478' }}>Starbucks</span>
            <span style={{
              padding: '1px 6px', borderRadius: 999,
              background: 'rgba(0,196,140,0.1)',
              border: '1px solid rgba(0,196,140,0.3)',
              fontSize: 10, fontWeight: 700, color: '#00C48C',
            }}>AAA</span>
          </div>

          <h2 style={{ fontSize: 20, fontWeight: 600, color: '#141723', margin: '0 0 12px' }}>
            星巴克 $25 礼品卡
          </h2>

          <div style={{
            padding: 16,
            background: '#F3F1FF',
            borderRadius: 12,
            marginBottom: 16,
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: '#6C5CE7' }}>$</span>
              <span style={{ fontSize: 32, fontWeight: 700, color: '#6C5CE7', lineHeight: 1 }}>21.25</span>
              <span style={{ fontSize: 13, color: '#A0A8BE', textDecoration: 'line-through' }}>$25</span>
              <span style={{
                padding: '2px 8px',
                background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
                color: 'white', fontSize: 11, fontWeight: 700, borderRadius: 999,
              }}>8.5折</span>
            </div>
            <div style={{ fontSize: 12, color: '#00C48C', marginTop: 6 }}>
              比面值节省 $3.75
            </div>
          </div>

          {/* Info rows */}
          {[
            { label: '有效期', value: '2026/12/31' },
            { label: '使用门店', value: '全国 12,800+ 门店' },
          ].map((item, i) => (
            <div key={i} style={{
              display: 'flex',
              justifyContent: 'space-between',
              padding: '10px 0',
              borderBottom: '1px solid #F1F3F8',
              fontSize: 13,
            }}>
              <span style={{ color: '#5C6478' }}>{item.label}</span>
              <span style={{ color: '#141723', fontWeight: 500 }}>{item.value}</span>
            </div>
          ))}
        </div>
      </div>

      {/* CTA Buttons */}
      <div style={{ padding: '0 20px 32px' }}>
        <button style={{
          width: '100%',
          height: 52,
          background: '#6C5CE7',
          color: 'white',
          border: 'none',
          borderRadius: 12,
          fontSize: 16,
          fontWeight: 600,
          cursor: 'pointer',
          marginBottom: 12,
        }}>
          打开 App 购买
        </button>
        <button style={{
          width: '100%',
          height: 52,
          background: 'white',
          color: '#6C5CE7',
          border: '1.5px solid #6C5CE7',
          borderRadius: 12,
          fontSize: 16,
          fontWeight: 600,
          cursor: 'pointer',
        }}>
          小程序购买
        </button>
      </div>
    </div>
  );
};

// === 活动落地页 ===
export const ActivityPage: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh',
      background: '#F8F9FC',
      fontFamily: "'Inter', -apple-system, sans-serif",
    }}>
      {/* Activity Banner */}
      <div style={{
        height: 240,
        background: 'linear-gradient(135deg, #6C5CE7, #4834D4)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
      }}>
        <h1 style={{ fontSize: 28, fontWeight: 700, margin: 0 }}>新用户专享</h1>
        <p style={{ fontSize: 16, opacity: 0.8, margin: '8px 0 0' }}>首单立减 $10，限时优惠</p>
      </div>

      {/* Coupon Grid */}
      <div style={{ padding: 20 }}>
        <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>活动好券</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {Array.from({ length: 4 }, (_, i) => (
            <div key={i} style={{
              background: 'white',
              borderRadius: 12,
              overflow: 'hidden',
              border: '1px solid #F1F3F8',
            }}>
              <div style={{
                height: 100,
                background: '#F3F1FF',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <span style={{ fontSize: 32, opacity: 0.4 }}>🎫</span>
              </div>
              <div style={{ padding: 10 }}>
                <div style={{ fontSize: 12, color: '#5C6478' }}>品牌 {i + 1}</div>
                <div style={{ fontSize: 16, fontWeight: 700, color: '#6C5CE7' }}>
                  ${(i + 1) * 8.5}
                </div>
                <div style={{ fontSize: 11, color: '#A0A8BE', textDecoration: 'line-through' }}>
                  ${(i + 1) * 10}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <button style={{
          width: '100%',
          height: 48,
          marginTop: 24,
          background: '#6C5CE7',
          color: 'white',
          border: 'none',
          borderRadius: 12,
          fontSize: 15,
          fontWeight: 600,
          cursor: 'pointer',
        }}>
          立即参与
        </button>
      </div>
    </div>
  );
};

// === 注册引导页 ===
export const RegisterGuidePage: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh',
      background: 'white',
      fontFamily: "'Inter', -apple-system, sans-serif",
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: 40,
    }}>
      {/* Logo */}
      <div style={{
        width: 72, height: 72,
        background: 'linear-gradient(135deg, #6C5CE7, #9B8FFF)',
        borderRadius: 18,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 24,
        boxShadow: '0 4px 16px rgba(108,92,231,0.3)',
      }}>
        <span style={{ fontSize: 32 }}>💎</span>
      </div>

      <h1 style={{ fontSize: 24, fontWeight: 700, color: '#141723', margin: '0 0 8px' }}>
        加入 Genex
      </h1>
      <p style={{ fontSize: 15, color: '#5C6478', margin: '0 0 40px', textAlign: 'center' }}>
        让每一张券都有价值<br />
        注册即享首单立减优惠
      </p>

      {/* Features */}
      {[
        { icon: '🎫', title: '海量优惠券', desc: '餐饮、购物、娱乐全覆盖' },
        { icon: '💰', title: '超值折扣', desc: '最低7折起，省钱又省心' },
        { icon: '🔒', title: '安全交易', desc: '平台担保，放心购买' },
      ].map((f, i) => (
        <div key={i} style={{
          display: 'flex',
          alignItems: 'center',
          width: '100%',
          maxWidth: 320,
          padding: '14px 0',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: '#F3F1FF',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, marginRight: 16, flexShrink: 0,
          }}>{f.icon}</div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, color: '#141723' }}>{f.title}</div>
            <div style={{ fontSize: 12, color: '#5C6478' }}>{f.desc}</div>
          </div>
        </div>
      ))}

      <div style={{ width: '100%', maxWidth: 320, marginTop: 32 }}>
        <button style={{
          width: '100%', height: 52,
          background: '#6C5CE7', color: 'white',
          border: 'none', borderRadius: 12,
          fontSize: 16, fontWeight: 600, cursor: 'pointer',
          marginBottom: 12,
        }}>
          立即注册
        </button>
        <button style={{
          width: '100%', height: 52,
          background: 'transparent', color: '#6C5CE7',
          border: '1.5px solid #6C5CE7', borderRadius: 12,
          fontSize: 16, fontWeight: 600, cursor: 'pointer',
        }}>
          已有账号，登录
        </button>
      </div>
    </div>
  );
};

export default SharePage;