/* Animated GTA "Connected Highway" map — Dexpress
   Stylized, NOT a literal map. Suggests Etobicoke HQ → cross-dock → US/Canada lanes.
   Pure SVG with animated dashes + pulsing nodes. */

function GTAMap({ height = 520 }) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf; const start = performance.now();
    const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Conceptual coords on a 1200x520 canvas
  const HQ = { x: 360, y: 320, label: 'ETOBICOKE HQ', sub: '30 BETHRIDGE RD' };
  const XD = { x: 540, y: 280, label: 'CROSS-DOCK', sub: '43 RACINE DR' };
  const nodes = [
    { x: 220, y: 220, label: 'WINDSOR' },
    { x: 460, y: 180, label: 'TORONTO' },
    { x: 720, y: 240, label: 'KINGSTON' },
    { x: 880, y: 320, label: 'MONTREAL' },
    { x: 980, y: 220, label: 'OTTAWA' },
    { x: 320, y: 420, label: 'BUFFALO · US' },
    { x: 600, y: 440, label: 'DETROIT · US' },
    { x: 820, y: 440, label: 'CHICAGO · US' },
    { x: 140, y: 380, label: 'LONDON, ON' },
  ];
  const lanes = [
    { from: HQ, to: nodes[0] },
    { from: HQ, to: nodes[1] },
    { from: XD, to: nodes[2] },
    { from: XD, to: nodes[3] },
    { from: XD, to: nodes[4] },
    { from: HQ, to: nodes[5] },
    { from: HQ, to: nodes[6] },
    { from: XD, to: nodes[7] },
    { from: HQ, to: nodes[8] },
    { from: HQ, to: XD },
  ];

  // Truck pulses moving along lanes
  const trucks = lanes.map((l, i) => {
    const phase = (t * 0.18 + i * 0.13) % 1;
    return { ...l, phase };
  });

  return (
    <div style={{position:'relative', width:'100%', height, background:'linear-gradient(180deg, #0c0e12 0%, #14171c 100%)', borderRadius:4, overflow:'hidden', border:'1px solid var(--line)'}}>
      {/* faint grid */}
      <svg width="100%" height="100%" viewBox="0 0 1200 520" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0}}>
        <defs>
          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
          </pattern>
          <radialGradient id="hub" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#D9272E" stopOpacity="0.55"/>
            <stop offset="60%" stopColor="#D9272E" stopOpacity="0.05"/>
            <stop offset="100%" stopColor="#D9272E" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="hubBlue" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#1E55A8" stopOpacity="0.5"/>
            <stop offset="60%" stopColor="#1E55A8" stopOpacity="0.05"/>
            <stop offset="100%" stopColor="#1E55A8" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="1200" height="520" fill="url(#grid)"/>

        {/* hub auras */}
        <circle cx={HQ.x} cy={HQ.y} r="160" fill="url(#hub)"/>
        <circle cx={XD.x} cy={XD.y} r="120" fill="url(#hubBlue)"/>

        {/* lanes (static) */}
        {lanes.map((l, i) => (
          <line key={'lane-'+i} x1={l.from.x} y1={l.from.y} x2={l.to.x} y2={l.to.y}
            stroke="rgba(255,255,255,0.18)" strokeWidth="1" strokeDasharray="2 4" />
        ))}

        {/* animated truck dots along each lane */}
        {trucks.map((l, i) => {
          const x = l.from.x + (l.to.x - l.from.x) * l.phase;
          const y = l.from.y + (l.to.y - l.from.y) * l.phase;
          const useBlue = i % 3 === 1;
          return (
            <g key={'truck-'+i}>
              <circle cx={x} cy={y} r="3.5" fill={useBlue ? '#1E55A8' : '#D9272E'}/>
              <circle cx={x} cy={y} r="8" fill={useBlue ? 'rgba(30,85,168,0.25)' : 'rgba(217,39,46,0.25)'}/>
            </g>
          );
        })}

        {/* destination nodes */}
        {nodes.map((n, i) => (
          <g key={'n-'+i}>
            <circle cx={n.x} cy={n.y} r="4" fill="#F5F2EC"/>
            <circle cx={n.x} cy={n.y} r="9" fill="none" stroke="rgba(245,242,236,0.25)" strokeWidth="1"/>
            <text x={n.x + 12} y={n.y + 4} fill="#C9C5BC" fontSize="11" fontFamily="JetBrains Mono, monospace" letterSpacing="1.2">{n.label}</text>
          </g>
        ))}

        {/* HQ marker (red, large) */}
        <g>
          <circle cx={HQ.x} cy={HQ.y} r="11" fill="#D9272E"/>
          <circle cx={HQ.x} cy={HQ.y} r={14 + 4 * Math.sin(t*2)} fill="none" stroke="#D9272E" strokeOpacity={0.6 - 0.3*Math.sin(t*2)} strokeWidth="2"/>
          <text x={HQ.x + 18} y={HQ.y - 8} fill="#F5F2EC" fontSize="13" fontFamily="Archivo, sans-serif" fontWeight="700" letterSpacing="0.5">{HQ.label}</text>
          <text x={HQ.x + 18} y={HQ.y + 8} fill="#8A867D" fontSize="10" fontFamily="JetBrains Mono, monospace" letterSpacing="1.2">{HQ.sub}</text>
        </g>

        {/* Cross-dock marker (blue) */}
        <g>
          <circle cx={XD.x} cy={XD.y} r="9" fill="#1E55A8"/>
          <circle cx={XD.x} cy={XD.y} r={12 + 3 * Math.sin(t*2 + 1)} fill="none" stroke="#1E55A8" strokeOpacity={0.5 - 0.25*Math.sin(t*2+1)} strokeWidth="2"/>
          <text x={XD.x + 16} y={XD.y - 6} fill="#F5F2EC" fontSize="12" fontFamily="Archivo, sans-serif" fontWeight="700" letterSpacing="0.5">{XD.label}</text>
          <text x={XD.x + 16} y={XD.y + 8} fill="#8A867D" fontSize="10" fontFamily="JetBrains Mono, monospace" letterSpacing="1.2">{XD.sub}</text>
        </g>

        {/* corner readouts */}
        <text x="24" y="32" fill="#8A867D" fontSize="10" fontFamily="JetBrains Mono, monospace" letterSpacing="2">DEXPRESS · LIVE NETWORK</text>
        <text x="24" y="500" fill="#8A867D" fontSize="10" fontFamily="JetBrains Mono, monospace" letterSpacing="2">FIG. 01 · GTA → CA/US LANES</text>
        <text x="1176" y="32" fill="#8A867D" fontSize="10" fontFamily="JetBrains Mono, monospace" textAnchor="end" letterSpacing="2">{`T+${t.toFixed(1)}s`}</text>
      </svg>
    </div>
  );
}

window.GTAMap = GTAMap;