import type { Metadata } from "next";
import { Toggle } from "@/components/ui/Toggle";
import { CodeCopy } from "@/components/ui/CodeCopy";
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";

export const metadata: Metadata = {
  title: "Форм-контролы. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
};

function Section({
  id,
  title,
  subtitle,
  children,
}: {
  id?: string;
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <section id={id} className="mb-12">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
}

function FieldLabel({ text, required }: { text: string; required?: boolean }) {
  return (
    <label
      className="block text-sm font-medium mb-1.5"
      style={{ color: "var(--bb-text)" }}
    >
      {text}
      {required && <span style={{ color: "#dc2626", marginLeft: 2 }}>*</span>}
    </label>
  );
}

function FieldHint({ text }: { text: string }) {
  return (
    <p className="mt-1.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>
      {text}
    </p>
  );
}

function FieldError({ text }: { text: string }) {
  return (
    <p className="mt-1.5 text-xs" style={{ color: "#dc2626" }}>
      {text}
    </p>
  );
}

function StateCard({
  label,
  hint,
  children,
}: {
  label: string;
  hint: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-xl border p-4" style={{ borderColor: "var(--bb-border)" }}>
      <div className="mb-3">{children}</div>
      <p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
        {label}
      </p>
      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
        {hint}
      </p>
    </div>
  );
}

const LLM_FORMS_TEXT = `ФОРМ-КОНТРОЛЫ — LLM-спецификация
Версия: v2.0 · /components/forms

ТЕКСТОВОЕ ПОЛЕ (Input)
CSS класс: .bb-input
Высота: 50px · padding: 10px 12px
border: 1px solid #ccc · border-radius: 4px · font: Fira Sans 14px
Источник: entityform input[type=text] на perm.oclinica.ru
Состояния:
  default:  border #ccc
  focus:    border #7ecfca + box-shadow 0 0 0 3px rgba(126,207,202,0.2)
  error:    border #dc2626 + класс .bb-error
  disabled: opacity 0.5 + cursor not-allowed + bg #f8f9fa

МНОГОСТРОЧНЫЙ ТЕКСТ (Textarea)
CSS класс: .bb-textarea
Те же состояния что у Input
min-height: 100px · resize: vertical · padding: 10px 12px

ВЫПАДАЮЩИЙ СПИСОК (Select)
CSS класс: .bb-select
Высота: 50px · padding: 10px 36px 10px 10px
Стрелка: SVG background-image (data URI)
Источник: .form-control.form-select entityform на сайте
Те же состояния что у Input

ФЛАЖОК (Checkbox)
CSS класс: .bb-checkbox
size: 16×16px · accent-color: #5b7b87
HTML: <input type="checkbox" class="bb-checkbox" />
Состояния: unchecked / checked / disabled / checked+disabled

ПЕРЕКЛЮЧАТЕЛЬ ВАРИАНТА (Radio)
CSS класс: .bb-radio
size: 16×16px · accent-color: #5b7b87
HTML: <input type="radio" class="bb-radio" name="group" />
Всегда в группе — один выбранный из нескольких

ТУМБЛЕР (Toggle/Switch)
Компонент: @/components/ui/Toggle (React, "use client")
Ширина трека: 44px · Высота: 24px · Бегунок: 20×20px
Выкл: track #d1d5db · Вкл: track #5b7b87
CSS: .bb-toggle-track / .bb-toggle-thumb
HTML-аналог: <input type="checkbox" role="switch" />

КОНТЕКСТ ПРИМЕНЕНИЯ НА САЙТЕ
Input/Select используются в entityform-блоках:
  #block-entityform-block-lor-form — форма «Запишите меня!» (ЛОР)
  #block-entityform-block-lor-form-2 — форма «Узнайте стоимость операции»
  #block-entityform-block-surgery-form — форма хирургии
Фон формы: #b8e6ed (светло-бирюзовый)
Ширина полей: 302px (фиксированная), кнопка submit: 300px

ОБЩИЕ ПРАВИЛА
✓ Метка (label) всегда над полем, font-weight: 500
✓ Обязательные поля помечены * красным цветом (#dc2626)
✓ Подсказка (hint) серым текстом под полем — font-size: 12px
✓ Сообщение об ошибке красным (#dc2626) под полем вместо hint
✓ Focus outline — бирюзовый #7ecfca (--brand-053m)
✓ Группы checkbox/radio — вертикальный список с gap: 10px
✓ Toggle — для булевых настроек включить/выключить
✕ Не использовать placeholder вместо label
✕ Не скрывать обязательность поля
✕ Не делать поля шире контейнера`.trim();

export default function FormsPage() {
  const codeInput = `<!-- HTML -->
<label class="bb-label">Имя пациента <span style="color:#dc2626">*</span></label>
<input class="bb-input" type="text" placeholder="Иван Иванов" />
<p class="bb-hint">Укажите имя как в паспорте</p>

<!-- Error-состояние -->
<input class="bb-input bb-error" type="text" value="ива" />
<p style="color:#dc2626;font-size:12px">Минимум 3 символа</p>

<!-- Password -->
<input class="bb-input" type="password" placeholder="Введите пароль" />`;

  const codeTextarea = `<label class="bb-label">Комментарий к записи</label>
<textarea class="bb-textarea" rows="4" placeholder="Опишите симптомы..."></textarea>`;

  const codeSelect = `<label class="bb-label">Специализация</label>
<select class="bb-select">
  <option value="">Выберите специализацию</option>
  <option value="lor">ЛОР — ухо, горло, нос</option>
  <option value="aud">Аудиология</option>
</select>`;

  const codeCheckbox = `<!-- Одиночный -->
<label style="display:flex;align-items:center;gap:8px">
  <input class="bb-checkbox" type="checkbox" />
  <span>Согласен с условиями</span>
</label>

<!-- Группа -->
<div style="display:flex;flex-direction:column;gap:10px">
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-checkbox" type="checkbox" checked /> ЛОР
  </label>
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-checkbox" type="checkbox" /> Аудиология
  </label>
</div>`;

  const codeRadio = `<div style="display:flex;flex-direction:column;gap:10px" role="radiogroup">
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-radio" type="radio" name="visit" value="first" checked />
    Первичный приём
  </label>
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-radio" type="radio" name="visit" value="repeat" />
    Повторный приём
  </label>
  <label style="display:flex;align-items:center;gap:8px">
    <input class="bb-radio" type="radio" name="visit" value="online" />
    Онлайн-консультация
  </label>
</div>`;

  const codeToggle = `import { Toggle } from "@/components/ui/Toggle";

// Базовый тумблер
<Toggle />

// С меткой
<Toggle label="Получать уведомления" />

// По умолчанию включён
<Toggle defaultChecked label="Email-рассылка" />

// Заблокирован
<Toggle disabled label="Настройка недоступна" />`;

  const codeSiteCSS = `/* ── Реальный CSS с perm.oclinica.ru ─────────────────────────── */

/* Базовые стили (Bootstrap override) */
input[type=text],
input[type=email] {
  padding: 0;
  height: 30px;
  border: 1px solid #ccc;
}

/* Entityform-блоки: форма записи на приём / узнать стоимость */
#block-entityform-block-lor-form input[type=text],
#block-entityform-block-lor-form-2 input[type=text],
#block-entityform-block-surgery-form input[type=text] {
  height: 50px;
  padding: 10px;
}

/* Select в entityform */
.field-name-field-lor-vrach .form-control.form-select {
  height: 50px;
  padding: 10px 16px;
  font-size: .9em;
  font-weight: bold;
  font-family: 'Fira Sans';
  color: #949290;
}

/* Webform (отдельный вид форм) — скруглений нет */
.webform-client-form input[type=text].form-text {
  border-radius: 0;
}`;

  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Компоненты → 3.2
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Форм-контролы
        </h1>
        <BlockMetaBar path="/components/forms" defaultVersion="v2.0" defaultIsInPreview={false} />
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Элементы ввода данных: текстовые поля, выпадающие списки, флажки, переключатели.
          Применяются в формах записи, фильтрах и настройках.
        </p>
      </div>

      {/* 1. Input */}
      <Section
        id="input"
        title="Текстовое поле"
        subtitle="Базовый элемент ввода текста. Класс .bb-input. Высота 50px — как на сайте oclinica.ru."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <StateCard label="Default" hint="border: 1px solid #ccc · border-radius: 4px · height: 50px">
            <FieldLabel text="Имя пациента" required />
            <input className="bb-input" type="text" placeholder="Иван Иванов" readOnly />
            <FieldHint text="Укажите имя как в паспорте" />
          </StateCard>

          <StateCard label="Focus" hint="border #7ecfca + box-shadow rgba(126,207,202,0.2)">
            <FieldLabel text="Имя пациента" required />
            <input
              className="bb-input"
              type="text"
              defaultValue="Иван"
              readOnly
              style={{
                borderColor: "var(--brand-053m)",
                boxShadow: "0 0 0 3px rgba(126,207,202,0.2)",
              }}
            />
            <FieldHint text="Укажите имя как в паспорте" />
          </StateCard>

          <StateCard label="Error" hint="border #dc2626 + .bb-error + сообщение об ошибке">
            <FieldLabel text="Имя пациента" required />
            <input
              className="bb-input bb-error"
              type="text"
              defaultValue="ив"
              readOnly
            />
            <FieldError text="Минимум 3 символа" />
          </StateCard>

          <StateCard label="Disabled" hint="opacity: 0.5 + cursor: not-allowed">
            <FieldLabel text="Email (только чтение)" />
            <input
              className="bb-input"
              type="text"
              defaultValue="ivan@example.com"
              disabled
            />
            <FieldHint text="Email нельзя изменить" />
          </StateCard>
        </div>

        {/* Password */}
        <div
          className="rounded-xl border p-4"
          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
        >
          <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{ color: "var(--bb-text-muted)" }}>
            Тип password
          </p>
          <div className="max-w-sm">
            <FieldLabel text="Пароль" required />
            <input className="bb-input" type="password" placeholder="Введите пароль" readOnly />
          </div>
        </div>
      </Section>

      {/* 2. Textarea */}
      <Section
        id="textarea"
        title="Многострочный текст"
        subtitle="Поле для длинного ввода. Класс .bb-textarea. border: 1px solid #ccc · border-radius: 4px."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <StateCard label="Default" hint="min-height: 100px · resize: vertical">
            <FieldLabel text="Комментарий к записи" />
            <textarea
              className="bb-textarea"
              rows={3}
              placeholder="Опишите симптомы или пожелания..."
              readOnly
            />
          </StateCard>

          <StateCard label="Focus" hint="border #7ecfca + box-shadow">
            <FieldLabel text="Комментарий к записи" />
            <textarea
              className="bb-textarea"
              rows={3}
              defaultValue="Беспокоит боль в горле..."
              readOnly
              style={{
                borderColor: "var(--brand-053m)",
                boxShadow: "0 0 0 3px rgba(126,207,202,0.2)",
              }}
            />
          </StateCard>
        </div>
      </Section>

      {/* 3. Select */}
      <Section
        id="select"
        title="Выпадающий список"
        subtitle="Выбор из предопределённых вариантов. Класс .bb-select. Высота 50px — как в entityform на сайте."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <StateCard label="Default" hint="height: 50px · кастомная стрелка SVG">
            <FieldLabel text="Специализация" />
            <select className="bb-select">
              <option value="">Выберите специализацию</option>
              <option value="lor">ЛОР — ухо, горло, нос</option>
              <option value="aud">Аудиология</option>
              <option value="ped">ЛОР (детская)</option>
            </select>
          </StateCard>

          <StateCard label="Выбрано значение" hint="Нативное поведение браузера">
            <FieldLabel text="Специализация" />
            <select className="bb-select" defaultValue="lor">
              <option value="">Выберите специализацию</option>
              <option value="lor">ЛОР — ухо, горло, нос</option>
              <option value="aud">Аудиология</option>
              <option value="ped">ЛОР (детская)</option>
            </select>
          </StateCard>
        </div>
      </Section>

      {/* 4. Checkbox */}
      <Section
        id="checkbox"
        title="Флажок"
        subtitle="Независимый выбор одного или нескольких вариантов. Класс .bb-checkbox."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <StateCard label="Одиночный флажок" hint="Согласие с условиями, подтверждение">
            <div className="flex flex-col gap-3">
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" className="bb-checkbox" />
                <span className="text-sm" style={{ color: "var(--bb-text)" }}>
                  Согласен с условиями
                </span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" className="bb-checkbox" defaultChecked />
                <span className="text-sm" style={{ color: "var(--bb-text)" }}>
                  Получать уведомления
                </span>
              </label>
              <label
                className="flex items-center gap-2"
                style={{ opacity: 0.5, cursor: "not-allowed" }}
              >
                <input type="checkbox" className="bb-checkbox" disabled />
                <span className="text-sm" style={{ color: "var(--bb-text)" }}>
                  Недоступная опция
                </span>
              </label>
            </div>
          </StateCard>

          <StateCard label="Группа флажков" hint="Выбор нескольких специализаций">
            <FieldLabel text="Интересующие направления" />
            <div className="flex flex-col gap-2.5 mt-1">
              {["ЛОР — ухо, горло, нос", "Аудиология", "ЛОР (детская)", "Слухопротезирование"].map(
                (item, i) => (
                  <label key={item} className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      className="bb-checkbox"
                      defaultChecked={i === 0}
                    />
                    <span className="text-sm" style={{ color: "var(--bb-text)" }}>
                      {item}
                    </span>
                  </label>
                )
              )}
            </div>
          </StateCard>
        </div>
      </Section>

      {/* 5. Radio */}
      <Section
        id="radio"
        title="Переключатель варианта"
        subtitle="Выбор одного из взаимоисключающих вариантов. Класс .bb-radio."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <StateCard label="Тип приёма" hint="Один выбранный из нескольких">
            <FieldLabel text="Тип приёма" />
            <div className="flex flex-col gap-2.5 mt-1" role="radiogroup">
              {[
                { value: "first", label: "Первичный приём", checked: true },
                { value: "repeat", label: "Повторный приём", checked: false },
                { value: "online", label: "Онлайн-консультация", checked: false },
              ].map(({ value, label, checked }) => (
                <label key={value} className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="radio"
                    className="bb-radio"
                    name="visit-type-demo"
                    defaultChecked={checked}
                  />
                  <span className="text-sm" style={{ color: "var(--bb-text)" }}>
                    {label}
                  </span>
                </label>
              ))}
            </div>
          </StateCard>

          <StateCard label="С отключённым вариантом" hint="disabled скрывает недоступный выбор">
            <FieldLabel text="Способ контакта" />
            <div className="flex flex-col gap-2.5 mt-1" role="radiogroup">
              {[
                { value: "phone", label: "Телефон", disabled: false, checked: true },
                { value: "sms", label: "SMS", disabled: false, checked: false },
                { value: "whatsapp", label: "WhatsApp (скоро)", disabled: true, checked: false },
              ].map(({ value, label, disabled, checked }) => (
                <label
                  key={value}
                  className="flex items-center gap-2"
                  style={{ cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1 }}
                >
                  <input
                    type="radio"
                    className="bb-radio"
                    name="contact-demo"
                    disabled={disabled}
                    defaultChecked={checked}
                  />
                  <span className="text-sm" style={{ color: "var(--bb-text)" }}>
                    {label}
                  </span>
                </label>
              ))}
            </div>
          </StateCard>
        </div>
      </Section>

      {/* 6. Toggle */}
      <Section
        id="toggle"
        title="Тумблер"
        subtitle="Булевый переключатель «включено / выключено». Компонент Toggle."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div
            className="rounded-xl border p-5"
            style={{ borderColor: "var(--bb-border)" }}
          >
            <p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}>
              Интерактивные примеры
            </p>
            <div className="flex flex-col gap-4">
              <Toggle label="Получать уведомления" />
              <Toggle defaultChecked label="Email-рассылка" />
              <Toggle defaultChecked label="Push-уведомления" />
              <Toggle disabled label="Недоступная настройка" />
            </div>
          </div>

          <div
            className="rounded-xl border p-5"
            style={{ borderColor: "var(--bb-border)" }}
          >
            <p className="text-sm font-medium mb-4" style={{ color: "var(--bb-text)" }}>
              Состояния
            </p>
            <div className="flex flex-col gap-4">
              <div className="flex items-center justify-between">
                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Выкл (default)</span>
                <Toggle />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Вкл (defaultChecked)</span>
                <Toggle defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled</span>
                <Toggle disabled />
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm" style={{ color: "var(--bb-text-muted)" }}>Disabled + вкл</span>
                <Toggle disabled defaultChecked />
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* 7. Контекст на сайте */}
      <Section
        id="context"
        title="Контекст применения"
        subtitle="Как форм-контролы выглядят на сайте oclinica.ru — в реальных entityform-блоках."
      >
        <div className="overflow-x-auto mb-6">
          <table className="w-full text-sm border-collapse">
            <thead>
              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
                {["Контрол", "CSS класс", "Где на сайте", "CSS-блок на сайте"].map((h) => (
                  <th
                    key={h}
                    className="text-left px-3 py-2 font-semibold text-xs uppercase tracking-wide"
                    style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Input (text)", ".bb-input", "Форма записи ЛОР, форма хирургии, «Узнайте стоимость»", "#block-entityform-block-lor-form input[type=text]"],
                ["Select", ".bb-select", "Выбор врача в форме записи", ".field-name-field-lor-vrach .form-control.form-select"],
                ["Checkbox", ".bb-checkbox", "Согласие на обработку данных в entityform", ".form-type-checkbox.checkbox label"],
                ["Textarea", ".bb-textarea", "Комментарии (в ряде форм)", "Без специального CSS на сайте (Bootstrap)"],
                ["Toggle", ".bb-toggle-track", "Не используется на сайте (UI-компонент брендбука)", "—"],
              ].map(([ctrl, cls, where, block]) => (
                <tr key={ctrl} style={{ borderBottom: "1px solid var(--bb-border)" }}>
                  <td className="px-3 py-2.5 font-medium" style={{ color: "var(--bb-text)" }}>{ctrl}</td>
                  <td className="px-3 py-2.5">
                    <code className="text-xs px-1.5 py-0.5 rounded" style={{ background: "var(--bb-sidebar-bg)", color: "var(--brand-073m)" }}>{cls}</code>
                  </td>
                  <td className="px-3 py-2.5 text-xs" style={{ color: "var(--bb-text-muted)" }}>{where}</td>
                  <td className="px-3 py-2.5">
                    <code className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{block}</code>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Макет формы как на сайте */}
        <div className="rounded-xl overflow-hidden border" style={{ borderColor: "var(--bb-border)" }}>
          <div className="px-4 py-2 text-xs font-semibold uppercase tracking-widest" style={{ background: "var(--bb-sidebar-bg)", color: "var(--bb-text-muted)" }}>
            Макет — entityform «Узнайте стоимость операции» (oclinica.ru/lor)
          </div>
          <div style={{ background: "#b8e6ed", padding: "32px 24px" }}>
            <div
              className="mx-auto"
              style={{
                maxWidth: 340,
                background: "#b8e6ed",
                textAlign: "center",
              }}
            >
              <p className="text-sm font-semibold mb-4" style={{ color: "#333", fontFamily: "var(--font-web)" }}>
                Узнайте стоимость операции
              </p>
              <div className="flex flex-col gap-3" style={{ alignItems: "center" }}>
                <input
                  className="bb-input"
                  type="text"
                  placeholder="Ваше имя"
                  style={{ width: 302 }}
                  readOnly
                />
                <input
                  className="bb-input"
                  type="text"
                  placeholder="Ваш телефон"
                  style={{ width: 302 }}
                  readOnly
                />
                <select className="bb-select" style={{ width: 302 }}>
                  <option>Выберите врача</option>
                  <option>Иванов И.И.</option>
                </select>
                <button className="bb-btn bb-btn-lg bb-btn-primary" style={{ width: 300 }}>
                  Запишите меня!
                </button>
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* 8. Примеры кода */}
      <Section
        id="code"
        title="Примеры кода"
        subtitle="Скопируйте HTML или JSX для использования в проекте."
      >
        <div className="space-y-4">
          <CodeCopy lang="HTML — Input" code={codeInput} />
          <CodeCopy lang="HTML — Textarea" code={codeTextarea} />
          <CodeCopy lang="HTML — Select" code={codeSelect} />
          <CodeCopy lang="HTML — Checkbox" code={codeCheckbox} />
          <CodeCopy lang="HTML — Radio" code={codeRadio} />
          <CodeCopy lang="JSX (React) — Toggle" code={codeToggle} />
          <CodeCopy lang="CSS с сайта (perm.oclinica.ru)" code={codeSiteCSS} />
        </div>
      </Section>

      {/* LLM-блок */}
      <LlmBlock path="/components/forms" version="v2.0" specText={LLM_FORMS_TEXT}>
        <LlmSection title="Элементы ввода" />
        <LlmTable
          headers={["Элемент", "CSS класс", "Тег", "Высота", "Описание"]}
          rows={[
            ["Input", ".bb-input", "<input>", "50px", "Текстовое поле, email, password · как на сайте"],
            ["Textarea", ".bb-textarea", "<textarea>", "≥100px", "Многострочный ввод, resize:vertical"],
            ["Select", ".bb-select", "<select>", "50px", "Выбор из списка, кастомная стрелка · как на сайте"],
            ["Checkbox", ".bb-checkbox", "<input type=checkbox>", "16×16px", "Независимый выбор"],
            ["Radio", ".bb-radio", "<input type=radio>", "16×16px", "Выбор одного из группы"],
            ["Toggle", ".bb-toggle-track", "React-компонент", "24px", "Булев переключатель"],
          ]}
        />
        <LlmSection title="Состояния полей (Input / Textarea / Select)" />
        <LlmTable
          headers={["Состояние", "Стиль"]}
          rows={[
            ["default", "border: 1px solid #ccc · border-radius: 4px"],
            ["focus", "border: #7ecfca + box-shadow: 0 0 0 3px rgba(126,207,202,0.2)"],
            ["error", "border: #dc2626 (+ класс .bb-error)"],
            ["disabled", "opacity: 0.5 + cursor: not-allowed + bg: #f8f9fa"],
          ]}
        />
        <LlmSection title="Параметры Toggle" />
        <LlmTable
          headers={["Параметр", "Тип", "По умолч.", "Описание"]}
          rows={[
            ["defaultChecked", "boolean", "false", "Начальное состояние"],
            ["disabled", "boolean", "false", "Блокирует взаимодействие"],
            ["label", "string", "—", "Текстовая метка справа от тумблера"],
            ["onChange", "(checked: boolean) => void", "—", "Колбэк при изменении"],
          ]}
        />
        <LlmSection title="Правила применения" />
        <LlmRules
          rules={[
            { ok: true, text: "Метка (label) всегда над полем, font-weight: 500" },
            { ok: true, text: "Обязательные поля помечены * красным (#dc2626)" },
            { ok: true, text: "Hint-текст серым под полем (font-size: 12px)" },
            { ok: true, text: "Ошибка — красный текст вместо hint" },
            { ok: true, text: "Checkbox-группы — вертикальный список с gap: 10px" },
            { ok: true, text: "Toggle — для булевых настроек включить/выключить" },
            { ok: false, text: "Не использовать placeholder вместо label" },
            { ok: false, text: "Не скрывать признак обязательности поля" },
          ]}
        />
      </LlmBlock>
    </div>
  );
}
