<template>
  <section class="hero-cinematic" @mousemove="moveGlow">
    <img class="hero-cinematic__image" src="@/assets/images/home0001.jpeg" alt="萧康云医诊所赋能场景" />
    <div class="hero-cinematic__grain"></div>
    <div class="hero-cinematic__glow" :style="glowStyle"></div>
    <div class="hero-cinematic__content container mx-auto px-4">
      <div class="hero-cinematic__copy">
        <div class="art-kicker reveal-up">CLINIC OPERATING OS</div>
        <h1 class="reveal-up delay-1">把诊所的获客、服务与经营，编织成一条会生长的路径。</h1>
        <p class="reveal-up delay-2">萧康云医不是把功能堆在一起，而是让患者、医生、老板、推广员与后台数据在同一个节奏里流动。</p>
        <div class="hero-cinematic__actions reveal-up delay-3">
          <router-link to="/pricing" class="primary-button">预约演示</router-link>
          <router-link to="/features" class="secondary-button text-stone-50">探索系统</router-link>
        </div>
      </div>
      <svg class="hero-cinematic__path" viewBox="0 0 760 240" aria-hidden="true">
        <path class="path-shadow" d="M20 180 C150 40 230 220 360 100 S560 40 740 150" />
        <path class="path-draw" d="M20 180 C150 40 230 220 360 100 S560 40 740 150" />
        <g v-for="point in points" :key="point.label" :transform="`translate(${point.x}, ${point.y})`">
          <circle r="7" />
          <text x="14" y="5">{{ point.label }}</text>
        </g>
      </svg>
    </div>
  </section>
</template>

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

const glow = ref({ x: 68, y: 36 })
const points = [
  { label: '线索', x: 62, y: 146 },
  { label: '预约', x: 205, y: 122 },
  { label: '接诊', x: 360, y: 100 },
  { label: '复诊', x: 530, y: 95 },
  { label: '经营', x: 686, y: 132 }
]

// 根据鼠标位置移动柔光，让首屏有轻微生命感。
const moveGlow = (event) => {
  const rect = event.currentTarget.getBoundingClientRect()
  glow.value = {
    x: Math.round(((event.clientX - rect.left) / rect.width) * 100),
    y: Math.round(((event.clientY - rect.top) / rect.height) * 100)
  }
}

const glowStyle = computed(() => ({
  '--glow-x': `${glow.value.x}%`,
  '--glow-y': `${glow.value.y}%`
}))
</script>
