// site-response-emergency.jsx — R24 Response · Emergency & Critical Infrastructure
// Response Control Room Suite (suite 1 of 2). Reuses the .rop- console chrome from
// the Operator/JM walkthrough so both Response suites read as one product family.
// Single console frame cycling through 5 views, recreated from the V2 screenshots:
//   1 Control Room      — KPI tiles + System State + Active Response Services pivot + live SLA queue
//   2 Response Action   — Response Service Action detail + Actions rail + Current Location map
//   3 Dispatch & Track  — Responders table + live map cluster + R24 Responder phone overlay
//   4 Sealed Evidence   — geo-stamped image evidence + hash-sealed State History
//   5 Dual Control Room — PATENTED owner / sub-contractor controlled-visibility split

const { useState: useEmgState, useEffect: useEmgEffect } = React;

// ---- tiny inline icon (own namespace to avoid collisions) ----
const EIcon = ({ d, s = 18, sw = 2, fill = "none" }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={fill} stroke={fill === "none" ? "currentColor" : "none"} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p}/>) : <path d={d}/>}
  </svg>
);
const EI = {
  grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  users: ["M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"],
  bolt: "M13 2 3 14h7l-1 8 10-12h-7l1-8z",
  archive: ["M21 8v13H3V8", "M1 3h22v5H1zM10 12h4"],
  report: ["M3 3v18h18", "M7 16l4-5 3 3 5-7"],
  bell: ["M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9", "M13.7 21a2 2 0 0 1-3.4 0"],
  menu: "M3 12h18M3 6h18M3 18h18",
  alert: ["M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z", "M12 9v4M12 17h.01"],
  monitor: ["M2 3h20v14H2zM8 21h8M12 17v4"],
  phone: ["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.72c.13 1 .37 1.96.72 2.88a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.2-1.29a2 2 0 0 1 2.11-.45c.92.35 1.88.59 2.88.72A2 2 0 0 1 22 16.92z"],
  share: ["M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"],
  transfer: ["M16 3h5v5", "M21 3l-7 7M8 21H3v-5M3 21l7-7"],
  check: "M20 6 9 17l-5-5",
  x: "M18 6 6 18M6 6l12 12",
  download: ["M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", "M7 10l5 5 5-5M12 15V3"],
  image: ["M3 3h18v18H3z", "M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21"],
  pin: ["M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z", "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
  route: ["M6 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M9 16h6a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6"],
  car: ["M5 17a2 2 0 1 0 0 .01M19 17a2 2 0 1 0 0 .01", "M3 17h-1v-5l2-5h12l3 5h2v5h-2M6 12h12"],
  battery: ["M2 7h16v10H2zM22 11v2", "M5 10v4"],
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
  lock: ["M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4"],
  eye: ["M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z", "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
  eyeoff: ["M9.9 4.2A9.1 9.1 0 0 1 12 4c6 0 10 8 10 8a18 18 0 0 1-2.2 3.2M6.6 6.6A18 18 0 0 0 2 12s4 8 10 8a9 9 0 0 0 4.3-1.1", "M1 1l22 22", "M9.9 9.9a3 3 0 0 0 4.2 4.2"],
  recall: ["M3 2v6h6", "M3.5 8a9 9 0 1 0 2.1-3.4L3 8"],
  clock: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"],
};

// fmt seconds → mm:ss / hh:mm:ss
function emgFmt(sec) {
  const s = Math.max(0, Math.floor(sec));
  const hh = Math.floor(s / 3600);
  const mm = Math.floor((s % 3600) / 60);
  const ss = s % 60;
  const p = (n) => String(n).padStart(2, "0");
  return hh > 0 ? `${p(hh)}:${p(mm)}:${p(ss)}` : `${p(mm)}:${p(ss)}`;
}
function emgTone(cur, target) {
  if (cur >= target) return "red";
  if (cur >= target * 0.75) return "amber";
  return "green";
}

// =============================================================
// Shared chrome — Emergency suite sidebar + topbar
// =============================================================
const EMG_NAV = [
  { id: "dashboard", label: "Dashboard",                 icon: EI.grid },
  { id: "responders",label: "Responders",                icon: EI.users },
  { id: "custom",    label: "Custom Response Action",    icon: EI.bolt },
  { id: "history",   label: "Historical Response Actions",icon: EI.archive },
  { id: "reports",   label: "Reports",                   icon: EI.report },
];

function EmgSidebar({ activeNav }) {
  return (
    <aside className="rop-sidebar">
      <div className="rop-sidebar__brand">
        <span className="rop-brandmark">RESPONSE<b>24</b></span>
        <span className="rop-brandmark__sub">EMERGENCY · CI CONTROL ROOM</span>
      </div>
      <nav className="rop-sidebar__nav">
        {EMG_NAV.map(n => (
          <div key={n.id} className={`rop-nav-item ${activeNav === n.id ? "rop-nav-item--active" : ""}`}>
            <EIcon d={n.icon} s={17}/>
            <span>{n.label}</span>
          </div>
        ))}
      </nav>
      <div className="rop-sidebar__foot">
        <div className="rop-sidebar__avatar">OA</div>
        <div className="rop-sidebar__who">
          <span className="rop-sidebar__name">Operator A</span>
          <span className="rop-sidebar__role">Control Room · Online</span>
        </div>
      </div>
    </aside>
  );
}

function EmgTopbar({ title, crumb, clock }) {
  return (
    <div className="rop-topbar">
      <div className="rop-topbar__left">
        <EIcon d={EI.menu} s={18}/>
        <div className="rop-topbar__titles">
          <span className="rop-topbar__crumb">{crumb}</span>
          <h4 className="rop-topbar__title">{title}</h4>
        </div>
      </div>
      <div className="rop-topbar__right">
        <span className="rop-topbar__clock"><span className="rop-livedot"/> CONTROL ROOM LIVE</span>
        <span className="rec-clock rop-mono">{clock}</span>
        <div className="rop-topbar__bell"><EIcon d={EI.bell} s={16}/><span className="rop-topbar__bell-badge">9</span></div>
        <div className="rop-topbar__user">OA</div>
      </div>
    </div>
  );
}

// System-State banner + Active Response Services pivot (shared bits)
function EmgSysBanner({ tone = "monitor", clock }) {
  const isAction = tone === "action";
  return (
    <div className={`rec-sysbanner rec-sysbanner--${tone}`}>
      <div className="rec-sysbanner__icon"><EIcon d={isAction ? EI.alert : EI.monitor} s={20} fill="none"/></div>
      <div className="rec-sysbanner__meta">
        <span className="rec-sysbanner__lab">System State</span>
        <b className="rec-sysbanner__state">{isAction ? "ACTION REQUIRED" : "MONITOR"}</b>
      </div>
      <div className="rec-sysbanner__time">
        <span>Client Timezone · Africa/Johannesburg</span>
        <b className="rop-mono">Local Computer Time {clock}</b>
      </div>
    </div>
  );
}

const EMG_PIVOT = [
  { id: "primary",   label: "Primary Responses",   icon: EI.alert,    n: 2, tone: "red" },
  { id: "battery",   label: "Battery Tracking",    icon: EI.battery,  n: 0, tone: "green" },
  { id: "tower",     label: "Tower Responses",     icon: EI.bolt,     n: 9, tone: "red" },
  { id: "secondary", label: "Secondary Responses", icon: EI.shield,   n: 3, tone: "amber" },
];
function EmgPivot({ active = "primary" }) {
  return (
    <div className="rec-pivot">
      {EMG_PIVOT.map(p => (
        <div key={p.id} className={`rec-pivot__item ${active === p.id ? "rec-pivot__item--active" : ""}`}>
          <span className="rec-pivot__icon"><EIcon d={p.icon} s={16}/></span>
          <span className="rec-pivot__lab">{p.label}</span>
          <span className={`rec-pivot__badge rec-pivot__badge--${p.tone}`}>{p.n}</span>
        </div>
      ))}
    </div>
  );
}

// =============================================================
// View 1 — Control Room dashboard (live SLA queue)
// =============================================================
const EMG_QUEUE = [
  { init: "Sub Sec 1", name: "Armed Response", base: 1060, target: 2400, ob: "OB-…PWMRYH", owner: "Main Security Provider", state: "Responder On Site", stone: "green" },
  { init: "Sub Sec 2", name: "Armed Response", base: 1869, target: 2400, ob: "OB-…BHNV3X", owner: "Main Security Provider", state: "Responding",        stone: "blue" },
  { init: "Sub Sec 3", name: "Armed Response", base: 3466, target: 2100, ob: "OB-…KLXD83", owner: "Main Security Provider", state: "Image Taken",       stone: "teal" },
  { init: "Sub Sec 4", name: "Armed Response", base: 1894, target: 2400, ob: "OB-…RSGBML", owner: "Main Security Provider", state: "Picked Up",         stone: "gold" },
  { init: "Sub Sec 5", name: "Armed Response", base: 2010, target: 2400, ob: "OB-…STONEY", owner: "Main Security Provider", state: "Closed by 3rd Party",stone: "gray" },
];
function EmgControlRoom({ clock, tick }) {
  const kpis = [
    { tone: "navy",  n: 10, lab: "User Actions",   icon: EI.users },
    { tone: "navy",  n: 9,  lab: "Tower Actions",  icon: EI.bolt },
    { tone: "gray",  n: 0,  lab: "Device Actions", icon: EI.monitor },
  ];
  return (
    <div className="rop-view">
      <div className="rop-kpis rec-kpis-3">
        {kpis.map((k, i) => (
          <div key={i} className={`rop-kpi rop-kpi--${k.tone}`}>
            <div className="rop-kpi__icon"><EIcon d={k.icon} s={18}/></div>
            <div className="rop-kpi__meta">
              <div className="rop-kpi__num">{k.n}</div>
              <div className="rop-kpi__lab">{k.lab}</div>
            </div>
          </div>
        ))}
      </div>

      <EmgSysBanner tone="monitor" clock={clock}/>

      <div className="rop-card rec-queue-card">
        <div className="rop-card__head">
          <h5 className="rop-card__title">Active Response Services</h5>
          <span className="rop-card__meta"><span className="rop-livedot"/> live · KPI clock running</span>
        </div>
        <EmgPivot active="tower"/>
        <div className="rop-table rec-table">
          <div className="rop-table__head rop-table__row rec-table__row">
            <span>Initiator</span><span>Name</span><span>Timer / KPI</span><span>OB Number</span><span>Owner</span><span>State</span><span/>
          </div>
          <div className="rec-table__scroll">
            {EMG_QUEUE.map((r, i) => {
              const cur = r.base + tick;
              const tone = emgTone(cur, r.target);
              return (
                <div key={i} className="rop-table__row rec-table__row rop-table__body-row">
                  <span className="rop-strong">{r.init}</span>
                  <span>{r.name}</span>
                  <span><i className={`rec-timer rec-timer--${tone}`}>{emgFmt(cur)} <em>/ {emgFmt(r.target)}</em></i></span>
                  <span className="rop-mono rop-muted">{r.ob}</span>
                  <span className="rop-muted">{r.owner}</span>
                  <span><i className={`rop-stat rec-stat--${r.stone}`}>{r.state}</i></span>
                  <span><button className="rop-btn rop-btn--ghost">OPEN</button></span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// View 2 — Response Service Action detail
// =============================================================
function EmgResponseAction({ tick }) {
  const cur = 3466 + tick;
  return (
    <div className="rop-view rop-view--detail">
      <div className="rec-action-grid">
        {/* main detail */}
        <div className="rop-card rop-detail-main">
          <div className="rop-card__head">
            <h5 className="rop-card__title">Response Service Action</h5>
            <span className="rop-stat rec-stat--teal">IMAGE TAKEN</span>
          </div>
          <div className="rop-card__body rec-action-body">
            <div className="rop-kv-grid rop-kv-grid--tight">
              <div className="rop-kv"><span>OB Number</span><b className="rop-mono">OB-20260529-KLXD83YUNL</b></div>
              <div className="rop-kv"><span>App Client</span><b>Main Security Provider</b></div>
              <div className="rop-kv"><span>Handler</span><b>Sub Sec 1</b></div>
              <div className="rop-kv"><span>Name</span><b>Armed Response</b></div>
              <div className="rop-kv"><span>Site Name / Locality</span><b>Tower Site T16534</b></div>
              <div className="rop-kv"><span>Site ID</span><b>T16534</b></div>
              <div className="rop-kv"><span>Response Radius</span><b>80 km</b></div>
              <div className="rop-kv"><span>Access to Site?</span><b>Yes</b></div>
            </div>

            <div className="rec-kpi-strip">
              <div className="rec-kpi-block">
                <span className="rec-kpi-block__lab">Timer &amp; KPI</span>
                <b className="rec-timer rec-timer--red rec-timer--lg">{emgFmt(cur)} <em>/ 00:35:00</em></b>
                <span className="rec-kpi-block__note">KPI clock starts at <b>Open</b> · stops at <b>Responder On Site</b></span>
              </div>
              <div className="rec-kpi-block rec-kpi-block--ok">
                <span className="rec-kpi-block__lab">Timestamp Check</span>
                <b className="rop-stat rec-stat--green rec-chk">All Good</b>
                <span className="rec-kpi-block__note">Device clock verified against server</span>
              </div>
            </div>

            <div className="rec-loc">
              <div className="rec-loc__head"><EIcon d={EI.pin} s={13}/> Current Location · 9CW3+FH Roodeplaat, South Africa</div>
              <div className="rec-loc__map">
                <image-slot id="rec-action-map" src={window.__asset('mapBg','assets/m08-map-bg.png')} fit="cover" shape="rect" placeholder="Map" style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}></image-slot>
                <div className="rec-map__veil"/>
                {[["46%","52%"],["52%","48%"],["49%","58%"],["55%","55%"],["43%","47%"],["58%","50%"],["50%","44%"]].map((p, i) => (
                  <span key={i} className="rec-mapcluster" style={{ left: p[0], top: p[1] }}><EIcon d={EI.car} s={10}/></span>
                ))}
                <span className="rec-mapsite"><EIcon d={EI.pin} s={12} fill="currentColor"/></span>
                <div className="rec-mapcorner">RESPONDERS IN REGION · 32</div>
              </div>
            </div>
          </div>
        </div>

        {/* actions rail */}
        <div className="rec-action-side">
          <div className="rop-card">
            <div className="rop-card__head"><h5 className="rop-card__title">Actions</h5></div>
            <div className="rec-actions-grid">
              <button className="rop-btn rec-abtn"><EIcon d={EI.phone} s={13}/> Initiate Call</button>
              <button className="rop-btn rec-abtn"><EIcon d={EI.share} s={13}/> Share</button>
              <button className="rop-btn rop-btn--pickup rec-abtn"><EIcon d={EI.check} s={13}/> Complete</button>
              <button className="rop-btn rec-abtn rec-abtn--danger"><EIcon d={EI.x} s={13}/> Terminate</button>
              <button className="rop-btn rec-abtn rec-abtn--wide"><EIcon d={EI.download} s={13}/> Download All Images (1)</button>
              <button className="rop-btn rec-abtn rec-abtn--wide"><EIcon d={EI.transfer} s={13}/> Transfer to New Provider</button>
              <button className="rop-btn rec-abtn rec-abtn--wide"><EIcon d={EI.transfer} s={13}/> Transfer to External Provider</button>
            </div>
          </div>
          <div className="rop-card rec-comments">
            <div className="rop-card__head"><h5 className="rop-card__title">Comments</h5></div>
            <div className="rec-comments__body">
              <span className="rop-muted">Add a comment…</span>
              <button className="rop-btn rop-btn--pickup">SAVE</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// View 3 — Dispatch & Track responders
// =============================================================
const EMG_RESP = [
  { n: "Responder 1", alert: true,  status: "Responding",  stone: "blue",  km: "0.03 km · 11.58 m", radius: "Inside", batt: 70, seen: "13 min ago", recall: true },
  { n: "Responder 2", alert: false, status: "Unavailable", stone: "gray",  km: "10.5 km · 33.6 m",  radius: "Inside", batt: 63, seen: "2 weeks ago" },
  { n: "Responder 3", alert: false, status: "Unavailable", stone: "gray",  km: "15.96 km · 8 m",    radius: "Inside", batt: 48, seen: "4 months ago" },
  { n: "Responder 4", alert: false, status: "Unavailable", stone: "gray",  km: "22.16 km · 10.9 m", radius: "Inside", batt: 57, seen: "3 months ago" },
  { n: "Responder 5", alert: true,  status: "Unavailable", stone: "gray",  km: "27.41 km · 3.4 m",  radius: "Inside", batt: 61, seen: "4 months ago" },
];
function EmgDispatch() {
  return (
    <div className="rop-view rop-view--active rec-dispatch">
      <div className="rec-dispatch-grid">
        <div className="rop-card rec-resp-card">
          <div className="rop-card__head">
            <h5 className="rop-card__title">Responders</h5>
            <span className="rop-card__meta">nearest qualified · auto-ranked by distance</span>
          </div>
          <div className="rop-table rec-resp-table">
            <div className="rop-table__head rop-table__row rec-resp-row">
              <span>Name</span><span>Alerts</span><span>Status</span><span>Distance Away</span><span>Radius</span><span>Battery</span><span>Last Seen</span><span/>
            </div>
            {EMG_RESP.map((r, i) => (
              <div key={i} className={`rop-table__row rec-resp-row rop-table__body-row ${r.status === "Unavailable" ? "rec-row-dim" : ""}`}>
                <span className="rop-strong">{r.n}</span>
                <span>{r.alert ? <i className="rop-stat rec-stat--red">1 Alert</i> : <i className="rop-stat rec-stat--green">No alerts</i>}</span>
                <span><i className={`rop-stat rec-stat--${r.stone}`}>{r.status}</i></span>
                <span className="rop-mono rop-muted">{r.km}</span>
                <span className="rec-radius"><EIcon d={EI.check} s={11}/> {r.radius}</span>
                <span className={`rec-batt rec-batt--${r.batt < 25 ? "low" : r.batt < 55 ? "mid" : "ok"}`}><EIcon d={EI.battery} s={13}/>{r.batt}%</span>
                <span className="rop-muted">{r.seen}</span>
                <span>{r.recall ? <button className="rop-btn rop-btn--pickup"><EIcon d={EI.recall} s={11}/> Recall</button> : <button className="rop-btn rop-btn--ghost">Action</button>}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="rop-card rec-track-card">
          <div className="rop-card__head"><h5 className="rop-card__title">Live Track · Responder 1</h5><span className="rop-card__meta"><span className="rop-livedot"/> geofence verified</span></div>
          <div className="rec-track-map">
            <image-slot id="rec-track-map" src={window.__asset('mapBg','assets/m08-map-bg.png')} fit="cover" shape="rect" placeholder="Map" style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}></image-slot>
            <div className="rec-map__veil"/>
            <span className="rec-fence"><span className="rec-fence__ring"/><span className="rec-fence__ring rec-fence__ring--d"/></span>
            <span className="rec-mapsite" style={{ left: "50%", top: "50%" }}><EIcon d={EI.pin} s={12} fill="currentColor"/></span>
            <span className="rec-resp-dot" style={{ left: "47%", top: "53%" }}><EIcon d={EI.car} s={11}/></span>
            <div className="rec-mapcorner rec-mapcorner--tl"><span className="rop-livedot"/> ON SITE · 0.03 KM</div>
            <div className="rec-mapcorner">ARRIVAL GEO-VERIFIED 07:39</div>
          </div>
        </div>
      </div>

      {/* R24 Responder phone overlay */}
      <div className="rop-respphone" aria-hidden="true">
        <div className="rop-respphone__tag">R24 RESPONDER · Responder 1</div>
        <div className="rop-respphone__device">
          <div className="rop-respphone__notch"/>
          <div className="rop-respphone__screen">
            <div className="rop-respphone__map">
              <image-slot id="rec-resp-phone-map" src={window.__asset('mapBg','assets/m08-map-bg.png')} fit="cover" shape="rect" placeholder="Map" style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}></image-slot>
              <span className="rop-respphone__route"/>
              <span className="rop-respphone__me"><EIcon d={EI.car} s={12}/></span>
            </div>
            <div className="rop-respphone__job">
              <span className="rop-stat rec-stat--red">NEW ALARM</span>
              <b>Tower Site · Armed Response</b>
              <span className="rop-muted rop-mono">1.52 km away</span>
            </div>
            <div className="rec-rphone-actions">
              <button className="rec-rbtn rec-rbtn--accept">Accept</button>
              <button className="rec-rbtn rec-rbtn--nav">Navigate</button>
              <button className="rec-rbtn rec-rbtn--reassign">Re-assign</button>
            </div>
            <div className="rop-respphone__tabbar">
              <span className="rop-rtab rop-rtab--er">ER24</span>
              <span className="rop-rtab rop-rtab--active"><EIcon d={EI.shield} s={13}/></span>
              <span className="rop-rtab">BACKUP</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// View 4 — Sealed evidence + State History
// =============================================================
const EMG_HISTORY = [
  { t: "07:39:57", k: "Responder On Site", who: "Responder 1", sealed: true },
  { t: "07:46:08", k: "Responder On Site", who: "Geofence trigger · 0.2 km", sealed: true },
  { t: "07:12:48", k: "Image Taken", who: "Sub Sec 2 · Control", sealed: true, img: true },
  { t: "07:02:30", k: "Responding", who: "Responder 1", sealed: true },
  { t: "06:58:19", k: "Awaiting Res Pickup", who: "Control Room", sealed: true },
];
function EmgEvidence() {
  return (
    <div className="rop-view rec-evidence">
      <div className="rec-evidence-grid">
        {/* geo-stamped image */}
        <div className="rop-card rec-photo-card">
          <div className="rop-card__head">
            <h5 className="rop-card__title">Geo-Stamped Evidence</h5>
            <span className="rop-stat rec-stat--teal">IMAGE TAKEN</span>
          </div>
          <div className="rec-photo">
            <image-slot id="rec-evidence-photo" src={window.__asset('mapBg','assets/m08-map-bg.png')} fit="cover" shape="rect" placeholder="On-scene photo" style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}></image-slot>
            <div className="rec-photo__scrim"/>
            <div className="rec-photo__frame"><EIcon d={EI.image} s={26}/></div>
            <div className="rec-photo__stamp">
              <b>29 May 2026 · 07:12:48</b>
              <span>Tower Site T16534 · access gate</span>
              <span>Region A · ZA</span>
              <span className="rec-photo__geo"><EIcon d={EI.pin} s={10} fill="currentColor"/> Geo-locked to device · coordinates on file</span>
            </div>
          </div>
          <div className="rec-photo-foot">
            <span className="rec-seal-badge"><EIcon d={EI.lock} s={12}/> Hash-sealed · tamper-evident</span>
            <button className="rop-btn rop-btn--ghost"><EIcon d={EI.download} s={11}/> Download</button>
          </div>
        </div>

        {/* state history */}
        <div className="rop-card rop-history-card rec-history-card">
          <div className="rop-card__head"><h5 className="rop-card__title">State History</h5><span className="rop-card__meta"><EIcon d={EI.lock} s={11}/> chain-of-custody</span></div>
          <div className="rop-history">
            {EMG_HISTORY.map((h, i) => (
              <div key={i} className="rop-hist">
                <span className="rop-hist__rail"><span className="rop-hist__node"/></span>
                <div className="rop-hist__body">
                  <div className="rop-hist__top"><b>{h.k}</b><span className="rop-mono rop-muted">{h.t}</span></div>
                  <span className="rec-hist-who">{h.who}</span>
                  {h.sealed && <span className="rop-hist__seal"><EIcon d={EI.check} s={10}/> evidence sealed{h.img ? " · image attached" : ""}</span>}
                </div>
              </div>
            ))}
          </div>
          <div className="rec-evidence-foot">
            <EIcon d={EI.shield} s={13}/>
            <span>Every state change is timestamped, attributed and immutable — eliminating ghost check-ins and disputed SLAs at audit.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// View 5 — PATENTED dual control room
// =============================================================
function EmgMiniRoom({ brand, sub, collapsed, state, ua, ta, primary, scoped }) {
  const isAction = state === "action";
  return (
    <div className={`rec-mini ${collapsed ? "rec-mini--collapsed" : ""}`}>
      <div className="rec-mini__rail">
        <span className="rec-mini__mark">24</span>
        {!collapsed && <span className="rec-mini__brand">{brand}<em>{sub}</em></span>}
        <span className="rec-mini__nav"><span/><span/><span/></span>
      </div>
      <div className="rec-mini__body">
        <div className="rec-mini__kpis">
          <div className="rec-mini__kpi"><b>{ua}</b><span>User Actions</span></div>
          <div className="rec-mini__kpi"><b>{ta}</b><span>Tower Actions</span></div>
          <div className="rec-mini__kpi"><b>0</b><span>Device</span></div>
        </div>
        <div className={`rec-mini__state rec-mini__state--${isAction ? "action" : "monitor"}`}>
          <EIcon d={isAction ? EI.alert : EI.monitor} s={14}/>
          <span>System State</span><b>{isAction ? "ACTION REQUIRED" : "MONITOR"}</b>
        </div>
        <div className="rec-mini__queue">
          <div className="rec-mini__queue-head">Primary Responses · {primary}</div>
          <div className="rec-mini__row">
            <span className="rec-mini__ob">OB-…LKWC6E</span>
            <span className="rop-strong">Armed Response</span>
            {scoped
              ? <span className="rec-mini__masked"><EIcon d={EI.eyeoff} s={11}/> Initiator hidden</span>
              : <span className="rop-muted">Operator A</span>}
            <span className="rop-stat rec-stat--red">Open</span>
          </div>
        </div>
        <div className="rec-mini__scope">
          {scoped
            ? <><EIcon d={EI.eyeoff} s={12}/> Sub-contractor scope — sees only its own task &amp; status</>
            : <><EIcon d={EI.eye} s={12}/> Owner scope — full visibility across all providers</>}
        </div>
      </div>
    </div>
  );
}
function EmgDualRoom() {
  return (
    <div className="rop-view rec-dual-view">
      <div className="rec-dual-banner">
        <span className="rec-patent"><EIcon d={EI.lock} s={12}/> PATENTED</span>
        <div className="rec-dual-banner__txt">
          <b>One alarm, two control rooms — visibility you control.</b>
          <span>The same response (OB-…LKWC6E) is mirrored to the sub-contractor's room with a scoped view — they action their task without ever seeing the wider client picture.</span>
        </div>
      </div>
      <div className="rec-dual">
        <EmgMiniRoom brand="RESPONSE" sub="24 · OWNER" collapsed={false} state="monitor" ua={11} ta={11} primary={2} scoped={false}/>
        <div className="rec-dual__link" aria-hidden="true">
          <span className="rec-dual__ob">OB-…LKWC6E</span>
          <svg viewBox="0 0 80 40" preserveAspectRatio="none"><path d="M2 20h76" stroke="var(--red-400)" strokeWidth="2" strokeDasharray="4 4" fill="none"/><circle r="3" fill="var(--red-500)"><animateMotion dur="2.2s" repeatCount="indefinite" path="M2 20h76"/></circle></svg>
          <span className="rec-dual__linklab">mirrored · scoped</span>
        </div>
        <EmgMiniRoom brand="R24 EMERGENCY" sub=" · SUB-CONTRACTOR" collapsed={true} state="action" ua={1} ta={0} primary={1} scoped={true}/>
      </div>
    </div>
  );
}

// =============================================================
// Featured frame — cycles the five views
// =============================================================
const EMG_VIEWS = [
  { id: "control",  nav: "dashboard",  crumb: "Operations",      title: "Control Room",            tab: "Control Room" },
  { id: "action",   nav: "dashboard",  crumb: "OB-…KLXD83",      title: "Response Service Action", tab: "Response Action" },
  { id: "dispatch", nav: "responders", crumb: "Responders",      title: "Dispatch & Track",        tab: "Dispatch + Track" },
  { id: "evidence", nav: "history",    crumb: "OB-…KLXD83",      title: "Sealed Evidence",         tab: "Sealed Evidence" },
  { id: "dual",     nav: "dashboard",  crumb: "Patented",        title: "Dual Control Room",       tab: "Dual Control Room" },
];

function ResponseEmergencyDemo() {
  const [idx, setIdx] = useEmgState(0);
  const [paused, setPaused] = useEmgState(false);
  const [tick, setTick] = useEmgState(0);
  const [clock, setClock] = useEmgState(() => emgClock());

  function emgClock() {
    const d = new Date();
    let h = d.getHours();
    const m = String(d.getMinutes()).padStart(2, "0");
    const ap = h >= 12 ? "PM" : "AM";
    h = h % 12 || 12;
    return `${h}:${m} ${ap}`;
  }

  useEmgEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % EMG_VIEWS.length), 8000);
    return () => clearInterval(t);
  }, [paused]);

  useEmgEffect(() => {
    const t = setInterval(() => { setTick(s => s + 1); setClock(emgClock()); }, 1000);
    return () => clearInterval(t);
  }, []);

  const v = EMG_VIEWS[idx];

  const renderView = () => {
    switch (v.id) {
      case "control":  return <EmgControlRoom clock={clock} tick={tick}/>;
      case "action":   return <EmgResponseAction tick={tick}/>;
      case "dispatch": return <EmgDispatch/>;
      case "evidence": return <EmgEvidence/>;
      case "dual":     return <EmgDualRoom/>;
      default:         return null;
    }
  };

  return (
    <section className="rop-section rec-section" id="response-emergency">
      <div className="container">
        <div className="section-header" style={{ marginTop: 0 }}>
          <p className="eyebrow eyebrow--coral">Emergency &amp; Critical Infrastructure · control room suite</p>
          <h2 className="section-h2">One alarm, end to end — from trigger to sealed evidence.</h2>
          <p className="section-sub">
            The control room your operators run every shift: triage every active alarm against its live SLA clock, action it, dispatch and track the nearest responder, and seal every state change as geo-stamped evidence — with patented dual-control-room visibility across your sub-contractors.
          </p>
        </div>

        {/* View switcher */}
        <div className="rop-switcher" role="tablist">
          {EMG_VIEWS.map((vv, i) => (
            <button
              key={vv.id}
              className={`rop-switcher__tab ${i === idx ? "rop-switcher__tab--active" : ""}`}
              onClick={() => { setIdx(i); setPaused(true); }}
            >
              <span className="rop-switcher__n">{String(i + 1).padStart(2, "0")}</span>
              {vv.tab}
            </button>
          ))}
          <button className="rop-switcher__play" onClick={() => setPaused(p => !p)} title={paused ? "Resume autoplay" : "Pause autoplay"}>
            {paused ? "▶ Auto" : "❚❚ Live"}
          </button>
        </div>

        {/* Console frame */}
        <div className="rop-frame rec-frame">
          <EmgSidebar activeNav={v.nav}/>
          <div className="rop-main">
            <EmgTopbar title={v.title} crumb={v.crumb} clock={clock}/>
            <div className="rop-canvas" key={v.id}>
              {renderView()}
            </div>
          </div>
        </div>

        <p className="rop-progress">
          {EMG_VIEWS.map((vv, i) => (
            <span key={i} className={`rop-progress__seg ${i === idx ? "rop-progress__seg--on" : ""}`}/>
          ))}
        </p>
      </div>
    </section>
  );
}

window.ResponseEmergencyDemo = ResponseEmergencyDemo;

// Internals exported for the product-image export page (Module Images.html)
Object.assign(window, {
  EmgSidebar, EmgTopbar, EmgControlRoom, EmgResponseAction,
  EmgDispatch, EmgEvidence, EmgDualRoom,
  EMG_VIEWS_EXPORT: EMG_VIEWS,
});