// Dynamic fintech world — replaces the text marquee.
// Stylized dot-matrix world map + pulsing financial hubs + animated data arcs.

function FintechWorld() {
  const { t } = useLandingI18n();
  // Hub coordinates in a 1600x520 viewBox (stylized, not geographic)
  const hubs = [
    { id: 'nyc', x: 360,  y: 230, label: 'NYC',  cat: 'Equities', metric: '$14.2B / min' },
    { id: 'spo', x: 460,  y: 380, label: 'São Paulo', cat: 'Real Estate', metric: 'R$ 812M / min' },
    { id: 'ldn', x: 780,  y: 210, label: 'London', cat: 'FX',  metric: '£6.1B / min' },
    { id: 'zur', x: 830,  y: 245, label: 'Zurich', cat: 'Banking', metric: 'CHF 2.3B' },
    { id: 'fra', x: 850,  y: 225, label: 'Frankfurt', cat: 'Bonds', metric: '€4.7B / min' },
    { id: 'dub', x: 970,  y: 300, label: 'Dubai', cat: 'Crypto', metric: '$1.1B / min' },
    { id: 'sgp', x: 1200, y: 340, label: 'Singapore', cat: 'Rentals', metric: 'S$ 420M' },
    { id: 'tok', x: 1330, y: 255, label: 'Tokyo',  cat: 'AI Signals', metric: '7 models live' },
    { id: 'syd', x: 1380, y: 430, label: 'Sydney', cat: 'Commodities', metric: 'A$ 680M' },
  ];

  // Arcs: (from, to, duration, delay)
  const arcs = [
    ['nyc','ldn', 4.2, 0],
    ['ldn','fra', 3.1, 0.6],
    ['fra','dub', 4.0, 1.1],
    ['dub','sgp', 3.8, 1.6],
    ['sgp','tok', 3.2, 2.2],
    ['tok','nyc', 5.0, 0.2],
    ['nyc','spo', 3.4, 1.4],
    ['ldn','zur', 2.4, 0.9],
    ['sgp','syd', 2.8, 2.6],
    ['fra','nyc', 4.6, 2.9],
  ];

  const byId = Object.fromEntries(hubs.map(h => [h.id, h]));

  const [now, setNow] = React.useState(() => new Date());
  const [ex, setEx] = React.useState(23);
  React.useEffect(() => {
    const i = setInterval(() => setNow(new Date()), 1000);
    const j = setInterval(() => setEx(() => 22 + Math.floor(Math.random()*4)), 2800);
    return () => { clearInterval(i); clearInterval(j); };
  }, []);

  // Rotating highlighted hub for the floating data card
  const [focus, setFocus] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setFocus(f => (f + 1) % hubs.length), 2400);
    return () => clearInterval(t);
  }, [hubs.length]);

  const timeStr = now.toUTCString().split(' ')[4] + ' UTC';

  // Build curved path between two hubs (quadratic with midpoint lifted)
  const curve = (a, b) => {
    const mx = (a.x + b.x) / 2;
    const my = (a.y + b.y) / 2;
    const dx = b.x - a.x, dy = b.y - a.y;
    const dist = Math.sqrt(dx*dx + dy*dy);
    const lift = Math.min(dist * 0.22, 120);
    // Perpendicular lift upward (negative y)
    const nx = -dy / dist, ny = dx / dist;
    const cx = mx + nx * -lift;
    const cy = my + ny * -lift;
    return `M ${a.x} ${a.y} Q ${cx} ${cy} ${b.x} ${b.y}`;
  };

  return (
    <section className="fworld" aria-label={t('Fortec global network')}>
      <div className="fworld__inner">

        <div className="fworld__chrome">
          <div className="fworld__badge">
            <span className="fworld__dot"/>LIVE
          </div>
          <div className="fworld__label">Fortec global network · synced to <b>{ex}</b> exchanges &amp; banks</div>
          <div className="fworld__time num">{timeStr}</div>
        </div>

        <div className="fworld__stage">
          <svg className="fworld__svg" viewBox="0 0 1600 520" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
            <defs>
              <radialGradient id="fw-glow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="#E0B050" stopOpacity="0.55"/>
                <stop offset="60%" stopColor="#E0B050" stopOpacity="0.08"/>
                <stop offset="100%" stopColor="#E0B050" stopOpacity="0"/>
              </radialGradient>
              <linearGradient id="fw-arc" x1="0" x2="1" y1="0" y2="0">
                <stop offset="0%"  stopColor="#E0B050" stopOpacity="0"/>
                <stop offset="50%" stopColor="#E0B050" stopOpacity="0.9"/>
                <stop offset="100%" stopColor="#E0B050" stopOpacity="0"/>
              </linearGradient>
              <pattern id="fw-dots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
                <circle cx="2" cy="2" r="1.1" fill="#FAFAFA" fillOpacity="0.10"/>
              </pattern>
              <mask id="fw-continents">
                {/* Simplified blob continents — dot-matrix look via mask */}
                {/* N. America */}
                <ellipse cx="340" cy="240" rx="170" ry="110" fill="white"/>
                <ellipse cx="280" cy="330" rx="70"  ry="60"  fill="white"/>
                {/* S. America */}
                <ellipse cx="450" cy="390" rx="55" ry="110" fill="white"/>
                {/* Europe */}
                <ellipse cx="820" cy="220" rx="100" ry="65" fill="white"/>
                {/* Africa */}
                <ellipse cx="870" cy="360" rx="90" ry="130" fill="white"/>
                {/* Middle East + W Asia */}
                <ellipse cx="980" cy="290" rx="80" ry="70" fill="white"/>
                {/* Asia */}
                <ellipse cx="1180" cy="245" rx="200" ry="110" fill="white"/>
                {/* SE Asia + Oceania */}
                <ellipse cx="1260" cy="360" rx="70" ry="50" fill="white"/>
                <ellipse cx="1380" cy="430" rx="70" ry="45" fill="white"/>
                {/* Japan-ish */}
                <ellipse cx="1330" cy="245" rx="35" ry="55" fill="white"/>
              </mask>
            </defs>

            {/* Meridian / equator grid */}
            <g className="fworld__grid" stroke="#FAFAFA" strokeOpacity="0.055" strokeWidth="1" fill="none">
              <line x1="0" y1="260" x2="1600" y2="260"/>
              {[200,400,600,800,1000,1200,1400].map(x =>
                <path key={x} d={`M ${x} 40 Q ${x + (x-800)*0.08} 260 ${x} 480`}/>
              )}
            </g>

            {/* Dotted continents */}
            <rect x="0" y="0" width="1600" height="520" fill="url(#fw-dots)" mask="url(#fw-continents)"/>

            {/* Arcs */}
            <g className="fworld__arcs">
              {arcs.map(([fromId, toId, dur, del], i) => {
                const d = curve(byId[fromId], byId[toId]);
                return (
                  <g key={i}>
                    <path d={d} fill="none" stroke="#FAFAFA" strokeOpacity="0.10" strokeWidth="1"/>
                    <path d={d} fill="none" stroke="url(#fw-arc)" strokeWidth="1.6"
                          strokeDasharray="120 1600"
                          style={{ animation: `fw-dash ${dur}s linear ${del}s infinite` }}/>
                    <circle r="3.2" fill="#F5D28A">
                      <animateMotion dur={`${dur}s`} begin={`${del}s`} repeatCount="indefinite" path={d} rotate="auto"/>
                      <animate attributeName="opacity" values="0;1;1;0" dur={`${dur}s`} begin={`${del}s`} repeatCount="indefinite"/>
                    </circle>
                  </g>
                );
              })}
            </g>

            {/* Hubs */}
            <g className="fworld__hubs">
              {hubs.map((h, i) => (
                <g key={h.id} transform={`translate(${h.x} ${h.y})`} className={i === focus ? 'is-focus' : ''}>
                  <circle r="34" fill="url(#fw-glow)"/>
                  <circle className="fworld__ring" r="10" fill="none" stroke="#E0B050" strokeWidth="1.2"
                          style={{ animationDelay: `${(i*0.4) % 2.4}s` }}/>
                  <circle r="3.2" fill="#E0B050"/>
                  <text x="12" y="-10" fill="#FAFAFA" fillOpacity="0.82"
                        fontFamily="'JetBrains Mono', ui-monospace, monospace"
                        fontSize="11" letterSpacing="0.04em">{h.label.toUpperCase()}</text>
                </g>
              ))}
            </g>
          </svg>

          {/* Floating data card for the focused hub */}
          <div className="fworld__card" key={focus}>
            <div className="fworld__card-row">
              <span className="fworld__card-city">{t(hubs[focus].label)}</span>
              <span className="fworld__card-cat">{t(hubs[focus].cat)}</span>
            </div>
            <div className="fworld__card-metric num">{t(hubs[focus].metric)}</div>
            <div className="fworld__card-bar">
              <div className="fworld__card-fill" style={{ width: (30 + (focus*8)%60) + '%' }}/>
            </div>
          </div>

          {/* Category stamps floating top & bottom */}
          <div className="fworld__stamps">
            <span>Investments</span>
            <span className="fworld__sep">✱</span>
            <span>Banking</span>
            <span className="fworld__sep">✱</span>
            <span>Rentals</span>
            <span className="fworld__sep">✱</span>
            <span>Crypto</span>
            <span className="fworld__sep">✱</span>
            <span>Real Estate</span>
            <span className="fworld__sep">✱</span>
            <span>AI Signals</span>
            <span className="fworld__sep">✱</span>
            <span>Net-Worth Ledger</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FintechWorld });