/* iONE marketing site — AI advantage + Energy-as-a-Service */
function AIAdvantage() {
  const Icons = window.IONEIcons;
  const feats = [
    { icon: <Icons.Cpu/>, h: 'Predictive maintenance', p: 'Models flag degrading components before they fail — maintenance happens on schedule, not in a crisis.' },
    { icon: <Icons.Battery/>, h: 'Battery health optimisation', p: 'Charge cycles are tuned in real time to extend pack life and protect capacity across temperature swings.' },
    { icon: <Icons.Gauge/>, h: 'Anomaly detection', p: 'Continuous telemetry surfaces the abnormal instantly, isolating faults before they spread.' },
    { icon: <Icons.Globe/>, h: 'Fleet management', p: 'Operate one site or hundreds from a single portal, with remote diagnostics on every node.' },
    { icon: <Icons.Shield/>, h: 'Autonomous protection mode', p: 'In a fault or extreme event, a station protects itself and its loads without waiting for instructions.' },
    { icon: <Icons.Sun/>, h: 'Production forecasting', p: 'Weather-aware models predict generation so storage and loads are scheduled days ahead.' },
  ];
  return (
    <section className="mk-section mk-section--dark" id="ai">
      <div className="mk-wrap mk-wrap--wide">
        <div className="mk-section__head">
          <span className="mk-kicker">The AI advantage</span>
          <h2>More than energy. An intelligent energy asset.</h2>
          <p>Most renewable systems react to failures. iONE predicts them — lowering maintenance costs,
            extending asset life, and cutting site visits.</p>
        </div>
        <div className="mk-features">
          {feats.map((f) => (
            <div className="mk-feature" key={f.h}>
              <div className="mk-feature__icon">{f.icon}</div>
              <h3 style={{ color: '#fff' }}>{f.h}</h3>
              <p style={{ color: 'var(--ink-300)' }}>{f.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function EnergyAsService() {
  const { Button } = window.IONEDesignSystem_ec7bc5;
  const Icons = window.IONEIcons;
  const benefits = [
    { h: 'Lower upfront costs', p: 'Avoid large capital investment in energy infrastructure.' },
    { h: 'Predictable opex', p: 'Simple monthly payments instead of fuel and maintenance uncertainty.' },
    { h: 'Reduced operational risk', p: 'No fuel logistics. Fewer service visits. Less downtime.' },
    { h: 'Scalable deployment', p: 'Expand from one site to hundreds on the same platform.' },
  ];
  const steps = ['Site assessment', 'Deployment', 'Remote monitoring', 'Predictive maintenance', 'Continuous optimisation'];
  return (
    <section className="mk-section" id="service">
      <div className="mk-wrap mk-wrap--wide">
        <div className="mk-section__head">
          <span className="mk-kicker">Energy-as-a-Service</span>
          <h2>Energy without owning the infrastructure.</h2>
          <p>Stop buying generators. Stop managing fuel deliveries. You pay for energy availability —
            we handle the technology, monitoring, maintenance and optimisation.</p>
        </div>
        <div className="mk-eaas">
          {benefits.map((b, i) => (
            <div className="mk-eaas__item" key={b.h}>
              <span className="num">0{i + 1}</span>
              <h3>{b.h}</h3>
              <p>{b.p}</p>
            </div>
          ))}
        </div>
        <div className="mk-steps">
          {steps.map((s, i) => (
            <span className="mk-step" key={s}><span className="dot">{i + 1}</span>{s}</span>
          ))}
        </div>
        <div style={{ marginTop: 'var(--space-6)' }}>
          <Button variant="primary" trailingIcon={<Icons.Arrow/>}>Discuss your site requirements</Button>
        </div>
      </div>
    </section>
  );
}
window.AIAdvantage = AIAdvantage;
window.EnergyAsService = EnergyAsService;