World Map

"use client";
import { useEffect, useState } from "react";
import { motion } from "motion/react";
import WorldMap from "@/lab/aceternity/ui/world-map";

const dots = [
  { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: 34.0522, lng: -118.2437 } }, // Alaska → Los Angeles
  { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: -15.7975, lng: -47.8919 } }, // Alaska → Brasília
  { start: { lat: -15.7975, lng: -47.8919 }, end: { lat: 38.7223, lng: -9.1393 } }, // Brasília → Lisbon
  { start: { lat: 51.5074, lng: -0.1278 }, end: { lat: 28.6139, lng: 77.209 } }, // London → New Delhi
  { start: { lat: 28.6139, lng: 77.209 }, end: { lat: 43.1332, lng: 131.9113 } }, // New Delhi → Vladivostok
  { start: { lat: 28.6139, lng: 77.209 }, end: { lat: -1.2921, lng: 36.8219 } }, // New Delhi → Nairobi
];

export default function WorldMapDemo() {
  // Redraw the arcs periodically so the stage keeps animating.
  const [run, setRun] = useState(0);
  useEffect(() => {
    const id = window.setInterval(() => setRun((r) => r + 1), 9000);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="relative flex h-full w-full flex-col items-center bg-black pt-[5cqh] [container-type:size]">
      <div className="mx-auto max-w-7xl px-4 text-center">
        <p className="text-[clamp(1rem,4cqw,2.25rem)] font-bold text-white">
          Remote{" "}
          <span className="text-neutral-400">
            {"Connectivity".split("").map((word, idx) => (
              <motion.span
                key={`${run}-${idx}`}
                className="inline-block"
                initial={{ x: -10, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                transition={{ duration: 0.5, delay: idx * 0.04 }}
              >
                {word}
              </motion.span>
            ))}
          </span>
        </p>
        <p className="mx-auto max-w-2xl py-[2cqh] text-[clamp(0.65rem,1.8cqw,1.125rem)] text-neutral-500">
          Break free from traditional boundaries. Work from anywhere, at the comfort of your own
          studio apartment. Perfect for Nomads and Travellers.
        </p>
      </div>
      <div className="flex min-h-0 w-full flex-1 items-center justify-center">
        <WorldMap key={run} dots={dots} theme="dark" className="h-full w-auto max-w-full" />
      </div>
    </div>
  );
}