project/src/GlobalNetworkMap.tsx

import React, { useRef, useEffect, useState } from "react";
import Globe from "react-globe.gl";
import { motion } from "framer-motion";

const GlobalNetworkMap = () => {
    const globeEl = useRef<any>(null);
    const [points, setPoints] = useState<any[]>([]);
    const [arcs, setArcs] = useState<any[]>([]);

    useEffect(() => {
        // Auto-rotate
        if (globeEl.current) {
            globeEl.current.controls().autoRotate = true;
            globeEl.current.controls().autoRotateSpeed = 0.5;
        }

        // Generate synthetic ride data
        const N = 20;
        const generatedPoints = [...Array(N).keys()].map(() => ({
            lat: (Math.random() - 0.5) * 180,
            lng: (Math.random() - 0.5) * 360,
            size: Math.random() / 3,
            color: ['#00f3ff', '#bc13fe', '#ff0055'][Math.floor(Math.random() * 3)],
        }));
        setPoints(generatedPoints);

        // Generate arcs (connections)
        const generatedArcs = [...Array(N).keys()].map(() => ({
            startLat: (Math.random() - 0.5) * 180,
            startLng: (Math.random() - 0.5) * 360,
            endLat: (Math.random() - 0.5) * 180,
            endLng: (Math.random() - 0.5) * 360,
            color: [['#00f3ff', '#bc13fe'][Math.floor(Math.random() * 2)]],
        }));
        setArcs(generatedArcs);

    }, []);

    return (
        <div className="w-full h-full relative rounded-2xl overflow-hidden border border-deep-border bg-deep-bg/50 backdrop-blur-sm group">
            <div className="absolute top-4 left-4 z-10 pointer-events-none">
                <h3 className="text-neon-blue font-bold tracking-widest uppercase text-sm flex items-center gap-2">
                    <span className="w-2 h-2 bg-neon-blue rounded-full animate-pulse" />
                    Global Ride Network
                </h3>
            </div>

            <Globe
                ref={globeEl}
                width={400} // Will be responsive in parent
                height={400}
                globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
                bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"
                backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
                pointsData={points}
                pointAltitude={0.1}
                pointColor="color"
                pointRadius="size"
                pointPulseGm={2}
                arcsData={arcs}
                arcColor="color"
                arcDashLength={() => Math.random()}
                arcDashGap={() => Math.random()}
                arcDashAnimateTime={2000}
            />

            {/* Overlay scanlines */}
            <div className="absolute inset-0 bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.5)_50%)] bg-[size:100%_4px] pointer-events-none opacity-20" />
        </div>
    );
};

export default GlobalNetworkMap;