<template>
  <div class="bg-gray-50 dark:bg-gray-900 py-16">
    <div class="container mx-auto px-4 max-w-6xl">
      <!-- 页面标题 -->
      <div class="text-center mb-12 px-4">
        <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4">
          多场景应用
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
          通过专业的智能硬件与软件系统开发，解决物联网平台在各类复杂场景下的应用问题
        </p>
      </div>

      <!-- 场景应用网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-4">
        <div
            v-for="(scene, index) in scenes"
            :key="index"
            class="group relative cursor-pointer"
            @mouseenter="activeScene = index"
            @mouseleave="activeScene = null"
        >
          <!-- 默认卡片 -->
          <div
              class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300 group-hover:shadow-lg h-full flex flex-col items-center">
            <!-- 图标区域 -->
            <div :class="scene.bgColor" class="w-16 h-16 rounded-lg flex items-center justify-center mb-4 mx-auto">
              <UIcon :class="scene.iconColor" :name="scene.icon" class="w-8 h-8"/>
            </div>

            <h3 class="text-xl font-semibold text-gray-900 dark:text-white text-center mb-4">
              {{ scene.title }}
            </h3>

            <!-- 设备列表 -->
            <ul class="space-y-2 text-center ">
              <li
                  v-for="(device, deviceIndex) in scene.devices" :key="deviceIndex"
                  class="text-gray-600 dark:text-gray-400 text-sm"
              >
                {{ device }}
              </li>
              <li class="text-gray-600 dark:text-gray-400 text-sm">...</li>
            </ul>
          </div>

          <!-- 悬浮详情卡片 -->
          <div v-if="activeScene === index" class="absolute top-0 left-0  h-full z-10 flex flex-col items-center">
            <div :class="scene.hoverBgColor" class="rounded-xl p-6 h-full text-white shadow-xl flex flex-col">
              <h3 class="text-xl font-semibold mb-4">{{ scene.title }}</h3>
              <p class="text-sm opacity-90 mb-6 leading-relaxed">
                {{ scene.description }}
              </p>

              <UButton
                  class="w-full border-white/30 hover:bg-white/10 transition-colors mt-auto"
                  color="white"
                  size="sm"
                  variant="outline"
              >
                查看详情
              </UButton>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const activeScene = ref(null)

const scenes = [
  {
    title: '智能家居',
    icon: 'i-heroicons-home-20-solid',
    bgColor: 'bg-red-100 dark:bg-red-900/20',
    iconColor: 'text-red-600 dark:text-red-400',
    hoverBgColor: 'bg-red-600 dark:bg-red-700',
    devices: ['智能门锁', '智能空调', '智能电饭煲', '智能窗帘'],
    description: '通过智能硬件与软件系统集成，实现家居设备的智能化控制和管理，提升生活品质和能源效率。'
  },
  {
    title: '智慧出行',
    icon: 'i-heroicons-truck-20-solid',
    bgColor: 'bg-blue-100 dark:bg-blue-900/20',
    iconColor: 'text-blue-600 dark:text-blue-400',
    hoverBgColor: 'bg-blue-600 dark:bg-blue-700',
    devices: ['共享单车', '共享汽车', '共享滑板车', '共享电动车'],
    description: '提供多样化的共享交通工具解决方案，优化城市出行体验，促进绿色环保和交通效率提升。'
  },
  {
    title: '智慧医疗',
    icon: 'i-heroicons-heart-20-solid',
    bgColor: 'bg-green-100 dark:bg-green-900/20',
    iconColor: 'text-green-600 dark:text-green-400',
    hoverBgColor: 'bg-green-600 dark:bg-green-700',
    devices: ['共享陪护床', '智能安防', '共享打印机', '共享充电宝'],
    description: '为医疗机构提供智能化设备和共享服务解决方案，改善患者体验，提升医疗服务质量和管理效率。'
  },
  {
    title: '智慧园区',
    icon: 'i-heroicons-building-office-20-solid',
    bgColor: 'bg-purple-100 dark:bg-purple-900/20',
    iconColor: 'text-purple-600 dark:text-purple-400',
    hoverBgColor: 'bg-purple-600 dark:bg-purple-700',
    devices: ['智能自提柜', '共享健身房', '共享洗衣机', '智能门禁'],
    description: '为园区提供智能化基础设施和共享服务，打造高效、便捷、智能的园区生活环境和工作环境。'
  }
]
</script>

<style scoped>
/* 确保所有卡片高度一致 */
.group {
  min-height: 320px;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .grid {
    gap: 1.5rem;
  }

  .group {
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .group {
    min-height: 280px;
  }
}

/* 确保卡片不贴边 */
.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

.grid {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
</style>