function Problem() {
  const sources = [
    { n: 'Чаты',          icon: 'chat' },
    { n: 'Звонки',        icon: 'phone' },
    { n: 'App Store',     icon: 'apple' },
    { n: 'Google Play',   icon: 'play' },
    { n: 'NPS / CSAT',    icon: 'clipboard' },
    { n: 'Соцсети',       icon: 'heart' },
    { n: 'Маркетплейсы',  icon: 'cart' },
    { n: 'Тикеты',        icon: 'ticket' },
    { n: 'Excel',         icon: 'sheet' },
  ];

  return (
    <section style={{ padding: '120px 0 100px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <h2 className="display" style={{ fontSize: 48, lineHeight: 1.1, fontWeight: 700 }}>
              Отзывы есть<br />у всех. <span className="serif" style={{ fontWeight: 400, color: 'var(--muted)' }}>Ответов — нет.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--muted)', marginTop: 20, maxWidth: 420, lineHeight: 1.55 }}>
              Голос клиента живёт в <b style={{ color: 'var(--ink)', fontWeight: 600 }}>9+ источниках</b>.
              Команды держат 3–4 подписки на разные сервисы, сводят сотни Excel-табличек вручную —
              и всё равно теряют сигнал между отделами.
            </p>

            {/* sources mosaic */}
            <div style={{
              marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 8,
              maxWidth: 460,
            }}>
              {sources.map((s, i) => (
                <div
                  key={s.n}
                  className="prob-chip"
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '8px 14px 8px 10px',
                    borderRadius: 999,
                    border: '1px solid var(--line)',
                    background: 'var(--card)',
                    fontSize: 13, color: 'var(--ink-2)', fontWeight: 500,
                    transition: 'all 0.18s ease',
                    animation: `prob-chip-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) ${i * 60}ms both`,
                  }}
                >
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    width: 22, height: 22, borderRadius: 6,
                    background: 'var(--bg-soft)', color: 'var(--accent)',
                  }}>
                    <SourceIcon name={s.icon} />
                  </span>
                  {s.n}
                </div>
              ))}
              <div style={{
                display: 'inline-flex', alignItems: 'center',
                padding: '8px 14px', borderRadius: 999,
                fontSize: 13, color: 'var(--muted)', fontWeight: 500,
                fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.04em',
              }}>
                + ещё
              </div>
            </div>
            <style>{`
              @keyframes prob-chip-in {
                from { opacity: 0; transform: translateY(6px); }
                to   { opacity: 1; transform: translateY(0); }
              }
              .prob-chip:hover {
                border-color: var(--accent);
                background: var(--accent-soft);
                transform: translateY(-1px);
              }
            `}</style>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              { n: '01', t: 'Ручная разметка устаревает за неделю', d: 'Тегсеты, которые собирали полгода, не успевают за релизами. Новая фича — новые жалобы, старые ярлыки уже не подходят.' },
              { n: '02', t: 'Ответил — и забыл', d: 'Менеджер написал клиенту под отзывом — и на этом цикл закрылся. Перестал ли человек жаловаться, вернулся ли в продукт, закрыли ли его боль — никто не отслеживает.' },
              { n: '03', t: 'Цифры без приоритета', d: 'CSAT 4.2, NPS 38, тысячи свободных ответов. Что чинить в первую очередь — решает тот, кто громче кричит на созвоне.' },
              { n: '04', t: 'PM просят отчёт. Снова.', d: 'Каждый квартал — новая презентация про «топ боли». Делает один человек, читает пятеро, цикл повторяется.' },
            ].map((p, i) => (
              <div key={p.n} className="prob-row" style={{
                display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
                padding: '28px 4px', borderTop: '1px solid var(--line)',
                borderBottom: i === 3 ? '1px solid var(--line)' : 'none',
                transition: 'background 0.18s ease, padding 0.18s ease',
              }}>
                <span className="mono" style={{ fontSize: 12, color: 'var(--muted)', paddingTop: 4 }}>{p.n}</span>
                <div>
                  <h3 className="display" style={{ fontSize: 22, fontWeight: 600, marginBottom: 6 }}>{p.t}</h3>
                  <p style={{ fontSize: 15.5, color: 'var(--muted)', margin: 0, lineHeight: 1.55 }}>{p.d}</p>
                </div>
              </div>
            ))}
            <style>{`
              .prob-row:hover { background: var(--bg-soft); padding-left: 14px; padding-right: 14px; }
            `}</style>
          </div>
        </div>
      </div>
    </section>
  );
}

function SourceIcon({ name }) {
  const s = { stroke: 'currentColor', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  const map = {
    chat:      <svg width="13" height="13" viewBox="0 0 16 16"><path d="M2 4 H14 V11 H8 L5 13.5 V11 H2 Z" {...s} /></svg>,
    phone:     <svg width="13" height="13" viewBox="0 0 16 16"><path d="M3 3.5 C3 9 7 13 12.5 13 L13.5 11 L10.5 9.5 L9 11 C7.5 10 6 8.5 5 7 L6.5 5.5 L5 2.5 Z" {...s} /></svg>,
    apple:     <svg width="13" height="13" viewBox="0 0 16 16"><path d="M11 8.5 C11 6.8 12.4 6 12.4 6 C11.6 4.8 10.4 4.7 10 4.7 C9 4.6 8.1 5.3 7.6 5.3 C7.1 5.3 6.3 4.7 5.5 4.7 C4.1 4.7 2.8 5.9 2.8 8 C2.8 9.4 3.3 10.9 4 11.8 C4.5 12.6 5 13.3 5.8 13.2 C6.5 13.2 6.8 12.7 7.7 12.7 C8.6 12.7 8.9 13.2 9.6 13.2 C10.4 13.2 10.9 12.5 11.4 11.7 C11.9 10.9 12.1 10.1 12.1 10.1 C12.1 10.1 11 9.8 11 8.5 Z M9.2 4 C9.6 3.6 9.9 3 9.8 2.4 C9.3 2.4 8.6 2.7 8.3 3.1 C8 3.5 7.6 4 7.8 4.6 C8.3 4.7 8.8 4.4 9.2 4 Z" fill="currentColor" /></svg>,
    play:      <svg width="13" height="13" viewBox="0 0 16 16"><path d="M3 2.5 L12.5 8 L3 13.5 Z M3 2.5 L10.5 10 M3 13.5 L10.5 6" {...s} /></svg>,
    clipboard: <svg width="13" height="13" viewBox="0 0 16 16"><rect x="3.5" y="3" width="9" height="11" rx="1" {...s} /><path d="M6 2 H10 V4 H6 Z M5.5 7 H10.5 M5.5 9.5 H10.5 M5.5 12 H8.5" {...s} /></svg>,
    heart:     <svg width="13" height="13" viewBox="0 0 16 16"><path d="M8 13 C8 13 2.5 9.5 2.5 5.8 C2.5 4.2 3.7 3 5.2 3 C6.3 3 7.4 3.7 8 4.7 C8.6 3.7 9.7 3 10.8 3 C12.3 3 13.5 4.2 13.5 5.8 C13.5 9.5 8 13 8 13 Z" {...s} /></svg>,
    cart:      <svg width="13" height="13" viewBox="0 0 16 16"><path d="M2 3 H4 L5.5 10 H12.5 L14 5 H5" {...s} /><circle cx="6" cy="13" r="1" fill="currentColor" /><circle cx="12" cy="13" r="1" fill="currentColor" /></svg>,
    ticket:    <svg width="13" height="13" viewBox="0 0 16 16"><path d="M2 5 V7 A1 1 0 0 1 2 9 V11 H14 V9 A1 1 0 0 1 14 7 V5 Z M6 5 V11" {...s} /></svg>,
    sheet:     <svg width="13" height="13" viewBox="0 0 16 16"><rect x="2.5" y="2.5" width="11" height="11" rx="1" {...s} /><path d="M2.5 6 H13.5 M2.5 9.5 H13.5 M6 2.5 V13.5 M9.5 2.5 V13.5" {...s} /></svg>,
  };
  return map[name] || null;
}

window.Problem = Problem;