// Map.jsx — реальная карта Северной Осетии с отмеченными точками служения (Leaflet + CARTO)
const SERVE_POINTS = [
  { name: "Владикавказ", lat: 43.0241, lng: 44.6818, main: true },
  { name: "Беслан",      lat: 43.1944, lng: 44.5358 },
  { name: "Алагир",      lat: 43.0408, lng: 44.2197 },
  { name: "Ардон",       lat: 43.1758, lng: 44.2964 },
  { name: "Дигора",      lat: 43.1556, lng: 44.1556 },
  { name: "Моздок",      lat: 43.7449, lng: 44.6533 },
];

function ServeMap({ height = 460 }) {
  const elRef = React.useRef(null);
  const mapRef = React.useRef(null);

  React.useEffect(() => {
    if (!window.L || mapRef.current || !elRef.current) return;
    const map = L.map(elRef.current, {
      scrollWheelZoom: false, zoomControl: true, attributionControl: true,
    }).setView([43.28, 44.35], 8);
    mapRef.current = map;

    L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
      subdomains: "abcd", maxZoom: 19,
      attribution: '© OpenStreetMap © CARTO',
    }).addTo(map);

    // зона служения — мягкий терракотовый круг вокруг республики
    L.circle([43.15, 44.45], {
      radius: 46000, color: "#D3613C", weight: 1.5, opacity: 0.5,
      fillColor: "#D3613C", fillOpacity: 0.08,
    }).addTo(map);

    SERVE_POINTS.forEach((p) => {
      const d = p.main ? 22 : 14;
      const html = p.main
        ? `<div style="position:relative;width:${d}px;height:${d}px">
             <span style="position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(211,97,60,.45)"></span>
             <span style="position:absolute;inset:0;border-radius:50%;background:#D3613C;border:3px solid #F3EEDA;box-shadow:0 2px 8px rgba(20,10,5,.4)"></span>
           </div>`
        : `<div style="width:${d}px;height:${d}px;border-radius:50%;background:#D3613C;border:2.5px solid #F3EEDA;box-shadow:0 2px 6px rgba(20,10,5,.35)"></div>`;
      const icon = L.divIcon({ className: "serve-pin", html, iconSize: [d, d], iconAnchor: [d / 2, d / 2] });
      const m = L.marker([p.lat, p.lng], { icon }).addTo(map);
      m.bindTooltip(p.name, {
        direction: "top", offset: [0, -d / 2 - 4],
        permanent: !!p.main, className: "serve-tip",
      });
    });

    const t = setTimeout(() => map.invalidateSize(), 250);
    return () => { clearTimeout(t); map.remove(); mapRef.current = null; };
  }, []);

  return (
    <div style={{ position: "relative", width: "100%" }}>
      <style>{`
        .serve-tip.leaflet-tooltip {
          background: var(--ink); color: var(--cream); border: none; border-radius: 8px;
          font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; padding: 5px 10px;
          box-shadow: 0 6px 18px rgba(20,10,5,.3);
        }
        .serve-tip.leaflet-tooltip-top:before { border-top-color: var(--ink); }
        .leaflet-container { font-family: var(--font-ui); background: #EDE7D6; z-index: 0; }
        .leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1 !important; }
        .leaflet-control-zoom a { color: var(--graphite) !important; }
      `}</style>
      <div ref={elRef} style={{ height, width: "100%", borderRadius: 20, overflow: "hidden",
        border: "1px solid rgba(243,238,218,.18)", boxShadow: "0 24px 60px rgba(10,20,16,.28)" }} />
      <div style={{ position: "absolute", left: 16, bottom: 16, zIndex: 500,
        display: "flex", alignItems: "center", gap: 9, background: "rgba(43,38,34,.82)",
        backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)", color: "var(--cream)",
        padding: "8px 14px", borderRadius: 999, fontFamily: "var(--font-ui)", fontSize: 13, fontWeight: 500 }}>
        <span style={{ width: 11, height: 11, borderRadius: 999, background: "#D3613C",
          border: "2px solid #F3EEDA", display: "inline-block" }} />
        Где мы служим · Северная Осетия
      </div>
    </div>
  );
}

Object.assign(window, { ServeMap, SERVE_POINTS });