Comparison Cards

import type { ReactNode } from "react";
const css = `.cpc { 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); }
.cpc-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
  padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px)); }
.cpc-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)); }
.cpc-h { margin: 0; text-align: center;
  font-size: var(--ds-text-xl, 2rem); font-weight: 750;
  letter-spacing: var(--ds-tracking-tight, -0.03em); }
.cpc-sub { margin: var(--ds-2, 10px) auto 0; max-width: 56ch; 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)); }

/* карточки в ряду ровняются subgrid'ом: шапка/список/низ у соседей на одних кромках */
.cpc-grid { margin: var(--ds-7, 54px) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--ds-5, 22px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cpc-card { display: grid; grid-template-rows: subgrid; grid-row: span 3;
  gap: var(--ds-4, 16px); padding: clamp(18px, 2.6vw, 26px);
  border-radius: var(--ds-radius-lg, 20px);
  border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  background: var(--ds-surface, oklch(0.17 0.02 273)); }
.cpc-card[data-featured] {
  border-color: var(--ds-accent, oklch(0.72 0.16 300));
  box-shadow: 0 0 0 1px var(--ds-accent, oklch(0.72 0.16 300)),
    0 14px 40px oklch(from var(--ds-accent, oklch(0.72 0.16 300)) l c h / 0.16); }

.cpc-name { margin: 0; display: grid; gap: 2px; }
.cpc-name b { font-size: var(--ds-text-md, 1.1rem); font-weight: 750;
  letter-spacing: var(--ds-tracking-tight, -0.03em); }
.cpc-name span { font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.72rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

.cpc-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px;
  align-content: start; }
.cpc-points li { display: flex; gap: 9px; align-items: baseline;
  font-size: var(--ds-text-sm, 0.88rem); line-height: 1.45;
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
/* вердикт пункта — его ПЕРВЫЙ символ: «+» это плюс, «−»/«-» — минус */
.cpc-points li::before { content: ""; }
.cpc-points li[data-kind="plus"]::before { content: "✓"; flex: none; font-weight: 800;
  color: var(--ds-accent, oklch(0.72 0.16 300)); }
.cpc-points li[data-kind="minus"]::before { content: "—"; flex: none;
  color: var(--ds-muted, oklch(0.6 0.02 265)); }
.cpc-points li[data-kind="minus"] { opacity: 0.75; }

.cpc-verdict { margin: 0; padding-top: var(--ds-3, 12px);
  border-top: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  font-size: var(--ds-text-sm, 0.86rem); font-weight: 600; }
.cpc-card[data-featured] .cpc-verdict { color: var(--ds-accent, oklch(0.72 0.16 300)); }

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

export interface ComparisonCard {
  name: string;
  /** Приписка под названием: цена, кто это. */
  note?: string;
  /**
   * Пункты; первый символ — вердикт: «+» рисует галку, «−» или «-» — прочерк
   * (формат «+ Всё считается само», «− Настраивать руками»).
   */
  points: string[];
  /** Итоговая строка под чертой. */
  verdict?: string;
  featured?: boolean;
}

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

const ITEMS: ComparisonCard[] = [
  {
    name: "Руками",
    note: "таблица и дисциплина",
    points: ["+ Бесплатно", "+ Полный контроль", "− Держится на памяти", "− Отчёт собирается час"],
    verdict: "Работает, пока помнишь",
  },
  {
    name: "Наш способ",
    note: "$5 в месяц",
    points: ["+ Всё считается само", "+ Отчёт одной ссылкой", "+ Замечает переработки", "− Платный после месяца"],
    verdict: "Помнит вместо тебя",
    featured: true,
  },
  {
    name: "Комбайн",
    note: "энтерпрайз-платформа",
    points: ["+ Умеет вообще всё", "− Внедрение месяцами", "− Цена по запросу", "− Нужен админ"],
    verdict: "Сильно, если вас пятьсот",
  },
];

/**
 * Сравнение КАРТОЧКАМИ — вариант `comparison-table` для узких экранов и коротких
 * списков: таблица сильна плотностью, но на телефоне скроллится вбок; карточки
 * складываются в колонку без потерь.
 *
 * Вердикт пункта закодирован его ПЕРВЫМ символом («+»/«−») — автор пишет обычные
 * строки, а галку и прочерк рисует CSS по `data-kind`. Карточки в ряду ровняются
 * `subgrid`: шапка, список и итог соседей лежат на одних кромках, сколько бы
 * пунктов ни было.
 */
export function ComparisonCards({
  eyebrow = "сравнение",
  title = "Честно про альтернативы",
  sub = "Мы не единственный способ. Вот когда какой уместен.",
  items = ITEMS,
  background,
  tone,
  scrim = 0.5,
}: ComparisonCardsProps) {
  return (
    <section
      className="cpc"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--cpc-scrim" as string]: scrim }}
    >
      <style href="motiva-comparison-cards" precedence="medium">{css}</style>

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

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

        <ul className="cpc-grid">
          {items.map((card, i) => (
            <li className="cpc-card" key={card.name} data-featured={card.featured ? "" : undefined}>
              <p className="cpc-name">
                <b data-slot="items" data-idx={i} data-field="name">{card.name}</b>
                {card.note && <span data-slot="items" data-idx={i} data-field="note">{card.note}</span>}
              </p>
              <ul className="cpc-points">
                {card.points.map((p) => {
                  const kind = p.trimStart().startsWith("+") ? "plus" : /^[−-]/.test(p.trimStart()) ? "minus" : undefined;
                  return (
                    <li key={p} data-kind={kind}>
                      {p.trimStart().replace(/^[+−-]\s*/, "")}
                    </li>
                  );
                })}
              </ul>
              {card.verdict && (
                <p className="cpc-verdict" data-slot="items" data-idx={i} data-field="verdict">{card.verdict}</p>
              )}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}