Schedule Grid

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

/* колонки-дни: узко — стопкой, день не рвётся на переносе */
.scg-days { margin: var(--ds-7, 54px) 0 0;
  display: grid; gap: var(--ds-5, 22px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.scg-day { min-width: 0; border-radius: var(--ds-radius-lg, 18px);
  border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  background: var(--ds-surface, oklch(0.17 0.02 273));
  overflow: hidden; }
.scg-dname { margin: 0; padding: 12px 16px;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.74rem); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ds-accent, oklch(0.72 0.16 300));
  border-bottom: 1px solid var(--ds-border, oklch(0.3 0.02 275));
  background: oklch(from var(--ds-accent, oklch(0.72 0.16 300)) l c h / 0.07); }

.scg-slots { margin: 0; padding: 6px; list-style: none; display: grid; gap: 6px; }
.scg-slot { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  align-items: baseline; padding: 10px 12px; border-radius: 12px;
  transition: background-color 0.2s ease; }
.scg-slot:hover { background: oklch(from var(--ds-fg, oklch(0.95 0.01 265)) l c h / 0.05); }
.scg-time { font-variant-numeric: tabular-nums;
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-text-xs, 0.76rem);
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
.scg-what { min-width: 0; font-size: var(--ds-text-sm, 0.92rem); font-weight: 600;
  letter-spacing: var(--ds-tracking-tight, -0.01em); }
.scg-note { grid-column: 2; margin: 0;
  font-size: var(--ds-text-xs, 0.76rem); line-height: 1.4;
  color: var(--ds-muted, oklch(0.72 0.02 265)); }
/* перерывы и служебные строки — приглушённые, курсивом: сетке нужен ритм */
.scg-slot[data-kind="break"] .scg-what { font-weight: 400; font-style: italic;
  color: var(--ds-muted, oklch(0.72 0.02 265)); }

.scg-foot { margin: var(--ds-6, 36px) auto 0; max-width: 60ch; 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)); }

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

export interface ScheduleSlot {
  /** Колонка расписания (формат «Суббота» или «Зал А») — слоты с одинаковым day собираются вместе. */
  day: string;
  /** Время (формат «10:00»). */
  time: string;
  title: string;
  /** Спикер, зал, уровень. */
  note?: string;
  /** Служебная строка: перерыв, обед — рисуется приглушённо. */
  kind?: "break";
}

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

const ITEMS: ScheduleSlot[] = [
  { day: "Суббота", time: "10:00", title: "Регистрация и кофе", kind: "break" },
  { day: "Суббота", time: "11:00", title: "Дизайн-системы, которые переживают редизайн", note: "главный зал · К. Мель" },
  { day: "Суббота", time: "12:30", title: "Скролл-анимации без единого скрипта", note: "главный зал · Л. Гордин" },
  { day: "Суббота", time: "14:00", title: "Обед", kind: "break" },
  { day: "Суббота", time: "15:00", title: "Воркшоп: страница за час", note: "мастерская · запись" },
  { day: "Воскресенье", time: "11:00", title: "Шейдеры для тех, кто верстает", note: "главный зал · С. Брагина" },
  { day: "Воскресенье", time: "12:30", title: "Доступность как дизайн-решение", note: "главный зал · А. Барс" },
  { day: "Воскресенье", time: "14:00", title: "Обед", kind: "break" },
  { day: "Воскресенье", time: "15:00", title: "Круглый стол: что дальше с вебом", note: "все спикеры" },
];

/**
 * РАСПИСАНИЕ СЕТКОЙ — второй вариант вида timeline: `timeline-rail` рассказывает
 * ИСТОРИЮ по периодам (дорожная карта, вехи), здесь — ПЛАН по колонкам: дни
 * конференции, залы, треки. Ровно та роль, которую landing-event был вынужден
 * натягивать на рельсу, — теперь у роли своя секция.
 *
 * Данные НАМЕРЕННО плоские (слот несёт свой day, группировка в рендере
 * с сохранением порядка) — тот же приём, что у menu-list: вложенные списки
 * упёрлись бы в «карточку в карточке», а плоские правятся inline уже сегодня.
 * Перерывы — те же слоты с kind: "break": сетке нужен ритм, а не только доклады.
 */
export function ScheduleGrid({
  eyebrow = "программа",
  title = "Два дня, один трек, ноль воды",
  sub = "Доклады по 45 минут с перерывами, в которые успеваешь поговорить со спикером.",
  items = ITEMS,
  note = "Программа может уточняться; запись воркшопа откроется за неделю.",
  background,
  tone,
  scrim = 0.5,
}: ScheduleGridProps) {
  const days: { name: string; rows: { item: ScheduleSlot; idx: number }[] }[] = [];
  items.forEach((item, idx) => {
    const g = days.find((x) => x.name === item.day);
    if (g) g.rows.push({ item, idx });
    else days.push({ name: item.day, rows: [{ item, idx }] });
  });

  return (
    <section
      className="scg"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--scg-scrim" as string]: scrim }}
    >
      <style href="motiva-schedule-grid" precedence="medium">{css}</style>

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

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

        <div className="scg-days">
          {days.map((d) => (
            <section className="scg-day" key={d.name}>
              <h3 className="scg-dname" data-slot="items" data-idx={d.rows[0]!.idx} data-field="day">
                {d.name}
              </h3>
              <ol className="scg-slots">
                {d.rows.map(({ item, idx }) => (
                  <li className="scg-slot" key={`${item.time}-${item.title}`} data-kind={item.kind}>
                    <span className="scg-time" data-slot="items" data-idx={idx} data-field="time">{item.time}</span>
                    <span className="scg-what" data-slot="items" data-idx={idx} data-field="title">{item.title}</span>
                    {item.note && (
                      <p className="scg-note" data-slot="items" data-idx={idx} data-field="note">{item.note}</p>
                    )}
                  </li>
                ))}
              </ol>
            </section>
          ))}
        </div>

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