<template>
  <svg viewBox="0 0 560 300" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto" preserveAspectRatio="xMidYMid meet">
    <defs>
      <linearGradient id="ts-teacher" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#4F46E5" />
        <stop offset="100%" stop-color="#6366F1" />
      </linearGradient>
      <linearGradient id="ts-beam" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#06B6D4" stop-opacity="0.5" />
        <stop offset="100%" stop-color="#22D3EE" stop-opacity="0.15" />
      </linearGradient>
      <linearGradient id="ts-screen" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#312E81" />
        <stop offset="100%" stop-color="#1E1B4B" />
      </linearGradient>
    </defs>

    <!-- Teacher laptop -->
    <rect x="24" y="48" width="200" height="128" rx="12" fill="url(#ts-teacher)" />
    <rect x="34" y="58" width="180" height="100" rx="6" fill="#0F0D2E" />
    <rect x="42" y="66" width="164" height="84" rx="4" fill="white" />
    <text x="52" y="82" font-size="7" font-weight="bold" fill="#4F46E5">教师讲解画面</text>
    <rect x="52" y="90" width="140" height="8" rx="2" fill="#E0E7FF" />
    <rect x="52" y="104" width="120" height="6" rx="2" fill="#EEF2FF" />
    <rect x="52" y="116" width="100" height="6" rx="2" fill="#EEF2FF" />
    <rect x="52" y="128" width="80" height="14" rx="4" fill="url(#ts-teacher)" opacity="0.25" />
    <path d="M14 176 L234 176 L250 198 Q252 208 242 208 L6 208 Q-4 208 -2 198 Z" fill="url(#ts-teacher)" />
    <text x="124" y="40" text-anchor="middle" font-size="8" font-weight="600" fill="#4F46E5">教师桌面端</text>

    <!-- Broadcast beam -->
    <path d="M234 110 Q320 100 360 120 L360 140 Q320 120 234 130 Z" fill="url(#ts-beam)" />
    <path d="M234 120 Q340 115 380 145 L380 165 Q330 135 234 140 Z" fill="url(#ts-beam)" opacity="0.7" />
    <circle cx="300" cy="128" r="22" fill="#06B6D4" opacity="0.12" />
    <circle cx="300" cy="128" r="14" fill="#06B6D4" opacity="0.2" />
    <path d="M292 128 L304 128 M300 124 L300 132" stroke="#0891B2" stroke-width="2" stroke-linecap="round" />
    <text x="300" y="158" text-anchor="middle" font-size="7" font-weight="600" fill="#0891B2">实时推流</text>

    <!-- Student devices -->
    <g v-for="(device, i) in devices" :key="i">
      <rect :x="device.x" :y="device.y" width="88" height="118" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1.5" />
      <rect :x="device.x + 8" :y="device.y + 12" width="72" height="88" rx="6" fill="url(#ts-screen)" />
      <rect :x="device.x + 14" :y="device.y + 20" width="60" height="40" rx="3" fill="#312E81" opacity="0.6" />
      <rect :x="device.x + 14" :y="device.y + 66" width="44" height="4" rx="1" fill="#818CF8" opacity="0.5" />
      <rect :x="device.x + 14" :y="device.y + 74" width="36" height="3" rx="1" fill="#818CF8" opacity="0.35" />
      <circle :cx="device.x + 44" :cy="device.y + 108" r="4" fill="#22C55E" />
      <text :x="device.x + 44" :y="device.y + 8" text-anchor="middle" font-size="6" fill="#64748B">{{ device.label }}</text>
    </g>

    <rect x="188" y="228" width="184" height="28" rx="14" fill="#ECFEFF" stroke="#A5F3FC" stroke-width="1" />
    <text x="280" y="246" text-anchor="middle" font-size="8" font-weight="600" fill="#0E7490">全班同步观看教师屏幕</text>
  </svg>
</template>

<script setup lang="ts">
const devices = [
  { x: 348, y: 56, label: '学生端' },
  { x: 348, y: 168, label: '学生端' },
  { x: 448, y: 112, label: '学生端' },
]
</script>
