function HowItWorks() {
  const steps = [
    {
      n: '01',
      tag: 'День 1',
      title: 'Подключаем источники',
      desc: 'Заводим коннекторы к вашим инструментам: тикеты, отзывы, звонки, опросы. Без интеграционных эпиков — за пару кликов или через API.',
      chips: ['Поддержка', 'Сторы', 'Соцсети', 'Опросы', 'Звонки'],
      icon: 'plug',
    },
    {
      n: '02',
      tag: 'День 2–3',
      title: 'Строим вашу таксономию',
      desc: 'ИИ читает первые 10 000 обращений и собирает дерево тем из ваших данных — без заранее заданных тегов. Калибруем точность вместе.',
      chips: ['50+ тем', 'Точность 94%', 'свои алиасы'],
      icon: 'tree',
    },
    {
      n: '03',
      tag: 'Через 7 дней',
      title: 'Запускаем алёрты и петлю',
      desc: 'Подписки на темы летят в Slack или Telegram. Спайки → задачи в JIRA, сводки → дайджест для CEO. Цикл «отзыв → решение» замыкается.',
      chips: ['Алёрты', 'JIRA-тикеты', 'Дайджест CEO'],
      icon: 'loop',
    },
  ];

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div style={{ marginBottom: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
          <h2 className="display" style={{
            fontFamily: "'Martian Grotesk', 'Manrope', 'Space Grotesk', sans-serif",
            fontSize: 52, lineHeight: 1.05, fontWeight: 600, letterSpacing: '-0.035em',
          }}>
            От договора<br />до инсайтов — <span style={{ color: 'var(--accent)', fontWeight: 600 }}>7 дней</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', margin: 0, maxWidth: 460 }}>
            Без долгих внедрений и тегсетов «на коленке». Подключаемся к вашим инструментам, обучаемся на ваших данных и сразу отдаём готовую картину.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden',
          background: 'var(--card)',
        }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: '32px 30px 30px',
              borderRight: i < 2 ? '1px solid var(--line)' : 'none',
              position: 'relative',
              minHeight: 320,
              display: 'flex', flexDirection: 'column', gap: 20,
            }}>
              {/* Top: icon + step badge + time tag */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: 'var(--accent-soft)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--accent)',
                  }}>
                    <StepIcon name={s.icon} />
                  </div>
                  <span className="mono" style={{
                    fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em',
                  }}>
                    ШАГ {parseInt(s.n, 10)}
                  </span>
                </div>
                <span className="mono" style={{
                  fontSize: 11, color: 'var(--ink-2)',
                  padding: '4px 10px',
                  background: 'var(--bg-soft)', border: '1px solid var(--line-2)',
                  borderRadius: 999, fontWeight: 500,
                }}>{s.tag}</span>
              </div>

              {/* Title */}
              <h3 className="display" style={{
                fontSize: 26, fontWeight: 700, lineHeight: 1.15, color: 'var(--ink)',
              }}>{s.title}</h3>

              {/* Description */}
              <p style={{
                fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.55, margin: 0,
              }}>{s.desc}</p>

              {/* Chips */}
              <div style={{
                marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 6,
                paddingTop: 16, borderTop: '1px solid var(--line-2)',
              }}>
                {s.chips.map(c => (
                  <span key={c} style={{
                    fontSize: 12, padding: '5px 10px',
                    background: 'var(--bg-soft)', border: '1px solid var(--line-2)',
                    borderRadius: 6, color: 'var(--ink-2)', fontWeight: 500,
                  }}>{c}</span>
                ))}
              </div>

              {/* Connector line to next step (desktop only) */}
              {i < 2 && (
                <div style={{
                  position: 'absolute', right: -7, top: 50,
                  width: 14, height: 14, borderRadius: '50%',
                  background: 'var(--card)', border: '1px solid var(--line)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--accent)', fontSize: 10, fontWeight: 700,
                }}>→</div>
              )}
            </div>
          ))}
        </div>

        {/* Bottom CTA hint */}
        <div style={{
          marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '16px 22px', background: 'var(--card)',
          border: '1px solid var(--line)', borderRadius: 10,
          gap: 16, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: 'var(--pos)', boxShadow: '0 0 8px var(--pos)',
            }} />
            <span style={{ fontSize: 14, color: 'var(--ink-2)' }}>
              <strong style={{ color: 'var(--ink)' }}>Без долгих внедрений.</strong>{' '}
              Команда Фидли ведёт запуск под ключ, вашему ИТ — только дать API-ключи.
            </span>
          </div>
          <a href="#contact" style={{
            fontSize: 14, color: 'var(--accent)', fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            Запустить за неделю
            <svg width="11" height="11" viewBox="0 0 11 11"><path d="M3 5.5 L8 5.5 M5.5 3 L8 5.5 L5.5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function StepIcon({ name }) {
  const s = { stroke: 'currentColor', strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  const icons = {
    plug: <g {...s}><path d="M7 4 V8 M13 4 V8" /><path d="M5 8 H15 V11 A4 4 0 0 1 11 15 H9 A4 4 0 0 1 5 11 Z" /><path d="M10 15 V18" /></g>,
    tree: <g {...s}><circle cx="10" cy="4" r="1.6" /><circle cx="5" cy="13" r="1.6" /><circle cx="10" cy="13" r="1.6" /><circle cx="15" cy="13" r="1.6" /><path d="M10 5.6 V8 H5 V11.4 M10 8 V11.4 M10 8 H15 V11.4" /></g>,
    loop: <g {...s}><path d="M5 7 A 5 5 0 0 1 14 6.5" /><path d="M14 4 V7 H11" /><path d="M15 13 A 5 5 0 0 1 6 13.5" /><path d="M6 16 V13 H9" /></g>,
  };
  return <svg width="18" height="18" viewBox="0 0 20 20">{icons[name] || icons.plug}</svg>;
}

window.HowItWorks = HowItWorks;