const Pain = () => {
  const items = [
    { q: "Każde zgłoszenie czeka", strong: "za długo", q2: "w kolejce.", tag: "Czas reakcji" },
    { q: "Strona lub sklep działa", strong: "wolno i tracę", q2: "klientów.", tag: "Wydajność" },
    { q: "Faktury, raporty i dokumenty są", strong: "rozsiane", q2: "po różnych narzędziach.", tag: "Chaos" },
    { q: "Nie mam jasności,", strong: "ile godzin", q2: "faktycznie zajmuje obsługa.", tag: "Transparentność" },
    { q: "", strong: "Nie mam", q2: "dedykowanego opiekuna, który zna mój biznes.", tag: "Relacja" },
  ];

  return (
    <section className="pain" data-screen-label="02 Pain points">
      <header className="section-head">
        <div className="section-head__num mono">§02 — Diagnoza</div>
        <h2 className="section-head__title">Co boli Twoją firmę?</h2>
        <p className="section-head__sub">Pięć zdań, które słyszymy najczęściej od właścicieli sklepów na pierwszej rozmowie.</p>
      </header>

      <div className="pain__grid">
        {items.map((it, i) => (
          <article className="painCard" key={i} style={{ "--rot": `${(i % 2 ? 1 : -1) * (0.4 + (i % 3) * 0.3)}deg` }}>
            <div className="painCard__quote">
              <span className="painCard__mark">“</span>
              <p>
                {it.q} <strong>{it.strong}</strong> {it.q2}
              </p>
            </div>
            <div className="painCard__foot mono">
              <span>0{i + 1}</span>
              <span className="painCard__tag">{it.tag}</span>
            </div>
          </article>
        ))}
        <a href="#pakiety" className="painCard painCard--cta">
          <span className="mono">→ Rozwiązanie</span>
          <strong>Nie ryzykuj przestojów.<br />Sprawdź pakiety opieki.</strong>
        </a>
      </div>
    </section>
  );
};

window.Pain = Pain;