<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const wrapper = ref(null)
const mouseX = ref(0)
const mouseY = ref(0)

const handleMouseMove = (e) => {
  if (!wrapper.value) return
  const rect = wrapper.value.getBoundingClientRect()
  const x = e.clientX - rect.left - rect.width / 2
  const y = e.clientY - rect.top - rect.height / 2
  mouseX.value = x * 0.1
  mouseY.value = y * 0.1
}

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove)
})

onUnmounted(() => {
  window.removeEventListener('mousemove', handleMouseMove)
})

const icons = [
  { char: '💬', top: '10%', left: '20%', size: '3rem', delay: '0s', z: 2 },
  { char: '👍', top: '70%', left: '10%', size: '2.5rem', delay: '-2s', z: 3 },
  { char: '📰', top: '15%', left: '75%', size: '2.8rem', delay: '-1s', z: 1 },
  { char: '💡', top: '65%', left: '80%', size: '3.5rem', delay: '-3s', z: 4 },
  { char: '📝', top: '40%', left: '85%', size: '2.2rem', delay: '-1.5s', z: 2 },
  { char: '🧩', top: '80%', left: '50%', size: '2.6rem', delay: '-0.5s', z: 1 },
  { char: '💎', top: '30%', left: '10%', size: '2.4rem', delay: '-2.5s', z: 3 },
  { char: '🔥', top: '40%', left: '45%', size: '4.5rem', delay: '-0.8s', z: 5 }, // 中心醒目
]
</script>

<template>
  <div class="hero-anim-wrapper" ref="wrapper" :style="{ transform: `translate(${mouseX}px, ${mouseY}px)` }">
    <div class="glow-bg"></div>
    <div v-for="(icon, idx) in icons" :key="idx" class="floating-icon" :style="{
      top: icon.top,
      left: icon.left,
      fontSize: icon.size,
      animationDelay: icon.delay,
      zIndex: icon.z
    }">
      <div class="icon-inner">
        {{ icon.char }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.hero-anim-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  max-width: 400px;
  margin: 0 auto;
  transition: transform 0.1s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.glow-bg {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(34, 150, 242, 0.4) 0%, rgba(34, 150, 242, 0) 70%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 4s infinite alternate;
  z-index: 0;
}

.floating-icon {
  position: absolute;
  will-change: transform;
  animation: float 6s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(34,150,242,0.3));
}

.icon-inner {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
  cursor: pointer;
}

.dark .icon-inner {
  background: rgba(30, 30, 30, 0.7);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.icon-inner:hover {
  transform: scale(1.2) rotate(10deg);
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(5deg); }
  66% { transform: translateY(10px) rotate(-5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
</style>
