const UseCases = () => {
  const items = [
    { icon: "dice",  t: "Sports Betting Platforms", d: "Stable operation during live events and peak match moments." },
    { icon: "game",  t: "Online Casinos",           d: "Smooth gameplay across slots, live dealers, and jackpot rounds." },
    { icon: "cog",   t: "Multi-Game Aggregators",   d: "Efficiently handle dozens of upstream providers." },
    { icon: "card",  t: "Payment Infrastructure",   d: "Secure, reliable deposits and withdrawals." },
    { icon: "spark", t: "Existing Platforms",       d: "Fix bottlenecks, reduce losses, improve ROI on what you already run." },
  ];
  return (
    <section className="section section-navy" data-track-section="use_cases">
      <Waves stroke="#22355A" opacity={0.6}/>
      <div className="container" style={{position:"relative",zIndex:1}}>
        <div className="section-head">
          <span className="eyebrow" style={{color:"var(--orange-400)"}}>Use cases</span>
          <h2>Gambling platform use cases</h2>
          <p className="lead" style={{color:"#B9C4D9"}}>
            Whether you're launching, scaling, or fixing — our managed DevOps adapts to the shape of your operation.
          </p>
        </div>
        <div className="uc-grid">
          {items.map((it,i)=>(
            <div className="uc-card" key={i}>
              <div className="uc-icon"><Icon name={it.icon} size={22} stroke={2}/></div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.UseCases = UseCases;