<script setup lang="ts">
import AuthLayout from '@/components/AuthLayout.vue'
</script>

<template>
  <AuthLayout
    eyebrow="One more step"
    title="Check your email"
    description="We sent you a link to confirm your signup."
  >
    <div class="check-email-message">
      <p>Open the link in your email to choose a password and finish creating your account.</p>
      <p>The confirmation link expires in 10 minutes.</p>
    </div>

    <template #footer>
      Already confirmed?
      <RouterLink to="/login">Log in</RouterLink>
    </template>
  </AuthLayout>
</template>

<style scoped>
.check-email-message {
  display: grid;
  gap: 0.8rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid #d8dcd7;
  border-radius: 0.85rem;
  color: #52605a;
  background: #fbfcf9;
  font-size: 0.88rem;
  line-height: 1.6;
}

.check-email-message p {
  margin: 0;
}
</style>
