/* iONE marketing site — Solution: Meet iONE */
function Solution() {
  const { Card } = window.IONEDesignSystem_ec7bc5;
  const Icons = window.IONEIcons;
  const pillars = [
    { icon: <Icons.Battery/>, h: 'Modular energy station', p: 'Solar generation, battery storage and power electronics in one deployable unit — with optional wind integration for low-sun sites.' },
    { icon: <Icons.Cpu/>, h: 'iONE OS', p: 'Edge AI that monitors performance, predicts failures, optimises charging cycles, and manages whole fleets remotely.' },
    { icon: <Icons.Gauge/>, h: 'Digital twin', p: 'A live model of every station mirrors its real operational state — so you see, simulate and act before anything fails.' },
  ];
  const arch = [
    { name: 'Renewable generation', desc: 'Solar + optional wind' },
    { name: 'Battery storage', desc: 'Up to 48 kWh modular' },
    { name: 'Power electronics', desc: 'Inversion & protection' },
    { name: 'iONE OS', desc: 'Edge AI control', accent: true },
    { name: 'Remote fleet portal', desc: 'Monitor & dispatch' },
  ];
  return (
    <section className="mk-section" id="solution">
      <div className="mk-wrap mk-wrap--wide">
        <div className="mk-section__head">
          <span className="mk-kicker">The solution</span>
          <h2>Meet iONE.</h2>
          <p>An autonomous, deployable energy platform combining renewable generation, battery storage,
            and AI-powered fleet management — engineered as a single system.</p>
        </div>
        <div className="mk-pillars">
          {pillars.map((p) => (
            <Card key={p.h} padding="lg" className="mk-pillar">
              <div className="mk-pillar__icon">{p.icon}</div>
              <h3>{p.h}</h3>
              <p>{p.p}</p>
            </Card>
          ))}
        </div>
        <div className="mk-arch">
          <div className="mk-arch__label">Platform architecture</div>
          <div className="mk-arch__flow">
            {arch.map((n, i) => (
              <React.Fragment key={n.name}>
                <div className={'mk-arch__node' + (n.accent ? ' mk-arch__node--accent' : '')}>
                  <span className="n-step">{String(i + 1).padStart(2, '0')}</span>
                  <span className="n-name">{n.name}</span>
                  <span className="n-desc">{n.desc}</span>
                </div>
                {i < arch.length - 1 && (
                  <span className="mk-arch__arrow">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                  </span>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Solution = Solution;