const Capabilities = () => {
  const items = [
    { icon: "shield", title: "High Availability Architecture", body: "24/7 uptime for bets and casino games, with multi-region failover and active-active setups." },
    { icon: "zap",    title: "Auto-Scaling During Spikes",     body: "Absorbs surges during major events, jackpots, and acquisition campaigns." },
    { icon: "refresh",title: "Zero-Downtime Deployments",      body: "Ship updates without interrupting active players or in-flight bets." },
    { icon: "gauge",  title: "Real-Time Monitoring & Alerts",  body: "Detect and isolate problems before they affect players — financial flows included." },
    { icon: "chart",  title: "Infrastructure Optimization",    body: "Reduce costs, improve speed, and prevent hidden failures across your stack." },
    { icon: "spark",  title: "Rapid Recovery",                  body: "Restore business operations in minutes after critical issues — not hours." },
  ];
  return (
    <section className="section section-white" data-track-section="capabilities">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">What we do</span>
          <h2>We build, fix, and optimize iGaming infrastructure</h2>
          <p className="lead">A single managed DevOps partner for operators who can't afford downtime — from architecture to daily ops.</p>
        </div>
        <div className="cap-grid">
          {items.map((it,i)=>(
            <div className="cap-card" key={i}>
              <div className="cap-icon"><Icon name={it.icon} size={22} stroke={2}/></div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Capabilities = Capabilities;