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

const { t } = useI18n()
const router = useRouter()

function goBind() {
  router.push('/account/security/google-auth/bind')
}
</script>

<template>
  <main class="page-main">
    <div class="page-container sub-wrap">
      <div class="page-header">
        <RouterLink to="/account/security" class="back-link">{{ t('security.back') }}</RouterLink>
        <h1 class="page-title">{{ t('security.googleAuth') }}</h1>
      </div>

      <div class="content-card dark-card">
        <p class="lead">{{ t('security.googleAuthLead') }}</p>
        <ul class="tips">
          <li>{{ t('security.googleAuthTip1') }}</li>
          <li>{{ t('security.googleAuthTip2') }}</li>
        </ul>
        <button type="button" class="btn-confirm" @click="goBind">{{ t('security.googleAuthStart') }}</button>
      </div>
    </div>
  </main>
</template>

<style scoped>
.sub-wrap {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  max-width: 560px;
}
.page-header {
  margin-bottom: var(--space-8);
}
.back-link {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  display: inline-block;
  margin-bottom: var(--space-3);
}
.page-title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.content-card {
  padding: var(--space-6);
}
.lead {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.tips {
  margin: 0 0 var(--space-8);
  padding-left: var(--space-5);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.8;
}
.btn-confirm {
  width: 100%;
  padding: var(--space-3);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  color: #000;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
</style>
