// site-pulse-walkthrough.jsx — Featured R24 PULSE Duty-of-Care live walkthrough.
// Same console-frame format as the Response operator demo, teal-accented for PULSE.
// Tells the end-to-end duty-of-care loop in 5 cycling views:
//   1 Risk Signal        — threat detected (risk intelligence feed + map)
//   2 Geofence Match     — personnel auto-matched inside the blast radius
//   3 Broadcast          — multi-channel, multi-language alert + traveller phone overlay
//   4 Response + VRO      — OK / NOT-OK responses stream in, VRO escalates & dispatches
//   5 Resolved + Sealed  — all confirmed safe, audit trail sealed, report generated

const { useState: usePwkState, useEffect: usePwkEffect } = React;

const PIcon = ({ 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 PI = {
  grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  gauge: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 12l4-2"],
  radar: ["M19.07 4.93A10 10 0 1 0 22 12", "M12 12l6-3M12 2v4M12 12a3 3 0 1 0 0 .01"],
  broadcast: ["M12 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z", "M16.24 7.76a6 6 0 0 1 0 8.49M7.76 16.24a6 6 0 0 1 0-8.49M19.07 4.93a10 10 0 0 1 0 14.14M4.93 19.07a10 10 0 0 1 0-14.14"],
  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"],
  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"],
  globe: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20"],
  spark: "M12 2 13.6 8.4 20 10 13.6 11.6 12 18 10.4 11.6 4 10 10.4 8.4Z",
  report: ["M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z", "M13 2v7h7"],
  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"],
  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"],
  shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
  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"],
  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"],
  ambulance: ["M1 3h15v13H1zM16 8h4l3 3v5h-7", "M5.5 18.5a2 2 0 1 0 0 .01M18.5 18.5a2 2 0 1 0 0 .01", "M9 6v4M7 8h4"],
  lock: ["M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4"],
};

const PWK_NAV = [
  { id: "dashboard", label: "Exec Dashboard",   icon: PI.gauge },
  { id: "risk",      label: "Risk Monitoring",  icon: PI.radar },
  { id: "broadcast", label: "Broadcast",        icon: PI.broadcast },
  { id: "incident",  label: "Incident",         icon: PI.alert },
  { id: "travel",    label: "Travel",           icon: PI.route },
  { id: "language",  label: "Language",         icon: PI.globe },
  { id: "reporting", label: "Reporting",        icon: PI.report },
  { id: "data",      label: "Master Data Manager", icon: PI.grid },
];

// ---------- shared chrome ----------
function PwkSidebar({ activeNav }) {
  return (
    <aside className="pwk-sidebar">
      <div className="pwk-sidebar__brand">
        <img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt="R24"/>
        <span className="pwk-sidebar__brand-txt">PULSE</span>
      </div>
      <nav className="pwk-sidebar__nav">
        {PWK_NAV.map(n => (
          <div key={n.id} className={`pwk-navi ${activeNav === n.id ? "pwk-navi--active" : ""}`} title={n.label}>
            <PIcon d={n.icon} s={17} sw={1.8}/>
            <span>{n.label}</span>
          </div>
        ))}
      </nav>
      <div className="pwk-sidebar__foot">
        <span className="pwk-livedot pwk-livedot--teal"/> GSOC-04 · Online
      </div>
    </aside>
  );
}

function PwkTopbar({ step, total = 5, title, sub }) {
  return (
    <div className="pwk-topbar">
      <div className="pwk-topbar__left">
        <span className="pwk-topbar__step">STEP {step}/{total}</span>
        <div className="pwk-topbar__titles">
          <h4 className="pwk-topbar__title">{title}</h4>
          <span className="pwk-topbar__sub">{sub}</span>
        </div>
      </div>
      <div className="pwk-topbar__right">
        <span className="pwk-topbar__clock"><span className="pwk-livedot"/> INC-0412 · LIVE</span>
        <div className="pwk-topbar__bell"><PIcon d={PI.bell} s={15}/><span className="pwk-topbar__bell-badge">3</span></div>
        <div className="pwk-topbar__user">MH</div>
      </div>
    </div>
  );
}

// reusable map block with geofence + optional markers/children
function PwkMap({ id, children, fence = true }) {
  return (
    <div className="pwk-map">
      <image-slot id={id} 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="pwk-map__veil"/>
      {fence && <span className="pwk-fence" style={{ left: "48%", top: "52%" }}><span className="pwk-fence__ring"/><span className="pwk-fence__ring pwk-fence__ring--d"/></span>}
      {children}
    </div>
  );
}

// ============================================================
// View 1 — Risk Signal (Detect)
// ============================================================
const PWK_FEED = [
  { sev: "major", t: "Civil unrest escalating — Lagos CBD", reg: "Lagos Island, NG", time: "just now", live: true },
  { sev: "mod",   t: "Road blockade reported — Ikeja", reg: "Lagos, NG", time: "4 min" },
  { sev: "ltd",   t: "Power outage — Victoria Island", reg: "Lagos, NG", time: "12 min" },
  { sev: "mod",   t: "Protest forming — Lekki toll", reg: "Lagos, NG", time: "18 min" },
];
function PwkRiskSignal() {
  return (
    <div className="pwk-view pwk-grid-2">
      <div className="pwk-col">
        <div className="pwk-kpis">
          <div className="pwk-kpi pwk-kpi--red"><b>1</b><span>Major threat</span></div>
          <div className="pwk-kpi"><b>4</b><span>Active signals</span></div>
          <div className="pwk-kpi pwk-kpi--teal"><b>2,140</b><span>Personnel in region</span></div>
        </div>
        <div className="pwk-card pwk-card--fill">
          <div className="pwk-card__head"><h5>Risk Intelligence Feed</h5><span className="pwk-card__meta">auto-ingested · 180+ sources</span></div>
          <div className="pwk-feed">
            {PWK_FEED.map((f, i) => (
              <div key={i} className={`pwk-feed-row ${f.live ? "pwk-feed-row--live" : ""}`}>
                <span className={`pwk-sevbar pwk-sevbar--${f.sev}`}/>
                <div className="pwk-feed-body">
                  <div className="pwk-feed-top"><b>{f.t}</b>{f.live && <span className="pwk-tag pwk-tag--red">ESCALATING</span>}</div>
                  <span className="pwk-feed-sub">{f.reg} · {f.time}</span>
                </div>
                <span className={`pwk-sevchip pwk-sevchip--${f.sev}`}>{f.sev === "major" ? "Major" : f.sev === "mod" ? "Moderate" : "Limited"}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="pwk-col">
        <PwkMap id="pwk-map-1">
          <span className="pwk-threat" style={{ left: "48%", top: "52%" }}><PIcon d={PI.alert} s={13} fill="currentColor"/></span>
          <span className="pwk-maplabel" style={{ left: "53%", top: "44%" }}>Lagos CBD · Major</span>
          <div className="pwk-mapcorner pwk-mapcorner--tl"><span className="pwk-livedot"/> RISK MONITORING</div>
          <div className="pwk-mapcorner pwk-mapcorner--br">SIGNAL DETECTED 19:47 UTC</div>
        </PwkMap>
      </div>
    </div>
  );
}

// ============================================================
// View 2 — Geofence Match
// ============================================================
const PWK_MATCHED = [
  { n: "Dohan Smit", role: "Sr. Developer", dist: "1.2 km", s: "ok" },
  { n: "Aisha Mokoena", role: "Field Engineer", dist: "2.4 km", s: "ok" },
  { n: "James Okoro", role: "Country Lead", dist: "0.8 km", s: "ok" },
  { n: "Lerato Dlamini", role: "Logistics", dist: "3.1 km", s: "ok" },
  { n: "Raj Patel", role: "Consultant", dist: "4.6 km", s: "ok" },
];
function PwkMatch() {
  return (
    <div className="pwk-view pwk-grid-2">
      <div className="pwk-col">
        <div className="pwk-matchstat">
          <div className="pwk-matchstat__big">32</div>
          <div className="pwk-matchstat__meta"><b>Personnel matched</b><span>within 5 km geofence · auto-correlated from Master Data</span></div>
        </div>
        <div className="pwk-card pwk-card--fill">
          <div className="pwk-card__head"><h5>Matched Personnel</h5><span className="pwk-card__meta">live location · last sync 30s</span></div>
          <div className="pwk-people">
            {PWK_MATCHED.map((p, i) => (
              <div key={i} className="pwk-person">
                <span className="pwk-person__av" style={{ background: ["#1B4F8A","#0F766E","#7C3AED","#B45309","#15803D"][i % 5] }}>{p.n.split(" ").map(w=>w[0]).join("")}</span>
                <div className="pwk-person__meta"><b>{p.n}</b><span>{p.role}</span></div>
                <span className="pwk-person__dist">{p.dist}</span>
                <span className="pwk-statusdot pwk-statusdot--pending" title="Awaiting check"/>
              </div>
            ))}
            <div className="pwk-people-more">+ 27 more in zone</div>
          </div>
        </div>
      </div>
      <div className="pwk-col">
        <PwkMap id="pwk-map-2">
          <span className="pwk-threat" style={{ left: "48%", top: "52%" }}><PIcon d={PI.alert} s={13} fill="currentColor"/></span>
          {[["40%","44%"],["56%","46%"],["44%","60%"],["58%","58%"],["50%","40%"],["38%","54%"],["62%","52%"]].map((p, i) => (
            <span key={i} className="pwk-dot pwk-dot--matched" style={{ left: p[0], top: p[1] }}/>
          ))}
          <div className="pwk-mapcorner pwk-mapcorner--tl"><span className="pwk-livedot pwk-livedot--teal"/> GEOFENCE · 5 KM</div>
          <div className="pwk-mapcorner pwk-mapcorner--br">32 PERSONNEL IN ZONE</div>
        </PwkMap>
      </div>
    </div>
  );
}

// ============================================================
// View 3 — Broadcast (with traveller phone overlay)
// ============================================================
function PwkBroadcast() {
  const channels = [["Push", true], ["SMS", true], ["Email", true], ["WhatsApp", true], ["Voice", false]];
  const langs = ["EN", "FR", "AR", "PT", "+44"];
  return (
    <div className="pwk-view pwk-broadcast">
      <div className="pwk-col">
        <div className="pwk-card">
          <div className="pwk-card__head"><h5>Safety Check Broadcast</h5><span className="pwk-tag pwk-tag--teal">SENDING</span></div>
          <div className="pwk-card__body">
            <div className="pwk-bc-msg">"Safety check — civil unrest reported near your location in Lagos. Are you OK? Reply via the app."</div>
            <div className="pwk-bc-meta">
              <div className="pwk-bc-metaitem"><span className="pwk-bc-lab">Audience</span><b>32 matched personnel</b></div>
              <div className="pwk-bc-metaitem"><span className="pwk-bc-lab">Channels</span>
                <div className="pwk-chips">{channels.map((c,i)=><span key={i} className={`pwk-chip ${c[1] ? "pwk-chip--on" : ""}`}>{c[0]}</span>)}</div>
              </div>
              <div className="pwk-bc-metaitem"><span className="pwk-bc-lab">Languages</span>
                <div className="pwk-chips">{langs.map((l,i)=><span key={i} className="pwk-chip pwk-chip--lang">{l}</span>)}</div>
              </div>
            </div>
            <div className="pwk-bc-delivery">
              <div className="pwk-bc-deliverybar"><i style={{ width: "100%" }}/></div>
              <span className="pwk-bc-deliverylab"><PIcon d={PI.check} s={12}/> Delivered 32/32 · auto-translated per recipient</span>
            </div>
          </div>
        </div>
        <div className="pwk-card">
          <div className="pwk-card__head"><h5>Responses</h5><span className="pwk-card__meta">streaming</span></div>
          <div className="pwk-respstats">
            <div className="pwk-respstat pwk-respstat--ok"><b>30</b><span>OK</span></div>
            <div className="pwk-respstat pwk-respstat--no"><b>2</b><span>NOT OK</span></div>
            <div className="pwk-respstat"><b>0</b><span>No reply</span></div>
          </div>
        </div>
      </div>
      <div className="pwk-col pwk-phonecol">
        <div className="pwk-phone">
          <div className="pwk-phone__notch"/>
          <div className="pwk-phone__screen">
            <div className="pwk-phone__appbar"><img src={window.__asset('iconEmblem','assets/r24i-icon.png')} alt=""/><span>R24 PULSE</span></div>
            <div className="pwk-phone__alert">
              <span className="pwk-tag pwk-tag--red">SAFETY CHECK</span>
              <p className="pwk-phone__title">Are you OK?</p>
              <p className="pwk-phone__body">Civil unrest reported near your location in Lagos. Please confirm your status.</p>
              <div className="pwk-phone__btns">
                <button className="pwk-phone__btn pwk-phone__btn--ok">I'm OK</button>
                <button className="pwk-phone__btn pwk-phone__btn--no">NOT OK</button>
              </div>
              <span className="pwk-phone__loc"><PIcon d={PI.pin} s={11}/> Location shared · 1.2 km from incident</span>
            </div>
          </div>
        </div>
        <span className="pwk-phonecap">Traveller view · D. Smit</span>
      </div>
    </div>
  );
}

// ============================================================
// View 4 — Response + VRO Escalation
// ============================================================
const PWK_VRO = [
  { icon: PI.alert, t: "2 NOT-OK replies detected", s: "Severity auto-uprated to L1", done: true },
  { icon: PI.spark, t: "VRO escalated to Level 1", s: "Agent acting · human in the loop", done: true },
  { icon: PI.bell,  t: "Country Director paged", s: "SMS + voice · acknowledged 12s", done: true },
  { icon: PI.ambulance, t: "Responder dispatched", s: "Local partner · ETA 6 min", cur: true },
];
function PwkResponse() {
  return (
    <div className="pwk-view pwk-grid-2">
      <div className="pwk-col">
        <div className="pwk-respbreak">
          <div className="pwk-respbar"><i className="pwk-respbar__ok" style={{ width: "94%" }}>30 OK</i><i className="pwk-respbar__no" style={{ width: "6%" }}>2</i></div>
          <span className="pwk-respbreak__lab">32 of 32 responded · <b>2 require response</b></span>
        </div>
        <div className="pwk-card pwk-card--fill">
          <div className="pwk-card__head"><h5><PIcon d={PI.spark} s={13} fill="currentColor"/> Virtual Risk Operator</h5><span className="pwk-tag pwk-tag--gold">AGENT LIVE</span></div>
          <div className="pwk-vro">
            {PWK_VRO.map((v, i) => (
              <div key={i} className={`pwk-vrorow ${v.done ? "pwk-vrorow--done" : ""} ${v.cur ? "pwk-vrorow--cur" : ""}`}>
                <span className="pwk-vrorow__node">{v.done ? <PIcon d={PI.check} s={11}/> : <span className="pwk-vrorow__pulse"/>}</span>
                <div className="pwk-vrorow__body"><b>{v.t}</b><span>{v.s}</span></div>
                {v.cur && <span className="pwk-tag pwk-tag--gold">NOW</span>}
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="pwk-col">
        <PwkMap id="pwk-map-4">
          <span className="pwk-dot pwk-dot--no" style={{ left: "44%", top: "48%" }}/>
          <span className="pwk-dot pwk-dot--no" style={{ left: "54%", top: "56%" }}/>
          {[["40%","44%"],["56%","46%"],["58%","58%"],["50%","40%"],["62%","52%"]].map((p, i) => (
            <span key={i} className="pwk-dot pwk-dot--ok" style={{ left: p[0], top: p[1] }}/>
          ))}
          <span className="pwk-respunit" style={{ left: "30%", top: "70%" }}><PIcon d={PI.ambulance} s={12}/></span>
          <div className="pwk-mapcorner pwk-mapcorner--tl"><span className="pwk-livedot"/> 2 NOT-OK · DISPATCHED</div>
          <div className="pwk-mapcorner pwk-mapcorner--br">RESPONDER ETA 6 MIN</div>
        </PwkMap>
      </div>
    </div>
  );
}

// ============================================================
// View 5 — Resolved + Sealed
// ============================================================
const PWK_HISTORY = [
  { t: "19:47:02", k: "Threat detected · Lagos CBD" },
  { t: "19:47:14", k: "32 personnel matched in geofence" },
  { t: "19:47:31", k: "Broadcast delivered 32/32" },
  { t: "19:51:08", k: "2 NOT-OK · VRO escalated to L1" },
  { t: "19:57:42", k: "All 32 confirmed safe" },
];
function PwkResolved() {
  return (
    <div className="pwk-view pwk-grid-2">
      <div className="pwk-col">
        <div className="pwk-resolved-banner">
          <span className="pwk-resolved-banner__icon"><PIcon d={PI.shield} s={20} fill="currentColor"/></span>
          <div><b>All 32 confirmed safe</b><span>Incident INC-0412 resolved · 10 min 40 s end to end</span></div>
        </div>
        <div className="pwk-card pwk-card--fill">
          <div className="pwk-card__head"><h5>Audit Trail</h5><span className="pwk-card__meta"><PIcon d={PI.lock} s={11}/> hash-sealed</span></div>
          <div className="pwk-history">
            {PWK_HISTORY.map((h, i) => (
              <div key={i} className="pwk-histrow">
                <span className="pwk-histrow__rail"><span className="pwk-histrow__node"/></span>
                <div className="pwk-histrow__body"><b>{h.k}</b><span className="pwk-mono">{h.t} UTC</span></div>
                <span className="pwk-histrow__seal"><PIcon d={PI.check} s={10}/></span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="pwk-col">
        <div className="pwk-card pwk-card--fill">
          <div className="pwk-card__head"><h5>Duty of Care Report</h5><span className="pwk-tag pwk-tag--teal">GENERATED</span></div>
          <div className="pwk-card__body">
            <div className="pwk-rptstats">
              <div className="pwk-rptstat"><b>32</b><span>In scope</span></div>
              <div className="pwk-rptstat pwk-rptstat--ok"><b>100%</b><span>Confirmed safe</span></div>
              <div className="pwk-rptstat"><b>10:40</b><span>Resolution</span></div>
            </div>
            <div className="pwk-rptline"><span>Pre-incident risk briefing</span><b className="pwk-ok">Delivered</b></div>
            <div className="pwk-rptline"><span>Two-way safety confirmation</span><b className="pwk-ok">32/32</b></div>
            <div className="pwk-rptline"><span>Escalation chain logged</span><b className="pwk-ok">Complete</b></div>
            <div className="pwk-rptline"><span>Chain-of-custody hash</span><b className="pwk-mono pwk-muted">0x9c1f…42a8</b></div>
            <div className="pwk-rptseal"><PIcon d={PI.lock} s={13} fill="currentColor"/> Audit-sealed · distributable to Board &amp; insurers</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// View 6 — Master Data (the Golden Record foundation)  [LAST]
// Source systems stream into one live Golden Record — the clean
// data layer that made the 5 km geofence match possible.
// ============================================================
const PWK_SOURCES = [
  { ico: PI.users,  name: "Workday",   sys: "HRIS",     field: "Identity & role",     sync: "30s", live: true },
  { ico: PI.route,  name: "Amex GBT",  sys: "TMC",      field: "Itinerary & travel",  sync: "1m" },
  { ico: PI.shield, name: "Azure AD",  sys: "Identity", field: "Access & groups",     sync: "live", live: true },
  { ico: PI.phone,  name: "Mobile App",sys: "Telemetry",field: "Live location",       sync: "live", live: true },
  { ico: PI.report, name: "Bupa EHR",  sys: "Medical",  field: "Advisories",          sync: "5m" },
  { ico: PI.grid,   name: "SAP",       sys: "ERP",      field: "Assets & cost centre",sync: "2m" },
];
const PWK_GOLD_FIELDS = [
  { k: "Identity",  v: "Dohan Smit · Sr. Developer", src: "Workday",   t: "30s" },
  { k: "Location",  v: "Lagos Island · 1.2 km",      src: "Mobile",    t: "live", live: true },
  { k: "Travel",    v: "LHR → LOS · in-country d3",  src: "Amex GBT",  t: "1m" },
  { k: "Medical",   v: "No advisories on file",      src: "Bupa EHR",  t: "5m" },
  { k: "Channels",  v: "Push · SMS · WhatsApp",      src: "Verified",  t: "ok" },
  { k: "Languages", v: "EN · AF",                    src: "Profile",   t: "—" },
];
function PwkMasterData() {
  const [count, setCount] = usePwkState(1284402);
  usePwkEffect(() => {
    const t = setInterval(() => setCount(c => c + Math.floor(7 + Math.random() * 23)), 700);
    return () => clearInterval(t);
  }, []);
  // pipe geometry — 6 sources converge to one record
  const ys = [40, 96, 152, 208, 264, 320];
  return (
    <div className="pwk-view pwk-md">
      {/* left — source systems */}
      <div className="pwk-md__col">
        <div className="pwk-kpis">
          <div className="pwk-kpi pwk-kpi--teal"><b>50+</b><span>Native connectors</span></div>
          <div className="pwk-kpi"><b>2,140</b><span>Profiles in region</span></div>
          <div className="pwk-kpi"><b>0</b><span>Manual uploads</span></div>
        </div>
        <div className="pwk-card pwk-card--fill">
          <div className="pwk-card__head"><h5><PIcon d={PI.grid} s={13} fill="currentColor"/> Source Systems</h5><span className="pwk-card__meta"><span className="pwk-livedot pwk-livedot--teal"/> auto-reconciled</span></div>
          <div className="pwk-md-srcs">
            {PWK_SOURCES.map((s, i) => (
              <div key={i} className="pwk-md-src">
                <span className="pwk-md-src__ico"><PIcon d={s.ico} s={15} sw={1.8}/></span>
                <div className="pwk-md-src__meta">
                  <b>{s.name} <span className="pwk-md-src__sys">{s.sys}</span></b>
                  <span>{s.field}</span>
                </div>
                <span className={`pwk-md-src__sync ${s.live ? "pwk-md-src__sync--live" : ""}`}>
                  {s.live && <span className="pwk-livedot pwk-livedot--teal"/>}{s.sync}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* center — converging pipe */}
      <div className="pwk-md__pipe" aria-hidden="true">
        <svg viewBox="0 0 80 360" preserveAspectRatio="none">
          <defs>
            <linearGradient id="pwk-md-grad" x1="0" x2="1">
              <stop offset="0" stopColor="rgba(26,138,154,0.15)"/>
              <stop offset="1" stopColor="rgba(26,138,154,0.7)"/>
            </linearGradient>
          </defs>
          {ys.map((y, i) => (
            <path key={i} d={`M 0 ${y} C 30 ${y}, 46 180, 80 180`} stroke="url(#pwk-md-grad)" strokeWidth="1.4" fill="none" strokeDasharray="2 4"/>
          ))}
          {ys.map((y, i) => (
            <circle key={`p-${i}`} r="2.6" fill={i % 3 === 0 ? "var(--gold-500)" : "var(--teal-500)"}>
              <animateMotion dur={`${2.4 + (i % 3) * 0.6}s`} repeatCount="indefinite" path={`M 0 ${y} C 30 ${y}, 46 180, 80 180`}/>
            </circle>
          ))}
          <circle cx="80" cy="180" r="16" fill="rgba(26,138,154,0.14)" stroke="var(--teal-500)" strokeWidth="1.2"/>
          <circle cx="80" cy="180" r="5" fill="var(--teal-500)"/>
        </svg>
      </div>

      {/* right — golden record */}
      <div className="pwk-md__col">
        <div className="pwk-card pwk-card--fill pwk-md-gold">
          <div className="pwk-card__head">
            <h5><PIcon d={PI.shield} s={13} fill="currentColor"/> Golden Record</h5>
            <span className="pwk-tag pwk-tag--teal">ONE PROFILE</span>
          </div>
          <div className="pwk-md-gold__id">
            <span className="pwk-md-gold__av">DS</span>
            <div className="pwk-md-gold__who"><b>Dohan Smit</b><span>Reconciled from 6 systems · per-field provenance</span></div>
          </div>
          <div className="pwk-md-fields">
            {PWK_GOLD_FIELDS.map((f, i) => (
              <div key={i} className={`pwk-md-field ${f.live ? "pwk-md-field--live" : ""}`}>
                <div className="pwk-md-field__main"><span className="pwk-md-field__k">{f.k}</span><b>{f.v}</b></div>
                <span className="pwk-md-field__src">← {f.src}<i>{f.t}</i></span>
              </div>
            ))}
          </div>
          <div className="pwk-md-tie">
            <PIcon d={PI.check} s={13}/>
            <span><b>{count.toLocaleString()}</b> fields reconciled today — because this record was already clean, the 5 km geofence matched <b>32 people</b> in under 2 s.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Frame — cycles the six views
// ============================================================
const PWK_VIEWS = [
  { id: "signal",   nav: "risk",      step: 1, title: "Risk Signal Detected", sub: "Civil unrest escalating · Lagos CBD", comp: PwkRiskSignal,  tab: "Detect" },
  { id: "match",    nav: "dashboard", step: 2, title: "Personnel Matched",    sub: "32 in the 5 km geofence",            comp: PwkMatch,       tab: "Match" },
  { id: "broadcast",nav: "broadcast", step: 3, title: "Safety Check Broadcast", sub: "Multi-channel · auto-translated",   comp: PwkBroadcast,   tab: "Broadcast" },
  { id: "response", nav: "incident",  step: 4, title: "Response & Escalation", sub: "VRO escalates the 2 NOT-OK",         comp: PwkResponse,    tab: "Respond" },
  { id: "resolved", nav: "reporting", step: 5, title: "Resolved & Sealed",    sub: "All safe · audit sealed",            comp: PwkResolved,    tab: "Seal" },
  { id: "data",     nav: "data",      step: 6, title: "Master Data · Golden Record", sub: "The clean data layer that made the match possible", comp: PwkMasterData, tab: "Data" },
];

function PulseWalkthrough({ embedded = false }) {
  const [idx, setIdx] = usePwkState(0);
  const [paused, setPaused] = usePwkState(false);
  usePwkEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % PWK_VIEWS.length), 7000);
    return () => clearInterval(t);
  }, [paused]);

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

  const console_ = (
    <>
      <div className="pwk-switcher" role="tablist">
        {PWK_VIEWS.map((vv, i) => (
          <button key={vv.id} className={`pwk-switcher__tab ${i === idx ? "pwk-switcher__tab--active" : ""}`} onClick={() => { setIdx(i); setPaused(true); }}>
            <span className="pwk-switcher__n">{String(i + 1).padStart(2, "0")}</span>{vv.tab}
          </button>
        ))}
        <button className="pwk-switcher__play" onClick={() => setPaused(p => !p)} title={paused ? "Resume autoplay" : "Pause autoplay"}>
          {paused ? "▶ Auto" : "❚❚ Live"}
        </button>
      </div>
      <window.FitScaler designWidth={1200} className="pwk-fit">
      <div className="pwk-frame">
        <PwkSidebar activeNav={v.nav}/>
        <div className="pwk-main">
          <PwkTopbar step={v.step} total={PWK_VIEWS.length} title={v.title} sub={v.sub}/>
          <div className="pwk-canvas" key={v.id}><View/></div>
        </div>
      </div>
      </window.FitScaler>
      <p className="pwk-progress">
        {PWK_VIEWS.map((vv, i) => <span key={i} className={`pwk-progress__seg ${i === idx ? "pwk-progress__seg--on" : ""}`}/>)}
      </p>
    </>
  );

  if (embedded) return <div className="pwk-embed">{console_}</div>;

  return (
    <section className="pwk-section" id="pulse-walkthrough">
      <div className="container">
        <div className="section-header" style={{ marginTop: 0 }}>
          <p className="eyebrow eyebrow--teal">Duty of Care platform · live walkthrough</p>
          <h2 className="section-h2">One alert, end to end — from signal to confirmed-safe.</h2>
          <p className="section-sub">
            The operating picture your security team runs 24/7: detect the threat, match everyone in the blast radius, reach them in their language, confirm they're safe, and seal the audit — automatically.
          </p>
        </div>
        {console_}
      </div>
    </section>
  );
}

window.PulseWalkthrough = PulseWalkthrough;