// Live map view embedded in the app
const LiveMap = ({ nav }) => {
  const ref = useRef();
  useEffect(() => { const cleanup = window.initLiveDemo(ref.current, { onOpen: (id) => nav('container', { id }) }); return cleanup; }, []);
  return <div className="page page-live" ref={ref}>
    <section id="live" data-tour="live-map">
      <div className="live-h"><div><span className="kicker" style={{ color: 'var(--color-brand-yellow)' }}>Live operations · Aug–Dec 2026</span><h1>{t('Every container, every order, on one map.')}</h1><p>{t('Press play to run the season day by day. Ships move along real routes, statuses change, payments land, and the feed shows what a client would otherwise have called about.')}</p></div>
        <div className="ctrl"><span className="date" id="date"></span><button id="play">Play</button><div id="speed"><button data-s="1" className="on">1×</button><button data-s="2">2×</button><button data-s="4">4×</button></div><button id="today">Today</button><button id="restart">Restart</button></div></div>
      <div className="scrub"><span>Aug 1</span><input type="range" id="scrub" min="0" max="152" defaultValue="0"></input><span>Dec 31</span></div>
      <div className="live-grid">
        <div><div className="mapw"><svg id="map"></svg></div>
          <div className="kpis"><div className="kpi"><span>Containers at sea</span><b id="k-sea">0</b></div><div className="kpi"><span>Value in transit</span><b id="k-val">$0</b></div><div className="kpi"><span>Held / stuck</span><b id="k-held">0</b></div><div className="kpi"><span>Delivered this month</span><b id="k-del">0</b></div><div className="kpi"><span>Client payments to date</span><b id="k-paid">$0</b></div></div></div>
        <div className="live-side">
          <div id="sel" hidden></div>
          <div className="panel"><h3>Live feed <span className="pulse"></span></h3><ul id="feed"></ul></div>
          <div className="panel"><h3>Containers <span className="mute" style={{ fontWeight: 400, fontSize: 12 }}>click to trace</span></h3><ul id="clist"></ul></div>
        </div>
      </div>
    </section>
  </div>;
};
Object.assign(window, { LiveMap });