<script setup lang="ts">
import { showProductPackage } from '@/utils/product-package';

// 点击购买按钮
function onProductPackage() {
  showProductPackage();
}
</script>

<template>
  <div class="buy-btn-container">
    <el-button
      class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
      data-tour="buy-btn"
      @click="onProductPackage"
    >
      <span>立即购买</span>
    </el-button>
  </div>
</template>

<style scoped lang="scss">
.buy-btn-container {
  display: flex;
  align-items: center;
  margin: 0 22px 0 0;

  .buy-btn {
    background: linear-gradient(90deg, #FFD700, #FFC107);
    color: #fff;
    border: none;
    border-radius: 9999px;
    transition: transform 0.2s, box-shadow 0.2s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
      background: linear-gradient(90deg, #FFC107, #FFD700);
    }

    .icon-rocket {
      color: #fff;
    }

    .animate-bounce {
      animation: bounce 1.2s infinite;
    }
  }
}

// 移动端，屏幕小于756px
@media screen and (max-width: 756px) {
  .buy-btn-container {
    margin: 0 ;

    .buy-btn {
      font-size: 12px;
      max-width: 60px;
      padding: 8px 12px;
    }
  }
}

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