<template>
  <div class="entry-page relative min-h-screen flex flex-col items-center overflow-hidden">
    <button class="fixed left-0 top-30 z-20 active:scale-98 transition" @click="goRule">
      <img src="/entry/rule_btn.png" alt="活动规则" class="h-24 select-none" />
    </button>

    <div class="relative z-10 flex flex-col items-center w-full px-2 pt-4 pb-16 gap-5">
      <img src="/entry/content.png" alt="宁福您彩 新婚送福" class="w-full" />
      <div class="flex items-center gap-5 mt-2">
        <button @click="goClaim" class="active:scale-98 transition">
          <img src="/entry/claim_btn.png" alt="领取祝福" class="h-14 md:h-16" />
        </button>
        <button @click="goRedeem" class="active:scale-98 transition">
          <img src="/entry/redeem_btn.png" alt="核销登记" class="h-14 md:h-16" />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goClaim = () => {
  router.push('/claim')
}

const goRedeem = () => {
  window.location.href = 'https://fucai-redeem.smartjinrui.cn'
}

const goRule = () => {
  window.location.href = '/rule'
}
</script>

<style scoped>
.entry-page {
  background-image: url('/entry/bg.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
  background-color: #fff;
}
</style>
