// ==== MANTIS deep case study =========================================

function Mantis() {
  const [ref, seen] = useInView({ threshold: 0.2 });
  const engines = AYUSH.MANTIS_ENGINES;
  const stages = AYUSH.MANTIS_STAGES;

  return (
    <section id="mantis" className="scene" ref={ref} data-screen-label="05 MANTIS">
      <div className="scene-head">
        <div className="eyebrow">Case study &middot; MANTIS</div>
        <h2>An autonomous SOC.<br /><em>In the open.</em></h2>
          <p className="lede">
            55K lines of Python · 130+ API endpoints · 2,100+ tests · capabilities of $100–500K/yr commercial tools.
            Presented at BSides Bangalore 2025 — selected as NullCon AI Paper of the Year.
          </p>
      </div>

      <div className="case-hero">
        <div>
          <h3 className="case-title">A SOC that <em>investigates itself.</em></h3>
          <p style={{color:"var(--ink-2)", maxWidth: "58ch", fontSize: 16, marginTop: 14}}>
            MANTIS is a multi-agent autonomous threat intelligence platform. Twelve detection engines fire in parallel and fuse via weighted confidence. A ReAct investigation agent with 15 tools runs multi-LLM consensus before forming a hypothesis. A reinforcement-learning response engine (PPO/DQN) chooses containment actions — with a closed-loop analyst feedback channel for Detection-as-Code.
          </p>
          <p style={{color:"var(--ink-2)", maxWidth: "58ch", fontSize: 16, marginTop: 10}}>
            On top sits a security knowledge graph with PageRank-based risk propagation, privacy-preserving federated TI (differential privacy + HMAC), and an AI self-defense layer guarding against prompt injection and model-integrity tampering.
          </p>
          <div style={{display:"flex", gap: 10, marginTop: 18, flexWrap:"wrap"}}>
            <a className="btn" href={AYUSH.PROFILE.links.mantis} target="_blank">github · COLONAYUSH/Project-MANTIS <span className="arr">→</span></a>
            <a className="btn ghost" href={AYUSH.PROFILE.links.paperDOI} target="_blank">paper · DOI 10.5281/zenodo.19161532</a>
          </div>
        </div>

        <div className="case-stats">
          <div className="stat"><div className="v"><em>55K</em></div><div className="l">lines · python</div></div>
          <div className="stat"><div className="v"><em>45</em></div><div className="l">modules</div></div>
          <div className="stat"><div className="v"><em>2.1K</em></div><div className="l">tests</div></div>
          <div className="stat"><div className="v"><em>12</em></div><div className="l">detection engines</div></div>
          <div className="stat"><div className="v"><em>15</em></div><div className="l">react agent tools</div></div>
          <div className="stat"><div className="v"><em>★1</em></div><div className="l">nullcon ai paper</div></div>
        </div>
      </div>

      <div className="stages">
        {stages.map((s, i) => (
          <div key={i} className="stage-card">
            <span className="dot pulse" style={{position:"absolute", top:14, right:14}}/>
            <div className="num">// {s.num}</div>
            <h4>{s.title}</h4>
            <p>{s.blurb}</p>
          </div>
        ))}
      </div>

      <div style={{marginTop: 36, padding: 22, border: "1px solid var(--panel-stroke)", borderRadius: "var(--r-3)", background: "var(--panel)"}}>
        <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between", marginBottom: 12, flexWrap:"wrap", gap: 10}}>
          <div>
            <div className="label">12-engine parallel detection</div>
            <div style={{fontFamily:"var(--ff-display)", fontSize: 24, marginTop: 4}}>Weighted confidence fusion · live</div>
          </div>
          <div className="mono muted" style={{fontSize: 11}}>fusion strategy: <span style={{color:"var(--mint)"}}>weighted-confidence(w_i × p_i)</span></div>
        </div>
        <EngineGrid engines={engines} active={seen} />
      </div>
    </section>
  );
}

function EngineGrid({ engines, active }) {
  const [vals, setVals] = useState(engines.map(e => 0));
  useEffect(() => {
    if (!active) return;
    let raf;
    const t0 = performance.now();
    function f() {
      const t = (performance.now() - t0) / 1000;
      setVals(engines.map((e, i) => {
        // each engine pulses live around its baseline
        const base = e.conf;
        const wig = (Math.sin(t * 1.6 + i * 0.8) * 0.5 + 0.5);
        return base * 0.86 + wig * 0.14;
      }));
      raf = requestAnimationFrame(f);
    }
    f();
    return () => cancelAnimationFrame(raf);
  }, [active]);

  return (
    <div className="engines">
      {engines.map((e, i) => (
        <div key={i} className="engine">
          <div className="engine-top">
            <span className="dot pulse" style={{width:5,height:5}}/>
            <span className="ename">{e.name}</span>
          </div>
          <span className="conf">{(vals[i] * 100).toFixed(1)}%</span>
          <span className="bar" style={{width: `${vals[i] * 100}%`}} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Mantis });