import React from 'react';
// Taro mini-program component (WeChat / Alipay)

/**
 * E1. 小程序核心页面 - 首页
 *
 * 消费者端的轻量版：热门券 + 分类入口 + AI推荐
 * 支持微信支付/支付宝支付
 */

const HomePage: React.FC = () => {
  return (
    <view className="home-page">
      {/* Search Bar */}
      <view className="search-bar">
        <view className="search-input">
          <text className="search-icon">🔍</text>
          <text className="search-placeholder">搜索券、品牌...</text>
        </view>
      </view>

      {/* Banner */}
      <swiper
        className="banner-swiper"
        indicatorDots
        autoplay
        circular
        indicatorActiveColor="#6C5CE7"
      >
        {['新用户专享 - 首单立减¥10', '限时折扣 - 全场低至7折', '热门推荐 - 精选高折扣券'].map((text, i) => (
          <swiper-item key={i}>
            <view className={`banner-item banner-${i}`}>
              <text className="banner-title">{text.split(' - ')[0]}</text>
              <text className="banner-subtitle">{text.split(' - ')[1]}</text>
            </view>
          </swiper-item>
        ))}
      </swiper>

      {/* Category Grid */}
      <view className="category-grid">
        {[
          { name: '餐饮', icon: '🍽️' },
          { name: '购物', icon: '🛍️' },
          { name: '娱乐', icon: '🎮' },
          { name: '出行', icon: '🚗' },
          { name: '全部', icon: '📋' },
        ].map(cat => (
          <view key={cat.name} className="category-item">
            <view className="category-icon">{cat.icon}</view>
            <text className="category-name">{cat.name}</text>
          </view>
        ))}
      </view>

      {/* AI Suggestion (轻量版) */}
      <view className="ai-suggestion">
        <view className="ai-icon">✨</view>
        <view className="ai-content">
          <text className="ai-title">AI 推荐</text>
          <text className="ai-text">根据你的偏好，发现了高性价比券</text>
        </view>
        <text className="ai-arrow">›</text>
      </view>

      {/* Hot Coupons */}
      <view className="section-header">
        <text className="section-title">热门好券</text>
        <text className="section-more">更多 ›</text>
      </view>

      <view className="coupon-list">
        {[
          { brand: 'Starbucks', name: '星巴克 ¥25 礼品卡', price: '¥21.25', face: '¥25', discount: '8.5折' },
          { brand: 'Amazon', name: 'Amazon ¥100 购物券', price: '¥85.00', face: '¥100', discount: '8.5折' },
          { brand: 'Nike', name: 'Nike ¥80 运动券', price: '¥68.00', face: '¥80', discount: '8.5折' },
          { brand: 'Target', name: 'Target ¥30 折扣券', price: '¥24.00', face: '¥30', discount: '8折' },
        ].map((coupon, i) => (
          <view key={i} className="coupon-card">
            <view className="coupon-image">
              <text className="coupon-image-icon">🎫</text>
            </view>
            <view className="coupon-info">
              <text className="coupon-brand">{coupon.brand}</text>
              <text className="coupon-name">{coupon.name}</text>
              <view className="coupon-price-row">
                <text className="coupon-price">{coupon.price}</text>
                <text className="coupon-face">{coupon.face}</text>
                <view className="coupon-discount">{coupon.discount}</view>
              </view>
            </view>
          </view>
        ))}
      </view>
    </view>
  );
};

export default HomePage;

/*
CSS (小程序样式 - 对应 index.scss):

.home-page { padding-bottom: 120rpx; background: #F8F9FC; }

.search-bar { padding: 20rpx 32rpx; }
.search-input {
  display: flex; align-items: center;
  height: 72rpx; padding: 0 24rpx;
  background: #F1F3F8; border-radius: 999rpx;
  border: 1rpx solid #E4E7F0;
}
.search-icon { font-size: 32rpx; margin-right: 12rpx; }
.search-placeholder { color: #A0A8BE; font-size: 28rpx; }

.banner-swiper { height: 280rpx; margin: 0 32rpx; border-radius: 24rpx; }
.banner-item {
  height: 280rpx; border-radius: 24rpx; padding: 32rpx;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.banner-0 { background: linear-gradient(135deg, #6C5CE7, #9B8FFF); }
.banner-1 { background: linear-gradient(135deg, #00C48C, #00E6A0); }
.banner-2 { background: linear-gradient(135deg, #4834D4, #6C5CE7); }
.banner-title { color: white; font-size: 36rpx; font-weight: 700; }
.banner-subtitle { color: rgba(255,255,255,0.8); font-size: 26rpx; margin-top: 8rpx; }

.category-grid {
  display: flex; justify-content: space-around; padding: 32rpx;
}
.category-item { display: flex; flex-direction: column; align-items: center; }
.category-icon {
  width: 80rpx; height: 80rpx;
  background: #F3F1FF; border-radius: 16rpx;
  display: flex; align-items: center; justify-content: center;
  font-size: 36rpx;
}
.category-name { font-size: 22rpx; color: #141723; margin-top: 8rpx; }

.ai-suggestion {
  display: flex; align-items: center;
  margin: 0 32rpx; padding: 20rpx 24rpx;
  background: #F3F1FF; border-radius: 16rpx;
  border: 1rpx solid rgba(108,92,231,0.15);
}
.ai-icon { font-size: 36rpx; margin-right: 16rpx; }
.ai-content { flex: 1; }
.ai-title { font-size: 24rpx; color: #6C5CE7; font-weight: 500; }
.ai-text { font-size: 22rpx; color: #5C6478; }
.ai-arrow { font-size: 32rpx; color: #6C5CE7; }

.section-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 32rpx 32rpx 16rpx;
}
.section-title { font-size: 32rpx; font-weight: 600; color: #141723; }
.section-more { font-size: 24rpx; color: #6C5CE7; }

.coupon-card {
  display: flex; margin: 0 32rpx 16rpx; padding: 20rpx;
  background: white; border-radius: 16rpx;
  border: 1rpx solid #F1F3F8;
}
.coupon-image {
  width: 160rpx; height: 160rpx;
  background: #F3F1FF; border-radius: 12rpx;
  display: flex; align-items: center; justify-content: center;
}
.coupon-image-icon { font-size: 48rpx; }
.coupon-info { flex: 1; padding-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between; }
.coupon-brand { font-size: 22rpx; color: #A0A8BE; }
.coupon-name { font-size: 28rpx; font-weight: 500; color: #141723; }
.coupon-price-row { display: flex; align-items: flex-end; }
.coupon-price { font-size: 32rpx; font-weight: 700; color: #6C5CE7; }
.coupon-face { font-size: 22rpx; color: #A0A8BE; text-decoration: line-through; margin-left: 8rpx; }
.coupon-discount {
  margin-left: 8rpx; padding: 2rpx 10rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  color: white; font-size: 20rpx; font-weight: 700;
  border-radius: 999rpx;
}
*/
