<template>
  <ScreenLayout :show-back-btn="true" back-text="返回菜单" back-target="/menu">
    <div class="page-visitor">
      <h1 class="page-title">访客登记</h1>

      <div class="visitor-options">
        <!-- 预约到访 -->
        <div class="option-card" @click="goToAppointment">
          <div class="option-icon" style="background: linear-gradient(135deg, #2f8ee5 0%, #1a6fc9 100%);">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
              <line x1="16" y1="2" x2="16" y2="6" />
              <line x1="8" y1="2" x2="8" y2="6" />
              <line x1="3" y1="10" x2="21" y2="10" />
            </svg>
          </div>
          <h3>预约到访</h3>
          <p>请出示预约信息</p>
        </div>

        <!-- 现场登记 -->
        <div class="option-card" @click="goToWalkIn">
          <div class="option-icon" style="background: linear-gradient(135deg, #20b7c7 0%, #0ea5a5 100%);">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
              <circle cx="9" cy="7" r="4" />
              <line x1="19" y1="8" x2="19" y2="14" />
              <line x1="22" y1="11" x2="16" y2="11" />
            </svg>
          </div>
          <h3>现场登记</h3>
          <p>填写个人信息</p>
        </div>
      </div>
    </div>
  </ScreenLayout>
</template>

<script setup>
import { useRouter } from 'vue-router'
import ScreenLayout from '@/layouts/ScreenLayout.vue'

const router = useRouter()

const goToAppointment = () => {
  router.push('/visitor/appointment')
}

const goToWalkIn = () => {
  router.push('/visitor/walk-in')
}
</script>

<style scoped>
.page-visitor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 40px;
}

.visitor-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 700px;
  width: 100%;
}

.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 32px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.option-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.option-card:active {
  transform: translateY(-4px);
}

.option-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: white;
}

.option-icon svg {
  width: 44px;
  height: 44px;
}

.option-card h3 {
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.option-card p {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}
</style>
