// site-response-demo.jsx — Featured R24 Response Operator Platform demo.
// Operator / service-provider side. Single console frame cycling through 4 views,
// recreated from the V1 screenshots:
//   1 JM Dashboard      — KPI tiles + Journey Management Inbox + PICK UP
//   2 Request Detail    — request tabs + State Changes workflow + Services + routes
//   3 Service Planner   — 4-step wizard (Resources → Assets → Settings → Review)
//   4 Active Service    — Active Service Details + Responders + State History + Chat + responder phone

const { useState: useRopState, useEffect: useRopEffect, useRef: useRopRef } = React;

// ---- tiny inline icon ----
const RIcon = ({ 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 RI = {
  grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  layers: "M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
  building: ["M3 21h18", "M5 21V7l7-4 7 4v14", "M9 9h.01M13 9h.01M9 13h.01M13 13h.01M9 17h.01M13 17h.01"],
  userCheck: ["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", "M16 11l2 2 4-4"],
  pen: "M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z",
  truck: ["M1 3h15v13H1zM16 8h4l3 3v5h-7V8z", "M5.5 18.5a2 2 0 1 0 0 .01M18.5 18.5a2 2 0 1 0 0 .01"],
  box: "M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z",
  clock: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"],
  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",
  cal: ["M3 4h18v18H3zM3 10h18", "M16 2v4M8 2v4"],
  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"],
  plus: "M12 5v14M5 12h14",
  chevR: "M9 18l6-6-6-6",
  check: "M20 6 9 17l-5-5",
  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"],
  send: "M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z",
  battery: ["M2 7h16v10H2zM22 11v2", "M5 10v4"],
  car: ["M5 17a2 2 0 1 0 0 .01M19 17a2 2 0 1 0 0 .01", "M3 17h-1v-5l2-5h12l3 5h2v5h-2M6 12h12"],
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
};

// =============================================================
// Shared chrome
// =============================================================
const ROP_NAV = [
  { id: "dashboard", label: "JM Dashboard",        icon: RI.grid },
  { id: "services",  label: "Services Dashboard",  icon: RI.layers },
  { id: "providers", label: "Service Providers",   icon: RI.building },
  { id: "validate",  label: "Plus User Validation",icon: RI.userCheck },
  { id: "newjm",     label: "New JM",              icon: RI.pen },
  { id: "asset",     label: "Asset Management",    icon: RI.truck },
  { id: "resource",  label: "Resource Overview",   icon: RI.box },
  { id: "history",   label: "JM History",          icon: RI.clock },
];

function RopSidebar({ 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">SIGMA · 7 RSM</span>
      </div>
      <nav className="rop-sidebar__nav">
        {ROP_NAV.map(n => (
          <div key={n.id} className={`rop-nav-item ${activeNav === n.id ? "rop-nav-item--active" : ""}`}>
            <RIcon d={n.icon} s={17}/>
            <span>{n.label}</span>
          </div>
        ))}
      </nav>
      <div className="rop-sidebar__foot">
        <div className="rop-sidebar__avatar">AH</div>
        <div className="rop-sidebar__who">
          <span className="rop-sidebar__name">Andri Hirselman</span>
          <span className="rop-sidebar__role">NOC Operator · Online</span>
        </div>
      </div>
    </aside>
  );
}

function RopTopbar({ title, crumb }) {
  return (
    <div className="rop-topbar">
      <div className="rop-topbar__left">
        <RIcon d={RI.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"/> NOC LIVE</span>
        <div className="rop-topbar__bell"><RIcon d={RI.bell} s={16}/><span className="rop-topbar__bell-badge">7</span></div>
        <div className="rop-topbar__user">AH</div>
      </div>
    </div>
  );
}

// =============================================================
// View 1 — JM Dashboard
// =============================================================
const ROP_INBOX = [
  { ob: "OB-24-3318", req: "Sasol Group", type: "Airport JM", from: "OR Tambo Intl", date: "28 May · 14:30", sev: "new",   stat: "New" },
  { ob: "OB-24-3317", req: "Anglo American", type: "Site Transfer", from: "Sandton HQ", date: "28 May · 16:00", sev: "plan",  stat: "Scheduled" },
  { ob: "OB-24-3314", req: "MTN Exec Office", type: "Close Protection", from: "Rosebank", date: "28 May · 18:45", sev: "plan",  stat: "Scheduled" },
  { ob: "OB-24-3309", req: "World Bank Mission", type: "Airport JM", from: "Lanseria", date: "29 May · 06:15", sev: "esc",   stat: "Escalation" },
];

function RopDashboard() {
  const kpis = [
    { tone: "green", n: 1, lab: "New Journey Management", icon: RI.plus },
    { tone: "navy",  n: 1, lab: "Scheduled Today",        icon: RI.cal },
    { tone: "gray",  n: 0, lab: "In Planning",            icon: RI.pen },
    { tone: "amber", n: 0, lab: "Escalation",             icon: RI.alert },
  ];
  return (
    <div className="rop-view">
      <div className="rop-kpis">
        {kpis.map((k, i) => (
          <div key={i} className={`rop-kpi rop-kpi--${k.tone}`}>
            <div className="rop-kpi__icon"><RIcon 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>

      <div className="rop-card">
        <div className="rop-card__head">
          <h5 className="rop-card__title">Journey Management Inbox</h5>
          <span className="rop-card__meta">4 awaiting action</span>
        </div>
        <div className="rop-table">
          <div className="rop-table__head rop-table__row">
            <span>OB Number</span><span>Requestor</span><span>JM Type</span><span>Pickup</span><span>Scheduled</span><span>Status</span><span/>
          </div>
          {ROP_INBOX.map((r, i) => (
            <div key={i} className="rop-table__row rop-table__body-row">
              <span className="rop-mono">{r.ob}</span>
              <span className="rop-strong">{r.req}</span>
              <span>{r.type}</span>
              <span className="rop-muted">{r.from}</span>
              <span className="rop-mono rop-muted">{r.date}</span>
              <span><i className={`rop-stat rop-stat--${r.sev}`}>{r.stat}</i></span>
              <span>{i === 0 ? <button className="rop-btn rop-btn--pickup">PICK UP</button> : <button className="rop-btn rop-btn--ghost">View</button>}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="rop-card">
        <div className="rop-card__head">
          <h5 className="rop-card__title">Active Response Services</h5>
          <span className="rop-card__meta"><span className="rop-livedot"/> 2 live</span>
        </div>
        <div className="rop-active-strip">
          <div className="rop-active-chip"><span className="rop-stat rop-stat--live">RESPONDING</span><span className="rop-mono">OB-24-3301</span><span className="rop-muted">CPO · A. Hirselman · 388.6 km</span></div>
          <div className="rop-active-chip"><span className="rop-stat rop-stat--plan">EN ROUTE</span><span className="rop-mono">OB-24-3298</span><span className="rop-muted">Site Transfer · M. Dunn</span></div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// View 2 — JM Request Detail + State Changes workflow
// =============================================================
const ROP_STATES = [
  { k: "Start Planning",     done: true },
  { k: "Risk Plan",          done: true },
  { k: "Threat Assessment",  done: true },
  { k: "Plan Compiled",      cur: true },
  { k: "Manager Review",     done: false },
  { k: "Management Sign Off", done: false },
];

function RopRequestDetail() {
  return (
    <div className="rop-view rop-view--detail">
      <div className="rop-detail-grid">
        {/* Left: request tabs + details */}
        <div className="rop-card rop-detail-main">
          <div className="rop-tabs">
            <span className="rop-tab rop-tab--active">Journey Management Form</span>
            <span className="rop-tab">Requestor Information</span>
            <span className="rop-tab">Passengers</span>
          </div>
          <div className="rop-card__body">
            <div className="rop-kv-grid">
              <div className="rop-kv"><span>OB Number</span><b className="rop-mono">OB-24-3318</b></div>
              <div className="rop-kv"><span>Requestor</span><b>Sasol Group</b></div>
              <div className="rop-kv"><span>JM Type</span><b>Airport JM</b></div>
              <div className="rop-kv"><span>Service Provider</span><b>SIGMA · 7 RSM</b></div>
              <div className="rop-kv"><span>Region</span><b>Gauteng</b></div>
              <div className="rop-kv"><span>Handler</span><b>A. Hirselman</b></div>
            </div>
            <div className="rop-subhead">Passenger Information</div>
            <div className="rop-paxrow">
              <div className="rop-pax-avatar">JM</div>
              <div className="rop-pax-meta"><b>J. Mokoena</b><span className="rop-muted">ZA · Passport A0148822 · +27 82 555 0148</span></div>
              <span className="rop-stat rop-stat--plan">PRINCIPAL</span>
            </div>
            <div className="rop-subhead">Services</div>
            <div className="rop-service-row">
              <div className="rop-service-meta">
                <b>Airport Pickup → Sandton HQ</b>
                <span className="rop-muted">28 May · 14:30 · CPO + Security Driver</span>
              </div>
              <div className="rop-service-actions">
                <button className="rop-btn rop-btn--ghost">PLAN</button>
                <button className="rop-btn rop-btn--pickup">ACTION SERVICE</button>
              </div>
            </div>
          </div>
        </div>

        {/* Right: actions + state workflow + mini routes */}
        <div className="rop-detail-side">
          <div className="rop-card rop-actions-card">
            <div className="rop-actions-head">
              <span className="rop-locked"><RIcon d={RI.shield} s={13} fill="currentColor"/> Locked for planning</span>
            </div>
            <div className="rop-actions-btns">
              <button className="rop-btn rop-btn--full rop-btn--pickup">Conclude Journey</button>
              <button className="rop-btn rop-btn--full rop-btn--ghost">Edit Request</button>
              <button className="rop-btn rop-btn--full rop-btn--escalate">Escalate</button>
            </div>
          </div>

          <div className="rop-card rop-states-card">
            <div className="rop-card__head"><h5 className="rop-card__title">State Changes</h5></div>
            <div className="rop-states">
              {ROP_STATES.map((s, i) => (
                <div key={i} className={`rop-state ${s.done ? "rop-state--done" : ""} ${s.cur ? "rop-state--cur" : ""}`}>
                  <span className="rop-state__node">{s.done ? <RIcon d={RI.check} s={11}/> : s.cur ? <span className="rop-state__pulse"/> : i + 1}</span>
                  <span className="rop-state__label">{s.k}</span>
                  {s.cur && <span className="rop-stat rop-stat--plan">CURRENT</span>}
                </div>
              ))}
            </div>
          </div>

          <div className="rop-card rop-routes-card">
            <div className="rop-card__head"><h5 className="rop-card__title">Planned Routes</h5></div>
            <div className="rop-mini-map">
              <image-slot id="rop-routes-map" src={window.__asset('mapBg','assets/m08-map-bg.png')} fit="cover" shape="rect" placeholder="Routes" style={{ position: "absolute", inset: 0, width: "auto", height: "auto", zIndex: 0 }}></image-slot>
              <svg className="rop-route-svg" viewBox="0 0 320 150" preserveAspectRatio="none">
                <path d="M40 120 Q120 40 180 70 T290 40" fill="none" stroke="var(--red-500)" strokeWidth="2.5" strokeDasharray="6 5"/>
              </svg>
              <span className="rop-route-pin rop-route-pin--a" style={{ left: "10%", top: "78%" }}>A</span>
              <span className="rop-route-pin rop-route-pin--b" style={{ left: "88%", top: "24%" }}>B</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// View 3 — Service Planner (4-step)
// =============================================================
const ROP_RESPONDERS = [
  { n: "A. Hirselman", role: "CPO",            avail: true,  km: "388.6 km" },
  { n: "M. Dunn",      role: "Security Driver", avail: true,  km: "12.4 km" },
  { n: "J. Kruger",    role: "Commander",       avail: true,  km: "5.1 km" },
  { n: "T. Ndlovu",    role: "—",               avail: false, km: "—" },
];

function RopPlanner() {
  const steps = ["Resources", "Assets", "Additional Settings", "Review"];
  const cur = 0;
  return (
    <div className="rop-view rop-view--planner">
      <div className="rop-stepper">
        {steps.map((s, i) => (
          <React.Fragment key={i}>
            <div className={`rop-step ${i === cur ? "rop-step--active" : ""} ${i < cur ? "rop-step--done" : ""}`}>
              <span className="rop-step__n">{i < cur ? <RIcon d={RI.check} s={12}/> : i + 1}</span>
              <span className="rop-step__lab">{s}</span>
            </div>
            {i < steps.length - 1 && <span className={`rop-step__line ${i < cur ? "rop-step__line--done" : ""}`}/>}
          </React.Fragment>
        ))}
      </div>

      <div className="rop-card">
        <div className="rop-card__head">
          <h5 className="rop-card__title">Assign Resources</h5>
          <span className="rop-card__meta">3 of 3 roles required</span>
        </div>
        <div className="rop-table rop-table--planner">
          <div className="rop-table__head rop-table__row rop-table__row--planner">
            <span>Responder</span><span>Availability</span><span>Distance</span><span>Assigned Role</span><span/>
          </div>
          {ROP_RESPONDERS.map((r, i) => (
            <div key={i} className={`rop-table__row rop-table__row--planner rop-table__body-row ${!r.avail ? "rop-row--off" : ""}`}>
              <span className="rop-strong">{r.n}</span>
              <span>{r.avail ? <i className="rop-stat rop-stat--live">Available</i> : <i className="rop-stat rop-stat--off">Unavailable</i>}</span>
              <span className="rop-mono rop-muted">{r.km}</span>
              <span>{r.avail
                ? <span className="rop-select">{r.role}<RIcon d={RI.chevR} s={12}/></span>
                : <span className="rop-muted">—</span>}</span>
              <span>{r.avail ? <button className={`rop-btn ${i === 0 ? "rop-btn--pickup" : "rop-btn--ghost"}`}>{i === 0 ? "Assigned" : "Assign"}</button> : <button className="rop-btn rop-btn--ghost" disabled>—</button>}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="rop-planner-foot">
        <button className="rop-btn rop-btn--ghost">Back</button>
        <div className="rop-planner-foot__spacer"/>
        <span className="rop-muted rop-mono">Step 1 of 4 · Resources</span>
        <button className="rop-btn rop-btn--pickup">Next: Assets</button>
      </div>
    </div>
  );
}

// =============================================================
// View 4 — Active Service (with responder phone overlay)
// =============================================================
const ROP_HISTORY = [
  { t: "14:31:08", k: "Awaiting Res Pickup", sealed: true },
  { t: "14:33:42", k: "Responding",          sealed: true },
  { t: "14:51:19", k: "Waypoint Reached",    sealed: true },
  { t: "14:52:03", k: "Image Taken",         sealed: true, img: true },
  { t: "—",        k: "Awaiting NOC Completion", cur: true },
];
const ROP_CHAT = [
  { who: "op", txt: "Confirm pickup of principal at Arrivals B." },
  { who: "res", txt: "Affirmative. Principal secured, en route to vehicle." },
  { who: "op", txt: "Copy. Maintain comms every 10 min." },
];

function RopActiveService() {
  return (
    <div className="rop-view rop-view--active">
      <div className="rop-active-grid">
        {/* Active service details */}
        <div className="rop-card rop-active-main">
          <div className="rop-card__head">
            <h5 className="rop-card__title">Active Service · OB-24-3301</h5>
            <span className="rop-stat rop-stat--live">AWAITING RESPONDER PICKUP</span>
          </div>
          <div className="rop-card__body">
            <div className="rop-kv-grid rop-kv-grid--tight">
              <div className="rop-kv"><span>Service Provider</span><b>SIGMA · 7 RSM</b></div>
              <div className="rop-kv"><span>Handler</span><b>A. Hirselman</b></div>
              <div className="rop-kv"><span>Required Resources</span><b>CPO · Security Driver</b></div>
              <div className="rop-kv"><span>Service Type</span><b>Airport JM</b></div>
            </div>

            <div className="rop-subhead">Responders</div>
            <div className="rop-resp-row">
              <div className="rop-pax-avatar rop-pax-avatar--live">AH</div>
              <div className="rop-pax-meta">
                <b>Andri Hirselman <span className="rop-stat rop-stat--live">RESPONDING</span></b>
                <span className="rop-muted rop-mono">388.6 km · 11.55 m accuracy</span>
              </div>
              <div className="rop-batt"><RIcon d={RI.battery} s={15}/><span>50%</span></div>
            </div>
            <div className="rop-resp-row rop-row--off">
              <div className="rop-pax-avatar">MD</div>
              <div className="rop-pax-meta"><b>M. Dunn</b><span className="rop-muted">Unavailable</span></div>
            </div>

            <div className="rop-active-actions">
              <button className="rop-btn rop-btn--full rop-btn--ghost">Terminate</button>
              <button className="rop-btn rop-btn--full rop-btn--pickup">Complete Service</button>
            </div>
          </div>
        </div>

        {/* State history */}
        <div className="rop-card rop-history-card">
          <div className="rop-card__head"><h5 className="rop-card__title">State History</h5><span className="rop-card__meta">hash-signed</span></div>
          <div className="rop-history">
            {ROP_HISTORY.map((h, i) => (
              <div key={i} className={`rop-hist ${h.cur ? "rop-hist--cur" : ""}`}>
                <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>
                  {h.sealed && <span className="rop-hist__seal"><RIcon d={RI.check} s={10}/> evidence sealed{h.img ? " · image" : ""}</span>}
                  {h.cur && <span className="rop-stat rop-stat--plan">PENDING</span>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Responder chat */}
        <div className="rop-card rop-chat-card">
          <div className="rop-card__head"><h5 className="rop-card__title">Responder Chat</h5></div>
          <div className="rop-chat">
            {ROP_CHAT.map((m, i) => (
              <div key={i} className={`rop-msg rop-msg--${m.who}`}>{m.txt}</div>
            ))}
            <div className="rop-msg__sent">Message Sent ✓</div>
          </div>
          <div className="rop-chat-input"><span className="rop-muted">Type a message…</span><button className="rop-chat-send"><RIcon d={RI.send} s={14}/></button></div>
        </div>
      </div>

      {/* Responder phone overlay */}
      <div className="rop-respphone" aria-hidden="true">
        <div className="rop-respphone__tag">R24 RESPONDER · A. Hirselman</div>
        <div className="rop-respphone__device">
          <div className="rop-respphone__notch"/>
          <div className="rop-respphone__screen">
            <div className="rop-respphone__map">
              <image-slot id="rop-resp-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"><RIcon d={RI.car} s={12}/></span>
            </div>
            <div className="rop-respphone__job">
              <span className="rop-stat rop-stat--live">ACTIVE JOB</span>
              <b>Airport Pickup → Sandton HQ</b>
              <span className="rop-muted rop-mono">ETA 24 min · 388.6 km</span>
            </div>
            <div className="rop-respphone__actions">
              <button className="rop-rbtn rop-rbtn--primary"><RIcon d={RI.route} s={14}/> Navigate</button>
              <button className="rop-rbtn"><RIcon d={RI.pin} s={14}/> Waypoint</button>
            </div>
            <div className="rop-respphone__tabbar">
              <span className="rop-rtab rop-rtab--active"><RIcon d={RI.route} s={14}/></span>
              <span className="rop-rtab"><RIcon d={RI.bell} s={14}/></span>
              <span className="rop-rtab rop-rtab--er">ER24</span>
              <span className="rop-rtab">BACKUP</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// =============================================================
// Featured frame — cycles the four views
// =============================================================
const ROP_VIEWS = [
  { id: "dashboard", nav: "dashboard", crumb: "Operations", title: "JM Dashboard",            comp: RopDashboard,     tab: "Dashboard" },
  { id: "detail",    nav: "newjm",     crumb: "OB-24-3318",  title: "Journey Request Detail",  comp: RopRequestDetail, tab: "Request + Workflow" },
  { id: "planner",   nav: "newjm",     crumb: "OB-24-3318",  title: "Service Planner",         comp: RopPlanner,       tab: "Service Planner" },
  { id: "active",    nav: "services",  crumb: "OB-24-3301",  title: "Active Response Service",  comp: RopActiveService, tab: "Active Service" },
];

function ResponseOperatorDemo() {
  const [idx, setIdx] = useRopState(0);
  const [paused, setPaused] = useRopState(false);

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

  const v = ROP_VIEWS[idx];
  const View = v.comp;

  return (
    <section className="rop-section" id="response-platform">
      <div className="container">
        <div className="section-header" style={{ marginTop: 0 }}>
          <p className="eyebrow eyebrow--coral">Operator platform · live walkthrough</p>
          <h2 className="section-h2">One journey, end to end — from request to sealed audit.</h2>
          <p className="section-sub">
            The service-provider console your NOC runs every shift: take the request, compile the plan, dispatch and track the responder, and seal every state change as evidence — without leaving the platform.
          </p>
        </div>

        {/* View switcher */}
        <div className="rop-switcher" role="tablist">
          {ROP_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">
          <RopSidebar activeNav={v.nav}/>
          <div className="rop-main">
            <RopTopbar title={v.title} crumb={v.crumb}/>
            <div className="rop-canvas" key={v.id}>
              <View/>
            </div>
          </div>
        </div>

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

window.ResponseOperatorDemo = ResponseOperatorDemo;