function Problems() {
  const items = [
    { tag: "01", title: "Booksy i Znany Lekarz zjadają marżę",
      desc: "Płacisz Booksy trzy razy: prowizję za nowego klienta, abonament za kalendarz i dodatkowo za kalendarz każdego pracownika. A do tego podsuwa Twoim klientkom konkurencję, gdy u Ciebie zajęte. Im zależy na ich platformie, nie na Twoim salonie." },
    { tag: "02", title: "Puste terminy po no-show",
      desc: "Klientka nie odwołuje, po prostu nie przychodzi. Wizyta, którą mógł zająć ktoś inny, przepada razem z Twoim przychodem. Bez automatycznych potwierdzeń i listy oczekujących, każdy no-show to dla Ciebie czysta strata." },
    { tag: "03", title: "Klientki nie mogą się dodzwonić",
      desc: "Twoja recepcja godzinami odpisuje na te same pytania: termin, cennik, godziny otwarcia. Klientki nie mogą się dodzwonić, a pytania na Instagramie i Messengerze zostają bez odpowiedzi, albo odpisujesz, gdy klientki już wybrały konkurencję." },
  ];

  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) => (
          <article key={p.tag} 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;