// MCP panel — side-by-side chat + governed response
function MCPPanel() {
  const [step, setStep] = React.useState(0);
  // 0: idle, 1: typing, 2: ai responded

  const run = () => {
    setStep(1);
    setTimeout(() => setStep(2), 1400);
  };

  React.useEffect(() => {
    const t = setTimeout(run, 600);
    return () => clearTimeout(t);
  }, []);

  return (
    <React.Fragment>
      <div className="platform-copy">
        <h2>AI agents grounded in governed context.</h2>
        <p className="lede">Clearmetric exposes every definition over the Model Context Protocol — so any AI assistant queries approved business meaning instead of guessing from raw tables. The same governed context that powers Canvas.</p>
        <ul className="bullets">
          <li>Open standard — 76% of providers adopting MCP.</li>
          <li>Grounded answers with citations back to the definition.</li>
          <li>Addresses the $67.4B hallucination tax at the architecture level.</li>
        </ul>
        <div style={{ marginTop: 28 }}>
          <button className="btn btn--ghost btn--sm" onClick={() => { setStep(0); setTimeout(run, 100); }}>↻ Replay</button>
        </div>
      </div>
      <div className="mcp-split">
        <div className="mcp-pane">
          <div className="mcp-head">
            <div className="who">🤖 AI Assistant</div>
            <div className="ping">USER</div>
          </div>
          <div className="mcp-chat">
            <div className="mcp-msg mcp-msg--you">What was our MRR last month, and how does it compare to Q3?</div>
            {step >= 1 && step < 2 && (
              <div className="mcp-msg mcp-msg--ai">
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 6, fontFamily: 'var(--ff-mono)', letterSpacing: '0.04em' }}>
                  → Fetching governed definition via MCP…
                </div>
                <div className="mcp-typing"><span/><span/><span/></div>
              </div>
            )}
            {step >= 2 && (
              <div className="mcp-msg mcp-msg--ai">
                Monthly Recurring Revenue was <b>$4.82M</b> last month, up <b>8.2%</b> from the Q3 average of $4.45M.
                <span className="cite">mrr · v2.4</span>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.45 }}>
                  Using the Finance-owned MRR definition — sum of normalized subscription revenue, excluding one-time charges, credits, and tax.
                </div>
              </div>
            )}
          </div>
        </div>
        <div className="mcp-pane">
          <div className="mcp-head">
            <div className="who"><span style={{ color: 'var(--accent)' }}>◆</span> Clearmetric MCP</div>
            <div className="ping">{step === 0 ? 'IDLE' : step === 1 ? 'RESOLVING' : '200 OK · 42MS'}</div>
          </div>
          <div className="mcp-body">
            <div><span className="comment"># mcp.clearmetric.io/v1/definitions.get</span></div>
            <div style={{ marginTop: 8 }}>
              <span className="key">query</span>: <span className="str">"monthly recurring revenue"</span>
            </div>
            <div style={{ marginTop: 16, opacity: step >= 2 ? 1 : 0.25, transition: '300ms' }}>
              <span className="comment"># response</span>
              <div>{'{'}</div>
              <div style={{ paddingLeft: 14 }}>
                <div><span className="key">id</span>: <span className="str">"def_mrr"</span>,</div>
                <div><span className="key">version</span>: <span className="str">"2.4"</span>,</div>
                <div><span className="key">type</span>: <span className="str">"metric"</span>,</div>
                <div><span className="key">owner</span>: <span className="str">"finance"</span>,</div>
                <div><span className="key">description</span>:</div>
                <div style={{ paddingLeft: 14 }}>
                  <span className="str">"Sum of normalized subscription"</span><br/>
                  <span className="str">"revenue for all active, paying"</span><br/>
                  <span className="str">"customers. Excludes one-time"</span><br/>
                  <span className="str">"charges, credits, tax."</span>
                </div>
                <div><span className="key">binding</span>: <span className="str">"fct_subscriptions.mrr_usd"</span>,</div>
                <div><span className="key">last_value</span>: <span className="muted">4820000</span></div>
              </div>
              <div>{'}'}</div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.MCPPanel = MCPPanel;