/* iONE marketing site — use cases + comparison */
function UseCases() {
  const Icons = window.IONEIcons;
  const cases = [
    { icon: <Icons.Globe/>, h: 'Telecom', p: 'Reliable off-grid power for communication towers and network infrastructure.' },
    { icon: <Icons.Shield/>, h: 'Security & border', p: 'Autonomous energy for surveillance systems and remote monitoring assets.' },
    { icon: <Icons.Sun/>, h: 'Agriculture', p: 'Power for irrigation, sensors, pumps and remote agricultural operations.' },
    { icon: <Icons.Plug/>, h: 'Construction', p: 'Temporary energy without diesel logistics or fuel deliveries.' },
    { icon: <Icons.Cpu/>, h: 'Mining & industrial', p: 'Reliable power where grid access is unavailable or uneconomical.' },
    { icon: <Icons.Bolt/>, h: 'Emergency response', p: 'Rapid deployment during disasters, outages and humanitarian missions.' },
  ];
  return (
    <section className="mk-section mk-section--tint" id="use-cases">
      <div className="mk-wrap mk-wrap--wide">
        <div className="mk-section__head">
          <span className="mk-kicker">Use cases</span>
          <h2>Built for critical infrastructure.</h2>
          <p>Wherever the grid doesn't reach and downtime isn't an option, iONE keeps mission-critical loads running.</p>
        </div>
        <div className="mk-usecases">
          {cases.map((c) => (
            <div className="mk-usecase" key={c.h}>
              <div className="mk-usecase__icon">{c.icon}</div>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyIONE() {
  const Yes = () => <span className="mk-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 12 10 17 19 7"/></svg></span>;
  const No = () => <span className="mk-no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="7" y1="7" x2="17" y2="17"/><line x1="17" y1="7" x2="7" y2="17"/></svg></span>;
  const Lim = () => <span className="mk-lim">Limited</span>;
  const rows = [
    ['Renewable energy', 'no', 'yes', 'yes'],
    ['Rapid deployment', 'yes', 'no', 'yes'],
    ['AI monitoring', 'no', 'lim', 'yes'],
    ['Predictive maintenance', 'no', 'no', 'yes'],
    ['Remote fleet management', 'no', 'lim', 'yes'],
    ['No concrete foundations', 'yes', 'no', 'yes'],
    ['Extreme-climate operation', 'lim', 'lim', 'yes'],
  ];
  const cell = (v) => v === 'yes' ? <Yes/> : v === 'no' ? <No/> : <Lim/>;
  return (
    <section className="mk-section" id="why">
      <div className="mk-wrap mk-wrap--wide">
        <div className="mk-section__head">
          <span className="mk-kicker">Why iONE</span>
          <h2>Built differently.</h2>
          <p>The capabilities of a renewable platform, the speed of a generator — without the diesel, the concrete, or the crew.</p>
        </div>
        <table className="mk-compare">
          <thead>
            <tr>
              <th>Capability</th>
              <th>Diesel generator</th>
              <th>Solar container</th>
              <th className="col-ione">iONE</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r[0]}>
                <th scope="row">{r[0]}</th>
                <td>{cell(r[1])}</td>
                <td>{cell(r[2])}</td>
                <td className="col-ione">{cell(r[3])}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}
window.UseCases = UseCases;
window.WhyIONE = WhyIONE;