<script setup lang="ts">
const emit = defineEmits(['close']);

function goToActivation() {
  emit('close');
  window.location.href = '/console/activation';
}
</script>

<template>
  <div class="activation-guide-container">
    <div class="activation-content">
      <div class="guide-icon">
        🎁
      </div>
      <h3 class="guide-title">
        激活码兑换
      </h3>
      <p class="guide-desc">
        如果您持有意心AI的会员激活码或Token兑换码，<br>请点击下方按钮前往控制台进行兑换。
      </p>
      <el-button
        type="primary"
        size="large"
        class="redeem-jump-btn"
        round
        @click="goToActivation"
      >
        前往兑换中心
      </el-button>

      <div class="guide-tips">
        <p>💡 兑换成功后权益将立即生效</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.activation-guide-container {
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(to bottom, #fff, #fdfdfd);
  border-radius: 8px;

  .activation-content {
    text-align: center;
    max-width: 400px;

    .guide-icon {
      font-size: 64px;
      margin-bottom: 24px;
      animation: float-icon 3s ease-in-out infinite;
    }

    .guide-title {
      font-size: 24px;
      font-weight: 800;
      color: #2c3e50;
      margin-bottom: 16px;
    }

    .guide-desc {
      color: #606266;
      line-height: 1.6;
      margin-bottom: 32px;
      font-size: 15px;
    }

    .redeem-jump-btn {
      width: 200px;
      height: 48px;
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 1px;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      border: none;
      box-shadow: 0 4px 12px rgba(255, 117, 140, 0.3);
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(255, 117, 140, 0.4);
      }
    }

    .guide-tips {
      margin-top: 24px;
      font-size: 13px;
      color: #909399;
      display: flex;
      justify-content: center;
      gap: 8px;
    }
  }
}

@keyframes float-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
</style>
