function Problems() {
  const items = [
    { title: "BaseLinker rośnie szybciej niż firma",
      desc: "Przekraczasz próg zamówień - abonament BaseLinkera skacze. Kilka nowych zamówień ponad próg nie pokrywa tego skoku, więc każda kolejna sprzedaż wyżej zjada Twoją marżę zamiast ją powiększać." },
    { title: "Każde zamówienie obsługujesz osobno",
      desc: "Sprzedajesz na kilku kanałach naraz, każdy obsługujesz osobno. Osobno zmieniasz statusy, osobno generujesz etykiety, listy dla magazynu i faktury." },
    { title: "Sprzedajesz to, czego nie masz",
      desc: "Każda platforma ma swój stan magazynowy, kontrolujesz je ręcznie. Sprzedajesz produkt, którego już nie ma - klient czeka, dostaje opóźnienie albo zwrot, zostawia negatywną opinię." },
  ];

  return (
    <section className="g-section" id="problemy">
      <SectionHeader num="02" eyebrow="Najczęstsze problemy"
                     title={<>Z czym do mnie <em>najczęściej</em> przychodzą?</>} />

      <div className="g-mag-grid g-mag-grid--triplet">
        {items.map((p, i) => (
          <article key={i} className="g-mag-card g-mag-card--problem">
            <h3 className="g-mag-title">{p.title}</h3>
            <p className="g-mag-desc">{p.desc}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

window.Problems = Problems;