// Hero.jsx
function Hero() {
  return (
    <section className="hero hero--animated" data-screen-label="01 Hero">
      <div className="dye dye--violet" aria-hidden="true" />
      <div className="dye dye--lime" aria-hidden="true" />
      <div className="hero__main">
        <p className="hero__eyebrow">Autoscience —</p>
        <h1 className="hero__title">
          Automate AI <em>Research</em>
        </h1>
        <p className="hero__sub">
          The world needs more capable, specialized models. Our AI systems are trusted every day to train SOTA models for frontier, applied AI labs.
        </p>
        <div className="hero__ctas">
          <a className="btn btn--primary" href="/get-started">
            Get started <span className="arr">→</span>
          </a>
          <a className="btn btn--ghost" href="/mira">
            Learn more
          </a>
        </div>
      </div>
      <div className="hero__bottom-spacer" aria-hidden="true" />
    </section>
  );
}
window.Hero = Hero;