function ApiQuickstart() {
  const [tab, setTab] = React.useState('shell');

  const codeShell = `curl https://api.cohesionauth.com/v1/score \\
  -H "X-API-Key: ck_live_YOUR_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "operator_id": "op_radiologist_001",
    "domain": "healthcare",
    "interaction": {
      "ai_recommendation_presented": true,
      "time_to_decision_ms": 2400,
      "decision": "accepted",
      "modification_extent": 0.0,
      "ai_available": true,
      "scenario_type": "standard",
      "outcome_correct": true,
      "hover_events": 0,
      "scroll_depth": 0.3,
      "alternative_views_checked": 0
    }
  }'`;

  const codeNode = `import fetch from 'node-fetch';

const res = await fetch('https://api.cohesionauth.com/v1/score', {
  method: 'POST',
  headers: {
    'X-API-Key': process.env.COHESION_KEY,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    operator_id: 'op_radiologist_001',
    domain: 'healthcare',
    interaction: {
      ai_recommendation_presented: true,
      time_to_decision_ms: 2400,
      decision: 'accepted',
      modification_extent: 0.0,
      ai_available: true,
      scenario_type: 'standard',
      outcome_correct: true,
      hover_events: 0,
      scroll_depth: 0.3,
      alternative_views_checked: 0,
    },
  }),
});
const { jis, verdict } = await res.json();`;

  const codePython = `import os, requests

res = requests.post(
    "https://api.cohesionauth.com/v1/score",
    headers={
        "X-API-Key": os.environ["COHESION_KEY"],
        "Content-Type": "application/json",
    },
    json={
        "operator_id": "op_radiologist_001",
        "domain": "healthcare",
        "interaction": {
            "ai_recommendation_presented": True,
            "time_to_decision_ms": 2400,
            "decision": "accepted",
            "modification_extent": 0.0,
            "ai_available": True,
            "scenario_type": "standard",
            "outcome_correct": True,
            "hover_events": 0,
            "scroll_depth": 0.3,
            "alternative_views_checked": 0,
        },
    },
)
jis = res.json()["jis"]
verdict = res.json()["verdict"]`;

  const code = tab === 'shell' ? codeShell : tab === 'node' ? codeNode : codePython;

  return (
    <section id="quickstart" className="section">
      <div className="container">
        <div className="quickstart-grid">
          <div>
            <div className="eyebrow">Quickstart</div>
            <h2 className="h2">Ninety seconds to your first JIS.</h2>
            <ol className="qs-steps">
              <li><span className="qs-n">1</span> <div><strong>Request an API key</strong><br/><a href="mailto:peyton@cohesionauth.com">peyton@cohesionauth.com</a></div></li>
              <li><span className="qs-n">2</span> <div><strong>Send a scored interaction</strong><br/>POST to <span className="mono">/v1/score</span></div></li>
              <li><span className="qs-n">3</span> <div><strong>Parse the JIS response</strong><br/>Composite score · verdict · per-dimension breakdown</div></li>
            </ol>
          </div>
          <div className="code-panel">
            <div className="code-tabs">
              {[['shell','Shell'], ['node','Node'], ['python','Python']].map(([k, label]) => (
                <button key={k} onClick={() => setTab(k)} className={`code-tab ${tab === k ? 'is-active' : ''}`}>{label}</button>
              ))}
              <div className="code-endpoint">POST <span className="mono">api.cohesionauth.com/v1/score</span></div>
            </div>
            <pre className="code-body"><code>{code}</code></pre>
          </div>
        </div>
      </div>
    </section>
  );
}
window.ApiQuickstart = ApiQuickstart;