Checklist Steps

import type { ReactNode } from "react";
const css = `.cls { 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); }
.cls-in { max-width: min(var(--ds-container, 1120px), 46rem); margin-inline: auto;
  padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px)); }
.cls-eyebrow { margin: 0 0 var(--ds-2, 8px); text-align: center;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ds-accent, oklch(0.72 0.16 300)); }
.cls-h { margin: 0; text-align: center;
  font-size: var(--ds-text-xl, 2rem); font-weight: 750;
  letter-spacing: var(--ds-tracking-tight, -0.03em); }
.cls-sub { margin: var(--ds-2, 10px) auto 0; max-width: 52ch; text-align: center;
  font-size: var(--ds-text-sm, 0.92rem); line-height: var(--ds-leading-body, 1.55);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

.cls-list { margin: var(--ds-7, 54px) 0 0; padding: 0; list-style: none;
  display: grid; }
.cls-item { position: relative; display: grid;
  grid-template-columns: 34px 1fr; gap: 4px 18px;
  padding-bottom: var(--ds-6, 30px); }
.cls-item:last-child { padding-bottom: 0; }
/* рельса прогресса: сделанное — сплошным акцентом, будущее — пунктиром */
.cls-item::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0;
  width: 2px; background: var(--ds-border, oklch(0.35 0.02 275)); }
.cls-item[data-state="done"]::before { background: var(--ds-accent, oklch(0.72 0.16 300)); }
.cls-item[data-state="next"]::before {
  background: repeating-linear-gradient(var(--ds-border, oklch(0.35 0.02 275)) 0 5px, transparent 5px 10px); }
.cls-item:last-child::before { display: none; }

.cls-mark { width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--ds-border, oklch(0.35 0.02 275));
  background: var(--ds-surface, oklch(0.17 0.02 273));
  font: 700 0.8rem/1 var(--ds-font-mono, ui-monospace, monospace);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
.cls-item[data-state="done"] .cls-mark {
  border-color: var(--ds-accent, oklch(0.72 0.16 300));
  background: var(--ds-accent, oklch(0.72 0.16 300));
  color: var(--ds-accent-fg, oklch(0.14 0.02 275)); }
.cls-item[data-state="current"] .cls-mark {
  border-color: var(--ds-accent, oklch(0.72 0.16 300));
  color: var(--ds-accent, oklch(0.72 0.16 300));
  box-shadow: 0 0 0 5px oklch(from var(--ds-accent, oklch(0.72 0.16 300)) l c h / 0.16); }

/* галка сделанного рисуется бордером, не глифом: глиф пляшет от шрифта */
.cls-check { width: 12px; height: 7px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  rotate: -45deg; translate: 0 -2px; }

.cls-title { margin: 0; align-self: center;
  font-size: var(--ds-text-md, 1.05rem); font-weight: 700;
  letter-spacing: var(--ds-tracking-tight, -0.02em); }
.cls-item[data-state="next"] .cls-title { color: var(--ds-muted, oklch(0.72 0.02 265)); }
.cls-badge { display: inline-block; margin-left: 10px; padding: 2px 9px;
  border-radius: 999px; vertical-align: 2px;
  font: 600 var(--ds-text-xs, 0.68rem) / 1.5 var(--ds-font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ds-accent, oklch(0.72 0.16 300));
  border: 1px solid oklch(from var(--ds-accent, oklch(0.72 0.16 300)) l c h / 0.4); }
.cls-text { grid-column: 2; margin: 0; max-width: 52ch;
  font-size: var(--ds-text-sm, 0.9rem); line-height: var(--ds-leading-body, 1.55);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

.cls-foot { margin: var(--ds-6, 36px) auto 0; max-width: 56ch; text-align: center;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

/* СОКЕТ ФОНА — контракт как у остальных секций */
.cls-bg { position: absolute; inset: 0; z-index: -1; }
.cls[data-slot-bg] { background: transparent; }
.cls-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cls[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.2); color: var(--ds-fg); }
.cls[data-tone="dark"] .cls-bg::after {
  background: oklch(0.09 0.02 265 / calc(var(--cls-scrim, 0.5) * 0.9)); }
.cls[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.2); color: var(--ds-fg); }
.cls[data-tone="light"] .cls-bg::after {
  background: oklch(0.99 0 0 / calc(var(--cls-scrim, 0.5) * 0.9)); }
`;

export interface ChecklistStep {
  title: string;
  text?: string;
  /** Состояние: done — сделано, current — вы здесь, next — впереди. */
  state?: "done" | "current" | "next";
}

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

const ITEMS: ChecklistStep[] = [
  { title: "Заявка отправлена", text: "Мы получили анкету и подтвердили её письмом.", state: "done" },
  { title: "Документы проверены", text: "Паспорт и реквизиты прошли проверку с первого раза.", state: "done" },
  { title: "Договор на подписи", text: "Ссылка на подписание — в письме. Обычно это две минуты и код из СМС.", state: "current" },
  { title: "Доступ в кабинет", text: "Логин придёт сразу после подписания.", state: "next" },
  { title: "Первая выплата", text: "По графику — в ближайшую пятницу после активации.", state: "next" },
];

/**
 * ЧЕК-ЛИСТ ПРОГРЕССА — второй вариант вида steps: `steps-flow` рассказывает
 * ПРОЦЕСС (равные шаги пути, у всех один вес), здесь — СОСТОЯНИЕ прохождения:
 * что уже сделано (галки), где читатель сейчас («вы здесь» с пульсом кольца)
 * и что впереди (пунктирная рельса, приглушённые заголовки). Онбординги,
 * статусы заявок, «дорога до результата» в курсах.
 *
 * Галка рисуется бордером, а не глифом «✓» — глиф пляшет от шрифта к шрифту.
 * Рельса между шагами кодирует то же состояние вторым каналом: сплошная
 * акцентная за сделанным, пунктир перед будущим.
 */
export function ChecklistSteps({
  eyebrow = "ваша заявка",
  title = "Три шага позади, осталось два",
  sub = "Статус обновляется сам — эту страницу можно смело закрывать.",
  items = ITEMS,
  currentLabel = "вы здесь",
  note = "Застряло дольше суток? Напишите нам — разберёмся быстрее, чем вы дочитаете FAQ.",
  background,
  tone,
  scrim = 0.5,
}: ChecklistStepsProps) {
  return (
    <section
      className="cls"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--cls-scrim" as string]: scrim }}
    >
      <style href="motiva-checklist-steps" precedence="medium">{css}</style>

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

      <div className="cls-in">
        {/* data-slot: адрес слота для inline-правки в конструкторе (/build) */}
        {eyebrow && <p className="cls-eyebrow" data-slot="eyebrow">{eyebrow}</p>}
        {title && <h2 className="cls-h" data-slot="title">{title}</h2>}
        {sub && <p className="cls-sub" data-slot="sub">{sub}</p>}

        <ol className="cls-list">
          {items.map((s, i) => {
            const state = s.state ?? "next";
            return (
              <li className="cls-item" key={s.title} data-state={state}>
                <span className="cls-mark" aria-hidden="true">
                  {state === "done" ? <i className="cls-check" /> : i + 1}
                </span>
                <h3 className="cls-title">
                  <span data-slot="items" data-idx={i} data-field="title">{s.title}</span>
                  {state === "current" && currentLabel && (
                    <span className="cls-badge" data-slot="currentLabel">{currentLabel}</span>
                  )}
                </h3>
                {s.text && (
                  <p className="cls-text" data-slot="items" data-idx={i} data-field="text">{s.text}</p>
                )}
              </li>
            );
          })}
        </ol>

        {note && <p className="cls-foot" data-slot="note">{note}</p>}
      </div>
    </section>
  );
}