<template>
  <div class="guide-card">
    <div class="guide-illustration" style="background: linear-gradient(135deg, #f76b1c 0%, #fad961 100%);">
      <div class="illus-bubble bubble-1">🎁</div>
      <div class="illus-bubble bubble-2">💎</div>
      <div class="illus-center">🛒</div>
    </div>

    <div class="guide-body">
      <div class="guide-badge">Step 3</div>
      <h2 class="guide-title">积分商城，好礼等你</h2>
      <p class="guide-desc">用积分兑换心仪好礼！<br />从零食饮品到数码好物，应有尽有 🎉</p>

      <!-- 热门商品示意 -->
      <div class="goods-preview">
        <div class="goods-item" v-for="item in goods" :key="item.id">
          <div class="goods-emoji">{{ item.emoji }}</div>
          <div class="goods-name">{{ item.name }}</div>
          <div class="goods-points">{{ item.points }} 积分</div>
        </div>
      </div>
    </div>

    <div class="guide-footer">
      <button class="btn-primary" @click="handleGoMall">
        <span>🛍️</span> 去看看
      </button>
      <button v-if="false" class="btn-secondary" @click="$emit('next')">
        {{ isLast ? '完成新手教程 ✓' : '下一步' }}
      </button>
      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
        上一步
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PointsMallGuide',
  props: {
    isLast: { type: Boolean, default: false },
    isFirst: { type: Boolean, default: false },
    isReplay: { type: Boolean, default: false },
  },
  data() {
    return {
      goods: [
        { id: 1, emoji: '☕', name: '精品咖啡', points: 50 },
        { id: 2, emoji: '🎧', name: '无线耳机', points: 800 },
        { id: 3, emoji: '🧴', name: '护肤套装', points: 300 },
      ],
    }
  },
  methods: {
    handleGoMall() {
      this.$router.push('/home/pointsMall')
      setTimeout(() => this.$emit('next'), 500)
    },
  },
}
</script>

<style scoped>
@import './guide-common.css';

/* Step 3 专属样式 */
.illus-center { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
.guide-badge { color: #f76b1c; background: #fff4ec; }
.btn-primary {
  background: linear-gradient(135deg, #f76b1c, #fad961);
  box-shadow: 0 4px 14px rgba(247,107,28,0.3);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(247,107,28,0.45); }

/* 商品预览 */
.goods-preview { display: flex; gap: 10px; }
.goods-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: #f7f9fc;
  border-radius: 12px;
  transition: all 0.25s;
}
.goods-item:hover { background: #fff4ec; transform: translateY(-2px); }
.goods-emoji { font-size: 26px; margin-bottom: 6px; }
.goods-name { font-size: 12px; color: #4e5969; font-weight: 500; margin-bottom: 4px; }
.goods-points { font-size: 12px; color: #f76b1c; font-weight: 700; }
</style>
