<template>
  <div class="flex items-center justify-center min-h-[60vh] px-[5vw] py-10">
    <div class="max-w-[480px] w-full glass-strong rounded-[var(--radius-default)] px-10 py-12 text-center shadow-[var(--shadow-card)] max-md:px-6 max-md:py-8">
      <!-- Icon -->
      <div class="inline-flex items-center justify-center w-20 h-20 rounded-[20px] bg-gradient-to-br from-accent to-accent2 text-white mb-6">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
        </svg>
      </div>

      <h1 class="text-[28px] font-bold text-apptext mb-4 tracking-[1px]">站点维护中</h1>

      <!-- Divider -->
      <div class="w-12 h-[3px] rounded-full bg-gradient-to-r from-accent to-accent2 opacity-60 mx-auto mb-5"></div>

      <p v-if="reason" class="text-[17px] text-apptext leading-[1.7] mb-4">{{ reason }}</p>
      <p v-else class="text-[17px] text-muted leading-[1.7] mb-4">暂无维护说明，请稍后再试。</p>

      <p class="text-[15px] text-muted mt-2">如有紧急需求，请联系管理员。</p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  reason: { type: String, default: '' }
})
</script>
