// stops-block.jsx — AAGU "Stops" block (alternative to Steps)
// Metro-map style SVG that draws itself as the page scrolls.
//
// Globals consumed: React, BlockMeta (from blocks.jsx).
// Exposes: StopsBlock, MStopsBlock.

// ─────────────────────────────────────────────────────────────
// Default content — 7 stops, framed as a playful journey
// through the AAGU group-booking process. (Place-names are
// invented; matched to the actual workflow stages.)
// ─────────────────────────────────────────────────────────────
// Desktop — lightning-bolt sweep with even 80-unit legs and
// three extended runs:  S1→S2 east leg doubled (2L), S3→S4
// east leg tripled (3L), S6→S7 west leg tripled (3L).  Each
// direction change carries a `via:true` waypoint so 45°
// corners stay crisp.
// Sequence of legs between stops:
//   (1) E×2, SE   (2) S, SE   (3) E×3   (4) SE, E
//   (5) SE, S   (6) S, SW, W×3   (7)
//
// L=80. Origin S1=(200, 50). Total path span 800 × 640.
const STOPS_DEFAULT = [
  {x: 200, y:  50, side: 'bot', title: 'Anfrage-Allmend',
   body: 'Online-Formular ausfüllen — Datum, Personenzahl und Wunschroute angeben.'},
  // S1 → S2  (E×2, SE)
  {x: 360, y:  50, via: true},
  {x: 440, y: 130, side: 'tr',  title: 'Wartesaal Werktag',
   body: 'Wir prüfen Verfügbarkeit und Verbindung innert zwei Werktagen.'},
  // S2 → S3  (S, SE)
  {x: 440, y: 210, via: true},
  {x: 520, y: 290, side: 'bot', title: 'Bestätigungs-Brücke',
   body: 'Die schriftliche Buchungsbestätigung landet in Ihrem Posteingang.'},
  // S3 → S4  (E×3)  — single straight leg, no via
  {x: 760, y: 290, side: 'top', title: 'Billett-Bahnhof',
   body: 'Gruppenbillette am AAGU-Schalter Schattdorf oder direkt beim Chauffeur.'},
  // S4 → S5  (SE, E)
  {x: 840, y: 370, via: true},
  {x: 920, y: 370, side: 'tr',  title: 'Treffpunkt-Halt',
   body: 'Pünktlich an der vereinbarten Haltestelle einfinden — wir warten.'},
  // S5 → S6  (SE, S)
  {x: 1000, y: 450, via: true},
  {x: 1000, y: 530, side: 'l',   title: 'Panorama-Pass',
   body: 'Zurücklehnen, schauen, geniessen. Der Chauffeur übernimmt den Rest.'},
  // S6 → S7  (S, SW, W×3)
  {x: 1000, y: 610, via: true},
  {x:  920, y: 690, via: true},
  {x:  680, y: 690, side: 'bot', title: 'Ankunfts-Terminal',
   body: 'Ziel erreicht — Gruppenreise erlebt. Bis zur nächsten Fahrt.'},
];

// Mobile path — each inter-stop connector is composed of FIVE
// segments: vertical down → 45° diagonal → horizontal → 45°
// diagonal → vertical down. Stops sit at the top and bottom of
// each S-bend, alternating between the right column (x=260)
// and the left column (x=140).
const STOPS_MOBILE_DEFAULT = [
  {x: 260, y: 110,  side: 'left',  title: 'Anfrage-Allmend',
   body: 'Online-Formular ausfüllen — Datum, Personen, Wunschroute.'},
  // S1 → S2 (down-left S-bend)
  {x: 260, y: 150,  via: true},
  {x: 220, y: 190,  via: true},
  {x: 180, y: 190,  via: true},
  {x: 140, y: 230,  via: true},
  {x: 140, y: 270,  side: 'right', title: 'Wartesaal Werktag',
   body: 'Wir prüfen Verbindung & Verfügbarkeit innert 2 Werktagen.'},
  // S2 → S3 (down-right S-bend)
  {x: 140, y: 310,  via: true},
  {x: 180, y: 350,  via: true},
  {x: 220, y: 350,  via: true},
  {x: 260, y: 390,  via: true},
  {x: 260, y: 430,  side: 'left',  title: 'Bestätigungs-Brücke',
   body: 'Schriftliche Buchungsbestätigung landet im Posteingang.'},
  // S3 → S4 (down-left)
  {x: 260, y: 470,  via: true},
  {x: 220, y: 510,  via: true},
  {x: 180, y: 510,  via: true},
  {x: 140, y: 550,  via: true},
  {x: 140, y: 590,  side: 'right', title: 'Billett-Bahnhof',
   body: 'Gruppenbillett am Schalter Schattdorf oder beim Chauffeur.'},
  // S4 → S5 (down-right)
  {x: 140, y: 630,  via: true},
  {x: 180, y: 670,  via: true},
  {x: 220, y: 670,  via: true},
  {x: 260, y: 710,  via: true},
  {x: 260, y: 750,  side: 'left',  title: 'Treffpunkt-Halt',
   body: 'Pünktlich an der vereinbarten Haltestelle einfinden.'},
  // S5 → S6 (down-left)
  {x: 260, y: 790,  via: true},
  {x: 220, y: 830,  via: true},
  {x: 180, y: 830,  via: true},
  {x: 140, y: 870,  via: true},
  {x: 140, y: 910,  side: 'right', title: 'Panorama-Pass',
   body: 'Zurücklehnen, schauen, geniessen — Chauffeur übernimmt.'},
  // S6 → S7 (down-right)
  {x: 140, y: 950,  via: true},
  {x: 180, y: 990,  via: true},
  {x: 220, y: 990,  via: true},
  {x: 260, y: 1030, via: true},
  {x: 260, y: 1070, side: 'left',  title: 'Ankunfts-Terminal',
   body: 'Ziel erreicht. Bis zur nächsten Fahrt mit AAGU.'},
];

// Multi-color palette — built from official line colors
const STOPS_MULTI_COLORS = [
  '#E3000F', '#F18E00', '#E89600', '#7BB028', '#00427D', '#5B2483', '#19171C',
];

// ─────────────────────────────────────────────────────────────
// Hooks
// ─────────────────────────────────────────────────────────────

// Re-render on Tweaks panel changes (dispatched by applyTweaks).
function useTweakTick() {
  const [, setT] = React.useState(0);
  React.useEffect(() => {
    const f = () => setT(n => n + 1);
    window.addEventListener('aagu:tweaks-changed', f);
    return () => window.removeEventListener('aagu:tweaks-changed', f);
  }, []);
}

// Compute scroll-progress of an element through its nearest
// scrollable ancestor: 0 when the element's top is at the
// bottom of the viewport, 1 when its bottom has scrolled past
// the top. Falls back to ~0.45 for non-scrollable contexts
// so the canvas grid view shows a meaningful partial fill.
function useScrollProgress(elRef) {
  const [progress, setProgress] = React.useState(0.45);
  React.useEffect(() => {
    const el = elRef.current;
    if (!el) return;
    let sc = el.parentElement;
    while (sc) {
      const s = getComputedStyle(sc);
      if (s.overflowY === 'auto' || s.overflowY === 'scroll') break;
      sc = sc.parentElement;
    }
    const useWindow = !sc;
    if (useWindow) sc = window;

    let raf = 0;
    const update = () => {
      raf = 0;
      const elRect = el.getBoundingClientRect();
      const cTop = useWindow ? 0 : sc.getBoundingClientRect().top;
      const cH   = useWindow ? window.innerHeight : sc.clientHeight;
      const elTop = elRect.top - cTop;
      const total = cH + elRect.height;
      const traveled = cH - elTop;
      const p = Math.max(0, Math.min(1, traveled / total));
      setProgress(p);
    };
    const schedule = () => { if (!raf) raf = requestAnimationFrame(update); };

    update();
    sc.addEventListener('scroll', schedule, {passive: true});
    window.addEventListener('resize', schedule);
    return () => {
      sc.removeEventListener('scroll', schedule);
      window.removeEventListener('resize', schedule);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return progress;
}

// ─────────────────────────────────────────────────────────────
// Path geometry
// ─────────────────────────────────────────────────────────────
function buildPath(stops, geom) {
  if (geom === 'rounded') {
    const R = 28;
    let d = `M ${stops[0].x} ${stops[0].y}`;
    for (let i = 1; i < stops.length; i++) {
      const prev = stops[i - 1], curr = stops[i], next = stops[i + 1];
      if (next) {
        const px = curr.x - prev.x, py = curr.y - prev.y;
        const pl = Math.hypot(px, py) || 1;
        const nx = next.x - curr.x, ny = next.y - curr.y;
        const nl = Math.hypot(nx, ny) || 1;
        const cut = Math.min(R, pl / 2, nl / 2);
        const ax = curr.x - (px / pl) * cut, ay = curr.y - (py / pl) * cut;
        const bx = curr.x + (nx / nl) * cut, by = curr.y + (ny / nl) * cut;
        d += ` L ${ax.toFixed(2)} ${ay.toFixed(2)}`;
        d += ` Q ${curr.x} ${curr.y} ${bx.toFixed(2)} ${by.toFixed(2)}`;
      } else {
        d += ` L ${curr.x} ${curr.y}`;
      }
    }
    return d;
  }
  if (geom === 'curvy') {
    let d = `M ${stops[0].x} ${stops[0].y}`;
    for (let i = 1; i < stops.length; i++) {
      const prev = stops[i - 1], curr = stops[i];
      const dx = curr.x - prev.x;
      const dy = curr.y - prev.y;
      // S-curve: control points offset along the dominant axis
      const horiz = Math.abs(dx) >= Math.abs(dy);
      const c1x = horiz ? prev.x + dx * 0.55 : prev.x;
      const c1y = horiz ? prev.y : prev.y + dy * 0.55;
      const c2x = horiz ? curr.x - dx * 0.55 : curr.x;
      const c2y = horiz ? curr.y : curr.y - dy * 0.55;
      d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${curr.x} ${curr.y}`;
    }
    return d;
  }
  // angled (default) — straight segments, mitered, square caps
  return `M ${stops[0].x} ${stops[0].y}` +
         stops.slice(1).map(s => ` L ${s.x} ${s.y}`).join('');
}

// Approx cumulative progress at each stop using straight-line
// distance between consecutive coordinates. Close enough for
// timing the marker "light-up" relative to the drawn path.
function cumulativeStopProgress(stops) {
  const cum = [0];
  for (let i = 1; i < stops.length; i++) {
    const dx = stops[i].x - stops[i - 1].x;
    const dy = stops[i].y - stops[i - 1].y;
    cum.push(cum[i - 1] + Math.hypot(dx, dy));
  }
  const total = cum[cum.length - 1] || 1;
  return cum.map(l => l / total);
}

// ─────────────────────────────────────────────────────────────
// Tweak readers — body data attrs set by applyTweaks()
// ─────────────────────────────────────────────────────────────
function readTweaks() {
  const ds = (typeof document !== 'undefined' && document.body && document.body.dataset) || {};
  return {
    geometry:   ds.stopsGeometry   || 'angled',
    colorMode:  ds.stopsColor      || 'brand',
    decoration: ds.stopsDecoration || 'ghost',
  };
}

function stopColor(colorMode, i) {
  if (colorMode === 'dark')  return '#19171C';
  if (colorMode === 'multi') return STOPS_MULTI_COLORS[i] || '#F18E00';
  return '#F18E00';
}
function trackStroke(colorMode) {
  if (colorMode === 'dark')  return 'var(--gray-900)';
  if (colorMode === 'multi') return 'url(#stops-grad)';
  return 'var(--brand-orange)';
}

// ─────────────────────────────────────────────────────────────
// Shared SVG defs (gradient, grid pattern, ghost decoration)
// ─────────────────────────────────────────────────────────────
function StopsDefs({W, H, gradId, gridId}) {
  return (
    <defs>
      <linearGradient id={gradId} x1="0" y1="0" x2={W} y2={H} gradientUnits="userSpaceOnUse">
        {STOPS_MULTI_COLORS.map((c, i) => (
          <stop key={i} offset={i / (STOPS_MULTI_COLORS.length - 1)} stopColor={c}/>
        ))}
      </linearGradient>
      <pattern id={gridId} x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
        <circle cx="2" cy="2" r="1.2" fill="#B8BFCC" opacity="0.55"/>
      </pattern>
    </defs>
  );
}

// ─────────────────────────────────────────────────────────────
// Desktop — diagonal sweep top-left → bottom-right
// ─────────────────────────────────────────────────────────────
function StopsBlock({
  showMeta = true,
  eyebrow = "So funktionierts",
  title = "In sieben Halten zur Gruppenreise",
  intro = "Vom ersten Klick bis zur Heimfahrt — jede Station ein Schritt im Buchungsablauf. Beim Scrollen zeichnet sich die Strecke nach.",
  stops = STOPS_DEFAULT,
}) {
  useTweakTick();
  const {geometry, colorMode, decoration} = readTweaks();

  const blockRef = React.useRef(null);
  const pathRef  = React.useRef(null);
  const [pathLen, setPathLen] = React.useState(2400);
  const progress = useScrollProgress(blockRef);

  React.useLayoutEffect(() => {
    if (pathRef.current) {
      const l = pathRef.current.getTotalLength();
      if (l && Number.isFinite(l)) setPathLen(l);
    }
  }, [geometry, stops]);

  const W = 1240, H = 740;
  const d = buildPath(stops, geometry);
  const stopProg = cumulativeStopProgress(stops);
  const stroke = trackStroke(colorMode);

  // Ghost line — a faded second route in the background, for depth.
  const ghostD = "M 40 690 C 220 690, 280 200, 500 200 S 880 580, 1200 110";
  const ghostStops = [
    {x: 60,   y: 700},
    {x: 320,  y: 380},
    {x: 660,  y: 220},
    {x: 980,  y: 380},
    {x: 1180, y: 130},
  ];

  return (
    <div className="block" ref={blockRef}>
      {showMeta && <BlockMeta name="stops / journey" variant="metro-map · scroll-driven fill · 7 stops"/>}

      <div style={{
        padding: '88px 56px 40px',
        maxWidth: 1240,
        margin: '0 auto',
        textAlign: 'center',
      }}>
        {eyebrow && <div className="eyebrow" style={{marginBottom: 14}}>{eyebrow}</div>}
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 56, lineHeight: 1.04,
          letterSpacing: '-0.025em',
          fontWeight: 800,
          margin: '0 auto 20px',
          maxWidth: 880,
        }}>{title}</h2>
        {intro && <p style={{
          fontSize: 18,
          color: 'var(--gray-600)',
          lineHeight: 1.55,
          maxWidth: 640,
          margin: '0 auto',
        }}>{intro}</p>}
      </div>

      <div style={{
        position: 'relative',
        width: '100%',
        height: H,
        marginBottom: 80,
      }}>
        <svg
          viewBox={`0 0 ${W} ${H}`}
          preserveAspectRatio="xMidYMid meet"
          width="100%"
          height="100%"
          style={{display: 'block', overflow: 'visible'}}
        >
          <StopsDefs W={W} H={H} gradId="stops-grad" gridId="stops-grid"/>

          {decoration === 'grid' && (
            <rect x="0" y="0" width={W} height={H} fill="url(#stops-grid)"/>
          )}

          {decoration === 'ghost' && (
            <g opacity="0.22" style={{pointerEvents: 'none'}}>
              <path d={ghostD} fill="none" stroke="#4B5468"
                    strokeWidth="5" strokeDasharray="2 11" strokeLinecap="round"/>
              {ghostStops.map((p, i) => (
                <g key={i}>
                  <circle cx={p.x} cy={p.y} r="10" fill="#FFFFFF"/>
                  <circle cx={p.x} cy={p.y} r="7"  fill="none" stroke="#4B5468" strokeWidth="2"/>
                </g>
              ))}
            </g>
          )}

          {/* Track — faded base layer always visible */}
          <path d={d} fill="none"
                stroke="#E5E7EC"
                strokeWidth="14"
                strokeLinejoin={geometry === 'angled' ? 'miter' : 'round'}
                strokeLinecap ={geometry === 'angled' ? 'square' : 'round'}/>

          {/* Track — filled portion driven by scroll progress */}
          <path ref={pathRef} d={d} fill="none"
                stroke={stroke}
                strokeWidth="14"
                strokeLinejoin={geometry === 'angled' ? 'miter' : 'round'}
                strokeLinecap ={geometry === 'angled' ? 'square' : 'round'}
                style={{
                  strokeDasharray:  pathLen,
                  strokeDashoffset: pathLen * (1 - progress),
                  transition: 'stroke-dashoffset 0.12s linear',
                }}/>

          {/* Stop markers — white-fill ring, lights up when track reaches them */}
          {stops.map((s, i) => {
            if (s.via) return null;
            const active = progress >= stopProg[i] - 0.001;
            const c = stopColor(colorMode, i);
            return (
              <g key={`m-${i}`}>
                <circle cx={s.x} cy={s.y} r="17" fill="white"
                        stroke={active ? c : '#C9CFD7'}
                        strokeWidth="6"
                        style={{transition: 'stroke 0.3s ease'}}/>
              </g>
            );
          })}

          {/* Labels — short title + 1-2 line description */}
          {stops.map((s, i) => {
            if (s.via) return null;
            const labelW = 240, labelH = 92;
            let x, y, textAlign = 'center';
            switch (s.side) {
              case 'top':
                x = s.x - labelW / 2;
                y = s.y - labelH - 32;
                break;
              case 'bot':
                x = s.x - labelW / 2;
                y = s.y + 32;
                break;
              case 'tr':
                x = s.x + 22;
                y = s.y - labelH - 4;
                textAlign = 'left';
                break;
              case 'tl':
                x = s.x - labelW - 22;
                y = s.y - labelH - 4;
                textAlign = 'right';
                break;
              case 'br':
                x = s.x + 22;
                y = s.y + 4;
                textAlign = 'left';
                break;
              case 'l':
                x = s.x - labelW - 22;
                y = s.y - labelH / 2;
                textAlign = 'right';
                break;
              case 'r':
                x = s.x + 22;
                y = s.y - labelH / 2;
                textAlign = 'left';
                break;
              case 'bl':
                x = s.x - labelW - 22;
                y = s.y + 4;
                textAlign = 'right';
                break;
              default:
                x = s.x - labelW / 2;
                y = s.y + 32;
            }
            x = Math.max(8, Math.min(W - labelW - 8, x));
            const active = progress >= stopProg[i] - 0.001;
            return (
              <foreignObject key={`l-${i}`} x={x} y={y} width={labelW} height={labelH}>
                <div xmlns="http://www.w3.org/1999/xhtml" style={{
                  fontFamily: 'var(--font-body)',
                  textAlign,
                  opacity: active ? 1 : 0.55,
                  transition: 'opacity 0.3s ease',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 18,
                    fontWeight: 700,
                    letterSpacing: '-0.005em',
                    marginBottom: 6,
                    color: 'var(--gray-900)',
                  }}>{s.title}</div>
                  <div style={{
                    fontSize: 13.5,
                    color: 'var(--gray-600)',
                    lineHeight: 1.45,
                  }}>{s.body}</div>
                </div>
              </foreignObject>
            );
          })}
        </svg>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mobile — vertical zig-zag, alternating columns
// ─────────────────────────────────────────────────────────────
function MStopsBlock({
  showMeta = true,
  eyebrow = "So funktionierts",
  title = "Sieben Halte. Eine Gruppenreise.",
  intro = "Vom ersten Klick bis zur Heimfahrt — beim Scrollen zeichnet sich die Strecke nach.",
  stops = STOPS_MOBILE_DEFAULT,
}) {
  useTweakTick();
  const {geometry, colorMode, decoration} = readTweaks();

  const blockRef = React.useRef(null);
  const pathRef  = React.useRef(null);
  const [pathLen, setPathLen] = React.useState(2400);
  const progress = useScrollProgress(blockRef);

  React.useLayoutEffect(() => {
    if (pathRef.current) {
      const l = pathRef.current.getTotalLength();
      if (l && Number.isFinite(l)) setPathLen(l);
    }
  }, [geometry, stops]);

  const W = 390;
  const H = (stops[stops.length - 1]?.y || 1000) + 120;
  const d = buildPath(stops, geometry);
  const stopProg = cumulativeStopProgress(stops);
  const stroke = trackStroke(colorMode);

  // Mobile ghost line — simple vertical S-curve in the background
  const ghostD = "M 40 60 C 200 220, 200 400, 60 560 S 200 880, 60 1160";

  return (
    <div className="block" ref={blockRef}>
      {showMeta && <BlockMeta name="stops / journey · mobile" variant="metro-map · 7 stops"/>}

      <div style={{padding: '48px 28px 24px'}}>
        {eyebrow && <div className="eyebrow" style={{marginBottom: 10, fontSize: 11}}>{eyebrow}</div>}
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 32, lineHeight: 1.08,
          letterSpacing: '-0.02em',
          fontWeight: 800,
          margin: '0 0 12px',
        }}>{title}</h2>
        {intro && <p style={{
          fontSize: 15,
          color: 'var(--gray-600)',
          lineHeight: 1.5,
          margin: 0,
        }}>{intro}</p>}
      </div>

      <div style={{position: 'relative', width: '100%', height: H, marginBottom: 32}}>
        <svg
          viewBox={`0 0 ${W} ${H}`}
          preserveAspectRatio="xMidYMid meet"
          width="100%"
          height="100%"
          style={{display: 'block', overflow: 'visible'}}
        >
          <StopsDefs W={W} H={H} gradId="m-stops-grad" gridId="m-stops-grid"/>

          {decoration === 'grid' && (
            <rect x="0" y="0" width={W} height={H} fill="url(#m-stops-grid)"/>
          )}
          {decoration === 'ghost' && (
            <g opacity="0.20" style={{pointerEvents: 'none'}}>
              <path d={ghostD} fill="none" stroke="#4B5468"
                    strokeWidth="4" strokeDasharray="2 10" strokeLinecap="round"/>
            </g>
          )}

          {/* Replace gradient ref for mobile in stroke */}
          <path d={d} fill="none"
                stroke="#E5E7EC"
                strokeWidth="11"
                strokeLinejoin={geometry === 'angled' ? 'miter' : 'round'}
                strokeLinecap ={geometry === 'angled' ? 'square' : 'round'}/>

          <path ref={pathRef} d={d} fill="none"
                stroke={colorMode === 'multi' ? 'url(#m-stops-grad)' : stroke}
                strokeWidth="11"
                strokeLinejoin={geometry === 'angled' ? 'miter' : 'round'}
                strokeLinecap ={geometry === 'angled' ? 'square' : 'round'}
                style={{
                  strokeDasharray:  pathLen,
                  strokeDashoffset: pathLen * (1 - progress),
                  transition: 'stroke-dashoffset 0.12s linear',
                }}/>

          {stops.map((s, i) => {
            if (s.via) return null;
            const active = progress >= stopProg[i] - 0.001;
            const c = stopColor(colorMode, i);
            return (
              <circle key={`m-${i}`} cx={s.x} cy={s.y} r="14" fill="white"
                      stroke={active ? c : '#C9CFD7'}
                      strokeWidth="5"
                      style={{transition: 'stroke 0.3s ease'}}/>
            );
          })}

          {/* Labels — text on the OPPOSITE side of the stop dot */}
          {stops.map((s, i) => {
            if (s.via) return null;
            // Dot on right (x ≈ 295) → text on left side of viewBox
            // Dot on left  (x ≈ 95)  → text on right side
            const dotRight = s.x > W / 2;
            const labelW = 190;
            const labelH = 88;
            const x = dotRight ? 18 : W - labelW - 18;
            const y = s.y - labelH / 2;
            const active = progress >= stopProg[i] - 0.001;
            return (
              <foreignObject key={`l-${i}`} x={x} y={y} width={labelW} height={labelH}>
                <div xmlns="http://www.w3.org/1999/xhtml" style={{
                  fontFamily: 'var(--font-body)',
                  textAlign: dotRight ? 'right' : 'left',
                  opacity: active ? 1 : 0.55,
                  transition: 'opacity 0.3s ease',
                  padding: '4px 4px',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 15,
                    fontWeight: 700,
                    letterSpacing: '-0.005em',
                    marginBottom: 4,
                    color: 'var(--gray-900)',
                  }}>{s.title}</div>
                  <div style={{
                    fontSize: 12,
                    color: 'var(--gray-600)',
                    lineHeight: 1.4,
                  }}>{s.body}</div>
                </div>
              </foreignObject>
            );
          })}
        </svg>
      </div>
    </div>
  );
}

Object.assign(window, {
  StopsBlock, MStopsBlock,
  STOPS_DEFAULT, STOPS_MOBILE_DEFAULT, STOPS_MULTI_COLORS,
});