// Process.jsx — 4-step process strip
const Process = () => {
  const steps = [
    { n: "01", t: "Брифінг", d: "Знайомлюсь із вашим брендом, обговорюємо задачу і цілі. Уточнюю всі деталі одразу." },
    { n: "02", t: "Збір матеріалів", d: "Ви надсилаєте фото, відео, меню, логотип, референси. Підбираю стиль під бренд." },
    { n: "03", t: "Генерація", d: "Створюю кадри і вношу правки за вашими побажаннями. Ви впливаєте на фінал." },
    { n: "04", t: "Передача", d: "Передаю готові матеріали у потрібному форматі. 24–48 годин для пакетів." },
  ];
  return (
    <section className="dd-section dd-section--alt" id="process">
      <div className="container-x">
        <span className="eyebrow">ПРОЦЕС</span>
        <h2 className="dd-section__title">
          <span className="h-display">Як ми з вами&nbsp;</span>
          <span className="h-editorial gold">працюємо.</span>
        </h2>
        <div className="dd-proc">
          {steps.map((s, i) => (
            <div key={s.n} className="dd-proc__step">
              <div className="dd-proc__line" aria-hidden="true">
                <div className="dd-proc__dot"></div>
                {i < steps.length - 1 && <div className="dd-proc__rule"></div>}
              </div>
              <div className="dd-proc__num">{s.n}</div>
              <h4 className="dd-proc__t">{s.t}</h4>
              <p className="p-sm">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Process = Process;