/*
  Hero Route Visualization — v3.
  Bigger, bolder, switchable. Three distinct route options with their own tradeoffs.
  Keeps the Spain-map aesthetic + animated truck + waypoint activation.
*/

// NOTE on positioning:
//  - `cityAt`    : 0..1 parametric position on the compound path where each city node sits
//                  (the code snaps the city node to this exact point on the path)
//  - `wp.at`     : parametric position where the waypoint dot sits (also snapped to path)
//  - `rx, ry`    : top-left of the callout rectangle (hand-positioned for clarity)
// Leader line goes from the snapped dot to the nearest corner of the callout rect.
const ROUTES = [
  {
    id: "profit",
    label: "Max profit",
    subtitle: "Balanced loop, four loads",
    badge: "€2,840",
    stats: { km: 1317, legs: 4, hours: 21, profit: 2840, eur_per_km: 2.16 },
    compound: "M 492 332 Q 396 300, 320 268 Q 352 228, 398 196 Q 466 202, 540 222 Q 524 284, 492 332",
    cities: [
      { code:"VLC", name:"Valencia",  meta:"BASE · 01",        cityAt:0.00, align:"start", base:true },
      { code:"MAD", name:"Madrid",    meta:"02 · 22T PALLET",  cityAt:0.25, align:"end" },
      { code:"ZGZ", name:"Zaragoza",  meta:"03 · 18T BOX",     cityAt:0.50, align:"top" },
      { code:"BCN", name:"Barcelona", meta:"04 · 24T REEFER",  cityAt:0.75, align:"start" },
    ],
    waypoints: [
      { kind:"REST", at:0.12, rx:296, ry:348, w:140, h:38, l1:"REST · 45 MIN", l2:"EU 561/2006" },
      { kind:"FUEL", at:0.35, rx:180, ry:210, w:148, h:38, l1:"FUEL · €1.42/L", l2:"A-2 · 320 L" },
      { kind:"TOLL", at:0.60, rx:448, ry:128, w:140, h:38, l1:"TOLL · AP-2",     l2:"€47.10" },
    ],
    callout: "BACK BY FRI 19:00 · +€2,840 NET",
  },
  {
    id: "fast",
    label: "Fastest home",
    subtitle: "Quick triangle, three loads",
    badge: "14h",
    stats: { km: 918, legs: 3, hours: 14, profit: 1920, eur_per_km: 2.09 },
    compound: "M 492 332 Q 568 280, 540 222 Q 468 206, 398 196 Q 438 268, 492 332",
    cities: [
      { code:"VLC", name:"Valencia",  meta:"BASE · 01",        cityAt:0.00, align:"start", base:true },
      { code:"BCN", name:"Barcelona", meta:"02 · 24T REEFER",  cityAt:0.333, align:"start" },
      { code:"ZGZ", name:"Zaragoza",  meta:"03 · 18T BOX",     cityAt:0.667, align:"top" },
    ],
    waypoints: [
      { kind:"TOLL", at:0.18, rx:594, ry:260, w:108, h:38, l1:"TOLL · AP-7",     l2:"€31.40" },
      { kind:"REST", at:0.52, rx:456, ry:112, w:140, h:38, l1:"REST · 45 MIN",  l2:"EU 561/2006" },
      { kind:"FUEL", at:0.82, rx:282, ry:308, w:148, h:38, l1:"FUEL · €1.42/L", l2:"A-23 · 210 L" },
    ],
    callout: "BACK BY THU 11:00 · +€1,920 NET",
  },
  {
    id: "short",
    label: "Short distance",
    subtitle: "Southern arc, four loads",
    badge: "1,140 km",
    stats: { km: 1140, legs: 4, hours: 18, profit: 2240, eur_per_km: 1.96 },
    compound: "M 492 332 Q 440 394, 370 406 Q 262 394, 226 336 Q 278 286, 314 268 Q 398 296, 492 332",
    cities: [
      { code:"VLC", name:"Valencia",  meta:"BASE · 01",        cityAt:0.00,  align:"start", base:true },
      { code:"MUR", name:"Murcia",    meta:"02 · 20T TAUT",    cityAt:0.25,  align:"bottom" },
      { code:"SEV", name:"Sevilla",   meta:"03 · 22T BOX",     cityAt:0.50,  align:"end" },
      { code:"MAD", name:"Madrid",    meta:"04 · 18T PALLET",  cityAt:0.72,  align:"top" },
    ],
    waypoints: [
      { kind:"FUEL", at:0.14, rx:478, ry:412, w:148, h:38, l1:"FUEL · €1.40/L", l2:"A-7 · 280 L" },
      { kind:"REST", at:0.42, rx:112, ry:420, w:140, h:38, l1:"REST · 45 MIN",  l2:"EU 561/2006" },
      { kind:"TOLL", at:0.76, rx:398, ry:252, w:140, h:38, l1:"TOLL · A-4",     l2:"€28.60" },
    ],
    callout: "BACK BY SAT 08:00 · +€2,240 NET",
  },
];

const RouteDiagram = () => {
  const [routeIdx, setRouteIdx] = React.useState(0);
  const route = ROUTES[routeIdx];
  const pathRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  const [dwelling, setDwelling] = React.useState(false);

  // reset animation when switching route
  React.useEffect(() => { setProgress(0); setDwelling(false); }, [routeIdx]);

  // animation loop
  React.useEffect(() => {
    let raf, start = 0, dwellUntil = 0, mounted = true;
    const LOOP_MS = 16000;
    const DWELL_MS = 1800;
    const tick = (ts) => {
      if (!mounted) return;
      if (!start) start = ts;
      if (dwellUntil) {
        if (ts >= dwellUntil) { start = ts; dwellUntil = 0; setDwelling(false); setProgress(0); }
        raf = requestAnimationFrame(tick); return;
      }
      const p = Math.min(1, (ts - start) / LOOP_MS);
      setProgress(p);
      if (p >= 1) { dwellUntil = ts + DWELL_MS; setDwelling(true); }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { mounted = false; cancelAnimationFrame(raf); };
  }, [routeIdx]);

  // point lookup on current route path
  const ptRef = React.useRef({ x:492, y:332, angle:0, len:0 });
  // positions of cities and waypoints snapped onto the path
  const [snaps, setSnaps] = React.useState({ cities: [], waypoints: [], len: 1 });
  const [, force] = React.useReducer(x => x+1, 0);

  // recompute snapped positions whenever the route changes
  React.useEffect(() => {
    const el = pathRef.current;
    if (!el) return;
    const L = el.getTotalLength();
    const snap = (t) => {
      const p = el.getPointAtLength(L * Math.max(0, Math.min(1, t)));
      return { x: p.x, y: p.y };
    };
    setSnaps({
      len: L,
      cities: route.cities.map(c => snap(c.cityAt)),
      waypoints: route.waypoints.map(w => snap(w.at)),
    });
  }, [routeIdx]);

  React.useEffect(() => {
    const el = pathRef.current;
    if (!el) return;
    const L = el.getTotalLength();
    const at = L * progress;
    const pt = el.getPointAtLength(at);
    const pt2 = el.getPointAtLength(Math.min(L, at + 1));
    const angle = Math.atan2(pt2.y - pt.y, pt2.x - pt.x) * 180 / Math.PI;
    ptRef.current = { x: pt.x, y: pt.y, angle, len: L };
    force();
  }, [progress, routeIdx]);

  const legs = route.cities.length;
  const activeLegIdx = Math.min(legs - 1, Math.floor(progress * legs));
  const legFrac = (progress * legs) - activeLegIdx;
  const legFrom = route.cities[activeLegIdx];
  const legTo   = route.cities[(activeLegIdx + 1) % route.cities.length];
  const kmDone = Math.round(route.stats.km * progress);
  const etaH = Math.max(0, Math.round((route.stats.km - kmDone) / (route.stats.km / route.stats.hours)));
  const netNow = Math.round(route.stats.profit * Math.min(1, progress * 1.03));

  const hotWP = React.useCallback((at, window=0.09) => {
    const d = progress - at;
    if (d < 0 || d > window) return 0;
    return Math.sin((d/window) * Math.PI);
  }, [progress]);

  const reachedFlash = (atEnd) => {
    const d = progress - atEnd;
    if (Math.abs(d) > 0.04) return 0;
    return 1 - Math.abs(d) / 0.04;
  };

  return (
    <div className="route-vis3">
      {/* TABS */}
      <div className="rv3-tabs" role="tablist">
        {ROUTES.map((r,i) => (
          <button
            key={r.id}
            role="tab"
            aria-selected={i === routeIdx}
            className={"rv3-tab" + (i === routeIdx ? " rv3-tab--active" : "")}
            onClick={() => setRouteIdx(i)}
          >
            <span className="rv3-tab-rank mono-foot">{String(i+1).padStart(2,'0')}</span>
            <span className="rv3-tab-body">
              <span className="rv3-tab-label">{r.label}</span>
              <span className="rv3-tab-sub">{r.subtitle}</span>
            </span>
            <span className="rv3-tab-badge">{r.badge}</span>
          </button>
        ))}
      </div>

      {/* STATS BAR */}
      <div className="rv3-stats">
        <div className="rv3-stat">
          <div className="rv3-stat-n tabular">€{route.stats.profit.toLocaleString()}</div>
          <div className="rv3-stat-k">NET PROFIT</div>
        </div>
        <div className="rv3-stat">
          <div className="rv3-stat-n tabular">{route.stats.km.toLocaleString()} <span className="rv3-stat-u">km</span></div>
          <div className="rv3-stat-k">DISTANCE</div>
        </div>
        <div className="rv3-stat">
          <div className="rv3-stat-n tabular">{route.stats.hours}<span className="rv3-stat-u">h</span></div>
          <div className="rv3-stat-k">DRIVE TIME</div>
        </div>
        <div className="rv3-stat">
          <div className="rv3-stat-n tabular">{route.stats.legs}</div>
          <div className="rv3-stat-k">LOADS</div>
        </div>
        <div className="rv3-stat">
          <div className="rv3-stat-n tabular">€{route.stats.eur_per_km.toFixed(2)}</div>
          <div className="rv3-stat-k">€ / KM</div>
        </div>
      </div>

      {/* MAP */}
      <div className="rv3-map">
        <svg viewBox="0 0 720 520" width="100%" preserveAspectRatio="xMidYMid meet" aria-label={`Closed-loop route: ${route.label}`}>
          <defs>
            <pattern id="hatch3" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
              <line x1="0" y1="0" x2="0" y2="6" stroke="#EAE7DF" strokeWidth="1"/>
            </pattern>
            <filter id="truckShadow3" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur in="SourceAlpha" stdDeviation="1.6"/>
              <feOffset dx="0" dy="1.5" result="off"/>
              <feComponentTransfer><feFuncA type="linear" slope="0.4"/></feComponentTransfer>
              <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
            <radialGradient id="glow3" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#1FB58A" stopOpacity="0.38"/>
              <stop offset="100%" stopColor="#1FB58A" stopOpacity="0"/>
            </radialGradient>
          </defs>

          {/* HUD — large, legible */}
          <g fontFamily="JetBrains Mono, monospace" letterSpacing="0.06em">
            <text x="36" y="42" fontSize="13" fill="#5A5A5A">
              LEG {activeLegIdx + 1}/{legs} · {legFrom.code} → {legTo.code} · {kmDone.toLocaleString()} / {route.stats.km.toLocaleString()} KM
            </text>
            <text x="36" y="64" fontSize="15" fill="#0A0A0A" fontWeight="600">
              {dwelling ? route.callout : `ETA ${etaH}H · NET €${netNow.toLocaleString()}`}
            </text>
            <g transform="translate(580,40)">
              <circle r="5" fill="#1FB58A">
                <animate attributeName="opacity" values="1;0.25;1" dur="1.2s" repeatCount="indefinite"/>
              </circle>
              <text x="12" y="5" fontSize="12" fill="#0A0A0A" fontWeight="600" letterSpacing="0.12em">LIVE</text>
            </g>
          </g>

          {/* Spain peninsula — larger */}
          <path
            d="M 108 170 C 86 180, 70 206, 68 238 C 64 266, 74 292, 64 320 C 54 348, 70 380, 98 400 C 120 420, 150 434, 180 444 C 218 456, 260 464, 300 464 C 344 464, 388 458, 426 446 C 470 432, 506 408, 534 376 C 562 346, 582 314, 588 278 C 596 242, 594 206, 576 180 C 556 156, 524 144, 490 138 C 450 134, 406 136, 362 140 C 322 144, 278 146, 238 142 C 194 138, 154 146, 132 158 C 118 164, 112 168, 108 170 Z"
            fill="url(#hatch3)" stroke="#C9C5BC" strokeWidth="1.2"
          />
          {/* Portugal hint */}
          <path d="M 120 194 C 96 244, 96 306, 120 352" fill="none" stroke="#D5D1C6" strokeWidth="1.2" strokeDasharray="3 4"/>

          {/* planned route (faint dashed baseline) — always visible underneath */}
          <path ref={pathRef} d={route.compound} fill="none" stroke="#C9C5BC" strokeWidth="2" strokeDasharray="5 4" opacity="0.9"/>

          {/* driven trail — single stroke, grows with progress.
              Outbound legs render black; the final return leg renders green.
              When dwelling, progress=1 so the whole loop is "driven". */}
          {(() => {
            const L = ptRef.current.len || snaps.len || 1;
            const cutoff = (legs - 1) / legs;
            const outboundEnd = Math.min(progress, cutoff);
            const returnStart = Math.max(progress, cutoff);
            return (
              <>
                {outboundEnd > 0 && (
                  <path
                    d={route.compound} fill="none"
                    stroke="#0A0A0A" strokeWidth="3" strokeLinecap="round"
                    strokeDasharray={`${L * outboundEnd} ${L}`}
                    style={{ transition: "none" }}
                  />
                )}
                {progress > cutoff && (
                  <path
                    d={route.compound} fill="none"
                    stroke="#1FB58A" strokeWidth="3.5" strokeLinecap="round"
                    strokeDasharray={`0 ${L * cutoff} ${L * (progress - cutoff)} ${L}`}
                    style={{ transition: "none" }}
                  />
                )}
              </>
            );
          })()}

          {/* Waypoints — dots snapped to the road; leader goes to nearest edge of callout */}
          {route.waypoints.map((w, i) => {
            const p = snaps.waypoints[i];
            if (!p) return null;
            const hot = hotWP(w.at);
            const active = hot > 0.08;
            // pick the leader endpoint on the callout rect closest to the road dot
            const lx = Math.max(w.rx, Math.min(p.x, w.rx + w.w));
            const ly = p.y < w.ry ? w.ry : (p.y > w.ry + w.h ? w.ry + w.h : (Math.abs(p.x - w.rx) < Math.abs(p.x - (w.rx + w.w)) ? (p.y) : (p.y)));
            // simpler: snap to top or bottom edge of rect, x clamped
            const leaderX = Math.max(w.rx + 8, Math.min(p.x, w.rx + w.w - 8));
            const leaderY = p.y < w.ry ? w.ry : w.ry + w.h;
            return (
              <g key={i} opacity={0.4 + 0.6 * hot}>
                {active && <circle cx={p.x} cy={p.y} r={20 + hot*18} fill="url(#glow3)"/>}
                <line x1={p.x} y1={p.y} x2={leaderX} y2={leaderY} stroke="#9B9687" strokeWidth={1 + hot * 0.8}/>
                <circle cx={p.x} cy={p.y} r={4 + 2.5 * hot} fill={active ? "#1FB58A" : "#0A0A0A"}/>
                <circle cx={p.x} cy={p.y} r="1.6" fill="#FFFFFF"/>
                <rect x={w.rx} y={w.ry} width={w.w} height={w.h} rx="5" fill="#FFFFFF"
                  stroke={active ? "#1FB58A" : "#E8E6E1"} strokeWidth={active ? 1.5 : 1.2}/>
                <g fontFamily="JetBrains Mono, monospace">
                  <text x={w.rx + w.w/2} y={w.ry + 16} textAnchor="middle" fontSize="12" fontWeight="600" fill="#0A0A0A" letterSpacing="0.06em">{w.l1}</text>
                  <text x={w.rx + w.w/2} y={w.ry + 30} textAnchor="middle" fontSize="11" fill="#5A5A5A">{w.l2}</text>
                </g>
              </g>
            );
          })}

          {/* Cities — positioned exactly on the path so they sit on the route */}
          {route.cities.map((c, i) => {
            const p = snaps.cities[i];
            if (!p) return null;
            const flash = i === 0
              ? (dwelling ? 1 : reachedFlash(1))
              : reachedFlash(i/legs);
            const textX =
              c.align === "end"    ? p.x - 16 :
              c.align === "top"    ? p.x      :
              c.align === "bottom" ? p.x      :
              /* start/right */      p.x + 20;
            const textY =
              c.align === "top"    ? p.y - 16 :
              c.align === "bottom" ? p.y + 34 :
                                     p.y - 2;
            const metaY =
              c.align === "top"    ? p.y - 34 :
              c.align === "bottom" ? p.y + 50 :
                                     p.y + 16;
            const anchor = c.align === "end" ? "end" : (c.align === "top" || c.align === "bottom" ? "middle" : "start");
            if (c.base) {
              return (
                <g key={i}>
                  <circle cx={p.x} cy={p.y} r={24 + flash * 12} fill="none"
                    stroke="#1FB58A" strokeWidth={1.5 + flash * 1.2} opacity={0.6 + flash * 0.4}>
                    <animate attributeName="r" values="16;34;16" dur="2.6s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" values="0.8;0;0.8" dur="2.6s" repeatCount="indefinite"/>
                  </circle>
                  <circle cx={p.x} cy={p.y} r={11 + flash * 2.5} fill="#1FB58A"/>
                  <circle cx={p.x} cy={p.y} r="5" fill="#FFFFFF"/>
                  <text x={textX} y={textY} fontSize="22" textAnchor={anchor}
                    fontFamily="Inter Tight, sans-serif" fontWeight="600" letterSpacing="-0.02em"
                    stroke="#FDFCF9" strokeWidth="4" paintOrder="stroke" fill="#0A0A0A">{c.name}</text>
                  <text x={textX} y={metaY} textAnchor={anchor}
                    fontFamily="JetBrains Mono, monospace" fontSize="12" letterSpacing="0.06em"
                    stroke="#FDFCF9" strokeWidth="3" paintOrder="stroke" fill="#5A5A5A">{c.meta}</text>
                </g>
              );
            }
            return (
              <g key={i}>
                {flash > 0.1 && (
                  <circle cx={p.x} cy={p.y} r={14 + flash * 22} fill="none" stroke="#1FB58A" strokeWidth={1.2} opacity={flash * 0.7}/>
                )}
                <circle cx={p.x} cy={p.y} r={8 + flash * 4} fill={flash > 0.1 ? "#1FB58A" : "#0A0A0A"}/>
                <circle cx={p.x} cy={p.y} r="3" fill="#FFFFFF"/>
                <text x={textX} y={textY} fontSize="22" textAnchor={anchor}
                  fontFamily="Inter Tight, sans-serif" fontWeight="600" letterSpacing="-0.02em"
                  stroke="#FDFCF9" strokeWidth="4" paintOrder="stroke" fill="#0A0A0A">{c.name}</text>
                <text x={textX} y={metaY} textAnchor={anchor}
                  fontFamily="JetBrains Mono, monospace" fontSize="12" letterSpacing="0.06em"
                  stroke="#FDFCF9" strokeWidth="3" paintOrder="stroke" fill="#5A5A5A">{c.meta}</text>
              </g>
            );
          })}

          {/* Truck — bigger so it reads at a glance */}
          <g
            transform={`translate(${ptRef.current.x}, ${ptRef.current.y}) rotate(${ptRef.current.angle})`}
            filter="url(#truckShadow3)"
          >
            <circle r="14" fill="#1FB58A" opacity="0.22"/>
            {/* trailer */}
            <rect x="-18" y="-6.5" width="22" height="13" rx="2" fill="#FAFAF7" stroke="#0A0A0A" strokeWidth="1.4"/>
            <line x1="-12" y1="-6.5" x2="-12" y2="6.5" stroke="#0A0A0A" strokeWidth="0.8"/>
            <line x1="-6" y1="-6.5" x2="-6" y2="6.5" stroke="#0A0A0A" strokeWidth="0.8"/>
            {/* cab */}
            <rect x="4" y="-5.5" width="9" height="11" rx="1.5" fill="#0A0A0A"/>
            {/* windshield */}
            <rect x="10.5" y="-4" width="2.2" height="8" rx="0.4" fill="#1FB58A" opacity="0.95"/>
            {/* headlight */}
            <path d="M 13 -3.5 L 21 -6 L 21 6 L 13 3.5 Z" fill="#1FB58A" opacity={dwelling ? 0 : 0.22}/>
          </g>

          {/* Legend */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="12" fill="#5A5A5A" letterSpacing="0.06em">
            <line x1="36" y1="492" x2="64" y2="492" stroke="#0A0A0A" strokeWidth="2.5"/>
            <text x="72" y="496">LOADED</text>
            <line x1="162" y1="492" x2="190" y2="492" stroke="#1FB58A" strokeWidth="3"/>
            <text x="198" y="496">RETURN</text>
            <line x1="282" y1="492" x2="310" y2="492" stroke="#C9C5BC" strokeWidth="2" strokeDasharray="5 4"/>
            <text x="318" y="496">PLANNED</text>
            <circle cx="412" cy="492" r="3.5" fill="#0A0A0A"/>
            <text x="422" y="496">WAYPOINT</text>
          </g>
        </svg>
      </div>

      <style>{`
        .route-vis3{
          border: 1px solid var(--hair);
          border-radius: 16px;
          background: #fff;
          overflow: hidden;
          text-align: left;
        }
        .rv3-tabs{
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-bottom: 1px solid var(--hair);
          background: #FDFCF9;
        }
        .rv3-tab{
          display: grid;
          grid-template-columns: auto 1fr auto;
          gap: 14px;
          align-items: center;
          padding: 18px 22px;
          background: transparent;
          border: 0;
          border-right: 1px solid var(--hair);
          cursor: pointer;
          font-family: inherit;
          text-align: left;
          position: relative;
          transition: background 180ms ease;
        }
        .rv3-tab:last-child{ border-right: 0; }
        .rv3-tab:hover{ background: rgba(31,181,138,0.04); }
        .rv3-tab--active{ background: #fff; }
        .rv3-tab--active::after{
          content: "";
          position: absolute; left: 0; right: 0; bottom: -1px;
          height: 2px; background: #1FB58A;
        }
        .rv3-tab-rank{
          font-size: 11px; color: var(--muted); letter-spacing: 0.08em;
          align-self: start; padding-top: 3px;
        }
        .rv3-tab-body{ display: flex; flex-direction: column; gap: 2px; }
        .rv3-tab-label{
          font-family: 'Inter Tight', sans-serif; font-weight: 600;
          font-size: 18px; letter-spacing: -0.02em; color: #0A0A0A;
        }
        .rv3-tab-sub{ font-size: 13px; color: var(--muted); }
        .rv3-tab-badge{
          font-family: 'Inter Tight', sans-serif; font-weight: 600;
          font-size: 18px; letter-spacing: -0.02em; color: #0A0A0A;
          padding: 5px 10px; border-radius: 999px;
          border: 1px solid var(--hair);
          background: #FAFAF7;
        }
        .rv3-tab--active .rv3-tab-badge{
          background: #1FB58A; color: #fff; border-color: #1FB58A;
        }
        .rv3-stats{
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          border-bottom: 1px solid var(--hair);
        }
        .rv3-stat{
          padding: 18px 22px;
          border-right: 1px solid var(--hair);
        }
        .rv3-stat:last-child{ border-right: 0; }
        .rv3-stat-n{
          font-family: 'Inter Tight', sans-serif; font-weight: 600;
          font-size: 26px; letter-spacing: -0.025em; color: #0A0A0A;
          line-height: 1;
        }
        .rv3-stat-u{
          font-size: 15px; color: var(--muted); font-weight: 500; margin-left: 2px;
        }
        .rv3-stat-k{
          margin-top: 8px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 10.5px; letter-spacing: 0.08em;
          color: var(--muted);
        }
        .rv3-map{
          padding: 14px 18px 8px;
          background: #FDFCF9;
        }
        @media (max-width: 820px){
          .rv3-tabs{ grid-template-columns: 1fr; }
          .rv3-tab{ border-right: 0; border-bottom: 1px solid var(--hair); }
          .rv3-tab:last-child{ border-bottom: 0; }
          .rv3-stats{ grid-template-columns: repeat(2, 1fr); }
          .rv3-stat{ border-bottom: 1px solid var(--hair); }
          .rv3-stat:nth-child(5){ grid-column: 1 / -1; border-right: 0; }
        }
      `}</style>
    </div>
  );
};

Object.assign(window, { RouteDiagram });
