<template>
  <div class="main-menu">
    <!-- 背景网格 -->
    <div class="bg-grid"></div>

    <div class="menu-grid">
      <div
        v-for="(item, index) in menuItems"
        :key="item.path"
        class="menu-card"
        :class="`card-${index}`"
        :style="{ animationDelay: `${index * 100}ms` }"
        @click="handleClick(item)"
      >
        <!-- 卡片背景光效 -->
        <div class="card-glow" :style="{ background: item.bgGradient }"></div>

        <!-- 顶部主题色条 -->

        <!-- 图标区 -->
        <div class="card-icon-wrap" :style="{ '--accent': item.accent }">
          <div class="card-icon" :style="{ background: item.bgGradient }">
            <div class="icon-graphic" v-html="item.iconSvg"></div>
          </div>
        </div>

        <!-- 文字区 -->
        <div class="card-body">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-desc">{{ item.description }}</p>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const menuItems = [
  {
    title: '访客登记',
    description: '预约到访 / 现场登记',
    path: '/visitor',
    bgGradient: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
    accent: '#2f8ee5',
  iconSvg: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="7" y="10" width="34" height="28" rx="6" stroke="white" stroke-width="3" fill="none"/>
  <circle cx="20" cy="21" r="4.8" stroke="white" stroke-width="3" fill="none"/>
  <path d="M13.5 32c1.4-4 4.2-6 6.5-6s5.1 2 6.5 6" stroke="white" stroke-width="3" stroke-linecap="round"/>
  <path d="M30 28.5l3.2 3.2 7-8" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
  },
  {
    title: '路线引导',
    description: '选择目的地，路线指引',
    path: '/navigation',
    bgGradient: 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)',
    accent: '#20b7c7',
    iconSvg: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M24 6C15.7 6 9 12.7 9 21c0 11.2 15 21 15 21s15-9.8 15-21C39 12.7 32.3 6 24 6z"
    stroke="white"
    stroke-width="4"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <circle
    cx="24"
    cy="21"
    r="5.5"
    stroke="white"
    stroke-width="4"
  />
</svg>`
  },
  {
    title: '通知公告',
    description: '查看最新通知公告',
    path: '/notice',
    bgGradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
    accent: '#f59e0b',
   iconSvg: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 27h7l13 8V13L17 21h-7v6z" stroke="white" stroke-width="3" stroke-linejoin="round"/>
  <path d="M17 27v9" stroke="white" stroke-width="3" stroke-linecap="round"/>
  <path d="M34.5 20c2 2.2 2 5.8 0 8" stroke="white" stroke-width="3" stroke-linecap="round"/>
  <path d="M39 16c4 5 4 12 0 17" stroke="white" stroke-width="3" stroke-linecap="round"/>
</svg>`
  },
  {
    title: '呼叫工作人员',
    description: '需要帮助时快速联系',
    path: '/call-staff',
    bgGradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
    accent: '#10b981',
    iconSvg: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M31.8 36.2c-8.7-3.6-15.4-10.3-19-19" stroke="white" stroke-width="4.2" stroke-linecap="round"/>
  <path d="M13.4 8.8l5.3 7.1c.8 1.1.7 2.7-.3 3.7l-2.5 2.5c2.2 4.2 5.8 7.8 10 10l2.5-2.5c1-1 2.6-1.1 3.7-.3l7.1 5.3c1.3 1 1.6 2.8.6 4.1l-2.4 3.2c-.9 1.2-2.4 1.8-3.9 1.5C19.3 40.7 7.3 28.7 4.6 14.5c-.3-1.5.3-3 1.5-3.9l3.2-2.4c1.3-1 3.1-.7 4.1.6z" stroke="white" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
  }
]

const handleClick = (item) => {
  router.push(item.path)
}
</script>

<style scoped>
.main-menu {
  width: 100%;
  max-width: min(1120px, calc(100vw - 80px));
  position: relative;
}

/* 背景网格 */
.bg-grid {
  position: absolute;
  inset: -20px;
  background-image:
    linear-gradient(rgba(47, 142, 229, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 142, 229, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  border-radius: 20px;
  pointer-events: none;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 卡片容器 */
.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 270px;
  padding: 38px 38px 34px;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 38px;
  cursor: pointer;
  overflow: hidden;
  animation: cardIn 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
  box-shadow:
    0 18px 48px rgba(47, 142, 229, 0.11),
    0 3px 10px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.85);
}

/* 卡片光效 */
/* 卡片光效 */
.card-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: 0.06;
  filter: blur(48px);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.menu-card:active {
  transform: scale(0.978);
  box-shadow:
    0 10px 28px rgba(47, 142, 229, 0.10),
    0 2px 8px rgba(15, 23, 42, 0.04);
}

/* 图标 */
.card-icon-wrap {
  position: relative;
  width: 124px;
  height: 124px;
  margin: 0 auto 24px;
  flex-shrink: 0;
}

.card-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 40px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  filter: blur(14px);
  opacity: 0.55;
}

.card-icon {
  width: 124px;
  height: 124px;
  min-width: 124px;
  min-height: 124px;
  max-width: 124px;
  max-height: 124px;
  aspect-ratio: 1 / 1;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}

.icon-graphic {
  width: 74px;
  height: 74px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-graphic :deep(svg) {
  width: 100%;
  height: 100%;
  display: block;
}

/* 文字区 */
.card-body {
  text-align: center;
  margin-bottom: 0;
}

.card-title {
  font-size: 48px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0 0 16px;
  letter-spacing: 1px;
  line-height: 1;
}

.card-desc {
  font-size: 27px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.35;
  font-weight: 400;
}


/* 入场动画 */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 响应式 */
@media (max-width: 900px), (max-height: 660px) {
  .menu-grid { gap: 28px; }
  .menu-card {
    min-height: 220px;
    padding: 30px 28px 26px;
    border-radius: 32px;
  }
  .card-icon-wrap {
    width: 102px;
    height: 102px;
    margin-bottom: 20px;
  }
  .card-icon {
    width: 102px;
    height: 102px;
    min-width: 102px;
    min-height: 102px;
    max-width: 102px;
    max-height: 102px;
    border-radius: 30px;
  }
  .icon-graphic { width: 60px; height: 60px; }
  .card-title { font-size: 38px; margin-bottom: 12px; }
  .card-desc { font-size: 22px; }
}
</style>
