/* Interactive India map — abstract polygonal map with pulsing project nodes.
   Hover a region in the side list to focus its node on the map. */

const REGIONS = [
  { id: "delhi", name: "Delhi NCR", count: 18, x: 0.46, y: 0.30, kind: "HQ" },
  { id: "mh", name: "Maharashtra", count: 12, x: 0.42, y: 0.55, kind: "Active" },
  { id: "ka", name: "Karnataka", count: 9,  x: 0.45, y: 0.72, kind: "Active" },
  { id: "gj", name: "Gujarat", count: 7,    x: 0.32, y: 0.48, kind: "Active" },
  { id: "tg", name: "Telangana", count: 6,  x: 0.50, y: 0.65, kind: "Active" },
  { id: "tn", name: "Tamil Nadu", count: 8, x: 0.50, y: 0.82, kind: "Active" },
  { id: "rj", name: "Rajasthan", count: 5,  x: 0.34, y: 0.36, kind: "Active" },
  { id: "hwy", name: "Pan-India highway corridors", count: 14, x: 0.55, y: 0.48, kind: "Corridor" },
];

function IndiaMap() {
  const [active, setActive] = React.useState("delhi");
  const wrapRef = React.useRef(null);
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let raf, mounted = true;
    const start = performance.now();
    const loop = () => {
      if (!mounted) return;
      setT((performance.now() - start) / 1000);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => { mounted = false; cancelAnimationFrame(raf); };
  }, []);

  // Simplified abstract polygon of India (not geographically precise — stylized).
  // Coordinate space 100x130.
  const indiaPath = "M44,8 L52,5 L60,8 L66,12 L72,16 L74,22 L70,28 L66,30 L70,36 L72,42 L70,48 L66,52 L62,56 L66,62 L68,68 L66,74 L62,80 L60,86 L58,92 L54,98 L50,108 L46,116 L42,118 L38,114 L36,108 L34,100 L30,92 L28,84 L24,76 L20,68 L18,60 L20,52 L24,46 L26,40 L24,34 L22,28 L26,22 L32,18 L38,14 Z";

  return (
    <div className="map-grid">
      <div className="map-side">
        <div className="eyebrow">Coverage</div>
        <h3>Project work, by region.</h3>
        <p style={{ color: "var(--slate-2)", fontSize: 15, margin: "0 0 8px", maxWidth: "42ch" }}>
          We deploy on-ground survey teams and signal engineers anywhere in India. Click a region to inspect.
        </p>
        <div className="regions">
          {REGIONS.map(r => (
            <div
              key={r.id}
              className={"region" + (active === r.id ? " active" : "")}
              onMouseEnter={() => setActive(r.id)}
              onClick={() => setActive(r.id)}
            >
              <div className="name">{r.name}</div>
              <div className="ct">{r.count} projects</div>
              <div className="dot"></div>
            </div>
          ))}
        </div>
      </div>

      <div className="map-canvas" ref={wrapRef}>
        <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMid meet"
             style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          {/* grid */}
          <defs>
            <pattern id="gr" width="6" height="6" patternUnits="userSpaceOnUse">
              <path d="M 6 0 L 0 0 0 6" fill="none" stroke="rgba(180,200,255,0.05)" strokeWidth="0.2" />
            </pattern>
            <radialGradient id="glow" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="oklch(0.82 0.165 85)" stopOpacity="0.55" />
              <stop offset="100%" stopColor="oklch(0.82 0.165 85)" stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect x="0" y="0" width="100" height="130" fill="url(#gr)" />

          {/* India polygon */}
          <path d={indiaPath}
                fill="oklch(0.22 0.025 250)"
                stroke="oklch(0.55 0.018 250)"
                strokeWidth="0.4" strokeDasharray="0.8 0.8" />
          <path d={indiaPath}
                fill="none"
                stroke="oklch(0.82 0.165 85)"
                strokeWidth="0.6"
                strokeOpacity="0.3" />

          {/* Latitude markers */}
          {[20, 40, 60, 80, 100].map(y => (
            <g key={y}>
              <line x1="0" y1={y} x2="100" y2={y} stroke="rgba(180,200,255,0.04)" strokeWidth="0.15" />
              <text x="2" y={y - 1} fontSize="2" fill="rgba(180,200,255,0.25)"
                    fontFamily="var(--mono)">{y}</text>
            </g>
          ))}

          {/* Connection lines from HQ to active regions */}
          {REGIONS.filter(r => r.id !== "delhi").map(r => {
            const x1 = 46, y1 = 39; // delhi anchor (in 100x130 space)
            const x2 = r.x * 100, y2 = r.y * 130;
            const isActive = active === r.id;
            return (
              <line
                key={r.id}
                x1={x1} y1={y1} x2={x2} y2={y2}
                stroke={isActive ? "oklch(0.82 0.165 85)" : "oklch(0.62 0.14 200)"}
                strokeOpacity={isActive ? 0.9 : 0.18}
                strokeWidth={isActive ? 0.5 : 0.25}
                strokeDasharray="1.5 1.2"
              />
            );
          })}

          {/* Region nodes */}
          {REGIONS.map(r => {
            const cx = r.x * 100, cy = r.y * 130;
            const isActive = active === r.id;
            const pulse = isActive ? 1.5 + Math.sin(t * 4) * 0.3 : 0;
            return (
              <g key={r.id}>
                {isActive && (
                  <circle cx={cx} cy={cy} r={4 + pulse} fill="url(#glow)" />
                )}
                <circle cx={cx} cy={cy} r={isActive ? 1.6 : 1.0}
                        fill={isActive ? "oklch(0.82 0.165 85)" : "oklch(0.62 0.14 200)"} />
                <circle cx={cx} cy={cy} r={isActive ? 2.6 : 1.8}
                        fill="none"
                        stroke={isActive ? "oklch(0.82 0.165 85)" : "oklch(0.62 0.14 200)"}
                        strokeWidth="0.2" strokeOpacity={isActive ? 0.7 : 0.25} />
                {isActive && (
                  <g>
                    <rect x={cx + 4} y={cy - 5} width={r.name.length * 1.4 + 4} height="6"
                          fill="oklch(0.16 0.025 250)" stroke="oklch(0.82 0.165 85)" strokeWidth="0.2" rx="0.6" />
                    <text x={cx + 6} y={cy - 0.8} fontSize="2.4" fill="oklch(0.97 0.005 90)"
                          fontFamily="var(--mono)" style={{ letterSpacing: "0.05em" }}>
                      {r.name.toUpperCase()} · {r.count}
                    </text>
                  </g>
                )}
              </g>
            );
          })}
        </svg>

        {/* Corner HUD */}
        <div style={{
          position: "absolute", top: 14, left: 14,
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em",
          color: "color-mix(in oklch, var(--bone) 65%, transparent)",
          textTransform: "uppercase",
        }}>
          NETWORK · LIVE
        </div>
        <div style={{
          position: "absolute", bottom: 14, right: 14,
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.08em",
          color: "color-mix(in oklch, var(--bone) 50%, transparent)",
        }}>
          [ {REGIONS.length} states · {REGIONS.reduce((a,b)=>a+b.count,0)} projects ]
        </div>
      </div>
    </div>
  );
}

window.IndiaMap = IndiaMap;