const STEPS = [
  { t:"Знакомство", d:"Встречаю, завариваю чай или матча, обсуждаем ваш запрос и пожелания по дизайну.", dur:"10 мин" },
  { t:"Диагностика", d:"Осматриваю пластину и кутикулу, предлагаю оптимальный уход — без навязывания.", dur:"10 мин" },
  { t:"Процедура", d:"Работаю в тишине или под ваш плейлист. Инструменты достаю при вас, крафт-пакеты.", dur:"90–150 мин" },
  { t:"Уход на дом", d:"Провожаю с миниатюрой масла для кутикулы и напоминанием в Telegram через 2 недели.", dur:"5 мин" },
];

const Process = () => (
  <section className="section shell">
    <div className="section-head">
      <div>
        <div className="overline">Как проходит визит</div>
        <h2>Без суеты, по шагам.</h2>
      </div>
      <p>Опоздание до 15 минут — ок, но дольше уже пришлось бы отказать следующей гостье. Пожалуйста, пишите, если задерживаетесь.</p>
    </div>
    <div className="process">
      {STEPS.map((s, i) => (
        <div key={i} className="proc-step">
          <h4>{s.t}</h4>
          <p>{s.d}</p>
          <span className="dur">⏱ {s.dur}</span>
        </div>
      ))}
    </div>
  </section>
);

Object.assign(window, { Process });