// Offerings.jsx — Mira (industry) + Carl (academic)
function Offerings() {
  return (
    <div data-screen-label="03 Offerings">
      <section className="section" style={{ paddingBottom: 32, paddingTop: 80 }}>
        <div className="section-head" style={{ marginBottom: 16 }}>
          <p className="eyebrow">Two systems, one mission.</p>
          <h2 className="section-title">
            We're a frontier research lab training AI models that excel at <em>AI R&amp;D</em>.
          </h2>
        </div>
      </section>

      <div className="offer">
        <a className="offer-card offer-card--mira" href="/mira">
          <p className="offer-card__audience">For industry.</p>
          <h3 className="offer-card__name">Mira</h3>
          <p className="offer-card__lede">AI-driven R&amp;D for enterprise ML.</p>
          <p className="offer-card__body">What would you do with 1000 ML researchers? Mira runs experiments on your stack and ships PRs that are guaranteed to beat your baseline on your own evals.

          </p>
          <div className="offer-card__footer">
            <span className="offer-card__cta">
              Learn about Mira <span className="arr">→</span>
            </span>
          </div>
        </a>

        <a className="offer-card offer-card--carl" href="/carl">
          <p className="offer-card__audience">For academia.</p>
          <h3 className="offer-card__name">Carl</h3>
          <p className="offer-card__lede">An AI that does original research.</p>
          <p className="offer-card__body">Hypothesizes, runs ablations, writes full-length papers, and submits them to peer review. First AI system with a peer-reviewed paper (ICLR 2025 Workshop).

          </p>
          <div className="offer-card__footer">
            <span className="offer-card__cta">
              Read the research <span className="arr">→</span>
            </span>
          </div>
        </a>
      </div>
    </div>);

}
window.Offerings = Offerings;