function ProprietarySystem() {
  const [t, setT] = React.useState(0); // ms since mount
  const [intercepted, setIntercepted] = React.useState(new Set());

  React.useEffect(() => {
    let raf, start = performance.now();
    const tick = (now) => {
      setT(now - start);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Multi-layer rotation speeds (deg/ms)
  const sweepDeg     = (t * 0.085) % 360;   // FAST — main sweep beam
  const compassDeg   = 0;                   // STATIC — N/S/E/W don't rotate
  const bearingDeg   = 0;                   // STATIC — degree marks fixed
  const rangeMidDeg  = (t * -0.028) % 360;  // mid range-ring (CCW)
  const rangeInDeg   = (t * 0.045) % 360;   // inner range-ring (CW)
  const orbitDeg     = (t * 0.009) % 360;   // competitors slow orbit (CCW visually)
  const reticleDeg   = 0;                   // STATIC — keep crosshair square

  // 8 competitors at fixed radius+bearing relative to center; orbit shifts them
  // r = nm-ish, a = base bearing in deg
  const cx = 260, cy = 260;
  const competitors = [
    { id: 'OPR-01', r: 178, a: 318, hdg: 215, bid: '$48', kw: '840' },
    { id: 'OPR-02', r:  96, a:  72, hdg:  95, bid: '$32', kw: '520' },
    { id: 'OPR-03', r: 198, a: 142, hdg: 310, bid: '$61', kw: '610' },
    { id: 'OPR-04', r: 145, a: 232, hdg:  45, bid: '$29', kw: '390' },
    { id: 'OPR-05', r: 165, a:  18, hdg: 250, bid: '$57', kw: '720' },
    { id: 'OPR-06', r: 118, a: 280, hdg: 170, bid: '$41', kw: '460' },
    { id: 'OPR-07', r: 210, a:  50, hdg: 280, bid: '$24', kw: '340' },
    { id: 'OPR-08', r:  88, a: 195, hdg:  25, bid: '$36', kw: '285' },
  ];

  // Position each competitor with its orbital offset
  const positioned = competitors.map(c => {
    const positionAngleDeg = c.a + orbitDeg;
    const a = (positionAngleDeg * Math.PI) / 180;
    // Tangent direction of orbit (CCW): position angle + 90°.
    // Plane art "nose up" = -y, so visual rotation = tangent + 90.
    const headingRot = positionAngleDeg + 90;
    return {
      ...c,
      x: cx + Math.cos(a) * c.r,
      y: cy + Math.sin(a) * c.r,
      angleDeg: (positionAngleDeg + 360) % 360,
      headingRot,
    };
  });

  // Sweep collision detection
  React.useEffect(() => {
    const newlyHit = positioned.filter(c => {
      let diff = Math.abs(c.angleDeg - sweepDeg);
      if (diff > 180) diff = 360 - diff;
      return diff < 6;
    }).map(c => c.id);
    if (newlyHit.length) {
      setIntercepted(prev => {
        const next = new Set(prev);
        newlyHit.forEach(id => next.add(id));
        if (next.size > 4) {
          const arr = [...next];
          return new Set(arr.slice(arr.length - 4));
        }
        return next;
      });
    }
  }, [Math.floor(sweepDeg / 2)]);

  return (
    <section className="alg-section alg-blueprint" id="system">
      <div className="alg-blueprint-grid-bg"></div>

      {/* Floating HUD chrome — top edge */}
      <div className="alg-bp-hud-strip">
        <div className="alg-hud-cell"><span>CAMPAIGN</span><b>ALG-04</b></div>
        <div className="alg-hud-cell"><span>MODE</span><b>TARGETING</b></div>
        <div className="alg-hud-cell"><span>REACH</span><b>OMNICHANNEL</b></div>
        <div className="alg-hud-cell"><span>ROAS</span><b>4.2×</b></div>
        <div className="alg-hud-cell alg-hud-live"><span className="alg-hud-pulse"></span><b>LIVE</b></div>
      </div>

      <div className="alg-container alg-bp-grid">
        <div className="alg-bp-copy">
          <div className="alg-about-eyebrow alg-eyebrow-light">
            <span className="alg-rule alg-rule-light"></span>
            <span>03 · Proprietary System</span>
          </div>
          <div className="alg-bp-callsign">CALLSIGN · ALG-1</div>
          <h2 className="alg-bp-h2">
            We intercept <br/>
            <span className="alg-bp-amber">your competitor's traffic</span><br/>
            before they land.
          </h2>
          <p className="alg-bp-lead">
            ALG maps the <b>50 closest competitors</b> fighting for the same customers you are, then flies counter-bids on the exact searches already pulling their leads. <span className="alg-bp-amber-text">Every click you pay for is a buyer who was about to call someone else.</span>
          </p>

        </div>

        {/* Radar diagram — animated ATC sweep */}
        <div className="alg-bp-diagram">
          <div className="alg-bp-corner tl"><span className="alg-bp-corner-dot"></span>ALG · ATS · REV 06.2</div>
          <div className="alg-bp-corner tr">CH 121.5 · GUARD</div>
          <div className="alg-bp-corner bl">SCALE · 85 NM</div>
          <div className="alg-bp-corner bl-data">Representative data · Illustrative only</div>
          <div className="alg-bp-corner br">KXXX · APP CTL</div>

          {/* Frame ticks at the four corners */}
          <div className="alg-bp-ftick tl"></div>
          <div className="alg-bp-ftick tr"></div>
          <div className="alg-bp-ftick bl"></div>
          <div className="alg-bp-ftick br"></div>

          <svg viewBox="0 0 520 520" className="alg-bp-svg">
            <defs>
              <radialGradient id="sweepGrad" cx="0" cy="0.5" r="1" fx="0" fy="0.5">
                <stop offset="0" stopColor="rgba(232,145,46,0.6)"/>
                <stop offset="0.45" stopColor="rgba(232,145,46,0.2)"/>
                <stop offset="1" stopColor="rgba(232,145,46,0)"/>
              </radialGradient>
              <radialGradient id="ctrGlow" cx="0.5" cy="0.5" r="0.5">
                <stop offset="0" stopColor="rgba(232,145,46,0.45)"/>
                <stop offset="1" stopColor="rgba(232,145,46,0)"/>
              </radialGradient>
              <symbol id="planeIcon" viewBox="-10 -10 20 20">
                <path d="M0 -8 L1.2 -2 L8 2 L8 4 L1.2 2.5 L1 6.5 L3 8 L3 8.8 L0 8 L-3 8.8 L-3 8 L-1 6.5 L-1.2 2.5 L-8 4 L-8 2 L-1.2 -2 Z"
                  fill="currentColor"/>
              </symbol>
            </defs>

            {/* OUTER COMPASS RING — slow CCW, bold cardinals */}
            <g transform={`translate(260,260) rotate(${compassDeg})`}>
              <circle r="244" fill="none" stroke="rgba(110,175,225,0.35)" strokeWidth="1"/>
              <circle r="238" fill="none" stroke="rgba(110,175,225,0.55)" strokeWidth="2"/>
              {Array.from({length: 72}).map((_, i) => {
                const a = (i * 5) * Math.PI / 180;
                const isMajor = i % 6 === 0;
                const r1 = 238, r2 = isMajor ? 250 : 244;
                return (
                  <line key={i}
                    x1={Math.cos(a) * r1} y1={Math.sin(a) * r1}
                    x2={Math.cos(a) * r2} y2={Math.sin(a) * r2}
                    stroke={isMajor ? "rgba(170,210,240,0.95)" : "rgba(110,175,225,0.55)"}
                    strokeWidth={isMajor ? 2 : 1}/>
                );
              })}
              {/* Cardinal letters around outside ring */}
              {['N','NE','E','SE','S','SW','W','NW'].map((label, i) => {
                const a = (i * 45 - 90) * Math.PI / 180;
                const r = 264;
                const x = Math.cos(a) * r, y = Math.sin(a) * r;
                return (
                  <g key={label} transform={`translate(${x},${y}) rotate(${-compassDeg})`}>
                    <text fontFamily="Source Code Pro" fontSize="11" fontWeight="700"
                      fill={i % 2 === 0 ? "rgba(232,145,46,0.95)" : "rgba(170,210,240,0.85)"}
                      textAnchor="middle" dominantBaseline="middle">{label}</text>
                  </g>
                );
              })}
            </g>

            {/* BEARING-TICK RING — slow CW, with degree numbers */}
            <g transform={`translate(260,260) rotate(${bearingDeg})`}>
              <circle r="222" fill="none" stroke="rgba(110,175,225,0.4)" strokeWidth="1" strokeDasharray="2 4"/>
              {Array.from({length: 36}).map((_, i) => {
                const a = (i * 10) * Math.PI / 180;
                const r1 = 210, r2 = i % 3 === 0 ? 224 : 218;
                return (
                  <line key={i}
                    x1={Math.cos(a) * r1} y1={Math.sin(a) * r1}
                    x2={Math.cos(a) * r2} y2={Math.sin(a) * r2}
                    stroke="rgba(110,175,225,0.85)"
                    strokeWidth={i % 9 === 0 ? 2 : i % 3 === 0 ? 1.4 : 1}/>
                );
              })}
              {/* Degree numbers every 30° */}
              {Array.from({length: 12}).map((_, i) => {
                const deg = i * 30;
                const a = (deg - 90) * Math.PI / 180;
                const r = 200;
                const x = Math.cos(a) * r, y = Math.sin(a) * r;
                return (
                  <g key={i} transform={`translate(${x},${y}) rotate(${-bearingDeg})`}>
                    <text fontFamily="Source Code Pro" fontSize="9" fontWeight="700"
                      fill="rgba(170,210,240,0.7)"
                      textAnchor="middle" dominantBaseline="middle">
                      {String(deg).padStart(3,'0')}
                    </text>
                  </g>
                );
              })}
            </g>

            {/* MID RANGE-RING — counter-rotates with dashed segments */}
            <g transform={`translate(260,260) rotate(${rangeMidDeg})`}>
              <circle r="150" fill="none" stroke="rgba(110,175,225,0.55)"
                strokeWidth="1.2" strokeDasharray="6 8"/>
              {/* Tiny ticks on this ring */}
              {Array.from({length: 24}).map((_, i) => {
                const a = (i * 15) * Math.PI / 180;
                return (
                  <circle key={i}
                    cx={Math.cos(a) * 150} cy={Math.sin(a) * 150}
                    r={i % 4 === 0 ? 2.2 : 1.2}
                    fill="rgba(110,175,225,0.7)"/>
                );
              })}
              <text fontFamily="Source Code Pro" fontSize="9" fontWeight="700"
                fill="rgba(110,175,225,0.8)" x="0" y="-156" textAnchor="middle">
                40NM
              </text>
            </g>

            {/* INNER RANGE-RING — fast CW, with carat markers */}
            <g transform={`translate(260,260) rotate(${rangeInDeg})`}>
              <circle r="80" fill="none" stroke="rgba(110,175,225,0.55)"
                strokeWidth="1" strokeDasharray="3 5"/>
              {[0, 90, 180, 270].map(deg => {
                const a = deg * Math.PI / 180;
                const x = Math.cos(a) * 80, y = Math.sin(a) * 80;
                return (
                  <g key={deg} transform={`translate(${x},${y}) rotate(${deg})`}>
                    <path d="M -4 0 L 0 -4 L 4 0 Z" fill="rgba(232,145,46,0.85)"/>
                  </g>
                );
              })}
              <text fontFamily="Source Code Pro" fontSize="9" fontWeight="700"
                fill="rgba(110,175,225,0.8)" x="0" y="-86" textAnchor="middle">
                15NM
              </text>
            </g>

            {/* STATIC crosshairs (subtle) */}
            <g stroke="rgba(110,175,225,0.22)" strokeWidth="1" fill="none">
              <line x1="0" y1="260" x2="520" y2="260"/>
              <line x1="260" y1="0" x2="260" y2="520"/>
            </g>

            {/* SWEEP BEAM — fast */}
            <g transform={`translate(260,260) rotate(${sweepDeg})`}>
              <path d="M0 0 L230 -28 A230 230 0 0 1 230 28 Z" fill="url(#sweepGrad)"/>
              <line x1="0" y1="0" x2="232" y2="0" stroke="rgba(232,145,46,1)" strokeWidth="2.5"/>
              {/* Tip arrowhead */}
              <path d="M232 0 L222 -5 L222 5 Z" fill="rgba(232,145,46,1)"/>
            </g>

            {/* COMPETITOR PLANES — orbit slowly */}
            {positioned.map(c => {
              const hit = intercepted.has(c.id);
              return (
                <g key={c.id} transform={`translate(${c.x.toFixed(2)},${c.y.toFixed(2)})`}>
                  {hit && (
                    <>
                      <circle r="22" fill="none" stroke="rgba(232,145,46,0.95)" strokeWidth="2.2">
                        <animate attributeName="r" from="10" to="34" dur="1.4s" begin="0s" repeatCount="1" fill="freeze"/>
                        <animate attributeName="opacity" from="1" to="0" dur="1.4s" begin="0s" repeatCount="1" fill="freeze"/>
                      </circle>
                      <circle r="14" fill="none" stroke="rgba(232,145,46,0.7)" strokeWidth="1.6">
                        <animate attributeName="r" from="6" to="24" dur="1.1s" begin="0.1s" repeatCount="1" fill="freeze"/>
                        <animate attributeName="opacity" from="0.9" to="0" dur="1.1s" begin="0.1s" repeatCount="1" fill="freeze"/>
                      </circle>
                      <line x1="0" y1="0" x2={(cx - c.x).toFixed(2)} y2={(cy - c.y).toFixed(2)}
                        stroke="rgba(232,145,46,0.95)" strokeWidth="1.6" strokeDasharray="5 4">
                        <animate attributeName="opacity" from="1" to="0" dur="2s" fill="freeze"/>
                      </line>
                    </>
                  )}
                  {/* Bracket reticle around plane */}
                  <g stroke={hit ? "rgba(232,145,46,1)" : "rgba(170,210,240,0.5)"}
                     strokeWidth={hit ? 1.6 : 1} fill="none"
                     style={{ transition: 'stroke 0.4s' }}>
                    <path d="M -14 -10 L -14 -14 L -10 -14"/>
                    <path d="M  14 -10 L  14 -14 L  10 -14"/>
                    <path d="M -14  10 L -14  14 L -10  14"/>
                    <path d="M  14  10 L  14  14 L  10  14"/>
                  </g>
                  <g transform={`rotate(${c.headingRot})`}>
                    <use href="#planeIcon" width="20" height="20" x="-10" y="-10"
                      style={{ color: hit ? 'rgba(232,145,46,1)' : 'rgba(255,255,255,0.92)',
                               filter: hit ? 'drop-shadow(0 0 8px rgba(232,145,46,0.95))' : 'none',
                               transition: 'color 0.4s, filter 0.4s' }}/>
                  </g>
                  <text x="18" y="-10" fontFamily="Source Code Pro" fontSize="9" fontWeight="800"
                    fill={hit ? 'rgba(232,145,46,1)' : 'rgba(255,255,255,0.78)'}
                    style={{ transition: 'fill 0.4s' }}>
                    {c.id}
                  </text>
                  <text x="18" y="2" fontFamily="Source Code Pro" fontSize="8" fontWeight="600"
                    fill="rgba(170,210,240,0.6)">
                    CPC {c.bid}
                  </text>
                </g>
              );
            })}

            {/* CENTER — the client base */}
            <circle cx="260" cy="260" r="44" fill="url(#ctrGlow)"/>
            <g transform={`translate(260,260) rotate(${reticleDeg})`}>
              {/* Counter-rotating reticle */}
              <g stroke="rgba(232,145,46,0.7)" strokeWidth="1.5" fill="none">
                <path d="M -26 0 L -20 0"/>
                <path d="M  20 0 L  26 0"/>
                <path d="M 0 -26 L 0 -20"/>
                <path d="M 0  20 L 0  26"/>
              </g>
              <circle r="22" fill="none" stroke="rgba(232,145,46,0.45)"
                strokeWidth="1.2" strokeDasharray="3 4"/>
            </g>
            <circle cx="260" cy="260" r="14" fill="rgba(14,47,68,1)" stroke="#fff" strokeWidth="2.5"/>
            <circle cx="260" cy="260" r="6" fill="#E8912E"/>
            <text x="284" y="252" fontFamily="Montserrat" fontSize="13" fill="#fff" fontWeight="800" letterSpacing="1">YOU</text>
            <text x="284" y="266" fontFamily="Source Code Pro" fontSize="9" fontWeight="700" fill="rgba(255,255,255,0.75)">KXXX · BASE</text>
          </svg>
        </div>
      </div>
    </section>
  );
}
window.ProprietarySystem = ProprietarySystem;