<template>
  <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
    <defs>
      <linearGradient id="brain-grad1" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#818CF8" />
        <stop offset="100%" stop-color="#4F46E5" />
      </linearGradient>
      <linearGradient id="brain-grad2" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#22C55E" />
        <stop offset="100%" stop-color="#4ADE80" />
      </linearGradient>
      <filter id="brain-glow">
        <feGaussianBlur stdDeviation="4" result="blur" />
        <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
      </filter>
    </defs>

    <!-- Outer orbit rings -->
    <ellipse cx="200" cy="200" rx="180" ry="180" stroke="#818CF8" stroke-width="0.5" opacity="0.15" />
    <ellipse cx="200" cy="200" rx="150" ry="150" stroke="#818CF8" stroke-width="0.5" opacity="0.2" />
    <ellipse cx="200" cy="200" rx="120" ry="120" stroke="#818CF8" stroke-width="0.5" opacity="0.25" />

    <!-- Neural connection lines -->
    <g opacity="0.3">
      <line x1="200" y1="80" x2="120" y2="140" stroke="#818CF8" stroke-width="1" class="animate-line1" />
      <line x1="200" y1="80" x2="280" y2="140" stroke="#818CF8" stroke-width="1" class="animate-line2" />
      <line x1="120" y1="140" x2="90" y2="220" stroke="#818CF8" stroke-width="1" class="animate-line1" />
      <line x1="280" y1="140" x2="310" y2="220" stroke="#818CF8" stroke-width="1" class="animate-line2" />
      <line x1="120" y1="140" x2="160" y2="200" stroke="#4ADE80" stroke-width="1" class="animate-line3" />
      <line x1="280" y1="140" x2="240" y2="200" stroke="#4ADE80" stroke-width="1" class="animate-line3" />
      <line x1="160" y1="200" x2="200" y2="260" stroke="#818CF8" stroke-width="1" class="animate-line1" />
      <line x1="240" y1="200" x2="200" y2="260" stroke="#818CF8" stroke-width="1" class="animate-line2" />
      <line x1="90" y1="220" x2="140" y2="300" stroke="#4ADE80" stroke-width="1" class="animate-line3" />
      <line x1="310" y1="220" x2="260" y2="300" stroke="#4ADE80" stroke-width="1" class="animate-line3" />
      <line x1="200" y1="260" x2="140" y2="300" stroke="#818CF8" stroke-width="1" class="animate-line1" />
      <line x1="200" y1="260" x2="260" y2="300" stroke="#818CF8" stroke-width="1" class="animate-line2" />
      <line x1="160" y1="200" x2="90" y2="220" stroke="#818CF8" stroke-width="0.8" class="animate-line2" />
      <line x1="240" y1="200" x2="310" y2="220" stroke="#818CF8" stroke-width="0.8" class="animate-line1" />
      <line x1="160" y1="200" x2="240" y2="200" stroke="#4ADE80" stroke-width="1.5" class="animate-line3" />
    </g>

    <!-- Neural nodes -->
    <g filter="url(#brain-glow)">
      <!-- Central node (brain core) -->
      <circle cx="200" cy="200" r="28" fill="url(#brain-grad1)" opacity="0.9" class="animate-pulse-core" />
      <circle cx="200" cy="200" r="18" fill="#4F46E5" />
      <path d="M192 195 Q200 185 208 195 Q208 205 200 210 Q192 205 192 195" fill="white" opacity="0.8" />
      <path d="M194 200 Q200 195 206 200" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.6" />

      <!-- Layer 1 nodes -->
      <circle cx="200" cy="80" r="12" fill="url(#brain-grad1)" class="animate-node1" />
      <text x="200" y="86" text-anchor="middle" font-size="14" font-weight="bold" fill="white">NLP</text>

      <circle cx="120" cy="140" r="10" fill="url(#brain-grad2)" class="animate-node2" />
      <circle cx="280" cy="140" r="10" fill="url(#brain-grad2)" class="animate-node3" />

      <!-- Layer 2 nodes -->
      <circle cx="160" cy="200" r="9" fill="url(#brain-grad1)" class="animate-node4" />
      <circle cx="240" cy="200" r="9" fill="url(#brain-grad1)" class="animate-node5" />

      <!-- Layer 3 nodes -->
      <circle cx="90" cy="220" r="8" fill="url(#brain-grad2)" class="animate-node2" />
      <circle cx="310" cy="220" r="8" fill="url(#brain-grad2)" class="animate-node3" />
      <circle cx="200" cy="260" r="10" fill="url(#brain-grad1)" class="animate-node1" />

      <!-- Output nodes -->
      <circle cx="140" cy="300" r="8" fill="url(#brain-grad2)" class="animate-node4" />
      <circle cx="260" cy="300" r="8" fill="url(#brain-grad2)" class="animate-node5" />
    </g>

    <!-- Orbiting data points -->
    <g class="animate-orbit1">
      <circle cx="200" cy="20" r="4" fill="#FBBF24" opacity="0.8" />
    </g>
    <g class="animate-orbit2">
      <circle cx="380" cy="200" r="3" fill="#22C55E" opacity="0.7" />
    </g>
    <g class="animate-orbit3">
      <circle cx="200" cy="380" r="3.5" fill="#818CF8" opacity="0.6" />
    </g>

    <!-- Labels -->
    <g class="animate-label1">
      <rect x="28" y="118" width="72" height="24" rx="12" fill="white" opacity="0.1" />
      <text x="64" y="135" text-anchor="middle" font-size="11" font-weight="600" fill="#4ADE80">语义分析</text>
    </g>
    <g class="animate-label2">
      <rect x="288" y="118" width="80" height="24" rx="12" fill="white" opacity="0.1" />
      <text x="328" y="135" text-anchor="middle" font-size="11" font-weight="600" fill="#4ADE80">知识图谱</text>
    </g>
    <g class="animate-label3">
      <rect x="44" y="286" width="72" height="24" rx="12" fill="white" opacity="0.1" />
      <text x="80" y="303" text-anchor="middle" font-size="11" font-weight="600" fill="#4ADE80">评分</text>
    </g>
    <g class="animate-label4">
      <rect x="272" y="286" width="80" height="24" rx="12" fill="white" opacity="0.1" />
      <text x="312" y="303" text-anchor="middle" font-size="11" font-weight="600" fill="#4ADE80">自适应</text>
    </g>

    <!-- Floating data particles -->
    <circle cx="60" cy="80" r="2" fill="#818CF8" opacity="0.4" class="animate-particle1" />
    <circle cx="340" cy="70" r="1.5" fill="#22C55E" opacity="0.3" class="animate-particle2" />
    <circle cx="50" cy="320" r="2" fill="#FBBF24" opacity="0.4" class="animate-particle3" />
    <circle cx="350" cy="330" r="1.5" fill="#818CF8" opacity="0.3" class="animate-particle1" />
    <circle cx="100" cy="50" r="1.5" fill="#22C55E" opacity="0.3" class="animate-particle2" />
    <circle cx="300" cy="50" r="2" fill="#E879F9" opacity="0.3" class="animate-particle3" />
  </svg>
</template>

<style scoped>
@keyframes pulse-core { 0%,100%{r:28;opacity:.9} 50%{r:32;opacity:.6} }
@keyframes node1 { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.9)} }
@keyframes node2 { 0%,100%{opacity:.9} 33%{opacity:.5} 66%{opacity:1} }
@keyframes node3 { 0%,100%{opacity:.9} 40%{opacity:1} 80%{opacity:.5} }
@keyframes node4 { 0%,100%{opacity:.8} 50%{opacity:1} }
@keyframes node5 { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes orbit1 { 0%{transform:rotate(0) translateX(180px) rotate(0)} 100%{transform:rotate(360deg) translateX(180px) rotate(-360deg)} }
@keyframes orbit2 { 0%{transform:rotate(120deg) translateX(150px) rotate(-120deg)} 100%{transform:rotate(480deg) translateX(150px) rotate(-480deg)} }
@keyframes orbit3 { 0%{transform:rotate(240deg) translateX(160px) rotate(-240deg)} 100%{transform:rotate(600deg) translateX(160px) rotate(-600deg)} }
@keyframes line-pulse1 { 0%,100%{opacity:.3} 50%{opacity:.6} }
@keyframes line-pulse2 { 0%,100%{opacity:.3} 50%{opacity:.5} }
@keyframes line-pulse3 { 0%,100%{opacity:.2} 50%{opacity:.7} }
@keyframes label-fade1 { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes particle-float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5px,-8px)} }
@keyframes particle-float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,5px)} }
@keyframes particle-float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4px,7px)} }

.animate-pulse-core { animation: pulse-core 3s ease-in-out infinite; }
.animate-node1 { animation: node1 4s ease-in-out infinite; }
.animate-node2 { animation: node2 5s ease-in-out infinite; }
.animate-node3 { animation: node3 4.5s ease-in-out infinite 0.5s; }
.animate-node4 { animation: node4 3.5s ease-in-out infinite; }
.animate-node5 { animation: node5 4s ease-in-out infinite 1s; }
.animate-orbit1 { transform-origin: 200px 200px; animation: orbit1 15s linear infinite; }
.animate-orbit2 { transform-origin: 200px 200px; animation: orbit2 18s linear infinite; }
.animate-orbit3 { transform-origin: 200px 200px; animation: orbit3 20s linear infinite; }
.animate-line1 { animation: line-pulse1 3s ease-in-out infinite; }
.animate-line2 { animation: line-pulse2 4s ease-in-out infinite 0.5s; }
.animate-line3 { animation: line-pulse3 3.5s ease-in-out infinite 1s; }
.animate-label1 { animation: label-fade1 5s ease-in-out infinite; }
.animate-label2 { animation: label-fade1 5s ease-in-out infinite 1s; }
.animate-label3 { animation: label-fade1 5s ease-in-out infinite 2s; }
.animate-label4 { animation: label-fade1 5s ease-in-out infinite 3s; }
.animate-particle1 { animation: particle-float1 6s ease-in-out infinite; }
.animate-particle2 { animation: particle-float2 5s ease-in-out infinite 1s; }
.animate-particle3 { animation: particle-float3 7s ease-in-out infinite 0.5s; }
</style>
