// "Jak pomagam" — e-commerce: 3 kafelki (K4/K5/K6), bez tabów branżowych.
function SolutionsDeezer() {
  const items = [
    { title: "Aplikacja na własność, koszty pod kontrolą",
      desc: "Buduję dedykowaną aplikację do zarządzania zamówieniami, należącą do Ciebie. Sprzedaż rośnie, koszty zostają na miejscu - bez skoków abonamentu po przekroczeniu kolejnego progu." },
    { title: "Koniec skakania między platformami",
      desc: "Buduję jeden panel dla wszystkich kanałów sprzedaży. Statusy zmieniasz zbiorczo, etykiety, listy dla magazynu i faktury generujesz jednym kliknięciem lub dzieje się to automatycznie - bez skakania między platformami." },
    { title: "Stany magazynowe aktualizowane na żywo",
      desc: "Spinam stany magazynowe wszystkich platform w jeden. Sprzedaż na jednym kanale od razu aktualizuje stan na pozostałych, więc klient widzi tylko to, co naprawdę masz - bez opóźnień i negatywnych opinii." },
  ];

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  return (
    <section className="g-section" id="pomagam">
      <SectionHeader num="03" eyebrow="Jak pomagam"
                     title={<>Jak <em>pomagam</em>?</>}
                     lead="Trzy konkretne rzeczy, które dla Ciebie zrobię." />

      <div className="g-mag-grid g-mag-grid--triplet">
        {items.map((s, i) => (
          <article key={i} className={"g-mag-card g-mag-card--solution" + (i === 1 ? " is-feature" : "")}>
            <h3 className="g-mag-title">{s.title}</h3>
            <p className="g-mag-desc">{s.desc}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

window.SolutionsDeezer = SolutionsDeezer;