{/* Left Column: Narrative & Controls */}

PREDICTIVE PHYSICS ENGINE Precision Physics at Scale Simulating drag, grade, wind vectors, and rolling resistance to chart the mathematically optimal, zero-emission path in real time.

{/* Segmented Navigation (Fragments) */}

{fragments.map((f, i) => (

setFragmentStep(i)} style={{ cursor: 'pointer', padding: '8px 12px', borderRadius: 'calc(var(--pitch-radius-md) - 2px)', background: i === activeIdx ? 'var(--pitch-secondary)' : 'transparent', color: i === activeIdx ? '#ffffff' : 'rgba(255, 255, 255, 0.5)', fontSize: 'var(--slide-text-caption)', fontWeight: 600, textAlign: 'center', transition: 'all 0.2s ease' }} > {f.label}

))}

{/* Staggered Telemetry Metrics */}

{activeIdx >= 0 && (

Active Node

{activeNodeData.label}

Node Efficiency

{activeNodeData.efficiency}

{activeIdx >= 1 && (

Wind Vector

{currentWind} kts

Drag Coefficient

{currentDrag} Cd

)} {activeIdx >= 2 && (

OPTIMIZED ARRIVAL TIME

Physics-informed path convergence

{currentEta} mins

)} )}

{/* Right Column: Physical Vector Visualizer */} {/* Grid Overlay */}

{/* Header telemetry bar */}

SIMULATION ACTIVE // COORD_G_409

FRG_STEP: 0{activeIdx + 1}

{/* The Interactive Topology Map */}

{/* Flowing Signal Particles */} {links.map((link, i) => { const fromNode = nodes[link.from]; const toNode = nodes[link.to]; return ( ); })} {/* Nodes */} {nodes.map((node) => { const isSelected = selectedNode === node.id; return (

setSelectedNode(node.id)} style={{ position: 'absolute', left: `${node.x}%`, top: `${node.y}%`, transform: 'translate(-50%, -50%)', cursor: 'pointer', zIndex: 20 }} > {/* Pulsing Outer Ring */} {isSelected && ( )} {/* Main Node Point */} {/* Hover/Active Label Card */}

{node.label}

); })}

{/* Footer Real-Time Telemetry Readout */}

ESTIMATED LOAD

{activeNodeData.load}

TELEMETRY SYNCHRONY

99.8%

ENGINE FREQUENCY

142 Hz

);

Logistics Environment