const ROADMAP = [
  {
    day: 'День 0',
    title: 'Демо',
    desc: 'Покажем бота и админку, ответим на вопросы, обсудим условия.',
  },
  {
    day: 'День 1',
    title: 'Подключение',
    desc: 'Интегрируем с мессенджерами и CRM.',
  },
  {
    day: 'Дни 3–5',
    title: 'Обучение',
    desc: 'Загружаем FAQ и регламенты. Бот говорит голосом вашего парка.',
  },
  {
    day: 'Дальше',
    title: 'Работа',
    desc: 'Раз в неделю — отчёт: что закрыл, что передал людям, что нового.',
  },
];

function Timeline() {
  return (
    <section id="how">
      <div className="wrap">
        <div className="section-head">
          <div className="eyebrow-plain">Подключение</div>
          <h2>Установка <em>бесплатная</em> — платите только за подписку</h2>
        </div>
        <div className="roadmap">
          <div className="roadmap-road" aria-hidden="true"></div>
          <div className="roadmap-stops">
            {ROADMAP.map((s, i) => (
              <div key={i} className="rm-stop">
                <div className="rm-pin">{i + 1}</div>
                <div className="rm-day">{s.day}</div>
                <div className="rm-title">{s.title}</div>
                <div className="rm-desc">{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Timeline = Timeline;