Globe

import { useEffect, useRef } from 'react';
import { useInView, useReducedMotion } from 'motion/react';

type Place = { lat: number; lng: number };

const RAD = Math.PI / 180;
const TILT = 20 * RAD; // north pole tipped toward the viewer
const SPIN = 12 * RAD; // per second

// `land`: evenly spaced points sampled from a world mask. `cities`: markers.
export function Globe({ land, cities }: { land: Place[]; cities: Place[] }) {
  const ref = useRef<HTMLCanvasElement>(null);
  const inView = useInView(ref);
  const reduceMotion = useReducedMotion();
  const view = useRef({ yaw: 0, dragX: null as number | null });

  useEffect(() => {
    if (!inView) return; // no frames while off screen
    const canvas = ref.current!;
    const ctx = canvas.getContext('2d')!;
    const size = canvas.clientWidth;
    const dpr = window.devicePixelRatio || 1;
    canvas.width = canvas.height = size * dpr;
    ctx.scale(dpr, dpr);
    const r = size / 2 - 6;

    const c = size / 2;
    // Orthographic projection: spin, then tilt. depth <= 0 is the far side.
    const draw = (places: Place[], radius: number) => {
      for (const { lat, lng } of places) {
        const [phi, lambda] = [lat * RAD, lng * RAD + view.current.yaw];
        const x = Math.cos(phi) * Math.sin(lambda);
        const y = Math.sin(phi);
        const z = Math.cos(phi) * Math.cos(lambda);
        const depth = y * Math.sin(TILT) + z * Math.cos(TILT);
        if (depth <= 0) continue;
        ctx.globalAlpha = 0.15 + depth * 0.85; // fade toward the rim
        ctx.beginPath();
        const up = y * Math.cos(TILT) - z * Math.sin(TILT);
        ctx.arc(c + x * r, c - up * r, radius, 0, 2 * Math.PI);
        ctx.fill();
      }
    };

    let frame = 0;
    let last = performance.now();
    const tick = (now: number) => {
      if (!reduceMotion && view.current.dragX === null)
        view.current.yaw += (SPIN * (now - last)) / 1000;
      last = now;
      ctx.clearRect(0, 0, size, size);
      ctx.fillStyle = getComputedStyle(canvas).color;
      draw(land, 1);
      ctx.fillStyle = '#3b82f6';
      draw(cities, 3.5);
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [land, cities, inView, reduceMotion]);

  return (
    <canvas
      ref={ref}
      role='img'
      aria-label='Globe marking our data center cities'
      onPointerDown={(e) => {
        e.currentTarget.setPointerCapture(e.pointerId);
        view.current.dragX = e.clientX;
      }}
      onPointerMove={(e) => {
        if (view.current.dragX === null) return;
        view.current.yaw += (e.clientX - view.current.dragX) * 0.006;
        view.current.dragX = e.clientX;
      }}
      onPointerUp={() => (view.current.dragX = null)}
      className='aspect-square w-full max-w-sm cursor-grab touch-none text-neutral-500 active:cursor-grabbing'
    />
  );
}