/* eslint-disable */
// Animated SVG scope / radar — sweeping arm, concentric rings, scattered pings.
function Scope() {
  return (
    <div className="scope-wrap" aria-hidden="true">
      <div className="scope-wrap__frame"></div>
      <div className="scope-wrap__corner scope-wrap__corner--tl"></div>
      <div className="scope-wrap__corner scope-wrap__corner--tr"></div>
      <div className="scope-wrap__corner scope-wrap__corner--bl"></div>
      <div className="scope-wrap__corner scope-wrap__corner--br"></div>
      <svg viewBox="0 0 200 200" style={{ width: "100%", height: "100%" }}>
        <defs>
          <radialGradient id="sweepGrad">
            <stop offset="0%" stopColor="var(--scope)" stopOpacity="0.7"></stop>
            <stop offset="100%" stopColor="var(--scope)" stopOpacity="0"></stop>
          </radialGradient>
          <linearGradient id="armGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--scope)" stopOpacity="0"></stop>
            <stop offset="100%" stopColor="var(--scope)" stopOpacity="0.9"></stop>
          </linearGradient>
        </defs>

        {/* Concentric rings */}
        <g fill="none" stroke="var(--scope)" strokeOpacity="0.18" strokeWidth="0.6">
          <circle cx="100" cy="100" r="92"></circle>
          <circle cx="100" cy="100" r="70"></circle>
          <circle cx="100" cy="100" r="48"></circle>
          <circle cx="100" cy="100" r="26"></circle>
          <circle cx="100" cy="100" r="4"></circle>
        </g>

        {/* Cross axes */}
        <g stroke="var(--scope)" strokeOpacity="0.22" strokeWidth="0.5">
          <line x1="8" y1="100" x2="192" y2="100"></line>
          <line x1="100" y1="8" x2="100" y2="192"></line>
          <line x1="35" y1="35" x2="165" y2="165" strokeDasharray="2 4"></line>
          <line x1="165" y1="35" x2="35" y2="165" strokeDasharray="2 4"></line>
        </g>

        {/* Tick marks at edge */}
        <g stroke="var(--scope)" strokeOpacity="0.6" strokeWidth="0.7">
          {Array.from({ length: 36 }).map((_, i) => {
            const a = (i * 10) * Math.PI / 180;
            const x1 = 100 + Math.cos(a) * 92;
            const y1 = 100 + Math.sin(a) * 92;
            const len = i % 3 === 0 ? 6 : 3;
            const x2 = 100 + Math.cos(a) * (92 - len);
            const y2 = 100 + Math.sin(a) * (92 - len);
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}></line>;
          })}
        </g>

        {/* Pings */}
        <g fill="var(--scope)">
          <circle cx="148" cy="62" r="1.6" opacity="0.9"></circle>
          <circle cx="58" cy="138" r="2.0" opacity="0.7"></circle>
          <circle cx="124" cy="128" r="1.3" opacity="0.9"></circle>
          <circle cx="76" cy="78" r="1.8" opacity="0.6">
            <animate attributeName="opacity" values="0.6;1;0.6" dur="2.4s" repeatCount="indefinite"></animate>
          </circle>
        </g>

        {/* Redacted ping (OPS-004) — flickers red */}
        <circle cx="156" cy="116" r="2.2" fill="var(--redact)">
          <animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" repeatCount="indefinite"></animate>
        </circle>

        {/* Sweeping arm */}
        <g style={{ transformOrigin: "100px 100px" }}>
          <g>
            <path d="M 100 100 L 192 100 A 92 92 0 0 0 168 35 Z" fill="url(#sweepGrad)" opacity="0.65"></path>
            <line x1="100" y1="100" x2="192" y2="100" stroke="var(--scope)" strokeWidth="1.4"></line>
            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="6s" repeatCount="indefinite"></animateTransform>
          </g>
        </g>

        {/* Crosshair center */}
        <g stroke="var(--scope)" strokeWidth="0.8" fill="none">
          <circle cx="100" cy="100" r="6"></circle>
          <line x1="100" y1="92" x2="100" y2="108"></line>
          <line x1="92" y1="100" x2="108" y2="100"></line>
        </g>
      </svg>
      <div className="scope-wrap__readout">
        <span>RNG 092.4KM</span>
        <span className="live">● TRK / 04 SIG</span>
        <span>BRG 014°</span>
      </div>
    </div>
  );
}

window.Scope = Scope;