<template>
  <section class="motion-section editorial-muted">
    <div class="container mx-auto px-4">
      <div class="constellation-grid">
        <div>
          <span class="eyebrow">角色协作</span>
          <h2>五个端口，不再是五座孤岛。</h2>
          <p>患者端负责触达，医生端负责服务，老板端负责判断，推广员端负责归因，PC 后台负责秩序。</p>
        </div>
        <svg class="constellation" viewBox="0 0 620 420" aria-hidden="true">
          <path v-for="line in lines" :key="line" :d="line" class="constellation-line" />
          <g v-for="node in nodes" :key="node.title" :transform="`translate(${node.x}, ${node.y})`" class="constellation-node">
            <circle r="46" />
            <text text-anchor="middle" y="4">{{ node.title }}</text>
          </g>
        </svg>
      </div>
    </div>
  </section>
</template>

<script setup>
const nodes = [
  { title: '患者端', x: 100, y: 90 },
  { title: '医生端', x: 410, y: 78 },
  { title: '推广员', x: 124, y: 310 },
  { title: '老板端', x: 455, y: 306 },
  { title: 'PC后台', x: 300, y: 205 }
]
const lines = [
  'M100 90 C180 110 220 155 300 205',
  'M410 78 C365 130 335 160 300 205',
  'M124 310 C185 260 235 230 300 205',
  'M455 306 C405 270 360 235 300 205',
  'M100 90 C205 20 310 18 410 78',
  'M124 310 C245 386 352 380 455 306'
]
</script>
