// ==== OWASP Top 10 for Agentic Applications ==========================

function Owasp() {
  const items = AYUSH.OWASP;
  const frameworks = AYUSH.FRAMEWORKS;
  const [sel, setSel] = useState(0); // default focus on Goal & Behavior Hijacking
  const it = items[sel];

  return (
    <section id="owasp" className="scene" data-screen-label="09 OWASP">
      <div className="scene-head">
        <div className="eyebrow">Agentic threat model</div>
        <h2>OWASP Top 10 for <em>Agentic</em> apps.<br /><em>Ten threats. Ten controls I ship.</em></h2>
          <p className="lede">
            The December 2025 agentic standard (ASI01–ASI10) — the autonomy-era successor to the LLM Top 10. Every threat below maps to a defense running in the enterprise MCP gateway, MANTIS, AEGIS or Agent Forensics. Click any cell.
          </p>
      </div>

      <div className="owasp-grid">
        {items.map((it, i) => (
          <div key={it.n}
            className={"owasp-cell" + (i === sel ? " active" : "")}
            onClick={() => setSel(i)}>
            <div className="n">{it.n}</div>
            <h5>{it.t}</h5>
            <div className="status"><span className="dot" style={{width:6, height:6}}/>{it.status}</div>
          </div>
        ))}
      </div>

      <div className="owasp-detail">
        <div style={{display:"flex", gap: 14, alignItems:"baseline", marginBottom: 8, flexWrap:"wrap"}}>
          <span className="mono" style={{color:"var(--ink-dim)", fontSize: 12, letterSpacing:".14em"}}>{it.n}</span>
          <h4 style={{margin: 0, fontFamily:"var(--ff-display)", fontSize: 32, fontWeight: 400, lineHeight: 1.05}}>{it.t}</h4>
          <span className="tag mint" style={{marginLeft:"auto"}}>{it.status}</span>
        </div>
        <p style={{color:"var(--ink-2)", maxWidth:"72ch"}}>{it.d}</p>
        <div className="label" style={{marginTop: 14, color:"var(--accent)"}}>my control</div>
        <p style={{color:"var(--ink-2)", maxWidth:"72ch", margin:"6px 0 0"}}>{it.defense}</p>
      </div>

      <div className="fw-rail">
        <div className="fw-rail-label">Modeled & audited against</div>
        <div className="fw-rail-grid">
          {frameworks.map(f => (
            <div key={f.abbr} className="fw-card">
              <div className="fw-abbr">{f.abbr}</div>
              <div className="fw-name">{f.name}</div>
              <p className="fw-use">{f.use}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Owasp });