function Hero({ layout }) {
  return (
    <section className="sl-container sl-hero">
      <div className="sl-hero-main">
        <div className="sl-eyebrow">Software &amp; AI consulting</div>
        <h1 className="sl-hero-title">
          Agentic software, <em>actually</em> shipped.
        </h1>
        <p className="sl-hero-lead">
          Spice Labs builds practical AI and developer tooling for operating businesses. Open-source infrastructure for the Claude Code ecosystem, and custom software battle-tested inside our sister company before it ships anywhere else.
        </p>
        <div className="sl-hero-meta sl-hero-meta-primary">
          <span className="sl-hero-meta-item">
            <strong>Est.</strong> 2024
          </span>
          <span className="sl-hero-meta-item">
            <strong>A Venture of</strong> Spice Holdings
          </span>
        </div>
      </div>

      <aside className="sl-hero-side">
        <div className="sl-hero-meta">
          <span className="sl-hero-meta-item"><strong>Est.</strong> 2024</span>
          <span className="sl-hero-meta-item"><strong>A Venture of</strong> Spice Holdings</span>
          <span className="sl-hero-meta-item"><strong>Sectors</strong> Entertainment, AEC</span>
        </div>
      </aside>
    </section>
  );
}

window.Hero = Hero;