<script setup>
// 둘러보기(데모)에서 미지원(로그인 필요) 화면에 들어왔을 때 안내.
import { useRoute } from 'vue-router'
import { useUiStore } from '@/stores/ui'

const route = useRoute()
const ui = useUiStore()

const LABELS = {
  'account-stats': '통계',
  'account-budget': '예산 설정',
  'account-tags': '태그 관리',
  board: '게시판',
  'board-detail': '게시판',
  settings: '설정',
  users: '회원 관리',
}
const label = LABELS[route.query.from] || '이 기능'

function goLogin() {
  ui.openLogin('/account')
}
</script>

<template>
  <div class="locked">
    <div class="lock-big">🔒</div>
    <h2>{{ label }}는 로그인 후 이용할 수 있어요</h2>
    <p class="desc">둘러보기에서는 가계부 내역 · 고정 지출 · 계좌 관리 · 분류 관리만 미리 볼 수 있습니다.<br />로그인하면 통계 · 예산 · 태그 · 게시판까지 모두 사용할 수 있어요.</p>
    <button type="button" class="cta-btn" @click="goLogin">로그인 / 시작하기</button>
  </div>
</template>

<style scoped>
.locked {
  text-align: center;
  padding: 3rem 1rem;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}
.lock-big {
  font-size: 2.4rem;
}
h2 {
  margin-top: 0.6rem;
  font-size: 1.15rem;
}
.desc {
  margin: 0.6rem 0 1.3rem;
  font-size: 0.9rem;
  opacity: 0.7;
  line-height: 1.6;
}
.cta-btn {
  width: 100%;
  max-width: 320px;
  padding: 0.8rem 1rem;
  border: 1px solid hsla(160, 100%, 37%, 1);
  border-radius: 8px;
  background: hsla(160, 100%, 37%, 1);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
</style>
