"use client";

export default function InferenceAnimation() {
  return (
    <svg
      width="382"
      height="282"
      viewBox="0 0 382 282"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-labelledby="title desc"
    >
      <title id="title">AI / ML Inference & Training Animation</title>
      <desc id="desc">
        Animated neural graph sending signals to a glowing GPU chip on a dark
        background.
      </desc>

      {/* ---------- DEFINITIONS ---------- */}
      <defs>
        {/* Dark grid pattern */}
        <pattern id="grid" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M16 0H0V16" fill="none" stroke="#0f1621" strokeWidth="1" />
        </pattern>

        {/* Cyan gradient */}
        <linearGradient id="cyanglow" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#00E5FF">
            <animate
              attributeName="stop-color"
              values="#00E5FF;#00B8DB;#00E5FF"
              dur="4s"
              repeatCount="indefinite"
            />
          </stop>
          <stop offset="100%" stopColor="#00B8DB">
            <animate
              attributeName="stop-color"
              values="#00B8DB;#00E5FF;#00B8DB"
              dur="4s"
              repeatCount="indefinite"
            />
          </stop>
        </linearGradient>

        {/* Soft outer glow */}
        <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="6" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        {/* Sharper glow for nodes */}
        <filter id="nodeGlow" x="-150%" y="-150%" width="400%" height="400%">
          <feGaussianBlur stdDeviation="3" result="ng" />
          <feMerge>
            <feMergeNode in="ng" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        {/* Dashed link style */}
        <style>{`
          .link {
            stroke: #11cdef;
            stroke-width: 1.75;
            stroke-linecap: round;
            stroke-dasharray: 6 10;
            opacity: 0.9;
          }
          .muted { opacity: 0.65; }
          .chip-line { stroke: #93c5fd; stroke-width: 1; opacity: 0.7; }
        `}</style>

        {/* Reusable motion path for packet */}
        <path
          id="path1"
          d="M 64 156 C 110 118, 160 130, 206 140 S 280 158, 316 150"
          fill="none"
        />
        <path
          id="path2"
          d="M 64 116 C 116 96, 160 104, 204 112 S 280 126, 316 112"
          fill="none"
        />
      </defs>

      {/* ---------- BACKGROUND ---------- */}
      <rect width="382" height="282" fill="transparent" />
      <rect width="382" height="282" fill="url(#grid)" opacity="0.55" />

      {/* ---------- GPU CHIP (RIGHT) ---------- */}
      <g transform="translate(252,62)">
        {/* Outer casing */}
        <rect
          x="0"
          y="0"
          width="112"
          height="158"
          rx="18"
          fill="#0e1724"
          stroke="url(#cyanglow)"
          strokeWidth="2"
          filter="url(#softGlow)"
        />
        {/* Inner frame */}
        <rect
          x="12"
          y="14"
          width="88"
          height="130"
          rx="10"
          fill="#0b1320"
          stroke="#163447"
          strokeWidth="1.5"
        />
        {/* Matrix / cores */}
        {[...Array(5)].map((_, r) => (
          <line
            key={`row-${r}`}
            x1="20"
            x2="92"
            y1={28 + r * 24}
            y2={28 + r * 24}
            className="chip-line"
          />
        ))}
        {[...Array(6)].map((_, c) => (
          <line
            key={`col-${c}`}
            y1="26"
            y2="126"
            x1={22 + c * 12}
            x2={22 + c * 12}
            className="chip-line"
          />
        ))}

        {/* Pulsing GPU die */}
        <rect
          x="40"
          y="58"
          width="32"
          height="32"
          rx="6"
          fill="url(#cyanglow)"
          opacity="0.85"
        >
          <animate
            attributeName="opacity"
            values="0.5;0.95;0.5"
            dur="2.2s"
            repeatCount="indefinite"
          />
        </rect>

        {/* Glow ring */}
        <rect
          x="36"
          y="54"
          width="40"
          height="40"
          rx="8"
          stroke="url(#cyanglow)"
          strokeWidth="2"
          fill="none"
        >
          <animate
            attributeName="stroke-width"
            values="2;4;2"
            dur="2.2s"
            repeatCount="indefinite"
          />
        </rect>
      </g>

      {/* ---------- NEURAL GRAPH (LEFT/MID) ---------- */}
      <g transform="translate(28,34)">
        {/* Links */}
        <g className="muted">
          {/* lower cluster to chip */}
          <path className="link" d="M36 148 L96 124" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-32"
              dur="1.6s"
              repeatCount="indefinite"
            />
          </path>
          <path className="link" d="M96 124 L152 138" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-32"
              dur="1.6s"
              repeatCount="indefinite"
            />
          </path>
          <path className="link" d="M152 138 L212 132" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-32"
              dur="1.6s"
              repeatCount="indefinite"
            />
          </path>

          {/* upper cluster to mid */}
          <path className="link" d="M40 76 L92 88" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-28"
              dur="1.4s"
              repeatCount="indefinite"
            />
          </path>
          <path className="link" d="M92 88 L140 96" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-28"
              dur="1.4s"
              repeatCount="indefinite"
            />
          </path>
          <path className="link" d="M140 96 L206 106" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-28"
              dur="1.4s"
              repeatCount="indefinite"
            />
          </path>

          {/* vertical cross links */}
          <path className="link" d="M92 88 L96 124" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-24"
              dur="1.2s"
              repeatCount="indefinite"
            />
          </path>
          <path className="link" d="M140 96 L152 138" >
            <animate
              attributeName="stroke-dashoffset"
              values="0;-24"
              dur="1.2s"
              repeatCount="indefinite"
            />
          </path>
        </g>

        {/* Nodes */}
        {[
          { x: 36, y: 148, r: 6 },
          { x: 40, y: 76, r: 6 },
          { x: 96, y: 124, r: 7 },
          { x: 92, y: 88, r: 7 },
          { x: 140, y: 96, r: 7 },
          { x: 152, y: 138, r: 7 },
          { x: 206, y: 106, r: 6.5 },
          { x: 212, y: 132, r: 6.5 },
        ].map((n, i) => (
          <g key={i} filter="url(#nodeGlow)">
            <circle cx={n.x} cy={n.y} r={n.r} fill="#06121a" stroke="#163447" />
            <circle cx={n.x} cy={n.y} r={n.r - 2} fill="url(#cyanglow)" opacity="0.9">
              <animate
                attributeName="opacity"
                values="0.6;1;0.6"
                dur={`${1.2 + (i % 4) * 0.2}s`}
                repeatCount="indefinite"
              />
            </circle>
          </g>
        ))}

        {/* Data packets moving along paths */}
        <g>
          <circle r="3.2" fill="url(#cyanglow)">
            <animateMotion dur="2.6s" repeatCount="indefinite">
              <mpath href="#path1" />
            </animateMotion>
          </circle>
          <circle r="2.8" fill="url(#cyanglow)" opacity="0.85">
            <animateMotion dur="2.2s" begin="0.4s" repeatCount="indefinite">
              <mpath href="#path2" />
            </animateMotion>
          </circle>
        </g>
      </g>

      {/* ---------- LABELS ---------- */}
    </svg>
  );
}