/* global React */

function HelpScreen() {
  return (
    <div style={{ padding: "32px 40px", maxWidth: 900, margin: "0 auto", width: "100%", overflow: "auto" }}>
      <div className="sectionHeader">
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10 }}>— СПРАВКА</div>
          <div className="sectionHeader__title">Как это <em>работает.</em></div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div style={{ padding: "28px 32px" }}>
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 26, marginBottom: 16 }}>Быстрый старт</div>
          <ol style={{ margin: 0, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              ["Загрузить аудитории", "xlsx c колонками: номер, вместимость, тип, корпус"],
              ["Загрузить Форму 1", "главный файл — группы, дисциплины, часы, преподаватели"],
              ["Загрузить кафедры", "привязка преподавателей к корпусам для бонуса «родная кафедра»"],
              ["Выставить настройки оптимизатора", "ползунки без окошек / баланс / родная кафедра / соблюдение смен"],
              ["Нажать «Сгенерировать»", "7 секунд — и получаете черновик расписания"],
              ["Правки вручную (необязательно)", "перетаскивание занятий, добавление из «Незапланированных», разрешение конфликтов"],
              ["Сохранить и экспортировать", "xlsx-файлы по группам / преподавателям / шаблону ректората"],
            ].map((s, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "48px 1fr", gap: 16, alignItems: "baseline", paddingBottom: 14, borderBottom: i < 6 ? "1px solid var(--line-soft)" : "none" }}>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 26, fontStyle: "italic", color: "var(--accent)", lineHeight: 1 }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 500 }}>{s[0]}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>{s[1]}</div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 40 }}>
        <div className="card">
          <div style={{ padding: "24px 28px" }}>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, marginBottom: 12 }}>Горячие клавиши</div>
            {[
              ["G", "к обзору"],
              ["S", "к расписанию"],
              ["E", "включить/выключить редактирование"],
              ["/", "фокус в поиск группы"],
              ["← → ↑ ↓", "навигация по слотам"],
              ["⌘ Enter", "сохранить черновик"],
            ].map(([k, v], i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: i < 5 ? "1px solid var(--line-soft)" : "none" }}>
                <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{v}</span>
                <span className="kbd">{k}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div style={{ padding: "24px 28px" }}>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, marginBottom: 12 }}>Типы конфликтов</div>
            {[
              ["teacher", "Преподаватель", "Одна и та же пара у одного преподавателя"],
              ["room", "Аудитория", "В одной аудитории два занятия одновременно"],
              ["group", "Группа", "У группы две пары одновременно"],
              ["building", "Корпус", "Смена корпуса без окошка между парами"],
            ].map(([k, t, d], i) => (
              <div key={k} style={{ display: "flex", gap: 12, padding: "10px 0", borderBottom: i < 3 ? "1px solid var(--line-soft)" : "none" }}>
                <div style={{ flexShrink: 0 }}><span className="badge badge--danger">{t}</span></div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.HelpScreen = HelpScreen;
