Steps Flow

"use client";

import type { ReactNode } from "react";
import { useEffect, useRef } from "react";

export interface Step {
  title: string;
  text: string;
  /** Приписка справа от номера: срок, цена, что угодно (формат «2–3 дня»). */
  note?: string;
}

export interface StepsFlowProps {
  eyebrow?: string;
  title?: string;
  sub?: string;
  items?: Step[];
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом (формат «0.5»); 0 — выключить. */
  scrim?: number;
}

const ITEMS: Step[] = [
  { title: "Разговор", note: "60 минут", text: "Слушаем задачу и ограничения. К концу звонка понятно, беремся мы или честно советуем другого." },
  { title: "Смета", note: "3 дня", text: "Объём, сроки и цена одним документом. Фиксируем в договоре — сверх сметы ничего не появится." },
  { title: "Дизайн", note: "2–3 недели", text: "Показываем не картинки, а кликабельный прототип: как это работает, видно до вёрстки." },
  { title: "Сборка", note: "3–5 недель", text: "Демо каждую пятницу. Правки собираем списком, чтобы не переделывать одно и то же дважды." },
  { title: "Запуск", note: "1 неделя", text: "Переносим на ваши серверы, обучаем команду, месяц поддержки без доплат." },
];

/**
 * Процесс шагами: номер, срок и текст, связанные вертикальной линией, которая ДОРИСОВЫВАЕТСЯ
 * по мере появления шагов в кадре.
 *
 * Линия и шаги ведутся ОДНИМ наблюдателем, а не двумя механизмами. Наивно тут вешают
 * обработчик скролла и считают прогресс от координат — это чтение layout в каждом кадре
 * прокрутки, самая дорогая вещь, какую можно придумать для декоративной линии. Здесь же
 * `IntersectionObserver` отмечает появившийся шаг и записывает его номер в переменную
 * `--done` на секции; высота линии — `calc()` от неё. Прокрутка не стоит ничего: браузер
 * сам решает, когда сообщить о пересечении.
 *
 * Наблюдатель отключается, как только отработал последний шаг: держать живого наблюдателя
 * ради уже показанного — то же самое, что не снять слушатель.
 */
export function StepsFlow({
  eyebrow = "как мы работаем",
  title = "Пять шагов от разговора до запуска",
  sub = "Ни один из них не пропускается — на этом и держится предсказуемость сроков.",
  items = ITEMS,
  background,
  tone,
  scrim = 0.5,
}: StepsFlowProps) {
  const root = useRef<HTMLElement>(null);

  useEffect(() => {
    const el = root.current;
    if (!el) return;
    const steps = [...el.querySelectorAll<HTMLElement>(".stf-item")];
    if (!steps.length) return;

    const frozen =
      document.documentElement.hasAttribute("data-shot") ||
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (frozen) {
      steps.forEach((s) => s.setAttribute("data-in", ""));
      el.style.setProperty("--done", String(steps.length));
      return;
    }

    let done = 0;
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (!e.isIntersecting) continue;
          e.target.setAttribute("data-in", "");
          io.unobserve(e.target);
          done++;
        }
        // одна переменная на секцию — и подсветка шагов, и длина линии считаются от неё
        el.style.setProperty("--done", String(done));
        if (done >= steps.length) io.disconnect();
      },
      { rootMargin: "0px 0px -18% 0px", threshold: 0.35 },
    );
    steps.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, [items]);

  return (
    <section
      ref={root}
      className="stf"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--stf-scrim" as string]: scrim, ["--total" as string]: items.length }}
    >
      <style>{`
        .stf { position: relative; isolation: isolate; width: 100%;
          padding-block: var(--ds-section-y, var(--ds-8, 80px));
          background: var(--ds-bg, oklch(0.14 0.02 275));
          color: var(--ds-fg, oklch(0.95 0.01 265));
          font-family: var(--ds-font, system-ui, sans-serif); }
        .stf-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
          padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px)); }

        .stf-eyebrow { margin: 0 0 var(--ds-3, 12px); text-transform: uppercase;
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.14em;
          color: var(--ds-accent, oklch(0.78 0.16 300)); }
        .stf-h { margin: 0; max-width: 20ch; text-wrap: balance;
          font-size: var(--ds-text-xl, 2rem); font-weight: 780; line-height: 1.1;
          letter-spacing: var(--ds-tracking-tight, -0.03em); }
        .stf-sub { margin: var(--ds-3, 12px) 0 0; max-width: 52ch;
          font-size: var(--ds-text-md, 1rem); line-height: var(--ds-leading-body, 1.55);
          color: var(--ds-muted, oklch(0.72 0.02 265)); }

        .stf-list { position: relative; margin: var(--ds-7, 54px) 0 0; padding: 0; list-style: none;
          display: grid; gap: var(--ds-6, 36px); }
        /* рельс и его заполненная часть — два псевдоэлемента на СПИСКЕ, а не на каждом шаге:
           одна линия сквозь весь блок читается как процесс, набор отрезков — нет */
        .stf-list::before, .stf-list::after { content: ""; position: absolute; left: 17px;
          top: 6px; bottom: 6px; width: 2px; border-radius: 2px; }
        .stf-list::before { background: var(--ds-border, oklch(0.3 0.02 275)); }
        .stf-list::after { transform-origin: top;
          /* доля пройденного = сколько шагов появилось / сколько всего */
          scale: 1 calc(var(--done, 0) / var(--total, 1));
          transition: scale var(--ds-slow, 0.6s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
          background: linear-gradient(180deg,
            var(--ds-accent, oklch(0.78 0.16 300)), var(--ds-accent-2, oklch(0.76 0.14 220))); }

        /* z-index на САМОМ шаге, а не на номере: translate создаёт контекст наложения,
           и z-index номера остаётся запертым внутри шага — рельс (::after списка, последний
           в порядке рисования) продолжал ложиться поверх цифр */
        .stf-item { position: relative; z-index: 1; padding-left: calc(36px + var(--ds-5, 24px));
          opacity: 0; translate: 0 14px;
          transition: opacity var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      translate var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
        .stf-item[data-in] { opacity: 1; translate: 0 0; }

        .stf-num { position: absolute; left: 0; top: 0; width: 36px; height: 36px;
          display: grid; place-items: center; border-radius: var(--ds-radius-pill, 999px);
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-sm, 0.86rem); font-variant-numeric: tabular-nums;
          background: var(--ds-surface, oklch(0.18 0.02 275));
          border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
          color: var(--ds-muted, oklch(0.72 0.02 265));
          transition: color var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      border-color var(--ds-base, 0.32s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
        .stf-item[data-in] .stf-num { color: var(--ds-accent, oklch(0.78 0.16 300));
          border-color: var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35)); }

        .stf-head { display: flex; align-items: baseline; gap: var(--ds-3, 12px);
          flex-wrap: wrap; }
        .stf-t { margin: 0; font-size: var(--ds-text-lg, 1.25rem); font-weight: 680;
          letter-spacing: var(--ds-tracking-tight, -0.03em); }
        .stf-note { font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem);
          color: var(--ds-accent, oklch(0.78 0.16 300)); opacity: 0.9; }
        .stf-x { margin: var(--ds-2, 8px) 0 0; max-width: 62ch;
          font-size: var(--ds-text-md, 1rem); line-height: var(--ds-leading-body, 1.55);
          color: var(--ds-muted, oklch(0.72 0.02 265)); }

        /* СОКЕТ ФОНА. Слой на z-index -1 внутри своего stacking context: поверх заливки
           секции, но под содержимым — вёрстке шагов знать о нём не нужно. */
        .stf-bg { position: absolute; inset: 0; z-index: -1; }
        .stf[data-slot-bg] { background: transparent; }
        .stf-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
        .stf[data-tone="dark"] { --ds-fg: oklch(0.96 0.01 265); --ds-muted: oklch(0.84 0.02 265);
          --ds-border: oklch(0.98 0.01 265 / 0.16); color: var(--ds-fg); }
        .stf[data-tone="dark"] .stf-bg::after {
          background: oklch(0.09 0.02 265 / calc(var(--stf-scrim, 0.5) * 0.9)); }
        .stf[data-tone="light"] { --ds-fg: oklch(0.2 0.02 265); --ds-muted: oklch(0.42 0.02 265);
          --ds-border: oklch(0.2 0.02 265 / 0.14); color: var(--ds-fg); }
        .stf[data-tone="light"] .stf-bg::after {
          background: oklch(0.99 0 0 / calc(var(--stf-scrim, 0.5) * 0.9)); }

        @media (prefers-reduced-motion: reduce) {
          .stf-item { opacity: 1; translate: none; transition: none; }
          .stf-list::after { transition: none; }
        }
      `}</style>

      {background && <div className="stf-bg">{background}</div>}

      <div className="stf-in">
        {eyebrow && <p className="stf-eyebrow">{eyebrow}</p>}
        <h2 className="stf-h">{title}</h2>
        {sub && <p className="stf-sub">{sub}</p>}

        <ol className="stf-list">
          {items.map((s, i) => (
            <li className="stf-item" key={s.title}>
              <span className="stf-num" aria-hidden="true">
                {String(i + 1).padStart(2, "0")}
              </span>
              <div className="stf-head">
                <h3 className="stf-t">{s.title}</h3>
                {s.note && <span className="stf-note">{s.note}</span>}
              </div>
              <p className="stf-x">{s.text}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}