/* iONE marketing site — hero */
function Hero() {
  const { Button, Stat } = window.IONEDesignSystem_ec7bc5;
  const Icons = window.IONEIcons;
  const builtFor = ['Telecom', 'Security', 'Agriculture', 'Construction', 'Critical Infrastructure'];
  return (
    <section className="mk-hero">
      <div className="mk-hero__bg"><img src="../../assets/hero/hero-solar-desert.png" alt="iONE autonomous energy station deployed off-grid"/></div>
      <div className="mk-hero__scrim"></div>
      <div className="mk-wrap mk-wrap--wide mk-hero__inner">
        <div className="mk-hero__col">
          <span className="mk-kicker">Autonomous energy platform</span>
          <h1>Autonomous energy for off-grid infrastructure.</h1>
          <p className="lead">Deploy renewable power in hours, not weeks. Eliminate diesel dependency with
            AI-managed energy stations built for remote, mission-critical sites.</p>
          <div className="mk-hero__actions">
            <Button variant="primary" size="lg" trailingIcon={<Icons.Arrow/>}>Book a demo</Button>
            <Button variant="secondary" size="lg">Become a pilot partner</Button>
          </div>
          <div className="mk-hero__builtfor">
            <span className="mk-builtfor-label">Built for</span>
            <div className="mk-chips">
              {builtFor.map((b) => <span className="mk-chip" key={b}>{b}</span>)}
            </div>
          </div>
        </div>
        <div className="mk-hero__specs">
          <Stat label="Deployment" value="2–4" unit="hrs" />
          <Stat label="Storage" value="48" unit="kWh" />
          <Stat label="Operating range" value="−60…55" unit="°C" size="sm" />
          <Stat label="Concrete needed" value="0" unit="m³" />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;