// modules-new.jsx — Stubs / wrappers for the new module set
// (Master Data, Exec Dashboard, Risk Monitoring, Broadcasting, Incident & Responder,
//  Travel [Pre + Journey], Language Translation, Agentic AI, Reverse Panic, Reporting)

const { useState: useStateNew } = React;

// ============================================================
// Module 04-1 — Broadcast Response Management
// Mirrors the live R24 PULSE "Broadcast" view: geofence map + meta,
// 4 KPI cards, response columns, status timeline + comments.
// ============================================================
const Module04Response = () => {
  const insideUsers = [
  { x: 60.2, y: 56.0, s: "ok" }, // green pin in zone
  { x: 58.8, y: 58.4, s: "no" }, // gray
  { x: 56.6, y: 65.0, s: "no" }, // gray
  { x: 57.6, y: 67.4, s: "notok" } // red (not ok)
  ];

  return (
    <div className="m04r">
      {/* ---------- Row 1 · Hero (map + meta column) ---------- */}
      <div className="m04r__hero">
        <div className="m04r__map-card">
          <div className="m04r__map-head">
            <div className="m04r__map-title">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="1" />
                <path d="M3 9h18M3 15h18M9 3v18M15 3v18" />
              </svg>
              Geofence Alert
            </div>
            <div className="m04r__map-type">
              <span className="m04r__map-type-lab">Broadcast Type</span>
              <span className="m04r__map-type-val">Alert</span>
            </div>
          </div>
          <div className="m04r__map-meta">Radius: 329270m (329.27km)</div>

          <div className="m04r__map-canvas">
            <WorldMap>
              {/* Big red geofence circle centred on JNB/Bloemfontein area */}
              <div className="m04r__geofence" style={{ left: "58.5%", top: "63%" }} />
              {/* Centre marker */}
              <div className="m04r__centre" style={{ left: "58.5%", top: "63%" }} />

              {insideUsers.map((u, i) =>
              <div
                key={i}
                className={`upin upin--${u.s === "ok" ? "green" : u.s === "notok" ? "red" : "gray"} m04r__upin`}
                style={{ left: `${u.x}%`, top: `${u.y}%` }}>
                
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                    <circle cx="9" cy="7" r="4" />
                  </svg>
                </div>
              )}

              <div className="m04r__map-attr">© 2026 HERE</div>
            </WorldMap>
          </div>
        </div>

        <aside className="m04r__meta">
          <div className="m04r__meta-card">
            <div className="m04r__meta-head">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" />
              </svg>
              Risk Category
            </div>
            <div className="m04r__meta-pill">Criminality</div>
          </div>

          <div className="m04r__meta-card">
            <div className="m04r__meta-head">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" />
              </svg>
              Incident Type
            </div>
            <div className="m04r__meta-pill">Murder</div>
          </div>

          <div className="m04r__meta-card">
            <div className="m04r__meta-head">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" />
              </svg>
              Broadcast Info
            </div>
            <div className="m04r__meta-info">
              <p>Created by: Jacques Kruger</p>
              <p>Created on: 27th May 2026, 09:03</p>
            </div>
          </div>
        </aside>
      </div>

      {/* ---------- Row 2 · KPI cards ---------- */}
      <div className="m04r__kpis">
        <div className="m04r__kpi">
          <div className="m04r__kpi-head">
            <span className="m04r__kpi-icon m04r__kpi-icon--neutral">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
              </svg>
            </span>
            <span className="m04r__kpi-lab">Broadcast sent to</span>
          </div>
          <div className="m04r__kpi-body">
            <div className="m04r__kpi-num">11<span className="m04r__kpi-unit">Users</span></div>
          </div>
        </div>

        <div className="m04r__kpi">
          <div className="m04r__kpi-head">
            <span className="m04r__kpi-icon m04r__kpi-icon--red">Not OK</span>
            <span className="m04r__kpi-lab">Not OK</span>
          </div>
          <div className="m04r__kpi-body">
            <div className="m04r__kpi-num">1<span className="m04r__kpi-unit">Users</span></div>
            <div className="m04r__kpi-ring" data-pct="9">
              <svg viewBox="0 0 36 36">
                <circle cx="18" cy="18" r="16" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="2.5" />
                <circle cx="18" cy="18" r="16" fill="none" stroke="#D92243" strokeWidth="2.5"
                strokeDasharray="9 100" strokeDashoffset="0" transform="rotate(-90 18 18)" strokeLinecap="round" />
              </svg>
              <span>9%</span>
            </div>
          </div>
        </div>

        <div className="m04r__kpi">
          <div className="m04r__kpi-head">
            <span className="m04r__kpi-icon m04r__kpi-icon--gray">···</span>
            <span className="m04r__kpi-lab">No response</span>
          </div>
          <div className="m04r__kpi-body">
            <div className="m04r__kpi-num">9<span className="m04r__kpi-unit">Users</span></div>
            <div className="m04r__kpi-ring">
              <svg viewBox="0 0 36 36">
                <circle cx="18" cy="18" r="16" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="2.5" />
                <circle cx="18" cy="18" r="16" fill="none" stroke="#9CA3AF" strokeWidth="2.5"
                strokeDasharray="81 100" strokeDashoffset="0" transform="rotate(-90 18 18)" strokeLinecap="round" />
              </svg>
              <span style={{ fontWeight: "700" }}>81%</span>
            </div>
          </div>
        </div>

        <div className="m04r__kpi">
          <div className="m04r__kpi-head">
            <span className="m04r__kpi-icon m04r__kpi-icon--green">OK</span>
            <span className="m04r__kpi-lab">OK</span>
          </div>
          <div className="m04r__kpi-body">
            <div className="m04r__kpi-num">1<span className="m04r__kpi-unit">Users</span></div>
            <div className="m04r__kpi-ring">
              <svg viewBox="0 0 36 36">
                <circle cx="18" cy="18" r="16" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="2.5" />
                <circle cx="18" cy="18" r="16" fill="none" stroke="#2EA770" strokeWidth="2.5"
                strokeDasharray="9 100" strokeDashoffset="0" transform="rotate(-90 18 18)" strokeLinecap="round" />
              </svg>
              <span>9%</span>
            </div>
          </div>
        </div>
      </div>

      {/* ---------- Row 3 · Responses (3 columns) ---------- */}
      <div className="m04r__resp">
        <div className="m04r__resp-head">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" />
            <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
          </svg>
          <span>Responses <span className="m04r__resp-count">(2/11)</span></span>
        </div>
        <div className="m04r__resp-cols">
          <div className="m04r__resp-col">
            <div className="m04r__resp-tab m04r__resp-tab--notok">Not OK (1)</div>
            <ul>
              <li>
                <span className="m04r__resp-mark m04r__resp-mark--notok">Not OK</span>
                <span className="m04r__resp-name">Marlize Holtzhausen</span>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="m04r__ext">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                  <polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
                </svg>
                <button className="m04r__call">Call</button>
              </li>
            </ul>
          </div>

          <div className="m04r__resp-col">
            <div className="m04r__resp-tab m04r__resp-tab--no">No response (9)</div>
            <ul>
              {[
              "Andri Smith", "Dohan Smit"].
              map((n) =>
              <li key={n}>
                  <span className="m04r__resp-mark m04r__resp-mark--no">···</span>
                  <span className="m04r__resp-name">{n}</span>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="m04r__ext">
                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                    <polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
                  </svg>
                  <button className="m04r__call">Calling</button>
                </li>
              )}
              <li className="m04r__resp-more">+ 7</li>
            </ul>
          </div>

          <div className="m04r__resp-col">
            <div className="m04r__resp-tab m04r__resp-tab--ok">OK (1)</div>
            <ul>
              <li>
                <span className="m04r__resp-mark m04r__resp-mark--ok">OK</span>
                <span className="m04r__resp-name">Jacques Kruger</span>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="m04r__ext">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                  <polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
                </svg>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* ---------- Row 4 · Status updates + comments ---------- */}
      <div className="m04r__foot">
        <div className="m04r__status">
          <div className="m04r__status-head">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
            </svg>
            Status Updates
          </div>
          <ul className="m04r__status-list">
            <li><span className="m04r__status-dot" /><span className="m04r__status-t tabular">07:05</span><span>1 Ok</span></li>
            <li><span className="m04r__status-dot" /><span className="m04r__status-t tabular">07:00</span><span>Broadcast created</span></li>
            <li><span className="m04r__status-dot" /><span className="m04r__status-t tabular">07:00</span><span>Broadcast sent</span></li>
            <li><span className="m04r__status-dot" /><span className="m04r__status-t tabular">07:00</span><span>2 Not OK</span></li>
          </ul>
        </div>

        <div className="m04r__comments">
          <div className="m04r__status-head">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
              <polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" />
            </svg>
            Comments
          </div>
          <div className="m04r__comments-empty">No response</div>
        </div>
      </div>
    </div>);

};
window.Module04Response = Module04Response;

// ============================================================
// Module 05 — Incident & Responder Management
// Mirrors live R24 PULSE Incident view: details rail + map +
// actions history & comments rail.
// ============================================================
const Module05Incident = () => {
  // Cycle through action stages so the gold tag animates through the
  // real-world responder lifecycle.
  const STAGES = [
  { label: "RESPONSE PROVIDER ACTION", color: "gold", msg: "The incident has been successfully created" },
  { label: "AMBULANCE DISPATCHED", color: "amber", msg: "Closest ambulance assigned · ER24 Unit 7" },
  { label: "AMBULANCE ON ROUTE", color: "blue", msg: "ETA 6 min · live GPS streaming to GSOC" },
  { label: "AMBULANCE ARRIVED", color: "green", msg: "Crossed geo-fence at 09:11:38 · arrival verified" }];

  const [stage, setStage] = useStateNew(0);
  React.useEffect(() => {
    const t = setInterval(() => setStage((s) => (s + 1) % STAGES.length), 2800);
    return () => clearInterval(t);
  }, []);
  const cur = STAGES[stage];

  // Map pins — positioned relative to the local-map viewport
  // (x/y as % of map canvas). Geofence is centred ~50/50.
  const pins = [
  // Inside zone — responders / hospitals / police
  { x: 56, y: 18, k: "hospital", color: "red" },
  { x: 70, y: 23, k: "police", color: "gray" },
  { x: 75, y: 25, k: "building", color: "gray" },
  { x: 33, y: 26, k: "security", color: "blue" },
  { x: 48, y: 33, k: "security", color: "blue" },
  { x: 59, y: 40, k: "hospital", color: "red" },
  { x: 27, y: 45, k: "security", color: "blue" },
  { x: 50, y: 33, k: "user", color: "red-user" }, // Marlize — needs help
  { x: 65, y: 49, k: "security", color: "blue" },
  { x: 75, y: 50, k: "hospital", color: "red" },
  { x: 21, y: 56, k: "hospital", color: "red" },
  { x: 49, y: 61, k: "hospital", color: "red" },
  { x: 36, y: 71, k: "security", color: "blue" },
  { x: 78, y: 61, k: "hospital", color: "red" },
  { x: 85, y: 60, k: "police", color: "gray" }];


  const pinSvg = (k) => {
    switch (k) {
      case "hospital":
        // Hospital — bold + cross inside a small square (building hint)
        return <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <rect x="10" y="3" width="4" height="18" rx="0.5" />
          <rect x="3" y="10" width="18" height="4" rx="0.5" />
        </svg>;
      case "security":
        // Security / responder — shield with subtle star
        return <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z" />
          <path d="M12 7l1.4 2.8 3 .4-2.2 2 .5 3-2.7-1.4-2.7 1.4.5-3-2.2-2 3-.4z" fill="#fff" opacity="0.85" />
        </svg>;
      case "police":
        // Police — shield filled
        return <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z" />
        </svg>;
      case "user":
        return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
        </svg>;
      case "building":
        return <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none">
          <rect x="6" y="4" width="12" height="16" rx="1" />
        </svg>;
      default:
        return null;
    }
  };

  return (
    <div className="m05i">
      {/* ---------- Header bar ---------- */}
      <div className="m05i__hdr">
        <div className="m05i__hdr-left">
          <button className="m05i__back" aria-label="Back">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
          </button>
          <div>
            <p className="m05i__hdr-eyebrow">Incident</p>
            <p className="m05i__hdr-title">
              In Progress
              <span className="m05i__hdr-badge">30</span>
              <span className="m05i__hdr-history" title="History">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M1 4v6h6" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /><polyline points="12 7 12 12 16 14" />
                </svg>
              </span>
            </p>
          </div>
        </div>
        <div className="m05i__hdr-mid">
          <span className="m05i__refresh">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
            </svg>
            Refreshing data...
          </span>
        </div>
        <div className="m05i__hdr-right">
          <span className="m05i__hdr-detail">Map<span>10 km</span></span>
          {["Threats", "Responders", "Hospitals", "Police"].map((lab) =>
          <label key={lab} className="m05i__check">
              <input type="checkbox" defaultChecked /> <span>{lab}</span>
            </label>
          )}
        </div>
      </div>

      {/* ---------- 3-column body ---------- */}
      <div className="m05i__grid">

        {/* --- LEFT · Incident details rail --- */}
        <aside className="m05i__rail">
          <div className="m05i__user">
            <div className="m05i__user-avatar">MH</div>
            <div className="m05i__user-meta">
              <p className="m05i__user-name">
                Marlize Holtzhausen
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="m05i__ext">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
                  <polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
                </svg>
              </p>
              <span className="m05i__user-pill">Not Ok</span>
            </div>
          </div>

          <details className="m05i__field" open>
            <summary className="m05i__field-sum">
              <span className="m05i__field-lab">Incident Type</span>
              <svg className="m05i__field-chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </summary>
            <p className="m05i__field-val">Broadcast: User Needs assistance</p>
          </details>

          <details className="m05i__field" open>
            <summary className="m05i__field-sum">
              <span className="m05i__field-lab">Summary</span>
              <svg className="m05i__field-chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </summary>
            <p className="m05i__field-val m05i__field-val--bold">1 killed, 2 wounded in a shooting outside a tavern in Section L of Botshabelo</p>
            <p className="m05i__field-body">1 killed, 2 wounded in a shooting outside a tavern in Section L of Botshabelo: An investigation is underway to locate the two unknown suspects.</p>
            <a className="m05i__read-more">Read more</a>
          </details>

          <details className="m05i__field">
            <summary className="m05i__field-sum">
              <span className="m05i__field-lab">Details</span>
              <svg className="m05i__field-chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </summary>
            <p className="m05i__field-body">Request for assistance was sent to Response Service Provider</p>
            <a className="m05i__read-more">Read more</a>
          </details>

          <details className="m05i__field">
            <summary className="m05i__field-sum">
              <span className="m05i__field-lab">Incident Location</span>
              <svg className="m05i__field-chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </summary>
            <p className="m05i__field-body tabular">Latitude: -26.080284, Longitude: 27.948422</p>
          </details>

          <details className="m05i__field">
            <summary className="m05i__field-sum">
              <span className="m05i__field-lab">Incident Closed</span>
              <svg className="m05i__field-chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </summary>
            <p className="m05i__field-body m05i__field-body--row">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
              </svg>
              Not closed yet
            </p>
          </details>

          <details className="m05i__field">
            <summary className="m05i__field-sum">
              <span className="m05i__field-lab">Source</span>
              <svg className="m05i__field-chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </summary>
            <p className="m05i__field-body">R24 P.U.L.S.E <span className="m05i__field-muted">(Ref: User indicated not ok from a broadcast)</span></p>
          </details>
        </aside>

        {/* --- CENTRE · Map --- */}
        <div className="m05i__map">
          {/* Real street-level map (Fourways · Gauteng). Drop a screenshot of the
              actual incident location to replace. Inline style because React 18
              doesn't map className → class on custom elements. */}
          <image-slot
            id="m05-incident-map"
            src={window.__asset('incidentMap','assets/m05-incident-map.png')}
            fit="cover"
            shape="rect"
            placeholder="Drop a street map of the incident location"
            style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}
          ></image-slot>
          {/* Subtle operational wash so the response pins + geofence read clearly */}
          <div className="m05i__map-scrim" />

          {/* Geofence — 10km radius around incident location */}
          <div className="m05i__geofence" />

          {/* Route line — drawn from start hospital (21,56) → midpoint → user (50,33),
                        only visible from "dispatched" stage onward */}
          {stage >= 1 &&
          <svg className="m05i__route" viewBox="0 0 100 100" preserveAspectRatio="none">
              <path d="M 21 56 Q 30 50 35 44 T 50 33"
            fill="none"
            stroke="#2E6FE0"
            strokeWidth="0.5"
            strokeDasharray="1.2 1.2"
            opacity={stage >= 3 ? 0.35 : 0.75} />
            
            </svg>
          }

          {/* Ambulance pin — appears at stage 1, moves toward user thru 2, parks at user at 3 */}
          {stage >= 1 && (() => {
            const pos = stage === 1 ? { x: 21, y: 56 } :
            stage === 2 ? { x: 35, y: 44 } :
            { x: 48, y: 35 };
            return (
              <div
                className={`m05i__ambulance m05i__ambulance--stage-${stage}`}
                style={{ left: `${pos.x}%`, top: `${pos.y}%` }}
                title="ER24 Unit 7">
                
                {/* Side-view ambulance: cab + box + red cross + flashing light + wheels */}
                <svg width="28" height="20" viewBox="0 0 56 36" fill="none">
                  {/* Box body */}
                  <rect x="14" y="8" width="32" height="18" rx="1.5" fill="#fff" stroke="#14132C" strokeWidth="1.4" />
                  {/* Cab */}
                  <path d="M2 16 L8 10 L14 10 L14 26 L2 26 Z" fill="#fff" stroke="#14132C" strokeWidth="1.4" strokeLinejoin="round" />
                  {/* Windscreen */}
                  <path d="M4 17 L9 12 L13 12 L13 17 Z" fill="#9BB7F5" />
                  {/* Red cross panel */}
                  <rect x="22" y="12" width="14" height="10" fill="#fff" />
                  <path d="M28.5 13.5v7M25 17h7" stroke="#D92243" strokeWidth="2.2" strokeLinecap="round" />
                  {/* Red side stripe */}
                  <rect x="14" y="22" width="32" height="1.6" fill="#D92243" />
                  {/* Flashing light bar */}
                  <rect x="18" y="5.5" width="24" height="2.5" rx="0.6" fill="#14132C" />
                  <circle className="m05i__amb-light m05i__amb-light--b" cx="22" cy="6.7" r="1.3" fill="#2E6FE0" />
                  <circle className="m05i__amb-light m05i__amb-light--r" cx="34" cy="6.7" r="1.3" fill="#D92243" />
                  {/* Wheels */}
                  <circle cx="11" cy="28" r="3.5" fill="#14132C" />
                  <circle cx="11" cy="28" r="1.4" fill="#5B6370" />
                  <circle cx="38" cy="28" r="3.5" fill="#14132C" />
                  <circle cx="38" cy="28" r="1.4" fill="#5B6370" />
                </svg>

                {/* "Arrived" pop-up appears only on stage 3 */}
                {stage === 3 && <span className="m05i__amb-pop">Arrived</span>}
              </div>);

          })()}

          {/* All pins */}
          {pins.map((p, i) =>
          <div key={i} className={`m05i__pin m05i__pin--${p.color}`} style={{ left: `${p.x}%`, top: `${p.y}%` }}>
              {pinSvg(p.k)}
            </div>
          )}

          <div className="m05i__map-attr">© Google · Maps</div>
        </div>

        {/* --- RIGHT · Actions & comments rail --- */}
        <aside className="m05i__actions">
          <div className="m05i__actions-row">
            <button className="m05i__btn m05i__btn--primary">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
              </svg>
              Add New Action
            </button>
            <button className="m05i__btn">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
              </svg>
              Call
            </button>
          </div>

          <div className="m05i__card">
            <div className="m05i__card-head">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M14 9V5a3 3 0 0 0-6 0v4M5 9h14l-1 11H6L5 9z" />
              </svg>
              Actions History
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: "auto" }}>
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </div>
            <div className="m05i__action">
              <button
                className={`m05i__action-tag m05i__action-tag--${cur.color}`}
                onClick={() => setStage((s) => (s + 1) % STAGES.length)}
                title="Click to advance">
                
                {cur.label}
              </button>
              <p className="m05i__action-row"><span className="m05i__action-ic"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg></span>27th May 2026, 09:04</p>
              <p className="m05i__action-row m05i__action-row--main">
                <span className="m05i__action-ic"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /></svg></span>
                <span className={`m05i__action-pill m05i__action-pill--${cur.color}`}>{cur.msg}</span>
              </p>
              <p className="m05i__action-row"><span className="m05i__action-ic"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /></svg></span>Action by: Marlize Holtzhausen</p>
              <p className="m05i__action-row"><span className="m05i__action-ic"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg></span>Request for assistance was sent to Response Service Provider</p>
              <p className="m05i__action-row tabular"><span className="m05i__action-ic"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg></span>[-28.0802838, 27.9484216]</p>
            </div>
          </div>

          <div className="m05i__card">
            <div className="m05i__card-head">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
              </svg>
              Comments
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: "auto" }}>
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </div>
            <input className="m05i__comment" placeholder="Comment" />
            <button className="m05i__comment-btn">Add Comment</button>
          </div>
        </aside>

      </div>
    </div>);

};
window.Module05Incident = Module05Incident;

// ============================================================
// Module 06 — Travel (Pre-Travel + Journey Management subtabs)
// ============================================================
const ModuleTravel = () => {
  const [tab, setTab] = useStateNew("protect");
  return (
    <div className="m-travel">
      <div className="m-travel__tabs">
        <button
          className={`m-travel__tab ${tab === "protect" ? "m-travel__tab--active" : ""}`}
          onClick={() => setTab("protect")}>
          
          <span className="m-travel__tab-num">01</span>
          <span>Pre-Travel (Protective/Executive)   </span>
        </button>
        <button
          className={`m-travel__tab ${tab === "pre" ? "m-travel__tab--active" : ""}`}
          onClick={() => setTab("pre")}>
          
          <span className="m-travel__tab-num">02</span>
          <span>Journey Overview</span>
        </button>
        <button
          className={`m-travel__tab ${tab === "journey" ? "m-travel__tab--active" : ""}`}
          onClick={() => setTab("journey")}>
          
          <span className="m-travel__tab-num">03</span>
          <span>Journey Management</span>
        </button>
      </div>
      <div className="m-travel__body">
        {tab === "protect" ? <ProtectiveTravelPanel /> :
        tab === "pre" ? <JourneyOverviewPanel /> :
        <PastJourneyPanel />}
      </div>
    </div>);

};

// ============================================================
// Protective Travel — Journey R24
// Shows that high-risk / executive protective travel can be
// requested, configured, quoted and managed through R24 PULSE.
// ============================================================
const ProtectiveTravelPanel = () =>
<div className="m-pt">

    {/* Project header */}
    <div className="m-pt__head">
      <div className="m-pt__head-brand">
        <div className="m-pt__brand">
          <span className="m-pt__brand-word">JOURNEY</span>
          <span className="m-pt__brand-mark">R24</span>
        </div>
        <span className="m-pt__head-sep" />
        <div>
          <p className="m-pt__head-eyebrow">JOURNEY · <span className="r24-blur">APPLE-EXECUTIVE-TRAV-20260527</span></p>
          <h4 className="m-pt__head-title"><span className="r24-blur">Apple Executive</span> · London → Lagos</h4>
        </div>
      </div>
      <div className="m-pt__head-meta">
        <div>
          <p className="m-pt__meta-lab">Status</p>
          <span className="m-pt__pill m-pt__pill--gold">Open Request</span>
        </div>
        <div>
          <p className="m-pt__meta-lab">Locked</p>
          <span className="m-pt__pill m-pt__pill--red">Locked</span>
        </div>
        <div>
          <p className="m-pt__meta-lab">Initiator</p>
          <p className="m-pt__meta-val">R24 GSOC · 27 May 2026, 07:29</p>
        </div>
      </div>
    </div>

    {/* Workflow stepper */}
    <div className="m-pt__steps">
      {[
    { n: "1", lab: "Request Details", done: true },
    { n: "2", lab: "Passenger Info", done: true },
    { n: "3", lab: "Travel Info", done: true },
    { n: "4", lab: "Service Info", done: true },
    { n: "5", lab: "Quote · Approve", done: false, active: true }].
    map((s, i, arr) =>
    <div key={i} className={`m-pt__step ${s.done ? "m-pt__step--done" : ""} ${s.active ? "m-pt__step--active" : ""}`}>
          <span className="m-pt__step-dot">{s.done ?
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg> :
        s.n}</span>
          <span className="m-pt__step-lab">{s.lab}</span>
          {i < arr.length - 1 && <span className="m-pt__step-bar" />}
        </div>
    )}
    </div>

    {/* Body grid: 4 detail cards + financial summary rail */}
    <div className="m-pt__grid">

      <section className="m-pt__card">
        <header className="m-pt__card-head">
          <span className="m-pt__card-num">01</span>
          <h5>Request Details</h5>
        </header>
        <dl className="m-pt__dl">
          <div><dt>Requestor</dt><dd className="r24-blur">Jacques Kruger</dd></div>
          <div><dt>Phone</dt><dd className="tabular r24-blur">+27 60 939 1795</dd></div>
          <div><dt>Project</dt><dd className="r24-blur">Apple Executive travelling to Africa</dd></div>
          <div><dt>Charge code</dt><dd className="tabular r24-blur">32456</dd></div>
          <div><dt>FMNO</dt><dd className="tabular r24-blur">7684</dd></div>
          <div><dt>Service provider</dt><dd>Response 24 · JM</dd></div>
        </dl>
      </section>

      <section className="m-pt__card">
        <header className="m-pt__card-head">
          <span className="m-pt__card-num">02</span>
          <h5>Passenger Information</h5>
          <span className="m-pt__pax-badge"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /></svg>1 VIP</span>
        </header>
        <dl className="m-pt__dl">
          <div><dt>Name</dt><dd className="r24-blur">Marlize Holtzhausen</dd></div>
          <div><dt>Nationality</dt><dd>RSA</dd></div>
          <div><dt>Passport</dt><dd className="tabular r24-blur">A34567</dd></div>
          <div><dt>Phone</dt><dd className="tabular r24-blur">+27 83 327 0477</dd></div>
          <div><dt>Email</dt><dd className="r24-blur">marlizeH@apple.com</dd></div>
          <div><dt>Risk profile</dt><dd><span className="m-pt__chip m-pt__chip--amber">EXEC · ELEVATED</span></dd></div>
        </dl>
      </section>

      <section className="m-pt__card">
        <header className="m-pt__card-head">
          <span className="m-pt__card-num">03</span>
          <h5>Travel Information</h5>
        </header>
        <div className="m-pt__route">
          <div className="m-pt__route-stop">
            <p className="m-pt__route-time tabular">29 MAY · 10:45</p>
            <p className="m-pt__route-place">Mallam Aminu Kano Intl Airport, Nigeria</p>
            <p className="m-pt__route-sub">Flight BA4567 · ETA · Terminal A</p>
          </div>
          <div className="m-pt__route-line">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>
          </div>
          <div className="m-pt__route-stop">
            <p className="m-pt__route-time tabular">31 MAY · 13:30</p>
            <p className="m-pt__route-place">Radisson Blu Hotel, Lagos Ikeja</p>
            <p className="m-pt__route-sub">Accommodation · check-in armed</p>
          </div>
        </div>
        <ul className="m-pt__tags">
          <li><span className="dot dot--green" /> Protocol arrival · armed</li>
          <li><span className="dot dot--green" /> Linked passengers (1)</li>
        </ul>
      </section>

      <section className="m-pt__card">
        <header className="m-pt__card-head">
          <span className="m-pt__card-num">04</span>
          <h5>Service Information</h5>
        </header>
        <ul className="m-pt__svc">
          <li>
            <div className="m-pt__svc-row">
              <span className="m-pt__svc-ic">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s-8-4-8-12V5l8-3 8 3v5c0 8-8 12-8 12z" /></svg>
              </span>
              <div>
                <p className="m-pt__svc-name">Close-protection officer · International</p>
                <p className="m-pt__svc-sub">2 days · 2 vehicles · armed escort · vetted operator</p>
              </div>
            </div>
          </li>
          <li>
            <div className="m-pt__svc-row">
              <span className="m-pt__svc-ic">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 17h4V5H2v12h3" /><path d="M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5v8h2" /><circle cx="7.5" cy="17.5" r="2.5" /><circle cx="17.5" cy="17.5" r="2.5" /></svg>
              </span>
              <div>
                <p className="m-pt__svc-name">Airport meet & greet · JM</p>
                <p className="m-pt__svc-sub">Mallam Aminu Kano IAP → Radisson Blu Lagos Ikeja</p>
              </div>
            </div>
          </li>
          <li>
            <div className="m-pt__svc-row">
              <span className="m-pt__svc-ic">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>
              </span>
              <div>
                <p className="m-pt__svc-name">24/7 GSOC monitoring · Reverse panic armed</p>
                <p className="m-pt__svc-sub">Patented duress · escalation chain · live position</p>
              </div>
            </div>
          </li>
        </ul>
      </section>

      {/* Right rail — quote / financial summary */}
      <aside className="m-pt__quote">
        <header className="m-pt__card-head m-pt__card-head--quote">
          <h5>Quote · <span className="r24-blur">APPLE-EXECUTIVE-TRAV-20260527</span></h5>
          <span className="m-pt__pill m-pt__pill--teal tabular">USD $</span>
        </header>
        <table className="m-pt__quote-table">
          <thead>
            <tr><th>Service</th><th className="tabular">Qty</th><th className="tabular">Days</th><th className="tabular">Total</th></tr>
          </thead>
          <tbody>
            <tr><td>Close-protection officer</td><td className="tabular">2</td><td className="tabular">4</td><td className="tabular"><span className="r24-blur">$ 4,000.00</span></td></tr>
            <tr><td>Airport meet & greet</td><td className="tabular">1</td><td className="tabular">1</td><td className="tabular"><span className="r24-blur">$&nbsp;&nbsp;&nbsp;480.00</span></td></tr>
            <tr><td>GSOC monitoring</td><td className="tabular">1</td><td className="tabular">2</td><td className="tabular"><span className="r24-blur">$&nbsp;&nbsp;&nbsp;120.00</span></td></tr>
          </tbody>
        </table>
        <dl className="m-pt__totals">
          <div><dt>Subtotal</dt><dd className="tabular"><span className="r24-blur">$ 4,600.00</span></dd></div>
          <div><dt>VAT (15%)</dt><dd className="tabular"><span className="r24-blur">$ 690.00</span></dd></div>
          <div className="m-pt__totals-grand"><dt>Total quote</dt><dd className="tabular"><span className="r24-blur">$ 5,290.00</span></dd></div>
        </dl>
        <div className="m-pt__quote-actions">
          <button className="m-pt__btn m-pt__btn--ghost">Save as Draft</button>
          <button className="m-pt__btn m-pt__btn--primary">Send for Client Review →</button>
        </div>
        <p className="m-pt__quote-foot">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s-8-4-8-12V5l8-3 8 3v5c0 8-8 12-8 12z" /></svg>
          ISO 31030 compliant · vetted providers · single-API booking
        </p>
      </aside>

    </div>
  </div>;

window.ProtectiveTravelPanel = ProtectiveTravelPanel;

// ============================================================
// Journey Overview — Journey R24 Management dashboard
// Full-bleed world map + left nav + right stat rail
// ============================================================
const JourneyOverviewPanel = () => {
  const [showThreats, setShowThreats] = useStateNew(false);
  // Auto-cycle: every ~4s, briefly highlight the Show Threats action, then reveal the threat card
  React.useEffect(() => {
    const t = setInterval(() => setShowThreats((s) => !s), 4000);
    return () => clearInterval(t);
  }, []);

  const nav = [
  { ic: "list", lab: "Overview", active: true },
  { ic: "plane", lab: "Journeys" },
  { ic: "users", lab: "Show Users", indent: true },
  { ic: "warn", lab: "Show Threats", indent: true },
  { ic: "police", lab: "Show Nearest Police", indent: true },
  { ic: "hospital", lab: "Show Nearest Hospital", indent: true },
  { ic: "vendor", lab: "Show Client Emergency Response Vendors", indent: true },
  { ic: "gear", lab: "Settings" }];

  const navIcon = (k) => {
    switch (k) {
      case "list":return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="4" rx="1" /><rect x="3" y="11" width="18" height="4" rx="1" /><rect x="3" y="18" width="18" height="3" rx="1" /></svg>;
      case "plane":return <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M21 16v-2L14 9V3.5a1.5 1.5 0 0 0-3 0V9l-7 5v2l7-2v5l-2 1.5V22l4-1 4 1v-1.5L15 19v-5l6 2z" /></svg>;
      case "users":return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" /></svg>;
      case "warn":return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><path d="M12 9v4M12 17h.01" /></svg>;
      case "police":return <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z" /></svg>;
      case "hospital":return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="1" /><path d="M12 8v8M8 12h8" /></svg>;
      case "vendor":return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 17h4V5H2v12h3" /><path d="M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5v8h2" /><circle cx="7.5" cy="17.5" r="2.5" /><circle cx="17.5" cy="17.5" r="2.5" /></svg>;
      case "gear":return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg>;
      default:return null;
    }
  };

  return (
    <div className="m-jov">
      {/* ---------- Map background (full-bleed) ---------- */}
      <div className="m-jov__map">
        <WorldMap />

        {/* Route line — Cape Town → Pretoria → UAE (dashed) */}
        <svg className="m-jov__route" viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M 55 73 Q 53 70 53 67 T 49 22"
          fill="none"
          stroke="#1F3DA8"
          strokeWidth="0.4"
          strokeDasharray="0.9 0.9" />
          
        </svg>

        {/* Pins */}
        <div className="m-jov__pin m-jov__pin--plane" style={{ left: "55%", top: "73%" }} title="Cape Town · Travel Start">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M21 16v-2L14 9V3.5a1.5 1.5 0 0 0-3 0V9l-7 5v2l7-2v5l-2 1.5V22l4-1 4 1v-1.5L15 19v-5l6 2z" />
          </svg>
          <span className="m-jov__pin-label">Marlize <em>(Travel Start)</em></span>
        </div>
        <div className="m-jov__pin m-jov__pin--green" style={{ left: "53%", top: "67%" }} title="Pretoria · Active" />
        <div className="m-jov__pin m-jov__pin--end" style={{ left: "49%", top: "22%" }} title="Paris, France · Hilton Hotel">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M19 7h-3V5a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM10 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2h-4V5z" />
          </svg>
          <span className="m-jov__pin-label m-jov__pin-label--end">Marlize <em>(End Destination)</em><br /><small>Hilton Hotel · Paris</small></span>
        </div>

        {/* Threat ring + alert card near the end destination — visible when "Show Threats" is on */}
        {showThreats &&
        <>
            <div className="m-jov__threat-ring" style={{ left: "49%", top: "22%" }} />
            <div className="m-jov__threat-card" style={{ left: "53%", top: "16%" }}>
              <div className="m-jov__threat-tag">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><path d="M12 9v4M12 17h.01" /></svg>
                MODERATE THREAT
              </div>
              <p className="m-jov__threat-title">Protest / Unrest</p>
              <p className="m-jov__threat-meta">Place de la République, Paris · ~2.4km from hotel</p>
              <div className="m-jov__threat-state">
                <span className="m-jov__threat-pulse" />
                <span>Risk requires monitoring</span>
              </div>
            </div>
          </>
        }

        <div className="m-jov__map-attr">© 2026 HERE</div>
      </div>

      {/* ---------- Left sidebar (Journey R24) ---------- */}
      <aside className="m-jov__nav">
        <div className="m-jov__brand">
          <span className="m-jov__brand-word">JOURNEY</span>
          <span className="m-jov__brand-mark">R24</span>
        </div>

        <div className="m-jov__nav-card">
          <div className="m-jov__nav-eyebrow">
            JOURNEY MANAGEMENT
            <span className="m-jov__nav-mod">M</span>
          </div>
          <ul className="m-jov__nav-list">
            {nav.map((n, i) =>
            <li key={i}
            onClick={() => n.lab === "Show Threats" && setShowThreats((s) => !s)}
            className={`m-jov__nav-item ${n.active ? "m-jov__nav-item--active" : ""} ${n.indent ? "m-jov__nav-item--indent" : ""} ${n.muted ? "m-jov__nav-item--muted" : ""} ${n.lab === "Show Threats" && showThreats ? "m-jov__nav-item--toggled" : ""}`}>
                <span className="m-jov__nav-ic">{navIcon(n.ic)}</span>
                <span>{n.lab}</span>
                {n.lab === "Show Threats" && showThreats &&
              <span className="m-jov__nav-dot" />
              }
              </li>
            )}
          </ul>
        </div>
      </aside>

      {/* ---------- Right stats rail ---------- */}
      <aside className="m-jov__stats">
        {[
        { ic: "plus", lab: "New Requests", v: 6, color: "green" },
        { ic: "plane", lab: "Active Journeys", v: 1, color: "green" },
        { ic: "clock", lab: "Pending", v: 0, color: "muted" },
        { ic: "history", lab: "Past Journeys", v: 10, color: "muted" }].
        map((s, i) =>
        <div key={i} className="m-jov__stat">
            <div className="m-jov__stat-head">
              <span className="m-jov__stat-ic">{navIcon(s.ic)}</span>
              <span className="m-jov__stat-lab">{s.lab}</span>
              <span className="m-jov__stat-expand" title="Expand">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="15 3 21 3 21 9" />
                  <polyline points="9 21 3 21 3 15" />
                  <line x1="21" y1="3" x2="14" y2="10" />
                  <line x1="3" y1="21" x2="10" y2="14" />
                </svg>
              </span>
            </div>
            <div className={`m-jov__stat-val m-jov__stat-val--${s.color}`}>
              <span>{s.v}</span>
            </div>
          </div>
        )}
      </aside>
    </div>);

};
window.JourneyOverviewPanel = JourneyOverviewPanel;

// ============================================================
// Past Journeys — Travel module sub-tab 03
// Mirrors live R24 PULSE "Past Journeys" detail: left rail
// (departure/destination/check-in), 3 document cards top-right,
// route map below. Uses the start/end destinations from the
// Journey Overview (Cape Town → Hilton · Paris).
// ============================================================
const PastJourneyPanel = () => {
  const STAGES = [
    { lab: "Departed", color: "blue" },
    { lab: "On Route", color: "amber" },
    { lab: "Arrived",  color: "green" },
  ];
  const [stage, setStage] = useStateNew(0);
  React.useEffect(() => {
    const t = setInterval(() => setStage((s) => (s + 1) % STAGES.length), 2400);
    return () => clearInterval(t);
  }, []);
  const cur = STAGES[stage];
  return (
<div className="m-pj">

    {/* LEFT · Past Journey detail rail */}
    <aside className="m-pj__rail">
      <div className="m-pj__rail-head">
        <button className="m-pj__back" aria-label="Back">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7" /></svg>
        </button>
        <div>
          <p className="m-pj__eyebrow">Travel</p>
          <h4 className="m-pj__title">Active Journey</h4>
        </div>
      </div>

      <div className="m-pj__user">
        <div className="m-pj__avatar">MH</div>
        <div className="m-pj__user-meta">
          <p className="m-pj__user-name">
            Marlize Holtzhausen
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="m-pj__ext">
              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
              <polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
            </svg>
          </p>
          <span
            className={`m-pj__user-pill m-pj__user-pill--${cur.color}`}
            onClick={() => setStage((s) => (s + 1) % STAGES.length)}
            title="Click to advance status"
          >
            {cur.lab}
          </span>
        </div>
      </div>

      <div className="m-pj__leg">
        <span className="m-pj__leg-pin m-pj__leg-pin--plane">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M21 16v-2L14 9V3.5a1.5 1.5 0 0 0-3 0V9l-7 5v2l7-2v5l-2 1.5V22l4-1 4 1v-1.5L15 19v-5l6 2z"/>
          </svg>
        </span>
        <div>
          <p className="m-pj__leg-lab">Departure</p>
          <p className="m-pj__leg-when">3rd Sept 2026, 12:00</p>
          <p className="m-pj__leg-place">V&A Waterfront, Cape Town</p>
          <p className="m-pj__leg-coords tabular">18.4232, -33.9036</p>
        </div>
      </div>

      <div className="m-pj__leg">
        <span className="m-pj__leg-pin m-pj__leg-pin--end">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M19 7h-3V5a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM10 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2h-4V5z"/>
          </svg>
        </span>
        <div>
          <p className="m-pj__leg-lab">Destination</p>
          <p className="m-pj__leg-when">4th Sept 2026, 06:42</p>
          <p className="m-pj__leg-place">Hilton Hotel — 18 Av. de Suffren, Paris</p>
          <p className="m-pj__leg-coords tabular">2.2945, 48.8584</p>
        </div>
      </div>

      <div className="m-pj__checkin">
        <p className="m-pj__leg-lab">Check In</p>
        <div className="m-pj__checkin-row">
          <span>Arrived at destination</span>
          <span className="m-pj__pill m-pj__pill--green">Checked In</span>
        </div>
        <ul className="m-pj__checkin-list">
          <li>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>
            4th Sept 2026, 06:46 (local)
          </li>
          <li>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>
            Hilton Hotel · 18 Av. de Suffren
            <span className="m-pj__coords tabular">2.2942, 48.8582</span>
          </li>
        </ul>
        <p className="m-pj__delta">Distance from approved destination: <strong>0.027 km</strong></p>
      </div>

      <div className="m-pj__source">
        <p className="m-pj__leg-lab">Source</p>
        <p className="m-pj__source-id tabular">019686b3-z7z1-9945-6b9a-99ca33ed22222</p>
      </div>
    </aside>

    {/* RIGHT · 3 document cards over a route map */}
    <section className="m-pj__main">
      <div className="m-pj__docs">
        {[
      { lab: "Journey Details", n: 1, file: "JK Brief", state: "Ready", date: "30th Aug 2026, 07:47" },
      { lab: "Miscellaneous", n: 0, empty: true },
      { lab: "Risk Assessment", n: 1, file: "Country Risk Report · France", state: "Ready", date: "30th Aug 2026, 07:48" }].
      map((d, i) =>
      <div key={i} className="m-pj__doc">
            <header>
              <h5>{d.lab} <span>({d.n})</span></h5>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="m-pj__doc-chev"><polyline points="6 9 12 15 18 9" /></svg>
            </header>
            <div className="m-pj__doc-actions">
              <button className="m-pj__doc-btn m-pj__doc-btn--upload">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" /></svg>
                Upload
              </button>
              <button className="m-pj__doc-btn">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 4v6h6" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /></svg>
                Refresh
              </button>
            </div>
            {d.empty ?
        <div className="m-pj__doc-empty">
                <p>No documents in this category</p>
                <p className="m-pj__doc-empty-sub">Click Upload above to add documents</p>
              </div> :

        <div className="m-pj__doc-file">
                <div className="m-pj__doc-file-main">
                  <p className="m-pj__doc-file-name">{d.file}</p>
                  <div className="m-pj__doc-file-meta">
                    <span className="m-pj__chip m-pj__chip--pdf">PDF</span>
                    <span className="m-pj__chip m-pj__chip--ready">{d.state}</span>
                    <span className="m-pj__doc-file-date">{d.date}</span>
                  </div>
                </div>
                <div className="m-pj__doc-file-acts">
                  <button title="View"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg></button>
                  <button title="More">⋯</button>
                </div>
              </div>
        }
          </div>
      )}
      </div>

      <div className="m-pj__map">
        <WorldMap/>

        {/* Pins on the map — match the Journey Overview style */}
        <div className="m-pj__map-pin m-pj__map-pin--plane" style={{ left: "55%", top: "73%" }} title="Cape Town · Departure">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M21 16v-2L14 9V3.5a1.5 1.5 0 0 0-3 0V9l-7 5v2l7-2v5l-2 1.5V22l4-1 4 1v-1.5L15 19v-5l6 2z"/>
          </svg>
        </div>
        <div className="m-pj__map-pin m-pj__map-pin--end" style={{ left: "49%", top: "22%" }} title="Hilton Hotel · Paris">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <path d="M19 7h-3V5a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM10 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2h-4V5z"/>
          </svg>
        </div>

        {/* Risk indicator carried over from Journey Overview */}
        <div className="m-pj__risk-ring" style={{ left: "49%", top: "22%" }}/>
        <div className="m-pj__risk-card" style={{ left: "53%", top: "16%" }}>
          <span className="m-pj__risk-tag">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
            MODERATE THREAT
          </span>
          <p className="m-pj__risk-title">Protest / Unrest</p>
          <p className="m-pj__risk-meta">Place de la République · ~2.4km from hotel</p>
          <div className="m-pj__risk-state">
            <span className="m-pj__risk-pulse"/>
            Risk monitored throughout stay
          </div>
        </div>

        {/* Curve between them */}
        <svg className="m-pj__map-route" viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M 55 73 Q 53 70 53 67 T 49 22"
        fill="none" stroke="#1F3DA8" strokeWidth="0.4" strokeDasharray="0.9 0.9" />
        </svg>

        <div className="m-pj__map-attr">© 2026 HERE</div>
      </div>
    </section>

  </div>
  );
};

window.PastJourneyPanel = PastJourneyPanel;

const PreTravelPanel = () =>
<div className="m-travel__pre">
    <div className="m-travel__pre-head">
      <div>
        <p className="m-travel__pre-eyebrow">TRIP-2841 · PRE-FLIGHT REVIEW</p>
        <h4 className="m-travel__pre-title">London → Lagos · Q. Adekunle</h4>
      </div>
      <span className="m-travel__pre-score m-travel__pre-score--amber">RISK · 68 / AMBER</span>
    </div>

    <div className="m-travel__pre-grid">
      <div className="m-travel__pre-card">
        <p className="m-travel__pre-label">Destination Risk</p>
        <p className="m-travel__pre-value">Lagos, NG</p>
        <ul className="m-travel__pre-list">
          <li><span className="dot dot--amber" /> Crime · ELEVATED</li>
          <li><span className="dot dot--red" /> Civil unrest · HIGH</li>
          <li><span className="dot dot--green" /> Health · MODERATE</li>
        </ul>
      </div>
      <div className="m-travel__pre-card">
        <p className="m-travel__pre-label">Traveller Profile</p>
        <p className="m-travel__pre-value">Senior · First trip</p>
        <ul className="m-travel__pre-list">
          <li>Medical · No advisories</li>
          <li>Trainings · IRT-2 expired</li>
          <li>Documents · Visa OK</li>
        </ul>
      </div>
      <div className="m-travel__pre-card">
        <p className="m-travel__pre-label">Approvals</p>
        <p className="m-travel__pre-value">3 of 4 cleared</p>
        <ul className="m-travel__pre-list">
          <li><span className="dot dot--green" /> Line Manager</li>
          <li><span className="dot dot--green" /> Security</li>
          <li><span className="dot dot--green" /> Medical</li>
          <li><span className="dot dot--amber" /> Country Sponsor</li>
        </ul>
      </div>
      <div className="m-travel__pre-card">
        <p className="m-travel__pre-label">Required Briefings</p>
        <p className="m-travel__pre-value">2 outstanding</p>
        <ul className="m-travel__pre-list">
          <li>Lagos country brief — sent</li>
          <li>Proof-of-life protocol — pending</li>
          <li>Hostile environment awareness</li>
        </ul>
      </div>
    </div>

    <div className="m-travel__pre-bar">
      <span className="m-travel__pre-bar-label">CLEAR TO ISSUE</span>
      <span className="m-travel__pre-bar-progress" style={{ width: "76%" }} />
      <span className="m-travel__pre-bar-pct">76%</span>
    </div>
  </div>;


// ============================================================
// Module 07 — Language Translation
// ============================================================
// ============================================================
// Module 07 — Language Translation
// Visualises ONE event broadcast in THREE languages:
//   • Background: GSOC web portal in French (operator view)
//   • Overlay: 2 mobile devices receiving the same broadcast
//                in English (Lagos) and Arabic (Casablanca)
// ============================================================
const ModuleLang = () => {
  const Bell = (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
      <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
    </svg>
  );
  const Megaphone = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M3 11h3l4-7v18l-4-7H3zM14 6.5a5.5 5.5 0 0 1 0 11" stroke="currentColor" strokeWidth="0.5" strokeLinejoin="round"/>
    </svg>
  );
  const Home = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z"/>
    </svg>
  );
  const Plane = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/>
    </svg>
  );
  const Chat = (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
    </svg>
  );

  // Two broadcasts that appear on BOTH phones in their respective language.
  const broadcasts = [
    {
      tone: "amber",
      en: {
        title: "1 killed, 2 wounded in a shooting outside a tavern in Section L of Botshabelo",
        sub: "An investigation is underway to locate the two unknown suspects.",
        ts: "2026-05-27 09:03",
        reply: "OK",
      },
      ar: {
        title: "قتل شخص واحد وأصيب اثنان في إطلاق نار خارج حانة في القسم L من بوتشابيلو",
        sub: "ولا يزال التحقيق جاريا لتحديد مكان المشتبه فيهما المجهولين.",
        ts: "2026-05-27 09:03",
        reply: "موافق",
      },
    },
    {
      tone: "gray",
      withCta: true,
      en: {
        title: "Auto-Broadcast: Protest by the IPCC Church group outside Pretoria High Court on Madiba Street in Pretoria",
        sub: "Auto-Broadcast: Madiba Street between Bosman Street and Paul Kruger Street was closed due to the protest.",
        ts: "2026-05-26 13:10",
        reply: "NoResponse",
        cta: "Respond Now",
      },
      ar: {
        title: "البث التلقائي: احتجاج من قبل مجموعة كنيسة IPCC خارج محكمة بريتوريا العليا في شارع ماديبا في بريتوريا",
        sub: "البث التلقائي: تم إغلاق شارع ماديبا بين شارع بوسمان وشارع بول كروجر بسبب الاحتجاج.",
        ts: "2026-05-26 13:10",
        reply: "لا رد",
        cta: "الرد الآن",
      },
    },
  ];

  const renderPhone = (lang, copy, who, isRTL) => (
    <div className={`m-lang2__phone m-lang2__phone--${lang}`} dir={isRTL ? "rtl" : "ltr"}>
      <div className="m-lang2__phone-tag" dir="ltr">
        <span className="m-lang2__phone-lang">{lang.toUpperCase()}</span>
        <span className="m-lang2__phone-who">{who}</span>
      </div>
      <div className="m-lang2__device">
        <div className="m-lang2__device-notch" />
        <div className="m-lang2__device-screen">
          <div className="m-lang2__appbar" dir="ltr">
            <div className="m-lang2__bell">
              {Bell}
              <span className="m-lang2__badge">9</span>
            </div>
            <div className="m-lang2__logo">
              <img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt="R24"/>
            </div>
            <div className="m-lang2__hamburger"><span/><span/><span/></div>
          </div>

          <div className="m-lang2__feed">
            {broadcasts.map((b, i) => {
              const c = b[lang];
              return (
                <div key={i} className={`m-lang2__bc m-lang2__bc--${b.tone}`}>
                  <div className={`m-lang2__bc-icon m-lang2__bc-icon--${b.tone}`}>
                    {Megaphone}
                  </div>
                  <div className="m-lang2__bc-body">
                    <h5 className="m-lang2__bc-title">{c.title}</h5>
                    {c.sub && <p className="m-lang2__bc-sub">{c.sub}</p>}
                    <div className="m-lang2__bc-foot" dir="ltr">
                      <span className="m-lang2__bc-ts">{c.ts}</span>
                      <span className={`m-lang2__bc-reply m-lang2__bc-reply--${c.reply === "OK" || c.reply === "موافق" ? "ok" : "no"}`}>{c.reply}</span>
                    </div>
                    {b.withCta && (
                      <button className="m-lang2__bc-cta">{c.cta}</button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          <div className="m-lang2__tabbar" dir="ltr">
            <span className="m-lang2__tab">{Plane}</span>
            <span className="m-lang2__tab m-lang2__tab--active">{Home}</span>
            <span className="m-lang2__tab">{Chat}</span>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="m-lang2">
      {/* GSOC operator view — French portal screenshot */}
      <div className="m-lang2__bg">
        <image-slot
          id="m-lang-portal-fr"
          src={window.__asset('langPortalFr','assets/m-lang-fr-portal.png')}
          fit="cover"
          shape="rect"
          placeholder="Drop French GSOC portal screenshot"
          style={{ position: "absolute", inset: 0, width: "auto", height: "auto" }}
        ></image-slot>
        <div className="m-lang2__bg-veil"/>
      </div>

      {/* Caption banner — one broadcast, three languages */}
      <div className="m-lang2__banner">
        <span className="m-lang2__banner-pill">
          <span className="m-lang2__banner-dot"/>
          ONE BROADCAST · THREE LANGUAGES
        </span>
        <span className="m-lang2__banner-text">
          GSOC operator publishes once in <strong>FR</strong> — every recipient reads in their preferred language
        </span>
        <span className="m-lang2__banner-meta">47 languages · sub-second</span>
      </div>

      {/* Operator caption — anchored to the portal */}
      <div className="m-lang2__op">
        <div className="m-lang2__op-avatar">MH</div>
        <div className="m-lang2__op-body">
          <p className="m-lang2__op-lab">Operator · GSOC-04 · <strong>FR</strong></p>
          <p className="m-lang2__op-name">Marlize Holtzhausen <span className="m-lang2__op-role">· Group CEO</span></p>
          <p className="m-lang2__op-quote">"Une manifestation est attendue au tribunal de Plymouth — diffusé à tous les utilisateurs concernés."</p>
        </div>
      </div>

      {/* Phones — overlay */}
      {renderPhone("en", null, "Lagos · J. Akande", false)}
      {renderPhone("ar", null, "Casablanca · O. Bennis", true)}

      {/* Map layer toggles — consistent with the GSOC dashboard (section 02) */}
      <div className="m-lang2__layers">
        <div className="m08__action">Show Users</div>
        <div className="m08__action">Show Threats</div>
        <div className="m08__action">Show Police</div>
        <div className="m08__action">Show Hospitals</div>
      </div>

      {/* Broadcast packets — animate from operator to each phone, looping */}
      <span className="m-lang2__pulse m-lang2__pulse--en" aria-hidden="true"/>
      <span className="m-lang2__pulse m-lang2__pulse--ar" aria-hidden="true"/>
      <span className="m-lang2__broadcast-ring" aria-hidden="true"/>
    </div>
  );
};

// ============================================================
// Module 08 — Virtual Risk Operator (VRO)
// Reuses the Module 02 dashboard frame (topbar, sidebar, map bg)
// with the Notifications · Escalations panel as the featured overlay,
// cycling through All / Communications / Incidents / Messaging tabs.
// ============================================================

const VRO_TABS = ["All", "Communications", "Incidents", "Messaging", "Travel", "Other"];

// Notifications grouped by tab. The "All" feed mixes a few from every channel.
const VRO_NOTI = {
  All: {
    count: 50,
    groups: [
      {
        date: "05/20/2026",
        items: [
          { tone: "amber", title: "VRO: Closeby user requested to assist", desc: "VRO (assisted by: J. Kruger) — incident resolved · user confirmed ok", tags: ["INCIDENTS", "Medium"], tagTones: ["amber", "amber"], ts: "08:19", read: false },
          { tone: "amber", title: "VRO: Closeby user requested to assist", desc: "VRO (assisted by: J. Kruger) — incident resolved · user confirmed ok (Testing)", tags: ["INCIDENTS", "Medium"], tagTones: ["amber", "amber"], ts: "08:19", read: false },
          { tone: "amber", title: "VRO: User contacted on Not OK", desc: "VRO (assisted by: M. Dunn) — incident resolved · user ok", tags: ["INCIDENTS", "Medium"], tagTones: ["amber", "amber"], ts: "07:02", read: false },
        ],
      },
    ],
  },
  Communications: {
    count: 14,
    groups: [
      {
        date: "09/09/2025",
        items: [
          { tone: "coral", title: "Update details", desc: "Emergency contacts requested across 12 personnel", tags: ["COMS", "Extreme"], tagTones: ["coral", "coral"], ts: "12:45", read: true, readDot: "coral" },
        ],
      },
      {
        date: "09/02/2025",
        items: [
          { tone: "amber", title: "JM Trip Brief — Updated", desc: "Designation: CPO  ·  Driver: C. Safeguard  ·  Vehicle: SUV FGY 469 Toyota Fortuner — Black", tags: ["COMS", "Medium"], tagTones: ["amber", "amber"], ts: "07:32", read: true, readDot: "amber" },
          { tone: "amber", title: "JM Trip Brief — Planned", desc: "Sedan RTS 427 Toyota Camry — Silver  ·  Journey Facilitator: J. Kruger", tags: ["COMS", "Medium"], tagTones: ["amber", "amber"], ts: "06:34", read: true, readDot: "amber" },
        ],
      },
    ],
  },
  Incidents: {
    count: 15,
    groups: [
      {
        date: "05/12/2026",
        items: [
          { tone: "amber", title: "VRO: User contacted on Not OK", desc: "VRO (assisted by: J. Kruger) — incident resolved · user ok (Accidental Trigger)", tags: ["INCIDENTS", "Medium"], tagTones: ["amber", "amber"], ts: "17:11", read: false },
          { tone: "teal",  title: "VRO: Response provider action", desc: "VRO (assisted by: J. Kruger) — incident successfully created · request sent to Response Provider", tags: ["INCIDENTS", "Low"], tagTones: ["teal", "teal"], ts: "17:09", read: true, readDot: "teal" },
          { tone: "coral", title: "Broadcast: User Needs assistance", desc: "Suspect killed in a shootout with police in Putfontein AH, Benoni. Another suspect at large — investigation underway.", tags: ["INCIDENTS", "Extreme"], tagTones: ["coral", "coral"], ts: "17:08", read: false },
        ],
      },
    ],
  },
  Messaging: {
    count: 33,
    groups: [
      {
        date: "Today",
        items: [
          { tone: "teal", title: "New message from J. Kruger", desc: "Doing well, thank you.", tags: ["MESSAGES", "Low"], tagTones: ["teal", "teal"], ts: "09:21", read: false },
          { tone: "teal", title: "New group created", desc: "You were added to the DRC Group.", tags: ["MESSAGES", "Low"], tagTones: ["teal", "teal"], ts: "09:21", read: false },
        ],
      },
      {
        date: "10/10/2025",
        items: [
          { tone: "teal", title: "New message from M. Dunn", desc: "Hello Jacques, hope you are well.", tags: ["MESSAGES", "Low"], tagTones: ["teal", "teal"], ts: "14:18", read: true, readDot: "teal" },
          { tone: "teal", title: "New group created", desc: "You were added to the Jacques Kruger group.", tags: ["MESSAGES", "Low"], tagTones: ["teal", "teal"], ts: "14:18", read: true, readDot: "teal" },
        ],
      },
    ],
  },
  Travel: {
    count: 9,
    groups: [
      {
        date: "Today",
        items: [
          { tone: "amber", title: "VRO: Itinerary risk score updated", desc: "JNB → CDG route flagged · medium · alternate carrier suggested", tags: ["TRAVEL", "Medium"], tagTones: ["amber", "amber"], ts: "11:04", read: false },
        ],
      },
    ],
  },
  Other: {
    count: 6,
    groups: [
      {
        date: "Today",
        items: [
          { tone: "teal", title: "VRO: Audit ledger anchored", desc: "Daily hash anchored to public timestamp · 0x9c1f…42a8", tags: ["AUDIT", "Low"], tagTones: ["teal", "teal"], ts: "00:01", read: false },
        ],
      },
    ],
  },
};

const VRO_BellIcon = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 22a2.5 2.5 0 0 0 2.45-2H9.55A2.5 2.5 0 0 0 12 22zM19.92 17.42 19 17V11a7 7 0 0 0-5-6.71V3a2 2 0 1 0-4 0v1.29A7 7 0 0 0 5 11v6l-.92.42A1 1 0 0 0 4.5 19h15a1 1 0 0 0 .42-1.58z"/>
  </svg>
);

const ModuleAgent = () => {
  const [tabIdx, setTabIdx] = React.useState(0);

  // Cycle the active tab every ~5s — demonstrates VRO oversight across channels
  React.useEffect(() => {
    const t = setInterval(() => setTabIdx(i => (i + 1) % VRO_TABS.length), 5200);
    return () => clearInterval(t);
  }, []);

  const activeTab = VRO_TABS[tabIdx];
  const tabData = VRO_NOTI[activeTab];

  return (
    <div className="m08 m08--vro">
      {/* TOPBAR — reused */}
      <div className="m08__topbar">
        <div className="logo-circle" style={{ background: "transparent", border: 0, padding: 0 }}>
          <img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt="R24" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
        </div>
        <div className="m08__search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
          </svg>
          <span>Gauteng, South Africa</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div className="m08-vro__bell-btn">
            <VRO_BellIcon size={16}/>
            <span className="m08-vro__bell-badge">{VRO_NOTI.All.count}</span>
          </div>
          <div className="m08__user">
            <div className="m08__user-avatar">MH</div>
            <div>
              <div className="m08__user-name">R24 International</div>
              <div className="m08__user-role">M. Holtzhausen · Group CEO</div>
            </div>
          </div>
        </div>
      </div>

      <div className="m08__body">
        {/* SIDEBAR — reused, with VRO icon at bottom */}
        <div className="m08__sidebar">
          <div className="m08__sidebar-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
          <div className="m08__sidebar-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49M7.76 16.24a6 6 0 0 1 0-8.49M20.07 4.93a10 10 0 0 1 0 14.14M3.93 19.07a10 10 0 0 1 0-14.14"/></svg></div>
          <div className="m08__sidebar-item m08__sidebar-item--active"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg></div>
          <div className="m08__sidebar-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>
          <div className="m08__sidebar-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11l3 3 8-8"/><path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h7"/></svg></div>
          <div className="m08__sidebar-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></div>
          <div className="m08__sidebar-item"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
          <div className="m08__sidebar-divider" aria-hidden="true"/>
          <div className="m08__sidebar-item m08__sidebar-item--vro" title="VRO · Virtual Risk Operator (agent active)">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M12 2 L13.6 8.4 L20 10 L13.6 11.6 L12 18 L10.4 11.6 L4 10 L10.4 8.4 Z"/>
            </svg>
            <span className="m08__sidebar-vro-dot"/>
          </div>
        </div>

        <div className="m08__main">
          {/* Reuse the SAME map background as Module 02 */}
          <image-slot
            id="m08-vro-map"
            src={window.__asset('mapBg','assets/m08-map-bg.png')}
            fit="cover"
            shape="rect"
            placeholder="Drop a cleaner map screenshot"
            style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}
          ></image-slot>
          <svg className="m08__map-svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice">
            <circle cx="420" cy="320" r="170" fill="rgba(217,34,67,0.10)" stroke="var(--r24-coral)" strokeWidth="1.5"/>
          </svg>

          {/* A couple of markers for context */}
          <div className="mkr mkr--red" style={{ left: "42%", top: "40%" }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 L22 20 L2 20z" stroke="#111" strokeWidth="1.2"/></svg>
          </div>
          <div className="mkr mkr--amber" style={{ left: "38%", top: "46%" }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <div className="mkr mkr--red" style={{ left: "58%", top: "56%" }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 L22 20 L2 20z" stroke="#111" strokeWidth="1.2"/></svg>
          </div>

          {/* ===== FEATURED: VRO Notifications · Escalations panel ===== */}
          <div className="m08-vro__panel">
            <div className="m08-vro__panel-head">
              <div>
                <h4 className="m08-vro__panel-title">Notifications <span className="m08-vro__panel-count">({tabData.count})</span></h4>
                <p className="m08-vro__panel-sub">Escalations · raised + actioned by VRO</p>
              </div>
              <div className="m08-vro__panel-tools">
                <label className="m08-vro__panel-toggle">
                  <input type="checkbox" defaultChecked={false}/>
                  <span>Only Show Unread</span>
                </label>
                <button className="m08-vro__panel-icon" title="History">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/><polyline points="12 7 12 12 16 14"/>
                  </svg>
                </button>
              </div>
            </div>

            <div className="m08-vro__tabs">
              {VRO_TABS.map((t, i) => (
                <button
                  key={t}
                  className={`m08-vro__tab ${i === tabIdx ? "m08-vro__tab--active" : ""}`}
                  onClick={() => setTabIdx(i)}
                >
                  {t}
                </button>
              ))}
            </div>

            <div className="m08-vro__feed" key={activeTab}>
              {tabData.groups.map((g, gi) => (
                <div key={gi} className="m08-vro__group">
                  <div className="m08-vro__group-date">{g.date}</div>
                  {g.items.map((n, ni) => (
                    <div key={ni} className="m08-vro__noti">
                      <div className={`m08-vro__noti-icon m08-vro__noti-icon--${n.tone}`}>
                        <VRO_BellIcon size={14}/>
                      </div>
                      <div className="m08-vro__noti-body">
                        <p className="m08-vro__noti-title">{n.title}</p>
                        <p className="m08-vro__noti-desc">{n.desc}</p>
                        <div className="m08-vro__noti-tags">
                          {n.tags.map((tg, ti) => (
                            <span key={ti} className={`m08-vro__noti-tag m08-vro__noti-tag--${n.tagTones[ti]}`}>{tg}</span>
                          ))}
                        </div>
                      </div>
                      <div className="m08-vro__noti-meta">
                        <span className="m08-vro__noti-ts">{n.ts}</span>
                        {n.read ? (
                          <span className={`m08-vro__noti-dot m08-vro__noti-dot--filled m08-vro__noti-dot--${n.readDot || "amber"}`}/>
                        ) : (
                          <span className="m08-vro__noti-dot m08-vro__noti-dot--empty"/>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              ))}
            </div>

            <div className="m08-vro__panel-foot">
              <span className="m08-vro__panel-foot-meta">
                <span className="m08-vro__live-dot"/>
                VRO live · cycling {activeTab} feed
              </span>
              <button className="m08-vro__panel-mark">Mark All as Read</button>
            </div>
          </div>

          {/* Right-side widgets — light context */}
          <div className="m08__widgets m08__widgets--vro">
            <div className="m08__widget">
              <div className="m08__widget-head">
                <span className="m08__widget-badge">VRO</span>
                <span style={{ marginLeft: 6 }}>Auto-actions today</span>
              </div>
              <div className="m08__widget-value">
                <span>1,284</span>
              </div>
            </div>
            <div className="m08__widget">
              <div className="m08__widget-head">
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--r24-success)", flexShrink: 0 }}/>
                Human-in-loop
              </div>
              <div className="m08__widget-value">100<span style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginLeft: 2 }}>%</span></div>
            </div>
            <div className="m08__widget">
              <div className="m08__widget-head">Escalation tier</div>
              <div className="m08__widget-line"><span className="dot" style={{ background: "var(--r24-coral)" }}>2</span>Level 1</div>
              <div className="m08__widget-line"><span className="dot" style={{ background: "var(--r24-warning)" }}>5</span>Level 2</div>
              <div className="m08__widget-line"><span className="dot" style={{ background: "var(--r24-info)" }}>9</span>Level 3</div>
            </div>
          </div>

          {/* Bottom action bar — same as Module 02 */}
          <div className="m08__bottom">
            <div className="m08__action">Show Users</div>
            <div className="m08__action">Show Threats</div>
            <div className="m08__action">Show Police</div>
            <div className="m08__action">Show Hospitals</div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// Module 10 — Reporting (4 subtypes, 1 example rendered)
// ============================================================
const ModuleReports = () => {
  const reports = [
  { id: "broadcast", label: "Broadcast Reports", desc: "Channel delivery, two-way confirmation rates, segment reach" },
  { id: "incident", label: "Incident Management", desc: "Lifecycle from trigger to closure with full SLA breakdown" },
  { id: "travel", label: "Travel Reports", desc: "Trip portfolio, journey deviations, country risk exposure" },
  { id: "analytics", label: "Advanced Consolidated", desc: "Cross-module analytics with predictive hotspot modelling" }];

  const [active, setActive] = useStateNew("broadcast");
  return (
    <div className="m-reports">
      <aside className="m-reports__rail">
        <p className="m-reports__rail-eyebrow">REPORT TYPES</p>
        <ul>
          {reports.map((r) =>
          <li
            key={r.id}
            className={`m-reports__rail-item ${active === r.id ? "m-reports__rail-item--active" : ""}`}
            onClick={() => setActive(r.id)}>
            
              <span className="m-reports__rail-label">
                {r.label}
                {active !== r.id && r.id !== "broadcast" ?
              <span className="m-reports__rail-soon">PREVIEW SOON</span> :
              null}
              </span>
              <span className="m-reports__rail-desc">{r.desc}</span>
            </li>
          )}
        </ul>
      </aside>
      <section className="m-reports__view">
        {active === "broadcast" ? <ReportBroadcast /> : <ReportComingSoon name={reports.find((r) => r.id === active).label} />}
      </section>
    </div>);

};

const ReportBroadcast = () =>
<div className="m-reports__report">
    <header className="m-reports__report-head">
      <div>
        <p className="m-reports__report-eyebrow">REPORT · BRO-2026-05-27</p>
        <h4 className="m-reports__report-title">Broadcast Delivery · INC-0412 · Marseille civil unrest</h4>
        <p className="m-reports__report-meta">Generated 14:25 UTC · Auto-issued to GSOC + Country Director · Hash 0x9c1f…42a8</p>
      </div>
      <button className="m-reports__report-export">EXPORT · PDF</button>
    </header>

    <div className="m-reports__report-kpis">
      <div><p className="m-reports__kpi-val">12</p><p className="m-reports__kpi-lab">Recipients</p></div>
      <div><p className="m-reports__kpi-val">12/12</p><p className="m-reports__kpi-lab">Push</p></div>
      <div><p className="m-reports__kpi-val">11/12</p><p className="m-reports__kpi-lab">SMS</p></div>
      <div><p className="m-reports__kpi-val">47s</p><p className="m-reports__kpi-lab">Voice</p></div>
      <div><p className="m-reports__kpi-val">98.5%</p><p className="m-reports__kpi-lab">Reach</p></div>
    </div>

    <div className="m-reports__report-body">
      <h5>Channel breakdown</h5>
      <table className="m-reports__table">
        <thead><tr><th>Channel</th><th>Sent</th><th>Delivered</th><th>Two-way</th><th>Latency p50</th></tr></thead>
        <tbody>
          <tr><td>App Push</td><td className="tabular">12</td><td className="tabular">12</td><td className="tabular">9 SAFE / 1 NOT-OK</td><td className="tabular">1.1s</td></tr>
          <tr><td>SMS</td><td className="tabular">12</td><td className="tabular">11</td><td className="tabular">8 SAFE / 1 NOT-OK</td><td className="tabular">3.4s</td></tr>
          <tr><td>Email</td><td className="tabular">12</td><td className="tabular">12</td><td className="tabular">6 SAFE</td><td className="tabular">9.0s</td></tr>
          <tr><td>Voice (cascade)</td><td className="tabular">1</td><td className="tabular">1</td><td className="tabular">SAFE</td><td className="tabular">47s</td></tr>
        </tbody>
      </table>
      <p className="m-reports__note">
        Voice cascade triggered for the recipient whose SMS bounced. Confirmation captured within the 60-second SLA. Full audit trail linked from the hash above.
      </p>
    </div>
  </div>;


const ReportComingSoon = ({ name }) =>
<div className="m-reports__soon">
    <div className="m-reports__soon-box">
      <p className="m-reports__soon-eyebrow">PREVIEW · COMING NEXT</p>
      <h4 className="m-reports__soon-title">{name}</h4>
      <p className="m-reports__soon-body">
        Sample report visual will be added once your team uploads the reference screen.
      </p>
    </div>
  </div>;


// ============================================================
// Generic placeholder (kept for any module not yet visualised)
// ============================================================
const ModulePlaceholder = ({ title, lines }) =>
<div className="m-placeholder">
    <div className="m-placeholder__box">
      <p className="m-placeholder__eyebrow">VISUAL · PENDING UPLOAD</p>
      <h4 className="m-placeholder__title">{title}</h4>
      <ul className="m-placeholder__lines">
        {(lines || []).map((l, i) => <li key={i}>{l}</li>)}
      </ul>
    </div>
  </div>;


Object.assign(window, {
  ModuleTravel, PreTravelPanel,
  ModuleLang, ModuleAgent,
  ModuleReports, ReportBroadcast, ReportComingSoon,
  ModulePlaceholder
});