// Pain cards — big background number + highlighted em in heading.

const PAINS = [
{
  h: <>Водителям ночью <em>никто не отвечает</em></>,
  p: <>В три часа у водителя вопрос по выплате или смене. Оператор ответит утром. К тому времени водитель уже переключился на другой парк.</>
},
{
  h: <>Операторы тонут в рутине — <em>сложные кейсы ждут</em></>,
  p: <>Операторы перегружены однотипными вопросами: «Когда выплаты?», «Как подключиться?». Из-за нагрузки сложно качественно помочь там, где это действительно важно.</>
},
{
  h: <>Новички ждут ответа полдня и <em>не выходят на линию</em></>,
  p: <>В первый день подключения у водителя десятки вопросов. Систематизировать помощь новичкам = поднять конверсию в первую поездку.</>
},
{
  h: <>Плохая поддержка бьёт по <em>лояльности и марже</em></>,
  p: <>Долгие ответы и игнор превращаются в отток. Плюс содержание операторов, ночные надбавки, текучка. На тысячу водителей — пять человек, и всё равно не хватает.</>
}];


function Pains() {
  return (
    <section className="bg-alt" id="pains">
      <div className="wrap">
        <div className="section-head">
          <h2>Таксопарки сталкиваются с проблемами</h2>
        </div>
        <div className="pains-grid">
          {PAINS.map((p, i) =>
          <div key={i} className="pain">
              <div className="pain-content">
                <h3>{p.h}</h3>
                <p>{p.p}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

window.Pains = Pains;