// ==== MCP Gateway 7-layer visualizer =================================

function McpGateway() {
  const [active, setActive] = useState(0);
  const layers = AYUSH.MCP_LAYERS;
  const l = layers[active];

  return (
    <section id="mcp" className="scene" data-screen-label="07 MCP">
      <div className="scene-head">
        <div className="eyebrow">Defence in depth</div>
        <h2>Seven layers between<br />an <em>agent</em> and your <em>infrastructure</em>.</h2>
          <p className="lede">
            The enterprise MCP gateway: 8 production MCP servers, 130+ AI-callable security tools, defense-in-depth from Cloudflare to per-tool safety gates. Click a layer.
          </p>
      </div>

      <div className="mcp-stack">
        <div className="mcp-layers">
          {layers.map((L, i) => (
            <div key={L.n} className={"mcp-layer " + (i === active ? "active" : "")}
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}>
              <span className="n">{L.n}</span>
              <div>
                <h4>{L.title}</h4>
                <div className="d">{L.detail.split(".")[0]}.</div>
              </div>
              <span className="sig">{L.sig}</span>
            </div>
          ))}
        </div>

        <div className="mcp-detail">
          <div className="threat">threat · {l.threat}</div>
          <h5>{l.title}</h5>
          <div className="defense">defense · {l.sig}</div>
          <p>{l.detail}</p>
          <div className="ex">{l.example}</div>
          <div style={{marginTop: 18, display:"flex", gap: 8}}>
            <span className="tag mint">layer {l.n}</span>
            <span className="tag">production</span>
            <span className="tag">audited</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { McpGateway });