/* Home — hero, product grid, philosophy strip. Exports window.Home */
const DS_H = window.EquestrianismDesignSystem_6b57f9;

const PRODUCTS = [
  { id:'stirrup', name:'stirrup', disc:'the tack that steadies the rider',
    desc:'A production-grade coding harness for safe autonomous operation — five deterministic safety rings, a pure-function core, a declarative RunConfig.', live:true },
  { id:'chiron', name:'chiron', disc:'the wise centaur, the teacher',
    desc:'The researcher. Drives a Gemini Deep Research agent end-to-end from the CLI and emits a cited, structured Markdown report. Research-only.', live:false },
  { id:'dressage', name:'dressage', disc:'the discipline of refined training',
    desc:'An LLM invocation-log analyser. Fetches provider logs, normalises them into conversations, and generates a self-contained HTML report.', live:false },
  { id:'steeplechase', name:'steeplechase', disc:'the long course, the fences',
    desc:'A lightweight OTLP telemetry router. Receives OpenTelemetry metrics, logs, and traces and fans them out to stdout, OTLP, or MQTT.', live:false },
];

function Home({ onOpen }) {
  const { Button, Tag, CodeBlock } = DS_H;
  const Ico = ({n}) => <window.EqIcon name={n} size={16} />;
  return (
    <main>
      <section className="hero">
        <div className="wrap">
          <h1>Single-binary Go tools for running LLMs in production</h1>
          <p className="hero__lede">
            Equestrianism is a suite of small, single-binary tools for running,
            researching, analysing and observing large language models in
            production. Pure-function cores, pluggable backends, secrets never in
            config. Each does one job.
          </p>
          <div className="hero__cta">
            <Button variant="primary" size="lg" iconRight={<Ico n="arrow-right" />}
              onClick={() => onOpen('product','stirrup')}>Explore stirrup</Button>
            <Button variant="ghost" size="lg" onClick={() => onOpen('docs')}>Read the docs</Button>
          </div>
          <div className="hero__cmd">
            <CodeBlock label="shell">
              <span className="tok-comment"># a bare invocation lands in read-only planning mode</span>{'\n'}
              <span><span className="eq-code__prompt">$ </span>./stirrup harness <span className="tok-flag">--prompt</span> <span className="tok-str">"Outline a fix for the failing test"</span></span>
            </CodeBlock>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section__head">
            <h2>Tools</h2>
          </div>
          <div className="pgrid">
            {PRODUCTS.map(p => (
              <button key={p.id} className={`pcard ${p.live ? '' : 'pcard--soon'}`}
                onClick={() => p.live && onOpen('product', p.id)}>
                <div className="pcard__top">
                  <span className="pcard__name">{p.name}</span>
                  {p.live ? <Tag tone="brand">Stable</Tag> : <Tag>Soon</Tag>}
                </div>
                <span className="pcard__disc">{p.disc}</span>
                <p className="pcard__desc">{p.desc}</p>
                {p.live && <span className="pcard__more">Open <Ico n="arrow-up-right" /></span>}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--ink">
        <div className="wrap">
          <div className="section__head">
            <h2>Design principles</h2>
          </div>
          <div className="tenets">
            <div className="tenet">
              <div className="tenet__k">Pure-function cores</div>
              <div className="tenet__v">Loops depend only on interfaces; every concrete type is injected from one declarative config. Swap a provider or executor without touching the loop.</div>
            </div>
            <div className="tenet">
              <div className="tenet__k">Secrets never in config</div>
              <div className="tenet__v">Keys are <code style={{color:'var(--brass-300)'}}>secret://</code> references. A credential scrubber runs every log line before any handler, so leakage is structurally impossible.</div>
            </div>
            <div className="tenet">
              <div className="tenet__k">Minimal & auditable</div>
              <div className="tenet__v">Adapters are a few hundred lines of stdlib HTTP against documented REST APIs. No vendor SDKs. Every line is auditable.</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.Home = Home;
window.EQ_PRODUCTS = PRODUCTS;