import { useState } from "react";
import { Reveal, SectionHeading } from "./reveal";

const offices = [
  { city: "New York", region: "North America", x: 27, y: 38 },
  { city: "London", region: "Europe", x: 47, y: 31 },
  { city: "Frankfurt", region: "Europe", x: 51, y: 33 },
  { city: "Dubai", region: "Middle East", x: 61, y: 46 },
  { city: "Singapore", region: "APAC", x: 76, y: 58 },
  { city: "Sydney", region: "APAC", x: 87, y: 76 },
  { city: "São Paulo", region: "LATAM", x: 35, y: 72 },
  { city: "Johannesburg", region: "Africa", x: 55, y: 74 },
];

const routes: [number, number][] = [
  [0, 1],
  [1, 2],
  [2, 3],
  [3, 4],
  [4, 5],
  [0, 6],
  [1, 7],
  [3, 7],
];

export function GlobalPresence() {
  const [active, setActive] = useState<number | null>(null);

  return (
    <section id="global" className="relative overflow-hidden bg-navy-deep py-24 sm:py-32">
      <div className="relative mx-auto max-w-7xl px-5">
        <SectionHeading
          invert
          eyebrow="Global Presence"
          title="Delivery centers and support hubs across every continent"
          description="Follow-the-sun operations keep your infrastructure monitored and supported, wherever it runs."
        />

        <Reveal delay={120}>
          <div className="glass relative mt-14 overflow-hidden rounded-[1.5rem] p-4 sm:p-8">
            <div className="relative aspect-[2/1] w-full">
              <svg viewBox="0 0 100 50" className="absolute inset-0 size-full" aria-hidden>
                <defs>
                  <pattern id="dots" width="1.1" height="1.1" patternUnits="userSpaceOnUse">
                    <circle cx="0.5" cy="0.5" r="0.16" fill="oklch(0.78 0.145 217 / 0.28)" />
                  </pattern>
                </defs>
                <path
                  d="M12 18 Q18 10 26 13 T38 12 L42 20 L36 30 L30 27 L22 32 L16 26 Z M44 10 Q52 6 58 11 T70 10 L74 18 L66 24 L60 20 L54 24 L48 18 Z M28 30 L34 28 L37 38 L32 44 L27 38 Z M50 26 L60 24 L64 34 L57 42 L52 34 Z M74 22 L84 20 L88 28 L80 32 Z M78 36 L88 34 L90 42 L82 44 Z"
                  fill="url(#dots)"
                  stroke="oklch(0.78 0.145 217 / 0.18)"
                  strokeWidth="0.15"
                />
                {routes.map(([a, b], i) => {
                  const p = offices[a]!;
                  const q = offices[b]!;
                  const x1 = p.x / 2;
                  const y1 = p.y / 2;
                  const x2 = q.x / 2;
                  const y2 = q.y / 2;
                  const mx = (x1 + x2) / 2;
                  const my = (y1 + y2) / 2 - Math.abs(x2 - x1) * 0.28;
                  return (
                    <path
                      key={i}
                      d={`M${x1} ${y1} Q${mx} ${my} ${x2} ${y2}`}
                      fill="none"
                      stroke="oklch(0.6 0.22 262 / 0.65)"
                      strokeWidth="0.18"
                      strokeDasharray="1.4 1.8"
                      style={{ animation: `dash-flow ${10 + i}s linear infinite` }}
                    />
                  );
                })}
              </svg>

              {offices.map((o, i) => (
                <button
                  key={o.city}
                  type="button"
                  onMouseEnter={() => setActive(i)}
                  onMouseLeave={() => setActive(null)}
                  onFocus={() => setActive(i)}
                  onBlur={() => setActive(null)}
                  className="absolute -translate-x-1/2 -translate-y-1/2"
                  style={{ left: `${o.x}%`, top: `${o.y}%` }}
                  aria-label={`${o.city}, ${o.region}`}
                >
                  <span className="relative grid place-items-center">
                    <span
                      className="absolute size-4 rounded-full bg-cyan/40"
                      style={{ animation: `pulse-node ${2.5 + (i % 3)}s ease-in-out infinite` }}
                    />
                    <span className="relative size-2 rounded-full bg-cyan shadow-[0_0_12px_2px_oklch(0.78_0.145_217/0.7)]" />
                  </span>
                  {active === i && (
                    <span className="glass absolute left-1/2 top-4 z-10 -translate-x-1/2 whitespace-nowrap rounded-lg px-3 py-1.5 text-[11px] font-semibold text-white">
                      {o.city} · {o.region}
                    </span>
                  )}
                </button>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}