// StopExtras — generative SVG thumbnail per stop + Open-Meteo 3-day forecast.
// Both render inside StopCard. Self-contained: no extra deps, no API keys.

(function () {
  const { useEffect, useState, useMemo, useRef } = React;

  // ---------- Generative SVG thumbnail ---------------------------------------
  // A small, branded ridge silhouette built from the stop's id (deterministic
  // randomness) and tinted by elevation. Not a photo — a tasteful placeholder
  // that holds layout and looks intentional. `stop.photo` overrides if set.

  function hashStr(s) {
    let h = 2166136261 >>> 0;
    for (let i = 0; i < s.length; i++) {
      h ^= s.charCodeAt(i);
      h = Math.imul(h, 16777619);
    }
    return h >>> 0;
  }
  function mulberry32(a) {
    return function () {
      let t = (a += 0x6d2b79f5);
      t = Math.imul(t ^ (t >>> 15), t | 1);
      t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
  }

  function altitudeBand(altStr) {
    const m = parseInt(String(altStr || '').replace(/[^0-9]/g, ''), 10) || 0;
    if (m < 2000) return 'foothills';
    if (m < 3500) return 'forest';
    if (m < 4500) return 'alpine';
    return 'snowline';
  }

  // ---------- Wikipedia thumbnail ---------------------------------------------
  // Free, CC-licensed images via Wikimedia REST API. We map each stop to a
  // best-guess Wikipedia article title (falls back to the stop name).
  // The endpoint returns a thumbnail URL we can drop into a background-image.
  // Lazy: only called by StopThumb when it actually mounts.

  const wikiTitleMap = {
    ktm:   'Kathmandu',
    lukla: 'Lukla',
    phak:  'Phakding',
    nb:    'Namche_Bazaar',
    tng:   'Tengboche',
    din:   'Dingboche',
    lob:   'Lobuche',
    gor:   'Gorak_Shep',
    ebc:   'Everest_Base_Camp',
    kp:    'Kala_Patthar',
    pkr:   'Pokhara',
    ghd:   'Ghandruk',
    chh:   'Chhomrong',
    him:   'Annapurna_Sanctuary',
    mbc:   'Machhapuchhre',
    abc:   'Annapurna_Sanctuary',
    syb:   'Syabrubesi',
    lam:   'Langtang_National_Park',
    lan:   'Langtang',
    kya:   'Kyanjin_Gompa',
    tsg:   'Langtang_Lirung',
  };

  const wikiCache = new Map();

  function fetchWikiImage(title) {
    if (wikiCache.has(title)) return wikiCache.get(title);
    const url = 'https://en.wikipedia.org/api/rest_v1/page/summary/' + encodeURIComponent(title);
    const p = fetch(url, { headers: { 'Accept': 'application/json' } })
      .then(function (r) { return r.ok ? r.json() : Promise.reject(new Error('no')); })
      .then(function (j) {
        // Prefer `originalimage` for sharper, then `thumbnail`. Both Wikipedia
        // image fields are licensed for reuse with attribution.
        const img =
          (j.originalimage && j.originalimage.source) ||
          (j.thumbnail && j.thumbnail.source);
        if (!img) throw new Error('no image');
        return { url: img, title: j.title || title };
      })
      .catch(function (e) { wikiCache.delete(title); throw e; });
    wikiCache.set(title, p);
    return p;
  }

  function useWikiImage(stop) {
    const [state, setState] = useState({ status: 'loading', url: null, title: null });
    const reqIdRef = useRef(0);
    useEffect(function () {
      const id = ++reqIdRef.current;
      const title = wikiTitleMap[stop.id] || stop.name.replace(/\s+/g, '_');
      setState({ status: 'loading', url: null, title: null });
      fetchWikiImage(title)
        .then(function (data) {
          if (reqIdRef.current === id) setState({ status: 'ok', url: data.url, title: data.title });
        })
        .catch(function () {
          if (reqIdRef.current === id) setState({ status: 'error', url: null, title: null });
        });
    }, [stop.id]);
    return state;
  }

  function StopThumb({ stop, height = 150 }) {
    // Wikipedia image, if available — falls back to generative SVG ridge.
    const wp = useWikiImage(stop);

    if (stop.photo || (wp && wp.status === 'ok' && wp.url)) {
      const url = stop.photo || wp.url;
      const credit = stop.photo ? null : (wp && wp.title);
      return React.createElement('div', {
        style: {
          height,
          backgroundImage: `url(${url})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          border: '1px solid #D9CFB3',
          position: 'relative',
        },
      },
        React.createElement('div', {
          style: {
            position: 'absolute', left: 10, bottom: 10,
            background: 'rgba(243,240,225,0.92)',
            padding: '3px 7px',
            fontFamily: '"Courier New", monospace',
            fontSize: 10, color: '#2E2822', letterSpacing: 0.4,
            textTransform: 'uppercase',
          },
        }, stop.img || stop.name),
        credit ? React.createElement('a', {
          href: 'https://en.wikipedia.org/wiki/' + encodeURIComponent(credit),
          target: '_blank',
          rel: 'noopener noreferrer',
          style: {
            position: 'absolute', right: 8, bottom: 8,
            background: 'rgba(46,40,34,0.7)', color: '#F3F0E1',
            padding: '2px 6px', fontFamily: 'Arial', fontSize: 9,
            letterSpacing: 0.4, textDecoration: 'none', textTransform: 'uppercase',
          },
        }, 'Wikipedia') : null
      );
    }

    const seed = hashStr(stop.id + stop.name);
    const rng = mulberry32(seed);
    const band = altitudeBand(stop.alt);

    // Three ridges, back-to-front, each a polyline across the canvas.
    const W = 600, H = 240;
    function ridge(seedOffset, ampMin, ampMax, baseY, color) {
      const r = mulberry32(seed + seedOffset);
      const points = [];
      const samples = 14;
      for (let i = 0; i <= samples; i++) {
        const x = (i / samples) * W;
        const amp = ampMin + r() * (ampMax - ampMin);
        const phase = r() * 6.28;
        const y = baseY - Math.abs(Math.sin(i * 0.7 + phase)) * amp;
        points.push([x, y]);
      }
      let d = `M 0 ${H} L ${points[0][0]} ${points[0][1]}`;
      for (let i = 1; i < points.length; i++) {
        const [x, y] = points[i];
        const [px, py] = points[i - 1];
        const cx = (x + px) / 2;
        d += ` Q ${px} ${py} ${cx} ${(y + py) / 2}`;
      }
      d += ` L ${W} ${points[points.length - 1][1]} L ${W} ${H} Z`;
      return React.createElement('path', { d, fill: color });
    }

    // Sky gradient by altitude band
    const skyTop = band === 'snowline' ? '#D8C9B5' : band === 'alpine' ? '#E8DCC2' : band === 'forest' ? '#EFE5CB' : '#F2EAD3';
    const skyBot = '#F8F2DE';
    const ridgeBack  = band === 'snowline' ? '#B8A88E' : '#A8957A';
    const ridgeMid   = band === 'snowline' ? '#8C7B66' : '#7A6A5A';
    const ridgeFront = '#3E342B';

    // Snow-cap on the highest ridge for snowline
    const snowOverlay = band === 'snowline' || band === 'alpine'
      ? React.createElement('path', {
          d: `M 0 ${H * 0.45} Q ${W * 0.25} ${H * 0.30} ${W * 0.5} ${H * 0.40} T ${W} ${H * 0.42} L ${W} ${H * 0.55} Q ${W * 0.75} ${H * 0.52} ${W * 0.5} ${H * 0.55} T 0 ${H * 0.58} Z`,
          fill: '#F4EEDB', opacity: 0.85,
        })
      : null;

    // Optional sun/moon orb
    const orbX = W * (0.25 + rng() * 0.5);
    const orbY = H * (0.25 + rng() * 0.15);
    const orb = React.createElement('circle', {
      cx: orbX, cy: orbY, r: 18,
      fill: band === 'snowline' ? '#F2EAD3' : '#E8A07A',
      opacity: 0.55,
    });

    // Trail dashes — a horizontal "you are here" indicator
    const trail = React.createElement('g', null,
      ...Array.from({ length: 8 }, function (_, i) {
        return React.createElement('rect', {
          key: i,
          x: 30 + i * 20, y: H - 18,
          width: 12, height: 1.5,
          fill: '#C05A2A',
        });
      })
    );

    const labelKind = stop.kind === 'flight' ? 'Flight' :
      stop.kind === 'peak' ? 'Summit' :
      stop.kind === 'camp' ? 'High camp' :
      stop.kind === 'start' ? 'Departure' :
      stop.kind === 'end' ? 'Arrival' :
      'Walk';

    return React.createElement('div', {
      style: {
        height, border: '1px solid #D9CFB3', position: 'relative',
        background: '#F3F0E1', overflow: 'hidden',
      },
    },
      React.createElement('svg', {
        viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: 'xMidYMid slice',
        style: { width: '100%', height: '100%', display: 'block' },
      },
        React.createElement('defs', null,
          React.createElement('linearGradient', { id: `sky-${stop.id}-${seed}`, x1: 0, y1: 0, x2: 0, y2: 1 },
            React.createElement('stop', { offset: '0%',  stopColor: skyTop }),
            React.createElement('stop', { offset: '100%', stopColor: skyBot })
          )
        ),
        React.createElement('rect', { width: W, height: H, fill: `url(#sky-${stop.id}-${seed})` }),
        orb,
        ridge(101, 50, 80, H * 0.65, ridgeBack),
        ridge(202, 70, 110, H * 0.78, ridgeMid),
        snowOverlay,
        ridge(303, 30, 60, H * 0.92, ridgeFront),
        trail
      ),
      // Caption ribbon
      React.createElement('div', {
        style: {
          position: 'absolute', left: 10, bottom: 10,
          background: 'rgba(243,240,225,0.92)',
          padding: '3px 7px',
          fontFamily: '"Courier New", monospace',
          fontSize: 10, color: '#2E2822', letterSpacing: 0.4,
          textTransform: 'uppercase',
        },
      }, stop.img || stop.name),
      React.createElement('div', {
        style: {
          position: 'absolute', top: 8, right: 10,
          fontFamily: 'Arial', fontSize: 9, fontWeight: 700,
          letterSpacing: 1.4, color: '#7A6A5A', textTransform: 'uppercase',
        },
      }, labelKind)
    );
  }

  // ---------- Open-Meteo 3-day forecast --------------------------------------

  const weatherCache = new Map();

  function fetchForecast(lat, lng) {
    const key = `${lat.toFixed(3)},${lng.toFixed(3)}`;
    if (weatherCache.has(key)) return weatherCache.get(key);
    const url =
      'https://api.open-meteo.com/v1/forecast' +
      `?latitude=${lat}&longitude=${lng}` +
      '&daily=temperature_2m_max,temperature_2m_min,weathercode,precipitation_probability_max,wind_speed_10m_max' +
      '&forecast_days=3&timezone=Asia%2FKathmandu';
    const p = fetch(url)
      .then(function (r) { return r.json(); })
      .then(function (j) {
        if (!j || !j.daily) throw new Error('bad payload');
        return j.daily;
      })
      .catch(function (e) {
        weatherCache.delete(key);
        throw e;
      });
    weatherCache.set(key, p);
    return p;
  }

  function useForecast(lat, lng) {
    const [state, setState] = useState({ status: 'loading', data: null });
    const reqIdRef = useRef(0);
    useEffect(function () {
      if (lat == null || lng == null) return;
      const id = ++reqIdRef.current;
      setState({ status: 'loading', data: null });
      fetchForecast(lat, lng)
        .then(function (data) {
          if (reqIdRef.current === id) setState({ status: 'ok', data: data });
        })
        .catch(function () {
          if (reqIdRef.current === id) setState({ status: 'error', data: null });
        });
    }, [lat, lng]);
    return state;
  }

  // WMO weather code → glyph + label
  function describeCode(code) {
    if (code === 0) return { glyph: 'sun',     label: 'Clear' };
    if (code <= 2)  return { glyph: 'partly',  label: 'Mostly clear' };
    if (code === 3) return { glyph: 'cloud',   label: 'Overcast' };
    if (code <= 48) return { glyph: 'fog',     label: 'Fog' };
    if (code <= 57) return { glyph: 'drizzle', label: 'Drizzle' };
    if (code <= 67) return { glyph: 'rain',    label: 'Rain' };
    if (code <= 77) return { glyph: 'snow',    label: 'Snow' };
    if (code <= 82) return { glyph: 'rain',    label: 'Showers' };
    if (code <= 86) return { glyph: 'snow',    label: 'Snow showers' };
    if (code <= 99) return { glyph: 'storm',   label: 'Thunderstorm' };
    return { glyph: 'cloud', label: '—' };
  }

  function WeatherGlyph(props) {
    const g = props.glyph;
    const s = props.size || 22;
    const stroke = '#2E2822';
    const accent = '#C05A2A';
    const sw = 1.4;
    const common = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
    if (g === 'sun')
      return React.createElement('svg', common,
        React.createElement('circle', { cx: 12, cy: 12, r: 4, stroke: accent }),
        ...[0, 45, 90, 135, 180, 225, 270, 315].map(function (deg, i) {
          const rad = (deg * Math.PI) / 180;
          const x1 = 12 + Math.cos(rad) * 7, y1 = 12 + Math.sin(rad) * 7;
          const x2 = 12 + Math.cos(rad) * 9.5, y2 = 12 + Math.sin(rad) * 9.5;
          return React.createElement('line', { key: i, x1: x1, y1: y1, x2: x2, y2: y2, stroke: accent });
        })
      );
    if (g === 'partly')
      return React.createElement('svg', common,
        React.createElement('circle', { cx: 9, cy: 9, r: 3.2, stroke: accent }),
        React.createElement('path', { d: 'M 7 16 a 4 4 0 0 1 4 -4 h 5 a 3 3 0 0 1 0 6 h -8 a 1.6 1.6 0 0 1 -1 -2 z' })
      );
    if (g === 'cloud')
      return React.createElement('svg', common,
        React.createElement('path', { d: 'M 6 16 a 4 4 0 0 1 4 -4 h 5 a 3 3 0 0 1 0 6 h -8 a 1.6 1.6 0 0 1 -1 -2 z' })
      );
    if (g === 'fog')
      return React.createElement('svg', common,
        React.createElement('line', { x1: 4, y1: 9,  x2: 20, y2: 9 }),
        React.createElement('line', { x1: 5, y1: 13, x2: 19, y2: 13 }),
        React.createElement('line', { x1: 4, y1: 17, x2: 20, y2: 17 })
      );
    if (g === 'drizzle' || g === 'rain')
      return React.createElement('svg', common,
        React.createElement('path', { d: 'M 6 13 a 4 4 0 0 1 4 -4 h 5 a 3 3 0 0 1 0 6 h -8 a 1.6 1.6 0 0 1 -1 -2 z' }),
        React.createElement('line', { x1: 9,  y1: 17, x2: 8,  y2: 21, stroke: accent }),
        React.createElement('line', { x1: 13, y1: 17, x2: 12, y2: 21, stroke: accent }),
        React.createElement('line', { x1: 17, y1: 17, x2: 16, y2: 21, stroke: accent })
      );
    if (g === 'snow')
      return React.createElement('svg', common,
        React.createElement('path', { d: 'M 6 13 a 4 4 0 0 1 4 -4 h 5 a 3 3 0 0 1 0 6 h -8 a 1.6 1.6 0 0 1 -1 -2 z' }),
        React.createElement('text', { x: 9,  y: 21, fill: accent, stroke: 'none', fontSize: 6, fontFamily: 'Arial' }, '✻'),
        React.createElement('text', { x: 13, y: 21, fill: accent, stroke: 'none', fontSize: 6, fontFamily: 'Arial' }, '✻'),
        React.createElement('text', { x: 17, y: 21, fill: accent, stroke: 'none', fontSize: 6, fontFamily: 'Arial' }, '✻')
      );
    if (g === 'storm')
      return React.createElement('svg', common,
        React.createElement('path', { d: 'M 6 13 a 4 4 0 0 1 4 -4 h 5 a 3 3 0 0 1 0 6 h -8 a 1.6 1.6 0 0 1 -1 -2 z' }),
        React.createElement('path', { d: 'M 12 15 L 10 19 L 13 19 L 11 23', stroke: accent })
      );
    return React.createElement('svg', common, React.createElement('circle', { cx: 12, cy: 12, r: 4 }));
  }

  function dayLabel(iso, idx) {
    if (idx === 0) return 'Today';
    if (idx === 1) return 'Tomorrow';
    try {
      const d = new Date(iso);
      return d.toLocaleDateString('en-US', { weekday: 'short' });
    } catch (e) { return ''; }
  }

  function WeatherStrip(props) {
    const stop = props.stop;
    const fc = useForecast(stop.lat, stop.lng);

    const header = React.createElement('div', {
      style: {
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginTop: 14, marginBottom: 6,
      },
    },
      React.createElement('div', {
        style: {
          fontFamily: 'Arial', fontSize: 9, letterSpacing: 1.5, color: '#7A6A5A',
          fontWeight: 700, textTransform: 'uppercase',
        },
      }, '3-day forecast'),
      React.createElement('div', {
        style: {
          fontFamily: '"Courier New", monospace', fontSize: 9, color: '#7A6A5A',
        },
      }, fc.status === 'ok' ? 'open-meteo · live' : fc.status === 'loading' ? 'loading…' : 'offline')
    );

    if (fc.status !== 'ok') {
      return React.createElement('div', null,
        header,
        React.createElement('div', {
          style: {
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6,
          },
        },
          ...[0, 1, 2].map(function (i) {
            return React.createElement('div', {
              key: i,
              style: {
                border: '1px solid #E8DFC4', padding: '8px 10px',
                background: '#FAF8F3', height: 84,
              },
            });
          })
        )
      );
    }

    const d = fc.data;
    const days = [0, 1, 2].map(function (i) {
      return {
        date: d.time && d.time[i],
        max: Math.round(d.temperature_2m_max[i]),
        min: Math.round(d.temperature_2m_min[i]),
        code: d.weathercode[i],
        pop: d.precipitation_probability_max ? d.precipitation_probability_max[i] : null,
        wind: d.wind_speed_10m_max ? Math.round(d.wind_speed_10m_max[i]) : null,
      };
    });

    return React.createElement('div', null,
      header,
      React.createElement('div', {
        style: {
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6,
        },
      },
        ...days.map(function (day, i) {
          const desc = describeCode(day.code);
          return React.createElement('div', {
            key: i,
            style: {
              border: '1px solid #E8DFC4', padding: '8px 10px',
              background: i === 0 ? '#F0EBE0' : '#FAF8F3',
              display: 'flex', flexDirection: 'column', gap: 4,
            },
          },
            React.createElement('div', {
              style: {
                fontFamily: 'Arial', fontSize: 9, letterSpacing: 1.2,
                color: '#7A6A5A', fontWeight: 700, textTransform: 'uppercase',
              },
            }, dayLabel(day.date, i)),
            React.createElement('div', {
              style: { display: 'flex', alignItems: 'center', gap: 8 },
            },
              React.createElement(WeatherGlyph, { glyph: desc.glyph, size: 22 }),
              React.createElement('div', {
                style: {
                  fontFamily: 'Arial', fontWeight: 700, fontSize: 16,
                  color: '#2E2822',
                },
              }, day.max + '°'),
              React.createElement('div', {
                style: {
                  fontFamily: 'Arial', fontSize: 11, color: '#7A6A5A',
                },
              }, day.min + '°')
            ),
            React.createElement('div', {
              style: {
                fontFamily: 'Arial', fontSize: 9.5, color: '#7A6A5A',
                lineHeight: 1.3,
              },
            },
              desc.label,
              day.pop != null ? React.createElement('span', { style: { color: '#C05A2A', marginLeft: 6 } },
                '· ' + day.pop + '% rain'
              ) : null
            )
          );
        })
      )
    );
  }

  // ---------- AMS altitude badge ---------------------------------------------
  // Acute Mountain Sickness risk by sleeping altitude. Thresholds informed by
  // the Lake Louise consensus — guidance, not medical advice.

  function altitudeMeters(altStr) {
    return parseInt(String(altStr || '').replace(/[^0-9]/g, ''), 10) || 0;
  }

  function amsLevel(meters) {
    if (meters < 2500) return { tier: 0, label: 'Low risk',     note: 'Below altitude threshold.' };
    if (meters < 3500) return { tier: 1, label: 'Mild caution', note: 'Drink water; sleep low if symptoms appear.' };
    if (meters < 4500) return { tier: 2, label: 'Acclimatize',  note: 'Plan a rest day; ascend ≤ 500m / day.' };
    if (meters < 5300) return { tier: 3, label: 'High caution', note: 'Diamox advised; descend on any moderate symptom.' };
    return                   { tier: 4, label: 'Oxygen zone',   note: 'Limit time at altitude; no sleep above 5400m.' };
  }

  function AmsBadge(props) {
    const m = altitudeMeters(props.alt);
    const lvl = amsLevel(m);
    const colors = ['#3A7D44', '#7A9A4F', '#C8A23A', '#C76A2A', '#8B2A1A'];
    const fg = colors[lvl.tier];
    return React.createElement('div', {
      title: lvl.note,
      style: {
        display: 'inline-flex', alignItems: 'center', gap: 6,
        border: '1px solid ' + fg, background: '#FAF8F3',
        padding: '3px 7px',
        fontFamily: 'Arial', fontSize: 9, letterSpacing: 1.2,
        color: fg, fontWeight: 700, textTransform: 'uppercase',
      },
    },
      // 5-bar level indicator
      React.createElement('span', {
        style: { display: 'inline-flex', gap: 1.5, alignItems: 'flex-end' },
      },
        ...[0, 1, 2, 3, 4].map(function (i) {
          return React.createElement('span', {
            key: i,
            style: {
              width: 2.5, height: 4 + i * 1.5,
              background: i <= lvl.tier ? fg : '#E8DFC4',
            },
          });
        })
      ),
      lvl.label
    );
  }

  // ---------- Elevation profile ----------------------------------------------
  // Sparkline of stop altitudes across the trek, with the active stop dot.

  function ElevationProfile(props) {
    const trek = props.trek;
    const activeIndex = props.activeIndex;
    const W = 360, H = 80, padX = 10, padY = 10;
    const meters = trek.stops.map(function (s) { return altitudeMeters(s.alt); });
    const minM = Math.min.apply(null, meters);
    const maxM = Math.max.apply(null, meters);
    const range = Math.max(1, maxM - minM);

    function xAt(i) { return padX + (i / Math.max(1, meters.length - 1)) * (W - padX * 2); }
    function yAt(m) { return H - padY - ((m - minM) / range) * (H - padY * 2); }

    let d = '';
    meters.forEach(function (m, i) {
      d += (i === 0 ? 'M' : ' L') + ' ' + xAt(i).toFixed(1) + ' ' + yAt(m).toFixed(1);
    });
    const fillD = d + ' L ' + xAt(meters.length - 1).toFixed(1) + ' ' + (H - padY) + ' L ' + xAt(0).toFixed(1) + ' ' + (H - padY) + ' Z';

    return React.createElement('div', {
      style: { border: '1px solid #E8DFC4', background: '#FAF8F3', padding: 0 },
    },
      React.createElement('svg', {
        viewBox: '0 0 ' + W + ' ' + H, width: '100%', height: H,
        style: { display: 'block' },
      },
        // soft ridge fill
        React.createElement('path', { d: fillD, fill: '#E8DFC4', opacity: 0.7 }),
        // ridge line
        React.createElement('path', { d: d, fill: 'none', stroke: '#5E1B14', strokeWidth: 1.5, strokeLinejoin: 'round' }),
        // markers
        ...meters.map(function (m, i) {
          const isActive = i === activeIndex;
          return React.createElement('circle', {
            key: i, cx: xAt(i), cy: yAt(m),
            r: isActive ? 4 : 2.2,
            fill: isActive ? '#C05A2A' : '#5E1B14',
            stroke: isActive ? '#FFF' : 'none',
            strokeWidth: isActive ? 1.5 : 0,
          });
        }),
        // min/max labels
        React.createElement('text', {
          x: xAt(meters.indexOf(minM)), y: yAt(minM) + 12,
          textAnchor: 'middle', fontFamily: 'Arial', fontSize: 8,
          fill: '#7A6A5A',
        }, minM.toLocaleString() + 'm'),
        React.createElement('text', {
          x: xAt(meters.indexOf(maxM)), y: yAt(maxM) - 5,
          textAnchor: 'middle', fontFamily: 'Arial', fontSize: 8.5,
          fill: '#5E1B14', fontWeight: 700,
        }, maxM.toLocaleString() + 'm')
      )
    );
  }

  window.LumoraExtras = { StopThumb: StopThumb, WeatherStrip: WeatherStrip, AmsBadge: AmsBadge, ElevationProfile: ElevationProfile };
})();