/* global React */
/* Global USD Accounts visual — animated SVG globe with currency flows.
   Inspired by kast.xyz/global-accounts. */

function GlobalAccountsViz({ accent = "#E8C94B" }) {
  // Currency nodes positioned around the globe perimeter
  const nodes = [
    { sym: "€",   name: "EUR", x: 90,  y: 110, color: "#3A6EE0" },
    { sym: "£",   name: "GBP", x: 110, y: 200, color: "#9145FF" },
    { sym: "R$",  name: "BRL", x: 150, y: 280, color: "#1FA86A" },
    { sym: "¥",   name: "JPY", x: 510, y: 110, color: "#FF5A6B" },
    { sym: "₹",   name: "INR", x: 530, y: 200, color: "#FF8A1A" },
    { sym: "₱",   name: "PHP", x: 490, y: 280, color: "#19BCE5" },
    { sym: "MXN", name: "MXN", x: 70,  y: 200, color: "#19FB9B" },
  ];
  const center = { x: 300, y: 200 };

  return (
    <div className="ga-viz">
      <svg viewBox="0 0 600 400" className="ga-viz__svg" preserveAspectRatio="xMidYMid meet">
        <defs>
          <radialGradient id="ga-globe" cx="40%" cy="40%" r="65%">
            <stop offset="0%"  stopColor="#1F1F28"/>
            <stop offset="55%" stopColor="#0E0E14"/>
            <stop offset="100%" stopColor="#050508"/>
          </radialGradient>
          <radialGradient id="ga-aura" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor={accent} stopOpacity="0.35"/>
            <stop offset="60%" stopColor={accent} stopOpacity="0.05"/>
            <stop offset="100%" stopColor="transparent"/>
          </radialGradient>
          <linearGradient id="ga-line" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%" stopColor={accent} stopOpacity="0"/>
            <stop offset="50%" stopColor={accent} stopOpacity="1"/>
            <stop offset="100%" stopColor={accent} stopOpacity="0"/>
          </linearGradient>
          <pattern id="ga-grid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
            <circle cx="12" cy="12" r="0.8" fill="rgba(232,201,75,0.3)"/>
          </pattern>
          <filter id="ga-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3"/>
            <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* Aura behind globe */}
        <ellipse cx={center.x} cy={center.y} rx="180" ry="180" fill="url(#ga-aura)"/>

        {/* Globe sphere */}
        <circle cx={center.x} cy={center.y} r="140" fill="url(#ga-globe)" stroke="rgba(232,201,75,0.18)" strokeWidth="1"/>

        {/* Latitude lines (ellipses) */}
        <g fill="none" stroke="rgba(232,201,75,0.18)" strokeWidth="0.6">
          {[20, 50, 80, 110, 140].map((r, i) => (
            <ellipse key={i} cx={center.x} cy={center.y} rx="140" ry={r*0.6}/>
          ))}
        </g>
        {/* Longitude lines */}
        <g fill="none" stroke="rgba(232,201,75,0.18)" strokeWidth="0.6">
          {[10, 40, 70, 100, 130].map((rx, i) => (
            <ellipse key={i} cx={center.x} cy={center.y} rx={rx*0.7} ry="140"/>
          ))}
        </g>

        {/* Dotted "continents" overlay */}
        <circle cx={center.x} cy={center.y} r="140" fill="url(#ga-grid)" opacity="0.55"
                style={{ clipPath: "circle(140px at 300px 200px)" }}/>

        {/* Flow lines from each currency → globe center, animated */}
        {nodes.map((n, i) => {
          const dx = center.x - n.x;
          const dy = center.y - n.y;
          const mx = n.x + dx * 0.5;
          const my = n.y + dy * 0.5 - 30; // curve up
          return (
            <g key={n.sym}>
              <path d={`M ${n.x} ${n.y} Q ${mx} ${my} ${center.x} ${center.y}`}
                    fill="none"
                    stroke={n.color}
                    strokeOpacity="0.35"
                    strokeWidth="1"
                    strokeDasharray="3 4"/>
              <circle r="3" fill={n.color} filter="url(#ga-glow)">
                <animateMotion dur={`${3 + i*0.4}s`} repeatCount="indefinite"
                               path={`M ${n.x} ${n.y} Q ${mx} ${my} ${center.x} ${center.y}`}/>
                <animate attributeName="opacity" values="0;1;1;0" dur={`${3 + i*0.4}s`} repeatCount="indefinite"/>
              </circle>
            </g>
          );
        })}

        {/* Currency badges */}
        {nodes.map((n) => (
          <g key={n.name} transform={`translate(${n.x} ${n.y})`}>
            <circle r="22" fill="rgba(7,7,11,0.92)" stroke={n.color} strokeOpacity="0.5" strokeWidth="1"/>
            <text y="2" textAnchor="middle" dominantBaseline="middle"
                  fontFamily="Funnel Display, Geist" fontWeight="700" fontSize="14"
                  fill={n.color}>{n.sym}</text>
            <text y="32" textAnchor="middle" fontFamily="Geist Mono" fontSize="8"
                  fill="rgba(242,239,230,0.55)" letterSpacing="0.16em">{n.name}</text>
          </g>
        ))}

        {/* Center USD hub */}
        <g transform={`translate(${center.x} ${center.y})`}>
          <circle r="48" fill="#07070B" stroke={accent} strokeWidth="1.5"/>
          <circle r="40" fill="rgba(232,201,75,0.06)"/>
          <text y="-2" textAnchor="middle" dominantBaseline="middle"
                fontFamily="Funnel Display" fontWeight="700" fontSize="28" fill={accent}>$</text>
          <text y="20" textAnchor="middle" fontFamily="Geist Mono" fontSize="9"
                fill={accent} letterSpacing="0.18em">USD</text>
          {/* Concentric pulses */}
          <circle r="48" fill="none" stroke={accent} strokeOpacity="0.5">
            <animate attributeName="r" values="48;90" dur="3s" repeatCount="indefinite"/>
            <animate attributeName="stroke-opacity" values="0.5;0" dur="3s" repeatCount="indefinite"/>
          </circle>
          <circle r="48" fill="none" stroke={accent} strokeOpacity="0.5">
            <animate attributeName="r" values="48;90" dur="3s" begin="1.5s" repeatCount="indefinite"/>
            <animate attributeName="stroke-opacity" values="0.5;0" dur="3s" begin="1.5s" repeatCount="indefinite"/>
          </circle>
        </g>

        {/* Top-left rails indicator */}
        <g transform="translate(30 30)">
          <rect width="120" height="30" rx="6" fill="rgba(7,7,11,0.85)" stroke={accent} strokeOpacity="0.3"/>
          <text x="10" y="13" fontFamily="Geist Mono" fontSize="8" fill="rgba(242,239,230,0.55)"
                letterSpacing="0.14em">// RAILS</text>
          <text x="10" y="24" fontFamily="Funnel Display" fontWeight="700" fontSize="11"
                fill={accent} letterSpacing="0.06em">ACH · FEDWIRE · SWIFT</text>
        </g>

        {/* Bottom-right metric */}
        <g transform="translate(440 340)">
          <text fontFamily="Geist Mono" fontSize="9" fill="rgba(242,239,230,0.55)"
                letterSpacing="0.14em">// COVERAGE</text>
          <text y="20" fontFamily="Funnel Display" fontWeight="700" fontSize="22"
                fill="#fff" letterSpacing="-0.02em">200+ países</text>
          <text y="36" fontFamily="Geist Mono" fontSize="9" fill="rgba(242,239,230,0.4)">15+ moedas locais</text>
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { GlobalAccountsViz });