// MapBlock v3 — uses real Russia silhouette image (russia-map.jpg) as the base,
// overlays clickable city pins with full labels. No mouse tracing.
const { useState: useStateMap } = React;

function MapBlock() {
  const { CITIES } = window.__DATA;
  const [active, setActive] = useStateMap(CITIES[0]);
  const a = active;

  return (
    <div className="map-block" id="map">
      <div className="map-canvas">
        {/* Real Russia silhouette image */}
        <img
          src="russia-map.jpg"
          alt="Карта России"
          className="map-russia-img"
          draggable="false"
        />

        {/* City pins overlay */}
        {CITIES.map((c) => (
          <button
            key={c.id}
            className={`city-pin side-${c.side} ${active.id === c.id ? "active" : ""}`}
            style={{ left: `${c.x}%`, top: `${c.y}%` }}
            onClick={() => setActive(c)}
            aria-label={c.name}
          >
            <span className="city-pin-dot"></span>
            <span className="city-pin-label">
              <span className="city-pin-name">{c.name}</span>
              <span className="city-pin-pop">{c.rank} · {c.pop}</span>
            </span>
          </button>
        ))}

        {/* Legend at bottom-left of canvas */}
        <div className="map-legend">
          <span className="map-legend-row">
            <span className="map-legend-dot accent"></span>
            <span>топ-10 городов · 27 М&nbsp;человек</span>
          </span>
          <span className="map-legend-row">
            <span className="map-legend-dot dim"></span>
            <span>покрытие · 1.7 М&nbsp;ПУ&nbsp;РФ</span>
          </span>
        </div>
      </div>

      <div className="map-info">
        <div className="map-info-label">→ Выбранный пункт<span className="muted"> · /v1/geocode/reverse</span></div>
        <div className="map-info-addr">{a.name}</div>
        <div className="map-info-meta mono">{a.addr}</div>

        <div className="map-fields">
          <div>
            <div className="map-field-label">Регион</div>
            <div className="map-field-value">{a.region}</div>
          </div>
          <div>
            <div className="map-field-label">Население</div>
            <div className="map-field-value">{a.pop}</div>
          </div>
          <div>
            <div className="map-field-label">Индекс</div>
            <div className="map-field-value mono">{a.postal}</div>
          </div>
          <div>
            <div className="map-field-label">ОКАТО</div>
            <div className="map-field-value mono">{a.okato}</div>
          </div>
          <div>
            <div className="map-field-label">Широта</div>
            <div className="map-field-value mono">{a.lat.toFixed(6)}</div>
          </div>
          <div>
            <div className="map-field-label">Долгота</div>
            <div className="map-field-value mono">{a.lon.toFixed(6)}</div>
          </div>
          <div style={{ gridColumn: "1 / -1" }}>
            <div className="map-field-label">ФИАС</div>
            <div className="map-field-value mono" style={{ wordBreak: "break-all" }}>{a.fias}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MapBlock });