/* global React */
// Responsible Use — a simple legal/technical document page.
// Rendered by the SPA router in sections.jsx at route "#/responsible-use".

const ResponsibleUse = (function () {
  const { Button } = window.CueDesignSystem_89ac8b;
  const { useEffect } = React;

  const measures = [
    {
      ico: "science",
      title: "Responsible AI Research",
      body: "We've established a dedicated safety process that conducts research and development to build safer language models, and we're investing in technical (e.g. usage monitoring) and non-technical (e.g. a dedicated team reviewing use cases) measures to mitigate potential harms.",
    },
    {
      ico: "groups",
      title: "Responsibility Council",
      body: "We've established an external advisory council made up of experts who work with us to ensure that the technology we're building is deployed safely for everyone.",
    },
    {
      ico: "lock",
      title: "No online learning",
      body: "To safeguard model integrity and prevent underlying models from being poisoned with harmful content by adversarial actors, user input goes through curation and enrichment prior to integration with training.",
    },
  ];

  function ResponsibleUse() {
    // Always start at the top when this page mounts.
    useEffect(() => { window.scrollTo(0, 0); }, []);

    return (
      <main className="doc section section--canvas" data-screen-label="Responsible Use">
        <div className="container">
          <div className="doc__wrap">
            <a className="doc__back" href="#top">
              <span className="cue-icon">arrow_back</span> Back to home
            </a>

            <h1 className="h1 doc__title">Responsible Use</h1>

            <p className="lead doc__lead">
              The Responsible Use documentation aims to guide developers in using language
              models constructively and ethically. Toward this end, we've published guidelines
              for using our API safely, as well as our processes around harm prevention. We
              provide model cards to communicate the strengths and weaknesses of our models and
              to encourage responsible use. We also provide a data statement describing our
              pre-training datasets.
            </p>

            <p className="p doc__feedback">
              If you have feedback or questions, please feel free to
              {" "}<a className="doc__link" href="mailto:mail@qaecy.com">let us know</a> — we are
              here to help.
            </p>

            <div className="doc__divider" />

            <h2 className="h2 doc__h2">Harm prevention</h2>
            <p className="p doc__sub">
              We aim to mitigate adverse use of our models with the following measures.
            </p>

            <div className="doc__list">
              {measures.map((m, i) => (
                <div key={i} className="doc__item">
                  <div className="doc__item-ico"><span className="cue-icon">{m.ico}</span></div>
                  <div>
                    <h3 className="h3 doc__item-title">{m.title}</h3>
                    <p className="p doc__item-body">{m.body}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="doc__divider" />

            <div className="doc__footer-row">
              <span className="doc__updated">Last updated June 2026</span>
              <a href="#top"><Button variant="secondary" size="m" leadingIcon="arrow_back">Back to home</Button></a>
            </div>
          </div>
        </div>
      </main>
    );
  }

  return ResponsibleUse;
})();

window.ResponsibleUse = ResponsibleUse;