// Process — 4 steps

function Process(){
  const steps = [
    { n: "01", t: "Аудит с маркетологом",
      d: "Разбираем нишу и геолокацию, анализируем позиции конкурентов, изучаем поведение пользователей. Находим, где вы теряете клиентов прямо сейчас.",
      time: "3-5 дней", icon: "scan",
    },
    { n: "02", t: "Брифы и контент-план",
      d: "Собираем бриф по бизнесу, прорабатываем смысловую упаковку и контент-план: фото, истории, новости. Готовим примерный визуал и стиль карточки.",
      time: "1 неделя", icon: "pin",
    },
    { n: "03", t: "SEO-оптимизация профиля",
      d: "Перепрошиваем прайс, услуги, описания под целевые ключи. Загружаем фото, оформляем истории и новости, выстраиваем работу с отзывами.",
      time: "2-4 недели", icon: "bolt",
    },
    { n: "04", t: "Запуск продвижения",
      d: "Когда карточка готова и «красивая» — запускаем нейропродвижение. Ежедневный мониторинг позиций, реакция на проседания в течение 24 часов.",
      time: "от 30 дней", icon: "shield",
    },
  ];
  const icons = {
    scan: <svg viewBox="0 0 24 24" fill="none"><path d="M4 9V6a2 2 0 0 1 2-2h3M20 9V6a2 2 0 0 0-2-2h-3M4 15v3a2 2 0 0 0 2 2h3M20 15v3a2 2 0 0 1-2 2h-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.5"/></svg>,
    pin: <svg viewBox="0 0 24 24" fill="none"><path d="M12 21s7-6 7-12a7 7 0 1 0-14 0c0 6 7 12 7 12Z" stroke="currentColor" strokeWidth="1.5"/><circle cx="12" cy="9" r="2.4" stroke="currentColor" strokeWidth="1.5"/></svg>,
    bolt: <svg viewBox="0 0 24 24" fill="none"><path d="M13 3 5 14h6l-1 7 8-11h-6l1-7Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>,
    shield: <svg viewBox="0 0 24 24" fill="none"><path d="M12 3 4 6v6c0 5 3.6 8 8 9 4.4-1 8-4 8-9V6l-8-3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  };

  return (
    <section id="process" className="sec process">
      <div className="wrap">
        <div className="pr-head reveal">
          <span className="eyebrow">Как мы работаем</span>
          <h2 style={{marginTop:18}}>Четыре шага<br/>до <span className="em-red">первой строки.</span></h2>
        </div>

        <div className="pr-grid">
          {steps.map((s, i) => (
            <div key={i} className="pr-card reveal" style={{transitionDelay:`${i*.08}s`}}>
              <div className="pr-top">
                <span className="pr-n mono">{s.n}</span>
                <span className="pr-time mono">{s.time}</span>
              </div>
              <div className="pr-icon">{icons[s.icon]}</div>
              <h3 className="pr-t">{s.t}</h3>
              <p className="pr-d">{s.d}</p>
              {i < steps.length - 1 && <span className="pr-arrow" aria-hidden="true">→</span>}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .process{background:var(--surface-2)}
        .pr-head{max-width:760px;margin-bottom:56px}
        .pr-grid{display:grid;gap:18px}
        @media (min-width:780px){.pr-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
        .pr-card{
          background:#fff;border:1px solid var(--line);border-radius:18px;
          padding:28px;position:relative;
          transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
          display:flex;flex-direction:column;
        }
        .pr-card:hover{border-color:color-mix(in srgb, var(--accent) 40%, transparent);transform:translateY(-2px);
          box-shadow:0 16px 36px -16px rgba(0,0,0,.12)}
        .pr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
        .pr-n{font-size:11px;color:var(--mute);letter-spacing:.18em;font-weight:500}
        .pr-time{font-size:10px;color:#fff;background:var(--ink);
          padding:4px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
        .pr-icon{
          width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
          background:color-mix(in srgb, var(--accent) 8%, transparent);
          color:var(--accent);margin-bottom:24px;
        }
        .pr-icon svg{width:24px;height:24px}
        .pr-t{margin-bottom:10px;font-size:18px;font-weight:600}
        .pr-d{font-size:14px;color:var(--fg-2);line-height:1.5}
        .pr-arrow{
          display:none;position:absolute;top:50%;right:-13px;transform:translateY(-50%);
          color:var(--accent);font-size:22px;z-index:2;font-weight:300;
        }
        @media (min-width:780px){.pr-arrow{display:block}}
      `}</style>
    </section>
  );
}

window.Process = Process;
