<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import AuthLayout from '@/components/auth/AuthLayout.vue'
import AppButton from '@/components/common/AppButton.vue'

const { t } = useI18n()
</script>

<template>
  <AuthLayout>
    <div class="success-wrap">
      <div class="success-icon" aria-hidden="true">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
          <circle cx="28" cy="28" r="28" fill="rgba(240,185,11,0.12)" />
          <circle cx="28" cy="28" r="20" stroke="#F0B90B" stroke-width="2" />
          <polyline points="19,28 25,34 37,22" stroke="#F0B90B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
        </svg>
      </div>
      <h1 class="success-title">{{ t('auth.registerSuccess') }}</h1>
      <p class="success-sub">{{ t('auth.welcomeJoin') }}</p>
      <RouterLink to="/login" class="btn-wrap">
        <AppButton pill block size="lg">{{ t('auth.loginNowBtn') }}</AppButton>
      </RouterLink>
    </div>
  </AuthLayout>
</template>

<style scoped>
.success-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  gap: 0;
}
.success-icon { margin-bottom: 24px; }
.success-title { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.success-sub { font-size: 15px; color: #888; margin-bottom: 36px; }
.btn-wrap { width: 100%; }
</style>
