/* Product — detail page for stirrup. Exports window.Product */
const DS_P = window.EquestrianismDesignSystem_6b57f9;

function Product({ id, onOpen }) {
  const { Button, Badge, Tag, CodeBlock, Callout, StatusDot } = DS_P;
  const Ico = ({n, s=16}) => <window.EqIcon name={n} size={s} />;

  const features = [
    { icon:'shield-check', t:'Five deterministic safety rings',
      d:'Kernel-isolation runtimes, an egress allowlist proxy, a Cedar policy engine, the Rule-of-Two invariant, and a post-edit scanner — controls the agent cannot circumvent.' },
    { icon:'boxes', t:'Composable RunConfig',
      d:'Thirteen components composed from a single declarative document. Swap the provider or executor without modifying the loop.' },
    { icon:'container', t:'Five executors',
      d:'local, container, k8s, k8s-sandbox, and a shell-less api executor — from trusted local iteration to a hardened Pod-per-run sandbox under gVisor.' },
    { icon:'flask-conical', t:'Evals as a peer',
      d:'Deterministic replay providers and executors mean CI eval suites run without hitting a paid API. Not an afterthought.' },
  ];

  return (
    <main>
      <section className="detail">
        <div className="wrap">
          <button className="nav__link" style={{padding:0, marginBottom:24}} onClick={() => onOpen('home')}>
            ← Back to the suite
          </button>
          <div className="detail__grid">
            <div>
              <h1>stirrup</h1>
              <div className="doc__toc">
                <Badge status="success" dot>Stable</Badge>
                <Tag tone="brand">Coding harness</Tag>
                <Tag>Go</Tag>
                <Tag>gRPC</Tag>
                <Tag>Apache 2.0</Tag>
              </div>
              <p className="detail__lede dropcap">
                A production-grade coding harness built for safe autonomous
                operation. Most harnesses are single-player tools; stirrup is
                designed from the ground up for remote control, composability,
                and defence-in-depth.
              </p>
              <div className="hero__cta">
                <Button variant="primary" iconRight={<Ico n="arrow-right" />} onClick={() => onOpen('docs')}>Read the docs</Button>
                <Button variant="ghost" as="a" href="https://github.com/rxbynerd/stirrup" target="_blank" iconLeft={<Ico n="github" />}>GitHub</Button>
              </div>
              <div className="feature-list">
                {features.map(f => (
                  <p className="feature" key={f.t}><strong>{f.t}.</strong> {f.d}</p>
                ))}
              </div>
            </div>

            <div style={{display:'flex', flexDirection:'column', gap:'var(--space-5)', position:'sticky', top:88}}>
              <div>
                <div className="eyebrow" style={{marginBottom:10}}>Quick start</div>
                <CodeBlock label="shell">
                  <span><span className="eq-code__prompt">$ </span>just build</span>{'\n'}
                  <span className="tok-comment"># bare invocation lands in read-only planning mode</span>{'\n'}
                  <span>ANTHROPIC_API_KEY=… ./stirrup harness \</span>{'\n'}
                  <span>{'  '}<span className="tok-flag">--prompt</span> <span className="tok-str">"Outline a fix for the failing test"</span></span>
                </CodeBlock>
              </div>
              <CodeBlock label="execution" prompt="">
                <span>./stirrup harness \</span>{'\n'}
                <span>{'  '}<span className="tok-flag">--executor</span> k8s \</span>{'\n'}
                <span>{'  '}<span className="tok-flag">--container-runtime</span> gvisor \</span>{'\n'}
                <span>{'  '}<span className="tok-flag">--mode</span> execution \</span>{'\n'}
                <span>{'  '}<span className="tok-flag">--prompt</span> <span className="tok-str">"Fix main_test.go"</span></span>
              </CodeBlock>
              <Callout kind="note" title="Safety by default">
                A bare invocation lands in read-only <code>planning</code> mode. Writes
                and shell access are opt-in with <code>--mode execution</code>.
              </Callout>
              <div style={{display:'flex', gap:20, padding:'4px 2px'}}>
                <StatusDot state="running" pulse>run 7f3a · execution</StatusDot>
                <StatusDot state="idle">otel → steeplechase</StatusDot>
              </div>
            </div>
          </div>

          <h2 className="detail__h2">Executors</h2>

          <table className="tbl">
            <thead><tr><th>Executor</th><th>Boundary</th><th>Notes</th></tr></thead>
            <tbody>
              <tr><td><code>local</code></td><td>none (host process)</td><td>Trusted local iteration.</td></tr>
              <tr><td><code>container</code></td><td>Docker / Podman container</td><td>Single-host sandbox with an in-process egress proxy.</td></tr>
              <tr><td><code>k8s</code></td><td>Pod on a cluster</td><td>Pod-per-run, hardened securityContext, NetworkPolicy egress.</td></tr>
              <tr><td><code>k8s-sandbox</code></td><td>Agent Sandbox CRD</td><td>Pod from an agents.x-k8s.io Sandbox resource; gVisor-only.</td></tr>
              <tr><td><code>api</code></td><td>no shell (VCS-backed)</td><td>Reviews and plans against a Git host without a workspace.</td></tr>
            </tbody>
          </table>
        </div>
      </section>
    </main>
  );
}
window.Product = Product;