<template>
    <div class="page">
        <img class="imgs" src="../assets/images/frst-apply-img.png" alt="" srcset="" />
        <div class="apply-card-steps">
            <div class="steps-top">
                <div class="step">
                    <div class="step-circle">1</div>
                    <div class="step-label">{{ t('cards.p1') }}</div>
                </div>
                <div class="step-dash"></div>
                <div class="step">
                    <div class="step-circle">2</div>
                    <div class="step-label">{{ t('cards.p2') }}</div>
                </div>
                <div class="step-dash"></div>
                <div class="step">
                    <div class="step-circle">3</div>
                    <div class="step-label">{{ t('cards.p3') }}</div>
                </div>
            </div>
        </div>
        <div class="cwg-button">
            <van-button type="primary" block @click="handleApply">{{ t('cards.p4') }}</van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const router = useRouter()
const { t } = useI18n()
const handleApply = () => {
    router.push('/select/card')
}
</script>

<style scoped lang="scss">
.page{
    margin: 140px 16px 0 16px;
}
.imgs{
    margin-left: 74px;
    margin-bottom: 40px;
}
.apply-card-steps {
    width: 100%;
    margin-bottom: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.steps-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}
.step-circle {
    width: 28px;
    height: 28px;
    color: var(--main-yellow);
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--main-yellow);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}
.step-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(73, 247, 166, 0.3);
}
.step-dash {
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--main-yellow), var(--main-yellow) 6px, transparent 6px, transparent 12px);
    min-width: 18px;
    position: relative;
    top: -16px;
}
.step-label {
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 2;
}
</style>
