What is Nexodata Zero-Capture?

Nexodata Zero-Capture is geo-distributed data storage protection software that uses CAONT (Convergent All-or-Nothing Transform) erasure coding to make stolen data mathematically worthless. It fragments data and distributes it across 3 or more geographic sites so that no single site holds a complete copy. Even if attackers compromise an entire site, the fragments they capture are mathematically useless.
How does Zero-Capture protect against data exfiltration and ransomware?

Zero-Capture uses CAONT network coding to split data into fragments distributed across 3+ geographic locations. Without 100% of fragments, attackers cannot reconstruct even a single byte of useful data. This is not encryption-based so there are no keys to steal and the protection is quantum-safe. After any suspected breach, fragments can be rapidly reshuffled, permanently invalidating any previously exfiltrated data.
What is CAONT and how does it work?

CAONT stands for Convergent All-or-Nothing Transform. It is a patented cryptographic technique that replaces AONT's random key with a deterministic hash, enabling deduplication while maintaining information-theoretic security. Combined with network coding, it achieves data confidentiality with only n/k storage overhead instead of the n-times blowup of traditional secret sharing. Fewer than k fragments reveal zero information about the original data.
How does Nexodata Zero-Capture compare to S3 Glacier?

S3 Glacier offers low per-GB storage costs but charges $0.09+/GB for egress, making a 100TB recovery cost $9,000 or more. Retrieval takes hours to days and data sovereignty is controlled by AWS. Zero-Capture has zero egress fees, provides immediate data access without rehydration delays, offers customer-controlled data sovereignty, and is S3-compatible. Zero-Capture also provides exfiltration protection through CAONT while Glacier relies only on encryption.
What is geographic erasure coding?

Geographic erasure coding distributes erasure-coded fragments across physically separate sites rather than keeping them within a single data center. Nexodata Zero-Capture is purpose-built for WAN-distributed erasure coding, distributing fragments across 3 or more sites including on-premises, sovereign cloud, or hyperscaler regions. This provides full site failure tolerance where any one site can go offline completely without data loss.
How much storage overhead does Zero-Capture require?

Zero-Capture requires only 50% storage overhead compared to 200-300% for traditional replication. For example, 100TB of archive data requires 150TB total with Zero-Capture versus 300TB or more with traditional replication. A 200TB archive saves 300TB of storage capacity while still providing multi-site fault tolerance and exfiltration protection.
Does Nexodata Zero-Capture work with Veeam, Cohesity, and Commvault?

Yes. Zero-Capture is fully S3-compatible and integrates as a storage target behind existing backup infrastructure. Cohesity DataProtect integration has been validated in production POC testing. Veeam Backup and Replication, Commvault Complete, and Rubrik CDM are all compatible via standard S3 configuration. Any application that can target an S3 endpoint can write to and read from Zero-Capture with no rip-and-replace required.
How does Zero-Capture handle data sovereignty for Canadian organizations?

Zero-Capture provides data sovereignty by design. Customers control exactly where nodes are deployed including on-premises data centers, sovereign cloud providers like ThinkOn, or hyperscaler regions within Canada such as AWS ca-central. No data traverses international boundaries unless the customer explicitly chooses it. Fragment distribution means even within Canada, no single site holds complete data. This meets PIPEDA and provincial data residency requirements.
What happens if Nexodata goes away? Is my data locked in?

Zero-Capture runs on your infrastructure including your VMs and your cloud instances. The platform uses standard erasure coding, so data does not disappear with the vendor. There is no vendor lock-in because Zero-Capture is S3-compatible and portable. This makes it more resilient than single-cloud dependency where switching providers involves expensive and complex migration.
How long does it take to deploy Nexodata Zero-Capture?

Zero-Capture follows a 30-60 day proof of concept framework. Weeks 1-2 cover setup and configuration including credential provisioning, node deployment across 3 VM locations, and S3 bucket validation. Weeks 3-4 focus on integration and testing with your backup platform. Weeks 5-8 cover validation including site failure simulation, throughput benchmarking, and operational review. Minimum requirements are 4 vCPU and 8GB RAM per node.
How does Zero-Capture reduce the cost of a data breach?

Because stolen data fragments are mathematically useless to attackers, Zero-Capture reduces breach damages across every cost component. Ransom payments are eliminated because attackers have no leverage. Downtime shrinks from months to weeks. Breach response is simplified because data loss is immaterial. Regulatory fines under GDPR, HIPAA, and PCI can be reduced through demonstrating that exfiltrated data was not reconstructable. Zero-Capture reduces a corporate crisis to an IT recovery incident.
Is Nexodata Zero-Capture quantum-safe?

Yes. Zero-Capture protection is based on information-theoretic security through CAONT, not on computational assumptions that could be broken by quantum computers. Unlike encryption-dependent solutions, there is no central key store, no HSM or KMS to target. Cryptographic material is distributed across all fragments. This means the protection remains effective regardless of advances in quantum computing.
New Page — Nexodata - ransomware resiliency and backup efficiency

   {
        setSharedSignal({ type, value, ts: Date.now() });
      }, []);

      const TAGLINES = {
        nexodata:   { main: "Sovereign by design. Resilient by math.",
                      sub:  "Mathematically dispersed across Canadian providers and on-premises sites. No single provider, breach, or court order yields reconstructable data." },
        legacy:     { main: "Centralized by default. Vulnerable by design.",
                      sub:  "Multi-cloud replication makes copies, not fragments. Every replica IS the data. One breach, one subpoena, one ransomware event still exposes everything." },
        sidebyside: { main: "Same attack. Different math. Different outcome.",
                      sub:  "Click any scenario above to fire the same threat at both architectures. Watch them diverge in real time." },
      };

      const sandboxKey = `${mode}-${deployMode}`;  // forces clean remount on any mode change
      return (
        <div style={{ fontFamily: "\x27Red Hat Mono\x27,\x27Menlo\x27,monospace", background: "#07080c", color: "#d8dde6", height: "100vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
          <GlobalStyles />
          <TopBar mode={mode} setMode={setMode} showDeployToggle={showDeployToggle} setShowDeployToggle={setShowDeployToggle} deployMode={deployMode} setDeployMode={setDeployMode} />
          <Tagline tagline={TAGLINES[mode]} />
          {deployMode !== "multi-cloud" && (
            <div style={{ padding: "7px 32px", background: "rgba(251,191,36,0.10)", borderBottom: "1px solid rgba(251,191,36,0.3)", fontSize: "12px", color: "#fbbf24", letterSpacing: "0.5px", display: "flex", justifyContent: "center", alignItems: "center", gap: "8px", flexShrink: 0 }}>
              <span style={{ fontWeight: 700, letterSpacing: "1.5px", fontSize: "10px" }}>DEPLOYMENT MODE:</span>
              {deployMode === "multi-region"
                ? <span><strong>Multi-Region (single provider)</strong> &mdash; sites are AWS availability zones. SUBPOENA defense reduced: one Cloud Act order affects all regions of one provider.</span>
                : <span><strong>Hybrid (cloud + on-premises)</strong> &mdash; mostly customer-controlled datacenters with one cloud for offsite. Strongest sovereignty for sensitive workloads.</span>}
            </div>
          )}
          {mode === "sidebyside" ? (
            <>
              <SharedTriggerBar onPreset={(p) => triggerShared("preset", p)} onReset={() => triggerShared("reset")} />
              <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
                <div style={{ flex: 1, borderRight: "2px solid rgba(255,107,107,0.3)", display: "flex", flexDirection: "column", minWidth: 0 }}>
                  <SideHeader title="LEGACY (REPLICATED)" tone="bad" />
                  <BoothSandbox key={`L-${sandboxKey}`} legacy compact sharedSignal={sharedSignal} deployMode={deployMode} />
                </div>
                <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
                  <SideHeader title="NEXODATA (DISPERSED)" tone="good" />
                  <BoothSandbox key={`N-${sandboxKey}`} compact sharedSignal={sharedSignal} deployMode={deployMode} />
                </div>
              </div>
            </>
          ) : (
            <BoothSandbox key={sandboxKey} legacy={mode === "legacy"} deployMode={deployMode} />
          )}
          <Footer deployMode={deployMode} />
        </div>
      );
    }

    function SharedTriggerBar({ onPreset, onReset }) {
      const presets = [
        { id: "breach",     label: "Single Cloud Breach", color: "#ff6b6b" },
        { id: "subpoena",   label: "Foreign Subpoena",    color: "#fbbf24" },
        { id: "ransomware", label: "Ransomware Attack",   color: "#ff9f43" },
        { id: "outage",     label: "Cloud Outage",        color: "#a855f7" },
      ];
      return (
        <div style={{ padding: "10px 24px", borderBottom: "1px solid rgba(96,165,250,0.25)", background: "rgba(96,165,250,0.06)", display: "flex", alignItems: "center", gap: "10px", flexShrink: 0 }}>
          <div style={{ fontSize: "11px", letterSpacing: "2px", color: "#60a5fa", fontWeight: 700, fontFamily: "\x27Red Hat Display\x27,sans-serif" }}>FIRE ON BOTH:</div>
          {presets.map(p => (
            <button key={p.id} className="tool-btn" onClick={() => onPreset(p.id)}
              style={{ padding: "7px 14px", borderRadius: "4px", background: `${p.color}15`, color: p.color, border: `1px solid ${p.color}50`, fontSize: "11px", fontWeight: 700, letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: "7px", fontFamily: "\x27Red Hat Display\x27,sans-serif" }}>
              <svg width="9" height="10" viewBox="0 0 9 10"><path d="M0,0 L9,5 L0,10 Z" fill={p.color} /></svg>
              {p.label}
            </button>
          ))}
          <button className="tool-btn" onClick={onReset} style={{ padding: "7px 14px", borderRadius: "4px", background: "rgba(255,255,255,0.04)", color: "#909aab", fontSize: "11px", fontWeight: 600, letterSpacing: "1px", marginLeft: "auto" }}>RESET BOTH</button>
        </div>
      );
    }

    function GlobalStyles() {
      return (
        <style>{`
          @import url(\x27https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300;400;500;600;700&family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap\x27);
          * { box-sizing: border-box; margin: 0; padding: 0; }
          @keyframes fade-up      { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
          @keyframes fade-in      { from{opacity:0} to{opacity:1} }
          @keyframes ring-out     { 0%{transform:translate(-50%,-50%) scale(1);opacity:0.5} 100%{transform:translate(-50%,-50%) scale(2.6);opacity:0} }
          @keyframes glow-green   { 0%,100%{filter:drop-shadow(0 0 4px rgba(52,211,153,0.3))} 50%{filter:drop-shadow(0 0 12px rgba(52,211,153,0.7))} }
          @keyframes glow-red     { 0%,100%{filter:drop-shadow(0 0 6px rgba(255,107,107,0.5))} 50%{filter:drop-shadow(0 0 16px rgba(255,107,107,1))} }
          @keyframes glow-orange  { 0%,100%{filter:drop-shadow(0 0 6px rgba(255,159,67,0.5))} 50%{filter:drop-shadow(0 0 14px rgba(255,159,67,0.95))} }
          @keyframes slide-in     { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
          @keyframes target-add   { 0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(1)} 50%{opacity:0.85;transform:translate(-50%,-50%) scale(1.18)} }
          @keyframes preset-flash { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.6)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.6)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)} }
          @keyframes repair-flow  { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-30} }
          @keyframes shake-bad    { 0%,100%{transform:translate(-50%,-50%) translateX(0)} 25%{transform:translate(-50%,-50%) translateX(-3px)} 75%{transform:translate(-50%,-50%) translateX(3px)} }
          @keyframes pulse-warn   { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0.6)} 50%{box-shadow:0 0 0 14px rgba(251,191,36,0)} }
          @keyframes pulse-bad    { 0%,100%{box-shadow:0 0 0 0 rgba(255,68,68,0.6)} 50%{box-shadow:0 0 0 14px rgba(255,68,68,0)} }
          @keyframes pulse-good   { 0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0.5)} 50%{box-shadow:0 0 0 12px rgba(52,211,153,0)} }
          .tool-btn { cursor:pointer; transition:all 0.2s ease; border:none; font-family:inherit; }
          .tool-btn:hover { transform:translateY(-2px); filter:brightness(1.15); }
          .tool-btn:active { transform:translateY(0); }
          .site-hit { cursor:crosshair; }
          ::-webkit-scrollbar { width:5px; }
          ::-webkit-scrollbar-track { background:transparent; }
          ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
          .site-transition { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
          img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
        `}</style>
      );
    }

    function TopBar({ mode, setMode, showDeployToggle, setShowDeployToggle, deployMode, setDeployMode }) {
      const Btn = ({ id, label }) => (
        <button className="tool-btn" onClick={() => setMode(id)}
          style={{
            padding: "10px 24px", borderRadius: "5px", fontSize: "14px", letterSpacing: "1.8px",
            background: mode === id ? "rgba(96,165,250,0.20)" : "rgba(255,255,255,0.04)",
            color: mode === id ? "#60a5fa" : "#909aab",
            border: `1px solid ${mode === id ? "rgba(96,165,250,0.5)" : "rgba(255,255,255,0.07)"}`,
            fontWeight: 700, fontFamily: "\x27Red Hat Display\x27,sans-serif",
          }}>{label}</button>
      );
      return (
        <div style={{ padding: "10px 28px", borderBottom: "1px solid rgba(255,255,255,0.07)", display: "flex", justifyContent: "space-between", alignItems: "center", flexShrink: 0, background: "rgba(255,255,255,0.012)", position: "relative" }}>
          <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
            <img src="nexodata_logo.png" alt="Nexodata" style={{ height: "44px", filter: "brightness(1.5) contrast(1.2)" }} />
            <div style={{ width: "1px", height: "30px", background: "rgba(255,255,255,0.1)" }} />
            <div style={{ fontSize: "12px", color: "#909aab", letterSpacing: "1.5px", textTransform: "uppercase" }}>Adversary Sandbox</div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
            <Btn id="nexodata"   label="NEXODATA" />
            <Btn id="legacy"     label="LEGACY" />
            <Btn id="sidebyside" label="SIDE-BY-SIDE" />
            <div style={{ width: "1px", height: "26px", background: "rgba(255,255,255,0.1)", margin: "0 8px" }} />
            <button className="tool-btn" onClick={() => setShowDeployToggle(!showDeployToggle)}
              style={{ padding: "8px 14px", borderRadius: "4px", fontSize: "11px", letterSpacing: "1.5px",
                       background: showDeployToggle ? "rgba(251,191,36,0.15)" : "rgba(255,255,255,0.04)",
                       color: showDeployToggle ? "#fbbf24" : "#808898",
                       border: `1px solid ${showDeployToggle ? "rgba(251,191,36,0.4)" : "rgba(255,255,255,0.07)"}`,
                       fontWeight: 600 }}>
              DEPLOY MODE
            </button>
          </div>
          {showDeployToggle && <DeployPanel deployMode={deployMode} setDeployMode={setDeployMode} />}
        </div>
      );
    }

    function DeployPanel({ deployMode, setDeployMode }) {
      const opts = [
        { id: "multi-cloud",  label: "Multi-Cloud",   desc: "Different cloud providers (strongest sovereignty)" },
        { id: "multi-region", label: "Multi-Region",  desc: "Same provider, different regions" },
        { id: "hybrid",       label: "Hybrid",        desc: "On-premises + cloud providers" },
      ];
      return (
        <div style={{ position: "absolute", top: "60px", right: "30px", zIndex: 200, background: "#0d0f18", border: "1px solid rgba(251,191,36,0.3)", borderRadius: "6px", padding: "16px 20px", minWidth: "320px", boxShadow: "0 12px 40px rgba(0,0,0,0.5)", animation: "fade-up 0.2s ease" }}>
          <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "13px", color: "#fbbf24", letterSpacing: "2px", marginBottom: "10px", fontWeight: 700 }}>DEPLOYMENT MODE</div>
          <div style={{ fontSize: "11px", color: "#808898", lineHeight: "1.5", marginBottom: "12px" }}>Customers without multi-cloud can still use Nexodata. Trust boundaries scale with deployment choice.</div>
          {opts.map(o => (
            <button key={o.id} className="tool-btn" onClick={() => setDeployMode(o.id)}
              style={{ display: "block", width: "100%", textAlign: "left", padding: "10px 12px", marginBottom: "5px", borderRadius: "4px",
                       background: deployMode === o.id ? "rgba(251,191,36,0.12)" : "rgba(255,255,255,0.02)",
                       border: `1px solid ${deployMode === o.id ? "rgba(251,191,36,0.4)" : "rgba(255,255,255,0.05)"}` }}>
              <div style={{ fontSize: "13px", fontWeight: 700, color: deployMode === o.id ? "#fbbf24" : "#d0d6e0" }}>{o.label}</div>
              <div style={{ fontSize: "11px", color: "#808898", marginTop: "2px" }}>{o.desc}</div>
            </button>
          ))}
          <div style={{ fontSize: "10px", color: "#606878", marginTop: "8px", lineHeight: "1.5", fontStyle: "italic" }}>
            Note: SUBPOENA defense weakens in single-cloud Multi-Region mode. Multi-Cloud and Hybrid retain full sovereignty.
          </div>
        </div>
      );
    }

    function Tagline({ tagline }) {
      return (
        <div style={{ padding: "16px 32px 14px", borderBottom: "1px solid rgba(255,255,255,0.05)", flexShrink: 0, background: "rgba(96,165,250,0.025)" }}>
          <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "26px", fontWeight: 800, color: "#f2f4f7", letterSpacing: "0.5px" }}>{tagline.main}</div>
          <div style={{ fontSize: "13px", color: "#909aab", marginTop: "4px", lineHeight: "1.5" }}>{tagline.sub}</div>
        </div>
      );
    }

    function SideHeader({ title, tone }) {
      const c = tone === "bad" ? "#ff6b6b" : "#34d399";
      return (
        <div style={{ padding: "10px 18px", borderBottom: `1px solid ${tone === "bad" ? "rgba(255,107,107,0.25)" : "rgba(52,211,153,0.25)"}`, background: tone === "bad" ? "rgba(255,107,107,0.04)" : "rgba(52,211,153,0.04)", flexShrink: 0 }}>
          <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "14px", fontWeight: 800, color: c, letterSpacing: "2.5px" }}>{title}</div>
        </div>
      );
    }

    function Footer({ deployMode }) {
      return (
        <div style={{ padding: "8px 28px", borderTop: "1px solid rgba(255,255,255,0.05)", display: "flex", justifyContent: "space-between", alignItems: "center", flexShrink: 0, background: "rgba(0,0,0,0.3)", fontSize: "11px", color: "#606878" }}>
          <div>Demo: <span style={{color:"#909aab"}}>5-of-3 dispersal</span> across <span style={{color:"#909aab"}}>eastern Canadian providers</span>. System supports any (n, k) configuration: (3,2), (4,3), (5,3), (6,4), (7,4)+.</div>
          <div>Active deployment: <span style={{color:"#fbbf24",fontWeight:600}}>{deployMode.toUpperCase()}</span></div>
        </div>
      );
    }

    // =========================================================================
    // SANDBOX
    // =========================================================================
    function BoothSandbox({ legacy = false, compact = false, sharedSignal = null, deployMode = "multi-cloud" }) {
      const [siteStates, setSiteStates] = useState(SITES.map(freshSite));
      const [selectedTool, setSelectedTool] = useState(null);
      const [attackLog, setAttackLog] = useState([]);
      const [ioLog, setIoLog] = useState([]);
      const [now, setNow] = useState(Date.now());
      const [legacyDamage, setLegacyDamage] = useState({ recordsExfil: 0, downtimeStart: null, dataLost: false, subpoenaCompelled: false, indirectExposure: false });
      const [presetFlash, setPresetFlash] = useState(null);  // {siteIdx, color}
      const [breachHistory, setBreachHistory] = useState([]);   // [{siteIdx, oldFragmentHex, newFragmentHex, expiredAt}]
      const [subpoenaHistory, setSubpoenaHistory] = useState([]); // [{siteIdx, time, fragmentHex}] - permanent disclosure record

      const ioRef = useRef(null);
      const ioId = useRef(0);
      const logId = useRef(0);
      const ioLogRef = useRef(null);
      const statesRef = useRef(siteStates);
      statesRef.current = siteStates;
      const tickRef = useRef(null);
      const repairRef = useRef(null);
      const damageRef = useRef(null);
      const ransomSpreadRef = useRef(null);

      const derived = useMemo(() => {
        const statuses = siteStates.map(s => deriveStatus(s));
        const liveSiteCount = statuses.filter(s => isFunctional(s)).length;
        const breachedCount = legacy ? (siteStates.some(s => s.attacks.includes("breach")) ? K : 0)
                                     : siteStates.filter(s => s.attacks.includes("breach")).length;
        const subpoenaedCount = siteStates.filter(s => s.attacks.includes("subpoena")).length;
        const ransomedCount = siteStates.filter(s => s.attacks.includes("ransomware")).length;
        const totalActiveAttacks = siteStates.reduce((sum, s) => sum + s.attacks.length, 0);
        const dataAtRisk = legacy ? (legacyDamage.dataLost || legacyDamage.recordsExfil > 0 || legacyDamage.subpoenaCompelled)
                                  : (breachedCount + subpoenaedCount) >= K;
        const allRansomed = legacy && ransomedCount >= N;
        return {
          statuses, liveSiteCount, breachedCount, subpoenaedCount, ransomedCount, totalActiveAttacks,
          systemUp: legacy ? !legacyDamage.downtimeStart && !legacyDamage.dataLost && !allRansomed : liveSiteCount >= K,
          dataCompromised: dataAtRisk,
          hasAnyAttack: totalActiveAttacks > 0,
          allRansomed,
        };
      }, [siteStates, legacy, legacyDamage]);

      // Master tick: STS expiry (rotates fragment), subpoena clearing (record persists)
      useEffect(() => {
        tickRef.current = setInterval(() => {
          const t = Date.now();
          setNow(t);
          setSiteStates(prev => {
            let mutated = false;
            const expiredBreaches = [];  // collected for history
            const clearedSubpoenas = []; // for log only - history was added on apply
            const next = prev.map((s, i) => {
              let n = s;
              if (n.stsExpiresAt && t >= n.stsExpiresAt && n.attacks.includes("breach")) {
                expiredBreaches.push({ siteIdx: i, oldFragmentHex: n.fragmentHex, newFragmentHex: hex(36), expiredAt: t });
                // breach reverts AND fragment rotates - new hex = stale stolen copy is now invalid
                n = { ...n, attacks: n.attacks.filter(a => a !== "breach"), stsExpiresAt: null, stsToken: null, fragmentHex: null };
                mutated = true;
              }
              if (n.subpoenaAt && t >= n.subpoenaAt && n.attacks.includes("subpoena")) {
                clearedSubpoenas.push(i);
                n = { ...n, attacks: n.attacks.filter(a => a !== "subpoena"), subpoenaAt: null };
                mutated = true;
              }
              return n;
            });
            if (expiredBreaches.length) {
              setBreachHistory(h => [...h, ...expiredBreaches]);
              expiredBreaches.forEach(eb => addLogRef.current(`STS expired @ ${SITES[eb.siteIdx].name} - fragment rotated, stolen copy is now stale`, "restore"));
            }
            if (clearedSubpoenas.length) {
              clearedSubpoenas.forEach(i => addLogRef.current(`Subpoena response @ ${SITES[i].name} complete - disclosure recorded as permanent audit trail`, "restore"));
            }
            return mutated ? next : prev;
          });
        }, 200);
        return () => clearInterval(tickRef.current);
      }, []);

      // Auto-repair (Nexodata only)
      useEffect(() => {
        if (legacy) return;
        clearInterval(repairRef.current);
        repairRef.current = setInterval(() => {
          const states = statesRef.current;
          const live = states.filter(s => isFunctional(deriveStatus(s))).length;
          if (live < K) return;
          setSiteStates(prev => {
            const t = Date.now();
            return prev.map((s, i) => {
              const status = deriveStatus(s);
              if (status === "ransomware" || status === "outage") {
                if (!s.repairAt) return { ...s, repairAt: t + REPAIR_DELAY_MS };
                if (t >= s.repairAt) {
                  if (s.attacks.includes("ransomware")) addLogRef.current(`${SITES[i].name} restored - peers reconstructed via FMSR`, "restore");
                  if (s.attacks.includes("outage"))     addLogRef.current(`${SITES[i].name} reconnected - reads/writes resumed`, "restore");
                  return { ...s, attacks: s.attacks.filter(a => a !== "ransomware" && a !== "outage"), repairAt: null };
                }
              }
              return s;
            });
          });
        }, 400);
        return () => clearInterval(repairRef.current);
      }, [legacy]);

      // LEGACY: ransomware propagates through replication channels
      useEffect(() => {
        if (!legacy) return;
        clearInterval(ransomSpreadRef.current);
        ransomSpreadRef.current = setInterval(() => {
          const states = statesRef.current;
          const t = Date.now();
          const oldestRansom = states.filter(s => s.attacks.includes("ransomware") && s.ransomedAt)
                                     .reduce((min, s) => Math.min(min, s.ransomedAt), Infinity);
          if (oldestRansom === Infinity) return;
          if (t - oldestRansom < RANSOM_PROPAGATE_MS) return;
          // propagate to remaining sites
          const allRansomed = states.every(s => s.attacks.includes("ransomware"));
          if (allRansomed) return;
          setSiteStates(prev => prev.map(s => {
            if (s.attacks.includes("ransomware")) return s;
            return { ...s, attacks: [...s.attacks, "ransomware"], ransomedAt: t };
          }));
          addLogRef.current(`Ransomware propagated through replication - all replicas locked`, "critical");
        }, 400);
        return () => clearInterval(ransomSpreadRef.current);
      }, [legacy]);

      // LEGACY: damage accumulator
      useEffect(() => {
        if (!legacy) return;
        clearInterval(damageRef.current);
        damageRef.current = setInterval(() => {
          const states = statesRef.current;
          const breached = states.some(s => s.attacks.includes("breach"));
          const subpoenaed = states.some(s => s.attacks.includes("subpoena"));
          const ransomed = states.some(s => s.attacks.includes("ransomware"));
          setLegacyDamage(prev => {
            let n = { ...prev };
            if (breached)   n.recordsExfil = prev.recordsExfil + Math.floor(Math.random() * 800 + 400);
            if (breached || subpoenaed) n.indirectExposure = true;
            if (subpoenaed && !prev.subpoenaCompelled) n.subpoenaCompelled = true;
            if (ransomed && !prev.downtimeStart) n.downtimeStart = Date.now();
            if (!ransomed && prev.downtimeStart) n.downtimeStart = null;
            return n;
          });
        }, 250);
        return () => clearInterval(damageRef.current);
      }, [legacy]);

      // Always-on idle I/O
      useEffect(() => {
        clearInterval(ioRef.current);
        ioRef.current = setInterval(() => {
          const states = statesRef.current;
          if (legacy) {
            const allDown = states.every(s => !isFunctional(deriveStatus(s)));
            if (allDown) return;
            const live = SITES.filter((_, i) => isFunctional(deriveStatus(states[i])));
            if (live.length === 0) return;
            const site = live[Math.floor(Math.random() * live.length)];
            const op = Math.random() > 0.45 ? "READ" : "WRITE";
            setIoLog(prev => [...prev.slice(-9), { id: ioId.current++, op, site: site.name, obj: `obj_${hex(4)}`, time: ts() }]);
          } else {
            const statuses = states.map(s => deriveStatus(s));
            const functional = SITES.filter((_, i) => isFunctional(statuses[i]));
            if (functional.length < K) return;
            const site = functional[Math.floor(Math.random() * functional.length)];
            const op = Math.random() > 0.45 ? "READ" : "WRITE";
            setIoLog(prev => [...prev.slice(-9), { id: ioId.current++, op, site: site.name, obj: `obj_${hex(4)}`, time: ts() }]);
          }
        }, IDLE_IO_INTERVAL);
        return () => clearInterval(ioRef.current);
      }, [legacy]);

      useEffect(() => { if (ioLogRef.current) ioLogRef.current.scrollTop = ioLogRef.current.scrollHeight; }, [ioLog]);

      const addLog = useCallback((msg, type) => {
        setAttackLog(prev => [...prev.slice(-7), { id: logId.current++, msg, type, time: ts() }]);
      }, []);
      const addLogRef = useRef(addLog);
      addLogRef.current = addLog;

      const toggleAttack = useCallback((siteIdx, forceTool = null) => {
        const tool = forceTool || selectedTool;
        if (!tool) return;
        const current = statesRef.current[siteIdx];
        const status = deriveStatus(current);
        const has = current.attacks.includes(tool);
        const action = has ? "remove"
                     : (tool === "outage" ? (status !== "outage" ? "add" : null)
                        : (isFunctional(status) ? "add" : null));
        if (!action) return;
        const siteName = SITES[siteIdx].name;
        const sCat = SITES[siteIdx].category;

        // For subpoena, generate hex once and add permanent audit record
        let subpoenaFragHex = null;
        if (action === "add" && tool === "subpoena") {
          subpoenaFragHex = hex(36);
          setSubpoenaHistory(h => [...h, { siteIdx, time: Date.now(), fragmentHex: subpoenaFragHex }]);
        }

        setSiteStates(prev => prev.map((s, i) => {
          if (i !== siteIdx) return s;
          if (action === "add") {
            const newAttacks = [...s.attacks, tool];
            if (tool === "breach") return { ...s, attacks: newAttacks, stsExpiresAt: Date.now() + STS_LIFETIME_MS, stsToken: `STS-${hex(8)}.${hex(8)}.${hex(6)}`, fragmentHex: hex(36), repairAt: null };
            if (tool === "subpoena") return { ...s, attacks: newAttacks, subpoenaAt: Date.now() + SUBPOENA_DURATION, fragmentHex: subpoenaFragHex };
            if (tool === "ransomware") return { ...s, attacks: newAttacks, ransomedAt: Date.now(), repairAt: null };
            return { ...s, attacks: newAttacks, repairAt: null };
          } else {
            const newAttacks = s.attacks.filter(a => a !== tool);
            if (tool === "breach") return { ...s, attacks: newAttacks, stsExpiresAt: null, stsToken: null, fragmentHex: null };
            if (tool === "subpoena") return { ...s, attacks: newAttacks, subpoenaAt: null };
            if (tool === "ransomware") return { ...s, attacks: newAttacks, ransomedAt: null };
            return { ...s, attacks: newAttacks };
          }
        }));

        if (action === "add") {
          if (tool === "breach")     addLog(legacy ? `!! BREACH ${siteName} - LEGACY: full plaintext copy exfiltrated` : `Breach @ ${siteName} (${sCat}) - 1 fragment of CAONT noise extracted`, legacy ? "critical" : "breach");
          else if (tool === "ransomware") addLog(legacy ? `Ransomware @ ${siteName} - replication channels compromised` : `Ransomware @ ${siteName} - peers will repair via FMSR`, "ransomware");
          else if (tool === "outage")     addLog(legacy ? `${siteName} provider down - falling back to other replicas` : `${siteName} infrastructure down - reads continuing on remaining sites`, "outage");
          else if (tool === "subpoena")   addLog(legacy ? `!! SUBPOENA ${siteName} - LEGACY: full plaintext disclosed` : `Subpoena served @ ${siteName} (${sCat}) - 1 fragment disclosed, mathematically incomplete`, legacy ? "critical" : "subpoena");
        } else {
          if (tool === "breach")     addLog(`${siteName} breach manually reverted`, "restore");
          else if (tool === "ransomware") addLog(`${siteName} ransomware cleared`, "restore");
          else if (tool === "outage")     addLog(`${siteName} brought back online`, "restore");
          else if (tool === "subpoena")   addLog(`${siteName} subpoena response cleared`, "restore");
        }
      }, [selectedTool, addLog, legacy]);

      const reset = useCallback(() => {
        setSiteStates(SITES.map(freshSite));
        setSelectedTool(null);
        setAttackLog([]);
        setLegacyDamage({ recordsExfil: 0, downtimeStart: null, dataLost: false, subpoenaCompelled: false, indirectExposure: false });
        setPresetFlash(null);
        setBreachHistory([]);
        setSubpoenaHistory([]);
      }, []);

      // Scenario presets - flash target site BEFORE attack lands
      const runPreset = useCallback((presetId) => {
        reset();
        const targetMap = { breach: 0, ransomware: 2, outage: 1, subpoena: 0 };  // Toronto, Montreal, Ottawa, Toronto
        const toolMap = { breach: "breach", ransomware: "ransomware", outage: "outage", subpoena: "subpoena" };
        const siteIdx = targetMap[presetId];
        const tool = toolMap[presetId];

        setTimeout(() => {
          setPresetFlash({ siteIdx, color: ATTACKS[tool].color });
          addLog(`>>> Targeting ${SITES[siteIdx].name} (${SITES[siteIdx].category}) for ${ATTACKS[tool].label}...`, "info");
        }, 200);

        setTimeout(() => {
          setPresetFlash(null);
          toggleAttack(siteIdx, tool);
        }, 200 + PRESET_FLASH_MS);
      }, [reset, toggleAttack, addLog]);

      // Side-by-side: react to shared trigger signals from parent
      const runPresetRef = useRef();
      const resetRef = useRef();
      runPresetRef.current = runPreset;
      resetRef.current = reset;
      useEffect(() => {
        if (!sharedSignal) return;
        if (sharedSignal.type === "preset") runPresetRef.current(sharedSignal.value);
        else if (sharedSignal.type === "reset") resetRef.current();
      }, [sharedSignal && sharedSignal.ts]);

      return (
        <div style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0, overflow: "hidden" }}>
          <div style={{ display: "flex", flex: 1, minHeight: 0, overflow: "hidden" }}>
            {!compact && <LeftPane selectedTool={selectedTool} setSelectedTool={setSelectedTool} legacy={legacy} runPreset={runPreset} reset={reset} attackLog={attackLog} />}
            <MapPane siteStates={siteStates} derived={derived} selectedTool={selectedTool} toggleAttack={toggleAttack} legacy={legacy} now={now} legacyDamage={legacyDamage} compact={compact} presetFlash={presetFlash} deployMode={deployMode} />
            {!compact && <RightPane siteStates={siteStates} derived={derived} ioLog={ioLog} ioLogRef={ioLogRef} now={now} legacy={legacy} legacyDamage={legacyDamage} breachHistory={breachHistory} subpoenaHistory={subpoenaHistory} />}
          </div>
          {compact && <CompactInfo derived={derived} legacy={legacy} legacyDamage={legacyDamage} attackLog={attackLog} />}
        </div>
      );
    }

    // =========================================================================
    // LEFT PANE - Toolkit visually distinct from Scenarios
    // =========================================================================
    function LeftPane({ selectedTool, setSelectedTool, legacy, runPreset, reset, attackLog }) {
      return (
        <div style={{ width: "320px", borderRight: "1px solid rgba(255,255,255,0.07)", display: "flex", flexDirection: "column", flexShrink: 0 }}>
          {/* MANUAL TOOLKIT - small list, instructive */}
          <div style={{ padding: "14px 16px 10px", borderBottom: "1px dashed rgba(255,255,255,0.06)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "10px" }}>
              <div style={{ fontSize: "11px", letterSpacing: "2.5px", textTransform: "uppercase", color: "#ff6b6b", fontWeight: 700, fontFamily: "\x27Red Hat Display\x27,sans-serif" }}>Manual Mode</div>
              <div style={{ fontSize: "9px", color: "#606878", letterSpacing: "1px" }}>Pick tool, click site</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px" }}>
              {Object.entries(ATTACKS).map(([key, atk]) => {
                const isActive = selectedTool === key;
                return (
                  <button key={key} className="tool-btn" onClick={() => setSelectedTool(isActive ? null : key)}
                    style={{ padding: "8px 10px", borderRadius: "4px", textAlign: "left",
                             background: isActive ? atk.bg : "rgba(255,255,255,0.02)",
                             border: `1.5px solid ${isActive ? atk.border : "rgba(255,255,255,0.06)"}` }}>
                    <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "12px", fontWeight: 700, color: isActive ? atk.color : "#d0d6e0" }}>{atk.label}</div>
                  </button>
                );
              })}
            </div>
            {selectedTool && (
              <div style={{ marginTop: "8px", padding: "6px 10px", background: ATTACKS[selectedTool].bg, borderRadius: "3px", border: `1px solid ${ATTACKS[selectedTool].border}`, fontSize: "11px", color: ATTACKS[selectedTool].color, animation: "fade-in 0.2s ease" }}>
                Click any site on the map to apply <strong>{ATTACKS[selectedTool].label}</strong>
              </div>
            )}
          </div>

          {/* ONE-SHOT SCENARIOS - distinct visual treatment */}
          <div style={{ padding: "14px 16px 10px", background: "rgba(96,165,250,0.025)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "10px" }}>
              <div style={{ fontSize: "11px", letterSpacing: "2.5px", textTransform: "uppercase", color: "#60a5fa", fontWeight: 700, fontFamily: "\x27Red Hat Display\x27,sans-serif" }}>One-Click Demo</div>
              <div style={{ fontSize: "9px", color: "#606878", letterSpacing: "1px" }}>Auto-targets a site</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
              <PresetButton onClick={() => runPreset("breach")}     color="#ff6b6b" label="Single Cloud Breach"     site="Toronto - US Hyperscaler" />
              <PresetButton onClick={() => runPreset("subpoena")}   color="#fbbf24" label="Foreign Subpoena"          site="Toronto - US Hyperscaler" />
              <PresetButton onClick={() => runPreset("ransomware")} color="#ff9f43" label="Ransomware Attack"         site="Montreal - European" />
              <PresetButton onClick={() => runPreset("outage")}     color="#a855f7" label="Cloud Outage"              site="Ottawa - Canadian" />
            </div>
            <button className="tool-btn" onClick={reset} style={{ width: "100%", marginTop: "8px", padding: "8px", borderRadius: "4px", background: "rgba(255,255,255,0.04)", color: "#909aab", fontSize: "11px", letterSpacing: "1.5px", fontWeight: 600 }}>RESET ALL</button>
          </div>

          {/* EVENT LOG */}
          <div style={{ flex: 1, borderTop: "1px solid rgba(255,255,255,0.07)", padding: "12px 14px", overflowY: "auto" }}>
            <div style={{ fontSize: "11px", letterSpacing: "2px", textTransform: "uppercase", color: "#808898", marginBottom: "8px", fontWeight: 500 }}>Event Log</div>
            {attackLog.length === 0 && <div style={{ fontSize: "11px", color: "#4a5265", textAlign: "center", padding: "8px 0" }}>System nominal. Pick a tool or run a demo.</div>}
            {attackLog.map(entry => (
              <div key={entry.id} style={{ fontSize: "12px", padding: "3px 0", animation: "slide-in 0.25s ease", lineHeight: "1.45", fontWeight: entry.type === "critical" ? 700 : 400,
                color: entry.type === "breach" ? "#ff6b6b" : entry.type === "ransomware" ? "#ff9f43" : entry.type === "outage" ? "#a855f7" : entry.type === "subpoena" ? "#fbbf24"
                  : entry.type === "critical" ? "#ff4444" : entry.type === "restore" ? "#60a5fa" : entry.type === "info" ? "#909aab" : "#34d399" }}>
                <span style={{ color: "#606878", marginRight: "5px" }}>{entry.time}</span>{entry.msg}
              </div>
            ))}
          </div>
        </div>
      );
    }

    function PresetButton({ onClick, color, label, site }) {
      return (
        <button className="tool-btn" onClick={onClick}
          style={{ padding: "10px 12px", borderRadius: "5px", textAlign: "left", background: `${color}10`, border: `1.5px solid ${color}40`, display: "flex", alignItems: "center", gap: "10px" }}>
          <div style={{ width: "26px", height: "26px", borderRadius: "50%", background: `${color}25`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <svg width="10" height="12" viewBox="0 0 10 12"><path d="M0,0 L10,6 L0,12 Z" fill={color} /></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "12px", fontWeight: 700, color }}>{label}</div>
            <div style={{ fontSize: "9px", color: "#808898", letterSpacing: "0.5px" }}>{site}</div>
          </div>
        </button>
      );
    }

    // =========================================================================
    // MAP PANE
    // =========================================================================
    function MapPane({ siteStates, derived, selectedTool, toggleAttack, legacy, now, legacyDamage, compact, presetFlash, deployMode = "multi-cloud" }) {
      const repairLines = [];
      siteStates.forEach((s, i) => {
        if (!legacy && s.repairAt && s.repairAt > now) {
          siteStates.forEach((p, j) => {
            if (j !== i && isFunctional(deriveStatus(p))) repairLines.push({ from: SITES[j], to: SITES[i] });
          });
        }
      });

      // Legacy ransomware spread visualization: lines from infected to clean
      const ransomLines = [];
      if (legacy) {
        const infected = SITES.filter((_, i) => siteStates[i].attacks.includes("ransomware"));
        const clean = SITES.filter((_, i) => !siteStates[i].attacks.includes("ransomware"));
        if (infected.length > 0 && clean.length > 0) {
          infected.forEach(inf => clean.forEach(c => ransomLines.push({ from: inf, to: c })));
        }
      }

      const ambientLines = [];
      const functional = SITES.filter((_, i) => isFunctional(derived.statuses[i]));
      if (functional.length >= 2) {
        for (let k = 0; k < Math.min(3, functional.length - 1); k++) {
          ambientLines.push({ from: functional[k], to: functional[(k + 1) % functional.length] });
        }
      }

      return (
        <div style={{ flex: 1, position: "relative", overflow: "hidden", minWidth: 0, background: "linear-gradient(180deg, #07080c 0%, #0a0d14 100%)" }}>
          <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.10 }}>
            <defs><pattern id={`g-${legacy ? "L" : "N"}`} width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="#1a2035" strokeWidth="0.5" /></pattern></defs>
            <rect width="100%" height="100%" fill={`url(#g-${legacy ? "L" : "N"})`} />
          </svg>
          {/* Eastern Canada simplified outline */}
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.18 }}>
            <path d="M 5,40 L 12,30 L 24,28 L 32,25 L 42,28 L 50,30 L 58,32 L 70,30 L 78,38 L 88,42 L 95,50 L 92,60 L 88,68 L 82,72 L 75,68 L 68,65 L 62,68 L 55,70 L 48,72 L 40,75 L 32,73 L 25,68 L 18,62 L 10,55 L 5,48 Z"
                  fill="#1a3550" stroke="#3a5570" strokeWidth="0.4" />
            <ellipse cx="35" cy="22" rx="14" ry="6" fill="#07080c" stroke="#3a5570" strokeWidth="0.3" opacity="0.95" />
          </svg>
          {/* Lines */}
          <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 2, pointerEvents: "none" }} viewBox="0 0 100 100" preserveAspectRatio="none">
            {ambientLines.map((al, k) => (
              <line key={`a-${k}`} x1={al.from.x} y1={al.from.y} x2={al.to.x} y2={al.to.y}
                stroke="rgba(52,211,153,0.25)" strokeWidth="0.18" strokeDasharray="0.8 0.6"
                style={{ animation: "io-flow 1.4s linear infinite" }} />
            ))}
            {SITES.map((a, i) => SITES.slice(i + 1).map((b, j) => {
              const bi = i + j + 1;
              const aUp = isFunctional(derived.statuses[i]);
              const bUp = isFunctional(derived.statuses[bi]);
              return <line key={`m-${i}-${bi}`} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                stroke={aUp && bUp ? "rgba(52,211,153,0.08)" : "rgba(255,255,255,0.025)"}
                strokeWidth="0.15" strokeDasharray={aUp && bUp ? "none" : "0.5 0.4"} />;
            }))}
            {repairLines.map((rl, k) => (
              <line key={`r-${k}`} x1={rl.from.x} y1={rl.from.y} x2={rl.to.x} y2={rl.to.y}
                stroke="#60a5fa" strokeWidth="0.45" strokeDasharray="2 1"
                style={{ animation: "repair-flow 0.6s linear infinite", filter: "drop-shadow(0 0 1px #60a5fa)" }} />
            ))}
            {ransomLines.map((rl, k) => (
              <line key={`rs-${k}`} x1={rl.from.x} y1={rl.from.y} x2={rl.to.x} y2={rl.to.y}
                stroke="#ff9f43" strokeWidth="0.5" strokeDasharray="2 1"
                style={{ animation: "ransom-spread 0.8s linear infinite", filter: "drop-shadow(0 0 2px #ff9f43)" }} />
            ))}
          </svg>

          {/* Sites - SAME 5 sites in Legacy or Nexodata */}
          {SITES.map((rawSite, i) => {
            const site = getDisplayInfo(rawSite, deployMode);
            const state = siteStates[i];
            const status = derived.statuses[i];
            const sc = statusColors[status];
            const has = state.attacks.includes(selectedTool);
            const action = !selectedTool ? null
                          : (has ? "remove"
                                 : (selectedTool === "outage" ? (status !== "outage" ? "add" : null)
                                    : (isFunctional(status) ? "add" : null)));
            const interactable = action !== null;
            const flagInfo = FLAG_COLORS[site.flag];
            const stsRem = state.stsExpiresAt ? Math.max(0, state.stsExpiresAt - now) : 0;
            const subpoenaRem = state.subpoenaAt ? Math.max(0, state.subpoenaAt - now) : 0;
            const isRepairing = !legacy && state.repairAt && state.repairAt > now;
            const isFlashing = presetFlash && presetFlash.siteIdx === i;
            // Indirect exposure marker for legacy: data already lost via another site
            const indirectExposed = legacy && legacyDamage.indirectExposure && status === "online";

            return (
              <div key={site.id}
                onClick={() => interactable && toggleAttack(i)}
                className={interactable ? "site-hit" : ""}
                style={{
                  position: "absolute", left: `${site.x}%`, top: `${site.y}%`,
                  transform: "translate(-50%,-50%)",
                  width: "70px", height: "70px",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  zIndex: 10,
                }}>
                {/* Big invisible click area is the parent div above. Visual elements inside: */}
                <div style={{ position: "relative", width: "30px", height: "30px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {/* Pulse ring (online) */}
                  {status === "online" && !indirectExposed && (
                    <div style={{ position: "absolute", top: "50%", left: "50%", width: "32px", height: "32px", border: `1.5px solid ${sc}`, borderRadius: "50%", animation: "ring-out 2.2s ease-out infinite", opacity: 0.5 }} />
                  )}
                  {/* Indirect exposure pulse (legacy) */}
                  {indirectExposed && (
                    <div style={{ position: "absolute", top: "50%", left: "50%", width: "32px", height: "32px", border: "1.5px solid #ff9f43", borderRadius: "50%", animation: "pulse-warn 1.4s infinite", opacity: 0.6 }} />
                  )}
                  {/* Targeting reticle (manual mode) */}
                  {selectedTool && action === "add" && (
                    <div style={{ position: "absolute", top: "50%", left: "50%", width: "56px", height: "56px", border: `2px dashed ${ATTACKS[selectedTool].color}`, borderRadius: "50%", animation: "target-add 1s ease-in-out infinite", opacity: 0.7 }} />
                  )}
                  {/* Preset flash (auto mode) */}
                  {isFlashing && (
                    <div style={{ position: "absolute", top: "50%", left: "50%", width: "60px", height: "60px", border: `3px solid ${presetFlash.color}`, borderRadius: "50%", animation: "preset-flash 0.9s ease-out", boxShadow: `0 0 24px ${presetFlash.color}` }} />
                  )}
                  {/* Repair pulse */}
                  {isRepairing && (
                    <div style={{ position: "absolute", top: "50%", left: "50%", width: "44px", height: "44px", borderRadius: "50%", border: "2px solid #60a5fa", transform: "translate(-50%,-50%)", animation: "pulse-good 1.2s infinite" }} />
                  )}
                  {/* Subpoena warning ring */}
                  {status === "subpoena" && (
                    <div style={{ position: "absolute", top: "50%", left: "50%", width: "44px", height: "44px", borderRadius: "50%", transform: "translate(-50%,-50%)", animation: "pulse-warn 1s infinite" }} />
                  )}
                  {/* Site icon */}
                  <SiteIcon icon={site.icon} color={indirectExposed ? "#ff9f43" : sc} animated={status === "online" && !indirectExposed} bad={status === "breached" || status === "ransomware" || status === "outage"} />
                </div>

                {/* Label - positioned absolute outside the click area for cleanness */}
                <div style={{ position: "absolute", top: "48px", left: "50%", transform: "translateX(-50%)", textAlign: "center", whiteSpace: "nowrap", pointerEvents: "none" }}>
                  <div style={{ fontSize: "12px", fontWeight: 700, color: indirectExposed ? "#ff9f43" : sc, fontFamily: "\x27Red Hat Display\x27,sans-serif" }}>{site.name}, {site.prov}</div>
                  <div style={{ display: "inline-flex", alignItems: "center", gap: "5px", marginTop: "2px" }}>
                    {/* Physical location (always Canadian) */}
                    <span style={{ display: "inline-flex", alignItems: "center", gap: "3px", fontSize: "9px", color: "#909aab", fontWeight: 600, letterSpacing: "0.5px" }}>
                      <Flag flag="CAN" /> CA
                    </span>
                    {/* Legal control jurisdiction */}
                    <span style={{ padding: "1px 5px", borderRadius: "2px", background: flagInfo.bg, color: flagInfo.fg, fontSize: "9px", fontWeight: 700, letterSpacing: "1px", border: `1px solid ${flagInfo.fg}40` }}>
                      {flagInfo.label}
                    </span>
                  </div>
                  <div style={{ fontSize: "9px", color: legacy ? "#ff9f43" : "#909aab", marginTop: "2px", letterSpacing: "0.5px", fontWeight: 600 }}>
                    {legacy ? "FULL COPY (replica)" : "1 FRAGMENT (1/" + N + ")"}
                  </div>
                  {state.attacks.length > 0 && (
                    <div style={{ fontSize: "10px", color: sc, marginTop: "2px", fontWeight: 700 }}>{state.attacks.map(a => ATTACKS[a].label.toUpperCase()).join(" + ")}</div>
                  )}
                  {indirectExposed && (
                    <div style={{ fontSize: "9px", color: "#ff9f43", marginTop: "2px", fontWeight: 700, letterSpacing: "0.5px" }}>! INDIRECTLY EXPOSED</div>
                  )}
                  {stsRem > 0 && (
                    <div style={{ fontSize: "9px", color: "#fbbf24", letterSpacing: "1px", marginTop: "1px", fontFamily: "monospace" }}>STS {(stsRem / 1000).toFixed(1)}s</div>
                  )}
                  {subpoenaRem > 0 && (
                    <div style={{ fontSize: "9px", color: "#fbbf24", letterSpacing: "1px", marginTop: "1px", fontFamily: "monospace" }}>DISCLOSED {(subpoenaRem / 1000).toFixed(1)}s</div>
                  )}
                  {isRepairing && (
                    <div style={{ fontSize: "9px", color: "#60a5fa", letterSpacing: "1px", marginTop: "1px", fontWeight: 600 }}>REPAIRING via FMSR</div>
                  )}
                </div>
              </div>
            );
          })}

          {/* (Bottom strip removed - duplicated info from site labels and was overlapping bottom-row sites) */}
        </div>
      );
    }

    function SiteIcon({ icon, color, animated, bad }) {
      const animation = bad ? "glow-red 1.2s ease-in-out infinite"
                            : animated ? "glow-green 2s ease-in-out infinite" : "none";
      if (icon === "building") {
        return (
          <svg width="22" height="22" viewBox="0 0 24 24" style={{ animation, transition: "all 0.4s" }}>
            <rect x="4"  y="9"  width="6"  height="12" fill={color} opacity="0.85" />
            <rect x="11" y="5"  width="9"  height="16" fill={color} />
            <rect x="13" y="8"  width="2"  height="2"  fill="#07080c" opacity="0.6" />
            <rect x="16" y="8"  width="2"  height="2"  fill="#07080c" opacity="0.6" />
            <rect x="13" y="12" width="2"  height="2"  fill="#07080c" opacity="0.6" />
            <rect x="16" y="12" width="2"  height="2"  fill="#07080c" opacity="0.6" />
            <rect x="13" y="16" width="2"  height="2"  fill="#07080c" opacity="0.6" />
            <rect x="16" y="16" width="2"  height="2"  fill="#07080c" opacity="0.6" />
            <rect x="6"  y="13" width="2"  height="2"  fill="#07080c" opacity="0.6" />
            <rect x="6"  y="17" width="2"  height="2"  fill="#07080c" opacity="0.6" />
          </svg>
        );
      }
      return (
        <svg width="26" height="22" viewBox="0 0 32 22" style={{ animation, transition: "all 0.4s" }}>
          <path d="M 8,16 Q 4,16 4,12 Q 4,8 9,8 Q 10,4 15,4 Q 20,4 22,8 Q 28,8 28,13 Q 28,18 23,18 L 8,18 Q 5,18 5,16 Z"
                fill={color} stroke={color} strokeWidth="0.5" opacity="0.9" />
        </svg>
      );
    }

    function Flag({ flag, small }) {
      const sz = small ? 10 : 11;
      if (flag === "USA") {
        return (
          <svg width={sz * 1.5} height={sz} viewBox="0 0 24 16" style={{ flexShrink: 0 }}>
            <rect width="24" height="16" fill="#bf0a30" />
            <rect y="2" width="24" height="2" fill="#fff" />
            <rect y="6" width="24" height="2" fill="#fff" />
            <rect y="10" width="24" height="2" fill="#fff" />
            <rect y="14" width="24" height="2" fill="#fff" />
            <rect width="10" height="8" fill="#002868" />
          </svg>
        );
      }
      if (flag === "CAN" || flag === "CAN-DC") {
        return (
          <svg width={sz * 1.5} height={sz} viewBox="0 0 24 16" style={{ flexShrink: 0 }}>
            <rect width="6"  height="16" fill="#ff0000" />
            <rect x="6"  width="12" height="16" fill="#fff" />
            <rect x="18" width="6"  height="16" fill="#ff0000" />
            <path d="M 12,4 L 13,6 L 15,5.5 L 14,7 L 16,8 L 14,9 L 14.5,11 L 12,10 L 9.5,11 L 10,9 L 8,8 L 10,7 L 9,5.5 L 11,6 Z" fill="#ff0000" />
          </svg>
        );
      }
      if (flag === "FRA") {
        return (
          <svg width={sz * 1.5} height={sz} viewBox="0 0 24 16" style={{ flexShrink: 0 }}>
            <rect width="8"  height="16" fill="#0055a4" />
            <rect x="8"  width="8"  height="16" fill="#fff" />
            <rect x="16" width="8"  height="16" fill="#ef4135" />
          </svg>
        );
      }
      return null;
    }

    // =========================================================================
    // RIGHT PANE
    // =========================================================================
    function RightPane({ siteStates, derived, ioLog, ioLogRef, now, legacy, legacyDamage, breachHistory = [], subpoenaHistory = [] }) {
      const breached = siteStates.map((s, i) => ({ ...s, idx: i })).filter(s => s.attacks.includes("breach"));
      const subpoenaed = siteStates.map((s, i) => ({ ...s, idx: i })).filter(s => s.attacks.includes("subpoena"));
      const statusCard = computeStatusCard(legacy, derived, legacyDamage);
      const fmtTime = (t) => { const d = new Date(t); return `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}:${String(d.getSeconds()).padStart(2,"0")}`; };

      return (
        <div style={{ width: "330px", borderLeft: "1px solid rgba(255,255,255,0.07)", display: "flex", flexDirection: "column", flexShrink: 0 }}>
          <div style={{ padding: "16px", background: statusCard.bg, borderBottom: `1px solid ${statusCard.borderColor}`, transition: "background 0.5s ease, border 0.5s ease" }}>
            <div style={{ fontSize: "11px", letterSpacing: "2.5px", color: statusCard.color, fontWeight: 700, marginBottom: "6px" }}>{statusCard.headline}</div>
            <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "20px", fontWeight: 800, color: statusCard.color, lineHeight: 1.15, marginBottom: "5px" }}>{statusCard.line1}</div>
            <div style={{ fontSize: "12px", color: "#c0c8d5", lineHeight: "1.5" }}>{statusCard.line2}</div>
          </div>

          {/* Attacker's Loot */}
          <div style={{ padding: "12px 14px", borderBottom: "1px solid rgba(255,255,255,0.07)", maxHeight: "200px", overflowY: "auto" }}>
            <div style={{ fontSize: "11px", letterSpacing: "2px", textTransform: "uppercase", color: "#ff6b6b", marginBottom: "8px", fontWeight: 700 }}>
              {legacy ? "Attacker has stolen" : "Attacker\x27s Loot"}
            </div>
            {legacy && legacyDamage.recordsExfil > 0 && (
              <div style={{ padding: "10px 12px", background: "rgba(255,107,107,0.08)", borderRadius: "4px", border: "1px solid rgba(255,107,107,0.25)", marginBottom: "6px", animation: "fade-in 0.3s ease" }}>
                <div style={{ fontSize: "11px", color: "#ff6b6b", letterSpacing: "1px", marginBottom: "3px", fontWeight: 700 }}>PLAINTEXT RECORDS</div>
                <div style={{ fontSize: "11px", color: "#909aab", fontFamily: "monospace", lineHeight: "1.5" }}>
                  {Array.from({ length: 4 }).map((_, k) => (
                    <div key={k}>RECORD_{(legacyDamage.recordsExfil + k).toString().padStart(7,"0")}: name=Lastname,Firstname; sin={hex(3)}-{hex(3)}-{hex(3)}; dob=1985-0{(k%9)+1}-15</div>
                  ))}
                  <div style={{ color: "#ff6b6b", marginTop: "4px", fontWeight: 700 }}>... {legacyDamage.recordsExfil.toLocaleString()} records and growing</div>
                </div>
              </div>
            )}
            {!legacy && breached.length === 0 && breachHistory.length === 0 && subpoenaed.length === 0 && subpoenaHistory.length === 0 && (
              <div style={{ fontSize: "11px", color: "#4a5265", textAlign: "center", padding: "6px 0" }}>Nothing stolen yet.</div>
            )}
            {!legacy && breached.map(s => {
              const remaining = s.stsExpiresAt ? Math.max(0, s.stsExpiresAt - now) : 0;
              return (
                <div key={`b-${s.idx}`} style={{ marginBottom: "6px", padding: "8px 10px", background: "rgba(255,107,107,0.06)", borderRadius: "4px", border: "1px solid rgba(255,107,107,0.25)", animation: "fade-in 0.3s ease" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "3px" }}>
                    <span style={{ fontSize: "11px", fontWeight: 700, color: "#ff6b6b" }}>{SITES[s.idx].name}</span>
                    <span style={{ fontSize: "10px", color: "#fbbf24", fontFamily: "monospace" }}>{`${(remaining/1000).toFixed(1)}s`}</span>
                  </div>
                  <div style={{ fontSize: "10px", color: "#606878" }}>STS Token</div>
                  <div style={{ fontSize: "9px", color: "#909aab", wordBreak: "break-all", marginBottom: "3px", fontFamily: "monospace" }}>{s.stsToken}</div>
                  <div style={{ fontSize: "10px", color: "#606878" }}>Fragment (CAONT noise)</div>
                  <div style={{ fontSize: "9px", color: "#909aab", fontFamily: "monospace", wordBreak: "break-all" }}>{s.fragmentHex}</div>
                </div>
              );
            })}
            {/* Rotated fragment history - stolen copy is now stale */}
            {!legacy && breachHistory.map((h, k) => (
              <div key={`bh-${k}`} style={{ marginBottom: "6px", padding: "8px 10px", background: "rgba(96,165,250,0.05)", borderRadius: "4px", border: "1px solid rgba(96,165,250,0.25)", animation: "fade-in 0.3s ease" }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "3px" }}>
                  <span style={{ fontSize: "11px", fontWeight: 700, color: "#60a5fa" }}>{SITES[h.siteIdx].name}</span>
                  <span style={{ fontSize: "9px", color: "#60a5fa", letterSpacing: "1px", fontWeight: 700 }}>FRAGMENT ROTATED</span>
                </div>
                <div style={{ fontSize: "10px", color: "#606878" }}>Stolen fragment (now stale)</div>
                <div style={{ fontSize: "9px", color: "#4a5265", textDecoration: "line-through", wordBreak: "break-all", marginBottom: "3px", fontFamily: "monospace" }}>{h.oldFragmentHex}</div>
                <div style={{ fontSize: "10px", color: "#606878" }}>New on-disk fragment (post-rotation)</div>
                <div style={{ fontSize: "9px", color: "#909aab", fontFamily: "monospace", wordBreak: "break-all" }}>{h.newFragmentHex}</div>
                <div style={{ fontSize: "10px", color: "#34d399", marginTop: "4px", fontWeight: 600, lineHeight: "1.4" }}>STS expired + fragment re-encoded. Attacker\x27s cached copy references stale CAONT block.</div>
              </div>
            ))}
          </div>

          {/* Government Disclosure - PERMANENT audit trail (persists past site recovery) */}
          {((!legacy && subpoenaHistory.length > 0) || (legacy && legacyDamage.subpoenaCompelled)) && (
            <div style={{ padding: "12px 14px", borderBottom: "1px solid rgba(255,255,255,0.07)", animation: "fade-in 0.3s ease", background: "rgba(251,191,36,0.04)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "8px" }}>
                <span style={{ fontSize: "11px", letterSpacing: "2px", color: "#fbbf24", fontWeight: 700 }}>COURT-ORDERED DISCLOSURE</span>
                <span style={{ fontSize: "9px", color: "#fbbf24", letterSpacing: "1px", fontWeight: 600, opacity: 0.8 }}>PERMANENT RECORD</span>
              </div>
              {legacy ? (
                <div style={{ padding: "8px 10px", background: "rgba(251,191,36,0.08)", borderRadius: "4px", border: "1px solid rgba(251,191,36,0.3)" }}>
                  <div style={{ fontSize: "12px", fontWeight: 700, color: "#fbbf24", marginBottom: "3px" }}>FULL PLAINTEXT DISCLOSED</div>
                  <div style={{ fontSize: "10px", color: "#c0c8d5", lineHeight: "1.5" }}>Replication makes copies, not fragments. Foreign court order to one provider compels full data. Subject to US Cloud Act extraterritorial reach.</div>
                </div>
              ) : subpoenaHistory.map((h, k) => {
                const isStillActive = subpoenaed.some(s => s.idx === h.siteIdx);
                return (
                  <div key={`d-${k}`} style={{ marginBottom: "6px", padding: "8px 10px", background: "rgba(251,191,36,0.05)", borderRadius: "4px", border: "1px solid rgba(251,191,36,0.25)" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "3px" }}>
                      <span style={{ fontSize: "11px", fontWeight: 700, color: "#fbbf24" }}>{SITES[h.siteIdx].name} ({SITES[h.siteIdx].category})</span>
                      <span style={{ fontSize: "9px", color: "#fbbf24" }}>{fmtTime(h.time)}</span>
                    </div>
                    <div style={{ fontSize: "10px", color: "#606878", marginBottom: "2px" }}>Disclosed fragment (1 of {N})</div>
                    <div style={{ fontSize: "9px", color: "#909aab", fontFamily: "monospace", wordBreak: "break-all" }}>{h.fragmentHex}</div>
                    <div style={{ fontSize: "10px", color: "#34d399", marginTop: "4px", fontWeight: 600 }}>Reconstructable: NO &mdash; below threshold (k={K})</div>
                    {!isStillActive && <div style={{ fontSize: "9px", color: "#60a5fa", marginTop: "2px", fontWeight: 600 }}>Site operational. Disclosure permanent in audit trail.</div>}
                  </div>
                );
              })}
              {!legacy && subpoenaHistory.length > 1 && (
                <div style={{ marginTop: "6px", padding: "6px 8px", background: "rgba(52,211,153,0.06)", borderRadius: "3px", fontSize: "10px", color: subpoenaHistory.length >= K ? "#ff6b6b" : "#34d399", lineHeight: "1.4", fontWeight: 600 }}>
                  Cumulative: {subpoenaHistory.length} of {N} fragments disclosed across all subpoenas. {subpoenaHistory.length >= K ? "AT/ABOVE THRESHOLD - reconstructable." : `Still below k=${K} threshold.`}
                </div>
              )}
            </div>
          )}

          {/* I/O */}
          <div style={{ flex: "0 0 auto", maxHeight: "180px", borderBottom: "1px solid rgba(255,255,255,0.07)", padding: "12px 14px", display: "flex", flexDirection: "column" }}>
            <div style={{ fontSize: "11px", letterSpacing: "2px", textTransform: "uppercase", color: "#808898", marginBottom: "8px", fontWeight: 500, display: "flex", justifyContent: "space-between" }}>
              <span>Live I/O Stream</span>
              <span style={{ color: derived.systemUp ? "#34d399" : "#ff6b6b", fontSize: "10px" }}>{derived.systemUp ? "OPERATIONAL" : "DEGRADED"}</span>
            </div>
            <div ref={ioLogRef} style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: "1px" }}>
              {ioLog.length === 0 && <div style={{ fontSize: "11px", color: "#4a5265", textAlign: "center", padding: "6px 0" }}>Idle</div>}
              {ioLog.map(entry => (
                <div key={entry.id} style={{ fontSize: "11px", display: "flex", gap: "6px", animation: "slide-in 0.2s ease" }}>
                  <span style={{ color: "#606878" }}>{entry.time}</span>
                  <span style={{ color: entry.op === "READ" ? "#60a5fa" : "#34d399", fontWeight: 600, minWidth: "34px" }}>{entry.op}</span>
                  <span style={{ color: "#909aab" }}>{entry.site}</span>
                  <span style={{ color: "#4a5265" }}>{entry.obj}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Compliance card */}
          <div style={{ flex: 1, padding: "12px 14px", overflowY: "auto" }}>
            <div style={{ fontSize: "11px", letterSpacing: "2px", textTransform: "uppercase", color: "#808898", marginBottom: "8px", fontWeight: 500 }}>Notification Posture</div>
            <ComplianceCard derived={derived} legacy={legacy} legacyDamage={legacyDamage} />
          </div>
        </div>
      );
    }

    function ComplianceCard({ derived, legacy, legacyDamage }) {
      let triggered = false;
      let reason = "";
      if (legacy) {
        if (legacyDamage.recordsExfil > 0 || legacyDamage.dataLost || legacyDamage.subpoenaCompelled || derived.allRansomed) {
          triggered = true;
          reason = legacyDamage.recordsExfil > 0 ? `${legacyDamage.recordsExfil.toLocaleString()} records exposed`
                : derived.allRansomed ? "All replicas locked - business continuity event"
                : legacyDamage.subpoenaCompelled ? "Compelled disclosure to foreign jurisdiction"
                : "Data lost - business continuity event";
        }
      } else {
        if (derived.dataCompromised) {
          triggered = true;
          reason = `Threshold exceeded: ${derived.breachedCount + derived.subpoenaedCount} >= k=${K}`;
        }
      }
      const c = triggered ? alertCol("alert") : alertCol("safe");
      return (
        <div style={{ padding: "12px 14px", background: c.bg, borderRadius: "5px", border: `1px solid ${c.text}35` }}>
          <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "16px", fontWeight: 800, color: c.text, marginBottom: "4px" }}>
            Notification: {triggered ? "REQUIRED" : "NOT TRIGGERED"}
          </div>
          <div style={{ fontSize: "11px", color: "#c0c8d5", lineHeight: "1.5" }}>
            {triggered
              ? <>72hr GDPR Art. 33 + 60-day HIPAA + PIPEDA RROSH triggered. {reason}.</>
              : <>HIPAA Safe Harbor + GDPR Art. 34(3)(a) Unintelligibility + PIPEDA below-RROSH. Below threshold &mdash; data not reconstructable.</>}
          </div>
        </div>
      );
    }

    function alertCol(s) {
      if (s === "alert") return { bg: "rgba(255,107,107,0.10)", border: "rgba(255,107,107,0.35)", text: "#ff6b6b" };
      return { bg: "rgba(52,211,153,0.10)", border: "rgba(52,211,153,0.30)", text: "#34d399" };
    }

    function computeStatusCard(legacy, derived, legacyDamage) {
      if (legacy) {
        if (derived.allRansomed) {
          return { headline: "STATUS", line1: "ALL REPLICAS LOCKED", line2: "Ransomware propagated through replication channels. Total business continuity event.", color: "#ff4444", bg: "rgba(255,68,68,0.08)", borderColor: "rgba(255,68,68,0.4)" };
        }
        if (legacyDamage.recordsExfil > 0 && legacyDamage.subpoenaCompelled) {
          return { headline: "STATUS", line1: "BREACHED + COMPELLED", line2: "Plaintext exfiltrated and disclosed under foreign jurisdiction.", color: "#ff4444", bg: "rgba(255,68,68,0.08)", borderColor: "rgba(255,68,68,0.4)" };
        }
        if (legacyDamage.recordsExfil > 0) {
          return { headline: "STATUS", line1: "BREACHED", line2: `${legacyDamage.recordsExfil.toLocaleString()} plaintext records exfiltrated. One replica = full data. Notification required.`, color: "#ff4444", bg: "rgba(255,68,68,0.08)", borderColor: "rgba(255,68,68,0.4)" };
        }
        if (legacyDamage.subpoenaCompelled) {
          return { headline: "STATUS", line1: "COMPELLED DISCLOSURE", line2: "Full plaintext released under foreign court order. Replication did not protect.", color: "#fbbf24", bg: "rgba(251,191,36,0.10)", borderColor: "rgba(251,191,36,0.4)" };
        }
        if (legacyDamage.downtimeStart) {
          return { headline: "STATUS", line1: "DEGRADED", line2: "Ransomware on replica(s). Failover possible until propagation completes.", color: "#ff9f43", bg: "rgba(255,159,67,0.08)", borderColor: "rgba(255,159,67,0.4)" };
        }
        return { headline: "STATUS", line1: "OPERATIONAL (FRAGILE)", line2: "Multi-cloud replication. Each site holds full plaintext. One breach away from total exposure.", color: "#34d399", bg: "rgba(52,211,153,0.05)", borderColor: "rgba(52,211,153,0.2)" };
      }
      if (derived.dataCompromised) {
        return { headline: "STATUS", line1: "THRESHOLD EXCEEDED", line2: `Attacker holds ${derived.breachedCount + derived.subpoenaedCount} of ${K} fragments. Reconstructable.`, color: "#ff4444", bg: "rgba(255,68,68,0.08)", borderColor: "rgba(255,68,68,0.4)" };
      }
      if (derived.totalActiveAttacks > 0) {
        const exf = derived.breachedCount + derived.subpoenaedCount;
        return { headline: "STATUS", line1: `BELOW THRESHOLD (${exf}/${K})`, line2: "Attacker holds incomplete fragments. Mathematically unrecoverable. System operational.", color: "#34d399", bg: "rgba(52,211,153,0.06)", borderColor: "rgba(52,211,153,0.3)" };
      }
      return { headline: "STATUS", line1: "ALL SYSTEMS NOMINAL", line2: "5 sites online across multi-jurisdictional providers. Reads and writes flowing.", color: "#34d399", bg: "rgba(52,211,153,0.05)", borderColor: "rgba(52,211,153,0.2)" };
    }

    // =========================================================================
    // COMPACT (side-by-side)
    // =========================================================================
    function CompactInfo({ derived, legacy, legacyDamage, attackLog }) {
      const card = computeStatusCard(legacy, derived, legacyDamage);
      return (
        <div style={{ flexShrink: 0, borderTop: "1px solid rgba(255,255,255,0.07)", display: "flex", flexDirection: "column" }}>
          <div style={{ padding: "10px 14px", background: card.bg, borderBottom: `1px solid ${card.borderColor}`, transition: "all 0.5s ease" }}>
            <div style={{ fontSize: "10px", color: card.color, letterSpacing: "2px", fontWeight: 700 }}>STATUS</div>
            <div style={{ fontFamily: "\x27Red Hat Display\x27,sans-serif", fontSize: "16px", fontWeight: 800, color: card.color, lineHeight: 1.1, marginTop: "2px" }}>{card.line1}</div>
            <div style={{ fontSize: "11px", color: "#c0c8d5", marginTop: "3px", lineHeight: "1.4" }}>{card.line2}</div>
          </div>
          <div style={{ height: "100px", padding: "8px 12px", overflowY: "auto" }}>
            {attackLog.slice(-4).map(entry => (
              <div key={entry.id} style={{ fontSize: "11px", lineHeight: "1.4",
                color: entry.type === "breach" ? "#ff6b6b" : entry.type === "ransomware" ? "#ff9f43" : entry.type === "outage" ? "#a855f7" : entry.type === "subpoena" ? "#fbbf24"
                  : entry.type === "critical" ? "#ff4444" : entry.type === "restore" ? "#60a5fa" : "#34d399" }}>
                <span style={{ color: "#606878", marginRight: "5px" }}>{entry.time}</span>{entry.msg}
              </div>
            ))}
          </div>
        </div>
      );
    }

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<App />);
  </script>
</body>
</html>' 
    width="100%" 
    height="100%" 
    style="border:none;"
    sandbox="allow-scripts allow-same-origin">
  