// Monochrome line icons, 1.5px stroke. Lucide-style.
const Icon = ({ d, size = 20, stroke = "currentColor", children, viewBox="0 0 24 24", fill="none" }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill} stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {children || <path d={d}/>}
  </svg>
);

const IconCircular = (p) => (<Icon {...p}><path d="M4 12a8 8 0 0 1 14-5.3"/><path d="M20 12a8 8 0 0 1-14 5.3"/><path d="M18 3v4h-4"/><path d="M6 21v-4h4"/></Icon>);
const IconChat = (p) => (<Icon {...p}><path d="M4 6h16v10H8l-4 4z"/><path d="M8 10h8"/><path d="M8 13h5"/></Icon>);
const IconShield = (p) => (<Icon {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></Icon>);
const IconChart = (p) => (<Icon {...p}><path d="M4 20V6"/><path d="M4 20h16"/><path d="M8 16V11"/><path d="M12 16V8"/><path d="M16 16v-3"/></Icon>);
const IconPlug = (p) => (<Icon {...p}><path d="M9 3v5"/><path d="M15 3v5"/><path d="M7 8h10v4a5 5 0 0 1-10 0z"/><path d="M12 17v4"/></Icon>);
const IconCheck = (p) => (<Icon {...p}><path d="M4 12l5 5L20 6"/></Icon>);
const IconMenu = (p) => (<Icon {...p}><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></Icon>);

const LogoMark = ({ size = 22 }) => (
  <img src="assets/reexo-mark.png" alt="Reexo" width={size} height={size} style={{display:'block', width:size, height:size, objectFit:'contain'}}/>
);

/*
  Hero Route Visualization — ANIMATED.
  A single concatenated SVG path (4 Bézier legs) drives a truck via getPointAtLength.
  - HUD top-left updates live: active leg, km done, ETA.
  - Waypoints (REST / FUEL / TOLL) activate as the truck passes, then fade back down.
  - Cities flash when reached. Valencia (base) pulses, and flares green when loop closes.
  - One full loop cycles over LOOP_MS; short dwell at Valencia before restart.
*/
const RouteDiagram = () => {
  const pathRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);     // 0..1 along full route
  const [dwelling, setDwelling] = React.useState(false); // true during the pause at VLC

  // Real-world leg distances (km). Used for HUD readout + trail tinting.
  // Proportions here determine where along the compound path each leg ends.
  const LEGS = React.useMemo(() => ([
    { from: "VLC", to: "MAD", km: 357, color: "#0A0A0A" },
    { from: "MAD", to: "ZGZ", km: 315, color: "#0A0A0A" },
    { from: "ZGZ", to: "BCN", km: 296, color: "#0A0A0A" },
    { from: "BCN", to: "VLC", km: 349, color: "#1FB58A" }, // return leg
  ]), []);
  const TOTAL_KM = LEGS.reduce((s,l)=>s+l.km, 0); // 1317 (rounded to 1,480 in the HUD label for 'km planned' including approach)

  // Waypoint trigger thresholds (fraction of full path where each is active).
  // These roughly map to: REST mid-leg1, FUEL on leg2, TOLL on leg3.
  const REST_AT = 0.12;
  const FUEL_AT = 0.35;
  const TOLL_AT = 0.60;
  const WP_WINDOW = 0.09; // how long each stays highlighted, in progress units

  const cityReached = (p) => {
    // returns which city the truck has most recently passed
    if (p < 0.25) return 0;  // still on leg 1 (heading MAD)
    if (p < 0.50) return 1;  // reached MAD
    if (p < 0.75) return 2;  // reached ZGZ
    if (p < 1.00) return 3;  // reached BCN
    return 4;                // back at VLC
  };

  // animation loop
  React.useEffect(() => {
    let raf, start = 0, dwellUntil = 0;
    const LOOP_MS = 14000;
    const DWELL_MS = 1500;
    let mounted = true;

    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); };
  }, []);

  // lookup current xy + tangent on the compound path
  const ptRef = React.useRef({ x: 412, y: 282, angle: 0, len: 0 });
  const [, force] = React.useReducer(x => x+1, 0);
  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]);

  // HUD values
  const activeCity = cityReached(progress);
  const activeLegIdx = Math.min(3, Math.floor(progress * 4));
  const activeLeg = LEGS[activeLegIdx];
  const legFrac = (progress * 4) - activeLegIdx;
  const kmDone = Math.round(
    LEGS.slice(0, activeLegIdx).reduce((s,l)=>s+l.km,0) + activeLeg.km * legFrac
  );
  const etaH = Math.max(0, Math.round((TOTAL_KM - kmDone) / 70)); // ~70km/h avg
  const netNow = Math.round(2840 * Math.min(1, progress * 1.05)); // fill up profit as we progress

  // waypoint "hot" helpers
  const hot = (trigger) => {
    const d = progress - trigger;
    if (d < 0 || d > WP_WINDOW) return 0;
    // ease in/out
    const t = d / WP_WINDOW;
    return Math.sin(t * Math.PI); // 0..1..0
  };
  const hotREST = hot(REST_AT);
  const hotFUEL = hot(FUEL_AT);
  const hotTOLL = hot(TOLL_AT);

  // city "just reached" flash: 0..1 flash intensity
  const reachedFlash = (atStart, atEnd) => {
    // active around the arrival moment (atEnd)
    const d = progress - atEnd;
    if (Math.abs(d) > 0.04) return 0;
    return 1 - Math.abs(d) / 0.04;
  };
  const flashMAD = reachedFlash(0, 0.25);
  const flashZGZ = reachedFlash(0.25, 0.50);
  const flashBCN = reachedFlash(0.50, 0.75);
  const flashVLC = dwelling ? 1 : reachedFlash(0.75, 1.0);

  // compound path (must match the 4 drawn leg paths below, joined head-to-tail)
  const COMPOUND_D = "M 412 282 Q 340 258, 278 230 Q 305 200, 342 180 Q 395 182, 452 192 Q 445 245, 412 282";

  return (
    <div className="route-vis">
      <div className="route-vis-map">
        <svg viewBox="0 0 600 460" width="100%" preserveAspectRatio="xMidYMid meet" aria-label="Closed-loop route across Spain, animated">
          <defs>
            <pattern id="hatch" patternUnits="userSpaceOnUse" width="5" height="5" patternTransform="rotate(45)">
              <line x1="0" y1="0" x2="0" y2="5" stroke="#EAE7DF" strokeWidth="1"/>
            </pattern>
            <marker id="arrH" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
              <path d="M0,0 L10,5 L0,10 z" fill="#0A0A0A"/>
            </marker>
            <marker id="arrG" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
              <path d="M0,0 L10,5 L0,10 z" fill="#1FB58A"/>
            </marker>
            <filter id="truckShadow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur in="SourceAlpha" stdDeviation="1.2"/>
              <feOffset dx="0" dy="1" result="off"/>
              <feComponentTransfer><feFuncA type="linear" slope="0.35"/></feComponentTransfer>
              <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
          </defs>

          {/* HUD header */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="0.06em">
            <text x="30" y="40" fill="#5A5A5A">
              LEG {activeLegIdx + 1}/4 · {activeLeg.from} → {activeLeg.to} · {kmDone.toLocaleString()} / {TOTAL_KM.toLocaleString()} KM
            </text>
            <text x="30" y="58" fill="#1FB58A" fontWeight="500">
              {dwelling
                ? "LOOP CLOSED · NET PROFIT €2,840"
                : `ETA HOME ${etaH}H · NET PROFIT €${netNow.toLocaleString()}`}
            </text>
            {/* LIVE dot */}
            <g transform="translate(420,34)">
              <circle r="4" fill="#1FB58A">
                <animate attributeName="opacity" values="1;0.25;1" dur="1.2s" repeatCount="indefinite"/>
              </circle>
              <text x="10" y="4" fill="#0A0A0A" fontWeight="500">LIVE</text>
            </g>
          </g>

          {/* Iberian peninsula */}
          <path
            d="M 90 150 C 72 158, 60 180, 58 208 C 55 232, 62 255, 55 278 C 48 302, 60 328, 82 345 C 100 360, 122 372, 148 380 C 180 390, 215 396, 250 396 C 290 396, 328 392, 360 380 C 395 368, 425 348, 448 322 C 470 297, 486 270, 492 240 C 498 210, 496 180, 482 158 C 465 138, 438 128, 408 122 C 375 118, 338 120, 302 124 C 268 128, 232 130, 198 126 C 162 122, 128 128, 110 138 C 98 144, 94 148, 90 150 Z"
            fill="url(#hatch)" stroke="#C9C5BC" strokeWidth="1"
          />
          <path d="M 100 170 C 80 215, 80 270, 100 310" fill="none" stroke="#D5D1C6" strokeWidth="1" strokeDasharray="2 3"/>

          {/* full route — faint base layer (for "planned but not yet driven") */}
          <path ref={pathRef} d={COMPOUND_D} fill="none" stroke="#D5D1C6" strokeWidth="1.5" strokeDasharray="4 3"/>

          {/* Black driven trail — legs 1..3 up to min(progress, .75) */}
          <path
            d={COMPOUND_D} fill="none" stroke="#0A0A0A" strokeWidth="2.25" strokeLinecap="round"
            strokeDasharray={ptRef.current.len}
            strokeDashoffset={ptRef.current.len * (1 - Math.min(progress, 0.75))}
            style={{ transition: "none" }}
          />
          {/* Green driven trail — leg 4 only (return leg) */}
          {progress > 0.75 && (
            <path
              d={COMPOUND_D} fill="none" stroke="#1FB58A" strokeWidth="2.5" strokeLinecap="round"
              strokeDasharray={`${ptRef.current.len * 0.25} ${ptRef.current.len}`}
              strokeDashoffset={ptRef.current.len * (1 - progress) - ptRef.current.len * (progress - 0.75)}
              style={{ transition: "none" }}
            />
          )}

          {/* Waypoint: REST — under leg 1 */}
          <g opacity={0.35 + 0.65 * hotREST}>
            <circle cx="336" cy="254" r={3 + 2 * hotREST} fill={hotREST > 0.1 ? "#1FB58A" : "#0A0A0A"}/>
            <line x1="336" y1="256" x2="336" y2="314" stroke="#9B9687" strokeWidth={0.7 + hotREST * 0.8}/>
            <rect x="280" y="318" width="114" height="32" rx="4" fill="#FFFFFF"
              stroke={hotREST > 0.1 ? "#1FB58A" : "#E8E6E1"} strokeWidth={hotREST > 0.1 ? 1.2 : 1}/>
            <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#0A0A0A">
              <text x="337" y="334" textAnchor="middle" fontWeight="500">REST · 45 MIN</text>
              <text x="337" y="346" textAnchor="middle" fill="#5A5A5A">EU 561/2006</text>
            </g>
          </g>

          {/* Waypoint: FUEL — upper-left of leg 2 */}
          <g opacity={0.35 + 0.65 * hotFUEL}>
            <circle cx="306" cy="210" r={3 + 2 * hotFUEL} fill={hotFUEL > 0.1 ? "#1FB58A" : "#0A0A0A"}/>
            <line x1="306" y1="208" x2="260" y2="168" stroke="#9B9687" strokeWidth={0.7 + hotFUEL * 0.8}/>
            <rect x="186" y="140" width="120" height="32" rx="4" fill="#FFFFFF"
              stroke={hotFUEL > 0.1 ? "#1FB58A" : "#E8E6E1"} strokeWidth={hotFUEL > 0.1 ? 1.2 : 1}/>
            <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#0A0A0A">
              <text x="246" y="156" textAnchor="middle" fontWeight="500">FUEL · €1.42/L</text>
              <text x="246" y="168" textAnchor="middle" fill="#5A5A5A">A-2 · 320 L</text>
            </g>
          </g>

          {/* Waypoint: TOLL — top of leg 3 */}
          <g opacity={0.35 + 0.65 * hotTOLL}>
            <circle cx="398" cy="182" r={3 + 2 * hotTOLL} fill={hotTOLL > 0.1 ? "#1FB58A" : "#0A0A0A"}/>
            <line x1="398" y1="180" x2="430" y2="134" stroke="#9B9687" strokeWidth={0.7 + hotTOLL * 0.8}/>
            <rect x="422" y="108" width="120" height="32" rx="4" fill="#FFFFFF"
              stroke={hotTOLL > 0.1 ? "#1FB58A" : "#E8E6E1"} strokeWidth={hotTOLL > 0.1 ? 1.2 : 1}/>
            <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#0A0A0A">
              <text x="482" y="124" textAnchor="middle" fontWeight="500">TOLL AP-2</text>
              <text x="482" y="136" textAnchor="middle" fill="#5A5A5A">€47.10</text>
            </g>
          </g>

          {/* City: Valencia (BASE) */}
          <g>
            <circle cx="412" cy="282" r={18 + flashVLC * 8} fill="none"
              stroke="#1FB58A" strokeWidth={1.25 + flashVLC * 1} opacity={0.6 + flashVLC * 0.4}>
              <animate attributeName="r" values="12;26;12" dur="2.4s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.75;0;0.75" dur="2.4s" repeatCount="indefinite"/>
            </circle>
            <circle cx="412" cy="282" r={8 + flashVLC * 2} fill="#1FB58A"/>
            <circle cx="412" cy="282" r="3.8" fill="#FFFFFF"/>
            <g fontFamily="Inter Tight, sans-serif" fontWeight="600" fontSize="14" fill="#0A0A0A" letterSpacing="-0.01em">
              <text x="432" y="279">Valencia</text>
            </g>
            <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5A5A5A" letterSpacing="0.05em">
              <text x="432" y="294">BASE · 01</text>
            </g>
          </g>

          {/* City: Madrid */}
          <g>
            <circle cx="270" cy="232" r={5.5 + flashMAD * 5} fill={flashMAD > 0.1 ? "#1FB58A" : "#0A0A0A"}/>
            <circle cx="270" cy="232" r="2" fill="#FFFFFF"/>
            {flashMAD > 0.1 && (
              <circle cx="270" cy="232" r={10 + flashMAD * 14} fill="none" stroke="#1FB58A" strokeWidth="1" opacity={flashMAD * 0.6}/>
            )}
            <g fontFamily="Inter Tight, sans-serif" fontWeight="600" fontSize="14" fill="#0A0A0A" letterSpacing="-0.01em">
              <text x="260" y="230" textAnchor="end">Madrid</text>
            </g>
            <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5A5A5A">
              <text x="260" y="244" textAnchor="end">02 · 22T PALLET</text>
            </g>
          </g>

          {/* City: Zaragoza */}
          <g>
            <circle cx="342" cy="180" r={5.5 + flashZGZ * 5} fill={flashZGZ > 0.1 ? "#1FB58A" : "#0A0A0A"}/>
            <circle cx="342" cy="180" r="2" fill="#FFFFFF"/>
            {flashZGZ > 0.1 && (
              <circle cx="342" cy="180" r={10 + flashZGZ * 14} fill="none" stroke="#1FB58A" strokeWidth="1" opacity={flashZGZ * 0.6}/>
            )}
            <g fontFamily="Inter Tight, sans-serif" fontWeight="600" fontSize="14" fill="#0A0A0A" letterSpacing="-0.01em">
              <text x="342" y="154" textAnchor="middle">Zaragoza</text>
            </g>
          </g>
          <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5A5A5A">
            <text x="342" y="168" textAnchor="middle">03 · 18T BOX</text>
          </g>

          {/* City: Barcelona */}
          <g>
            <circle cx="452" cy="192" r={5.5 + flashBCN * 5} fill={flashBCN > 0.1 ? "#1FB58A" : "#0A0A0A"}/>
            <circle cx="452" cy="192" r="2" fill="#FFFFFF"/>
            {flashBCN > 0.1 && (
              <circle cx="452" cy="192" r={10 + flashBCN * 14} fill="none" stroke="#1FB58A" strokeWidth="1" opacity={flashBCN * 0.6}/>
            )}
            <g fontFamily="Inter Tight, sans-serif" fontWeight="600" fontSize="14" fill="#0A0A0A" letterSpacing="-0.01em">
              <text x="468" y="190">Barcelona</text>
            </g>
            <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5A5A5A">
              <text x="468" y="204">04 · 24T REEFER</text>
            </g>
          </g>

          {/* TRUCK — draws last so it sits on top of everything */}
          <g
            transform={`translate(${ptRef.current.x}, ${ptRef.current.y}) rotate(${ptRef.current.angle})`}
            filter="url(#truckShadow)"
          >
            {/* subtle heading glow behind the truck */}
            <circle r="9" fill="#1FB58A" opacity="0.18"/>
            {/* cab + trailer, oriented along x+ (tangent direction). Centered on pivot. */}
            {/* trailer */}
            <rect x="-11" y="-4" width="14" height="8" rx="1.2" fill="#FAFAF7" stroke="#0A0A0A" strokeWidth="1.1"/>
            <line x1="-7" y1="-4" x2="-7" y2="4" stroke="#0A0A0A" strokeWidth="0.6"/>
            <line x1="-3" y1="-4" x2="-3" y2="4" stroke="#0A0A0A" strokeWidth="0.6"/>
            {/* cab */}
            <rect x="3" y="-3.5" width="6" height="7" rx="1" fill="#0A0A0A"/>
            {/* windshield */}
            <rect x="7" y="-2.6" width="1.6" height="5.2" rx="0.3" fill="#1FB58A" opacity="0.9"/>
            {/* headlight beam */}
            <path d="M 9 -2 L 14 -4 L 14 4 L 9 2 Z" fill="#1FB58A" opacity={dwelling ? 0 : 0.18}/>
          </g>

          {/* Legend */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#5A5A5A">
            <line x1="30" y1="428" x2="54" y2="428" stroke="#0A0A0A" strokeWidth="2"/>
            <text x="60" y="432">LOADED</text>
            <line x1="130" y1="428" x2="154" y2="428" stroke="#1FB58A" strokeWidth="2.25"/>
            <text x="160" y="432">RETURN</text>
            <line x1="220" y1="428" x2="244" y2="428" stroke="#D5D1C6" strokeWidth="1.5" strokeDasharray="4 3"/>
            <text x="250" y="432">PLANNED</text>
            <circle cx="330" cy="428" r="3" fill="#0A0A0A"/>
            <text x="340" y="432">WAYPOINT</text>
          </g>
        </svg>
      </div>

      <aside className="route-vis-rank">
        <div className="rank-head">
          <span className="mono-foot">
            RANKED ROUTES
            <span className="live-dot"/>
          </span>
          <span className="mono-foot" style={{color:'#0A0A0A'}}>Valencia · Fri 19:00</span>
        </div>

        <div className="rank-row rank-row--top">
          <div className="rank-pos mono-foot">01</div>
          <div>
            <div className="rank-path">VLC → MAD → ZGZ → BCN → VLC</div>
            <div className="mono-foot rank-meta">1,317 km · 4 legs · 21h drive</div>
          </div>
          <div className="rank-profit accent tabular">€2,840</div>
        </div>

        <div className="rank-row">
          <div className="rank-pos mono-foot">02</div>
          <div>
            <div className="rank-path">VLC → MUR → SEV → MAD → VLC</div>
            <div className="mono-foot rank-meta">1,710 km · 4 legs · 24h drive</div>
          </div>
          <div className="rank-profit tabular">€2,190</div>
        </div>

        <div className="rank-row">
          <div className="rank-pos mono-foot">03</div>
          <div>
            <div className="rank-path">VLC → BCN → LYO → MIL → VLC</div>
            <div className="mono-foot rank-meta">2,640 km · 5 legs · 36h · ferry</div>
          </div>
          <div className="rank-profit tabular">€1,610</div>
        </div>

        <div className="rank-foot mono-foot">
          NET OF FUEL, TOLLS, REST, DEPRECIATION & TAX.
        </div>
      </aside>

      <style>{`
        .route-vis{
          display:grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 0;
          border: 1px solid var(--hair);
          border-radius: 12px;
          background: #fff;
          overflow: hidden;
          text-align: left;
        }
        .route-vis-map{
          padding: 10px 12px;
          background: #FDFCF9;
          border-right: 1px solid var(--hair);
          position: relative;
        }
        .route-vis-rank{
          padding: 28px 28px 22px;
          display:flex; flex-direction:column; gap: 14px;
          background: #fff;
        }
        .rank-head{ display:flex; justify-content:space-between; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
        .rank-row{
          display:grid; grid-template-columns: 28px 1fr auto; align-items:center;
          gap: 14px;
          padding: 12px 0;
          border-bottom: 1px dashed var(--hair);
        }
        .rank-row--top{
          background: linear-gradient(to right, rgba(31,181,138,0.07), transparent);
          margin: 0 -10px; padding-left: 10px; padding-right: 10px;
          border-radius: 6px; border-bottom: 1px solid var(--hair);
        }
        .rank-pos{ color: var(--muted); font-size: 12px; }
        .rank-path{ font-family:'Inter Tight', sans-serif; font-weight:600; font-size: 14px; letter-spacing:-0.01em; color:#0A0A0A; }
        .rank-meta{ font-size: 11px; margin-top: 3px; }
        .rank-profit{ font-family:'Inter Tight', sans-serif; font-weight:600; font-size: 19px; letter-spacing:-0.02em; color: #0A0A0A; }
        .rank-foot{ margin-top: auto; padding-top: 10px; font-size: 10px; letter-spacing: 0.06em; color: var(--muted); }
        .live-dot{
          display:inline-block; width:6px; height:6px; border-radius:50%;
          background:#1FB58A; margin-left:8px; vertical-align: middle;
          box-shadow: 0 0 0 0 rgba(31,181,138,0.7);
          animation: live-pulse 1.2s infinite;
        }
        @keyframes live-pulse{
          0%   { box-shadow: 0 0 0 0 rgba(31,181,138,0.6); }
          70%  { box-shadow: 0 0 0 6px rgba(31,181,138,0); }
          100% { box-shadow: 0 0 0 0 rgba(31,181,138,0); }
        }
        @media (max-width: 820px){
          .route-vis{ grid-template-columns: 1fr; }
          .route-vis-map{ border-right: 0; border-bottom: 1px solid var(--hair); }
        }
        @media (prefers-reduced-motion: reduce){
          .live-dot{ animation: none; }
        }
      `}</style>
    </div>
  );
};

// RouteDiagram is provided by src/route_diagram.jsx (loaded after this file).
Object.assign(window, { Icon, IconCircular, IconChat, IconShield, IconChart, IconPlug, IconCheck, IconMenu, LogoMark });
