// ui-kit-gallery.jsx — the /ui-kit page.
// A live gallery of the sbor/ka component library (window.UI.*). Every
// specimen below is the SAME component the website renders — not a mock.

const { useState } = React;

/* ---- presentation helpers (gallery only) ---- */
const Spec = ({ name, note, body, children }) => (
  <div className="spec">
    <div className="spec-label"><span className="name">{name}</span>{note && <span className="note">{note}</span>}</div>
    <div className={UI.cx("spec-body", body)}>{children}</div>
  </div>
);
const KitSection = ({ id, n, title, meta, children }) => (
  <section className="kit-section" id={id}>
    <div className="kit-section-head"><div className="n">{n}</div><h2>{title}</h2><div className="meta">{meta}</div></div>
    {children}
  </section>
);
const State = ({ tag, children }) => (
  <div className="state-row"><span className="state-tag">{tag}</span>{children}</div>
);

/* ---- small interactive demos (prove the components are live) ---- */
const TabsDemo = () => {
  const tabs = [
    { id: "all", label: "все", count: "217" },
    { id: "reportage", label: "репортажи", count: "64" },
    { id: "guides", label: "гиды", count: "52" },
    { id: "interviews", label: "интервью", count: "41" },
    { id: "columns", label: "колонки", count: "60" },
  ];
  const [v, set] = useState("all");
  return <UI.Tabs tabs={tabs} value={v} onChange={set} />;
};
const SegWeek = () => { const [v, set] = useState("эта неделя"); return <UI.Segmented options={["сегодня", "эта неделя", "месяц"]} value={v} onChange={set} />; };
const SegLang = () => { const [v, set] = useState("все"); return <UI.Segmented options={["все", "рус", "анг", "исп"]} value={v} onChange={set} />; };
const ChipsDemo = () => {
  const all = ["все", "медиа", "курсы", "юрпомощь", "события", "гиды", "интервью"];
  const [on, setOn] = useState({ "все": true, "юрпомощь": true });
  return <>{all.map((c) => <UI.Chip key={c} on={!!on[c]} onClick={() => setOn((s) => ({ ...s, [c]: !s[c] }))}>{c}</UI.Chip>)}</>;
};
const LangDemo = () => { const [v, set] = useState("ru"); return <UI.LangSwitch langs={["ru", "en", "ca", "es"]} value={v} onChange={set} />; };
const SwitchRow = ({ label, def }) => { const [on, set] = useState(def); return <div style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--sb-font-display)", fontSize: 17 }}><UI.Switch on={on} onClick={() => set((x) => !x)} />{label}</div>; };

/* ---- the gallery ---- */
const UIKitGallery = () => (
  <div className="kit">

    <header className="kit-head">
      <div className="brand">
        <UI.Logo variant="cyrillic" height={34} />
        <div className="sub">дизайн-система сбор/ки · версия 1.0</div>
      </div>
      <div className="v">
        <span className="tag ink">[компоненты]</span>
        <a className="tag bone back" href="index.html">← на сайт</a>
      </div>
    </header>

    <nav className="kit-toc">
      <a href="#brand"><span className="n">01</span><span>бренд</span></a>
      <a href="#foundations"><span className="n">02</span><span>основы</span></a>
      <a href="#actions"><span className="n">03</span><span>действия</span></a>
      <a href="#forms"><span className="n">04</span><span>формы</span></a>
      <a href="#nav"><span className="n">05</span><span>навигация</span></a>
    </nav>
    <nav className="kit-toc">
      <a href="#cards"><span className="n">06</span><span>карточки</span></a>
      <a href="#motif"><span className="n">07</span><span>мотив</span></a>
      <a href="#data"><span className="n">08</span><span>данные</span></a>
      <a href="#feedback"><span className="n">09</span><span>обратная связь</span></a>
      <a href="#icons"><span className="n">10</span><span>иконки</span></a>
    </nav>

    {/* 01 — BRAND */}
    <KitSection id="brand" n="01" title="бренд · логотип" meta="словесный знак — основной. отдельный символ используем только для фавиконки и маленьких носителей.">
      <Spec name="словесный знак · варианты" note="на русских экранах — кириллица, на остальных — латиница. минимальная высота — 24px." body="flush">
        <div className="g-brand">
          <div className="g-cell"><span className="caption">молочный · основной</span><UI.Logo variant="cyrillic" height={48} alt="сбор/ка" /></div>
          <div className="g-cell"><span className="caption">молочный · латиница</span><UI.Logo variant="latin" height={48} /></div>
          <div className="g-cell ink"><span className="caption">черный · выворотка</span><UI.Logo variant="latin" height={48} /></div>
          <div className="g-cell red"><span className="caption">красный · кампания</span><UI.Logo variant="latin" height={48} /></div>
          <div className="g-cell yellow"><span className="caption">жёлтый</span><UI.Logo variant="latin" height={48} /></div>
          <div className="g-cell coral"><span className="caption">персиковый</span><UI.Logo variant="latin" height={48} /></div>
          <div className="g-cell peri"><span className="caption">синий</span><UI.Logo variant="latin" height={48} /></div>
          <div className="g-cell teal"><span className="caption">хвойный</span><UI.Logo variant="latin" height={48} /></div>
        </div>
      </Spec>
      <Spec name="знак · отдельно" note="для аватаров, фавиконки и маленьких иконок в соцсетях." body="flush">
        <div className="g-brand">
          <div className="g-cell"><UI.Logo variant="mark" height={70} /></div>
          <div className="g-cell ink"><UI.Logo variant="mark" height={70} /></div>
          <div className="g-cell red"><UI.Logo variant="mark" height={70} /></div>
          <div className="g-cell yellow"><UI.Logo variant="mark" height={70} /></div>
        </div>
      </Spec>
    </KitSection>

    {/* 02 — FOUNDATIONS */}
    <KitSection id="foundations" n="02" title="основы" meta="шесть основных цветов, четыре мягких акцента, две гарнитуры и один квадратный модуль.">
      <Spec name="основная палитра" note="базовая палитра для плиток, типографики и главных кнопок. без градиентов, теней и дополнительных оттенков." body="flush">
        <div className="g-swatch-row" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
          {UI.PALETTE.primary.map((c) => (
            <div key={c.name} className="g-swatch" style={{ background: c.hex, color: c.fg }}><div className="n">{c.name}</div><div className="hex">{c.hex}</div></div>
          ))}
        </div>
      </Spec>
      <Spec name="дополнительная палитра" note="мягкие акценты. используем дозированно, чтобы не перегружать раскладку." body="flush">
        <div className="g-swatch-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {UI.PALETTE.secondary.map((c) => (
            <div key={c.name} className="g-swatch" style={{ background: c.hex, color: c.fg }}><div className="n">{c.name}</div><div className="hex">{c.hex}</div></div>
          ))}
        </div>
      </Spec>
      <Spec name="типографика" note="крупные тексты — фирменной гарнитурой, интерфейс — отдельным шрифтом для служебных элементов. всё набрано строчными.">
        <div className="g-type">
          {UI.TYPE_SCALE.map((r, i) => (
            <div className="row" key={i}><div className="sz">{r.sz}</div><div className="specimen" style={r.style}>{r.sample}</div><div className="desc">{r.desc}</div></div>
          ))}
        </div>
      </Spec>
      <Spec name="сетка · модуль" note="базовый модуль — квадрат 126px. плитки собираются вплотную, без зазоров и скруглений." body="flush">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)" }}>
          <div style={{ aspectRatio: 1, background: "var(--sb-ink)", color: "var(--sb-bone)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10 }}>1×1</div>
          <div style={{ aspectRatio: 1, background: "var(--sb-yellow)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10 }}>1×1</div>
          <div style={{ aspectRatio: 2, gridColumn: "span 2", background: "var(--sb-red)", color: "var(--sb-bone)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10, display: "flex", alignItems: "flex-end" }}>2×1</div>
          <div style={{ aspectRatio: 1, background: "var(--sb-coral)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10 }}>1×1</div>
          <div style={{ aspectRatio: 1, background: "var(--sb-teal)", color: "var(--sb-bone)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10 }}>1×1</div>
          <div style={{ gridColumn: "span 2", gridRow: "span 2", background: "var(--sb-periwinkle)", padding: 14, fontFamily: "var(--sb-font-ui)", fontSize: 10, display: "flex", alignItems: "flex-end" }}>2×2</div>
          <div style={{ aspectRatio: 1, background: "var(--sb-yellow)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10 }}>1×1</div>
          <div style={{ aspectRatio: 1 }}><div className="tile-stripes" style={{ width: "100%", height: "100%" }} /></div>
          <div style={{ aspectRatio: 2, gridColumn: "span 2", background: "var(--sb-coral)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10, display: "flex", alignItems: "flex-end" }}>2×1</div>
          <div style={{ aspectRatio: 1, background: "var(--sb-ink)", color: "var(--sb-bone)", padding: 10, fontFamily: "var(--sb-font-ui)", fontSize: 10 }}>1×1</div>
        </div>
      </Spec>
    </KitSection>

    {/* 03 — ACTIONS */}
    <KitSection id="actions" n="03" title="действия" meta="кнопки — плоские прямоугольники без скруглений и теней. при наведении меняется только заливка.">
      <Spec name="кнопка · четыре варианта" note="основная — чёрная, акцентная — красная, вторичная — контур, третичная — без фона." body="tight">
        <State tag="основная · чёрная"><UI.Button>оставь заявку</UI.Button></State>
        <State tag="акцент · красный"><UI.Button variant="red">записаться</UI.Button></State>
        <State tag="контур"><UI.Button variant="outline">читать журнал</UI.Button></State>
        <State tag="прозрачная"><UI.Button variant="ghost" arrow>все события</UI.Button></State>
      </Spec>
      <Spec name="кнопка · дополнительные" note="редкие акцентные варианты и выключенное состояние." body="tight">
        <State tag="акцент · жёлтый"><UI.Button variant="yellow">подписаться</UI.Button></State>
        <State tag="акцент · коралл"><UI.Button variant="coral">посмотреть афишу</UI.Button></State>
        <State tag="выключено"><UI.Button variant="disabled">скоро откроем</UI.Button></State>
      </Spec>
      <Spec name="кнопка · размеры" note="четыре размера: 13, 22, 24 и 34px. всё строчными и в фирменной гарнитуре." body="mid">
        <UI.Button size="sm">малый размер</UI.Button>
        <UI.Button>основное действие</UI.Button>
        <UI.Button size="lg">посмотреть расписание</UI.Button>
        <UI.Button size="xl" variant="red" arrow>оставить заявку</UI.Button>
      </Spec>
      <Spec name="икон-кнопки" note="квадратные кнопки 44 или 56px. только фирменные стрелки и служебные глифы." body="mid">
        <UI.IconButton><UI.Icon name="arrow-r" size={20} /></UI.IconButton>
        <UI.IconButton><UI.Icon name="arrow-l" size={20} /></UI.IconButton>
        <UI.IconButton><UI.Icon name="plus" size={20} /></UI.IconButton>
        <UI.IconButton><UI.Icon name="close" size={20} /></UI.IconButton>
        <UI.IconButton surface="bone"><UI.Icon name="arrow-r" size={20} /></UI.IconButton>
        <UI.IconButton surface="bone"><UI.Icon name="arrow-up-r" size={20} /></UI.IconButton>
        <UI.IconButton size="lg"><UI.Icon name="search" size={24} /></UI.IconButton>
      </Spec>
      <Spec name="бейджи · теги" note="компактные метки для тем, форматов и служебных состояний." body="tight mid">
        <UI.Tag>репортаж</UI.Tag>
        <UI.Tag color="coral">гид</UI.Tag>
        <UI.Tag color="peri">интервью</UI.Tag>
        <UI.Tag color="yellow">колонка</UI.Tag>
        <UI.Tag color="teal">новости</UI.Tag>
        <UI.Tag color="outline">все темы</UI.Tag>
        <UI.PillNum>3</UI.PillNum>
        <UI.PillNum ink>12</UI.PillNum>
      </Spec>
      <Spec name="бейджи в скобках" note="крупные метки в скобках для разделов и форматов." body="tight mid">
        <UI.BracketBadge color="red">лекция</UI.BracketBadge>
        <UI.BracketBadge color="peri">воркшоп</UI.BracketBadge>
        <UI.BracketBadge color="teal">встреча</UI.BracketBadge>
        <UI.BracketBadge color="yellow">гид</UI.BracketBadge>
        <UI.BracketBadge color="coral">интервью</UI.BracketBadge>
      </Spec>
      <Spec name="чипсы · фильтр" note="фильтры для тем и подборок. клик меняет состояние." body="tight">
        <ChipsDemo />
      </Spec>
    </KitSection>

    {/* 04 — FORMS */}
    <KitSection id="forms" n="04" title="формы · поля" meta="поля — часть сетки, а не отдельные карточки. подписи сверху, 11px.">
      <Spec name="текстовые поля · ячейки" note="основной вариант для длинных форм: молочный фон, жёлтый фокус, персиковая ошибка." body="flush">
        <UI.FieldGrid>
          <UI.Field label="имя · пустое" placeholder="как к тебе обращаться" />
          <UI.Field label="контакт · в фокусе" state="focus" defaultValue="@andr.bcn" />
          <UI.Field label="город · заполнено" defaultValue="барселона, грасия" />
          <UI.Field label="почта · ошибка" state="error" defaultValue="andrew@@" />
          <UI.Field wide multiline label="что нужно? · многострочное поле" defaultValue="нужен tie: запись уже на 12 марта, хочу сопровождение в полицию" />
          <UI.Field label="уровень · список" options={["b1 · работа и учёба", "a1", "a2", "b2"]} />
          <UI.Field state="disabled" label="внутренний код · поле выключено" placeholder="сейчас недоступно" />
        </UI.FieldGrid>
      </Spec>
      <Spec name="чекбокс · радио" note="квадрат — для множественного выбора, круг — для одного варианта. активное состояние — красное.">
        <div style={{ display: "flex", gap: 48 }}>
          <div className="box-row">
            <UI.Check on label="документы · TIE" /><UI.Check on label="документы · NIE" />
            <UI.Check label="резиденция" /><UI.Check label="перевод документов" />
          </div>
          <div className="box-row">
            <UI.Radio on label="испанский" /><UI.Radio label="каталанский" /><UI.Radio label="русский для детей" />
          </div>
        </div>
      </Spec>
      <Spec name="переключатель · сегменты" note="переключатель — для да/нет, сегменты — для 2–4 взаимоисключающих режимов." body="mid">
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <SwitchRow label="получать еженедельную рассылку" def={true} />
          <SwitchRow label="получать пуш-уведомления" def={false} />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}><SegLang /><SegWeek /></div>
      </Spec>
      <Spec name="поиск" note="строка поиска с кнопкой вплотную к полю. действие — чёрной плашкой." body="mid">
        <UI.Search placeholder="найти материал или событие" />
      </Spec>
    </KitSection>

    {/* 05 — NAVIGATION */}
    <KitSection id="nav" n="05" title="навигация" meta="шапка сайта, хлебные крошки, вкладки, пагинация и выбор языка. всё набрано строчными.">
      <Spec name="основная навигация" note="словесный знак, ссылки и переключатель языка 2×2. активный пункт — чёрная плашка." body="flush">
        <UI.NavBar logoVariant="cyrillic" lang="ru" langs={["ru", "en", "ca", "es"]}
          links={[{ label: "медиа", active: true }, { label: "курсы" }, { label: "юрпомощь" }, { label: "события" }, { label: "о нас" }]} />
      </Spec>
      <Spec name="вкладки" note="вкладки для фильтров внутри страницы. состояние меняется по клику."><TabsDemo /></Spec>
      <Spec name="хлебные крошки" note="интерфейсный шрифт 11px, разделитель — слэш.">
        <UI.Breadcrumb items={["медиа", "гиды", "TIE за 8 шагов"]} />
      </Spec>
      <Spec name="пагинация" note="тот же язык состояний, что и у остальных контролов: нейтрально, жёлтый при наведении, чёрный в активном состоянии.">
        <UI.Paginator current="2" pages={["←", "1", "2", "3", "4", "…", "18", "→"]} />
      </Spec>
      <Spec name="язык" note="тот же 2×2 переключатель, что и в шапке сайта."><LangDemo /></Spec>
    </KitSection>

    {/* 06 — CARDS */}
    <KitSection id="cards" n="06" title="карточки · плитки" meta="карточки для материалов, событий, цифр и курсов. каждая — простой цветной блок.">
      <Spec name="редакционная карточка" note="формат в скобках, затем заголовок и подпись. используется в медиасетке на главной." body="flush">
        <div className="g-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          <UI.ArtCard color="yellow" fmt="репортаж" title="как я пошёл на каталанский и перестал бояться ошибок" author="андрей колганов" meta="12 мин · 02.03" />
          <UI.ArtCard color="coral" fmt="гид" title="tie за 8 шагов: что подготовить и куда идти" author="редакция" meta="8 мин" />
          <UI.ArtCard color="peri" fmt="интервью" title="неловкие вопросы о жизни в барселоне" author="маша аксенова" meta="18 мин" />
          <UI.ArtCard color="ink" fmt="колонка" title="без языка в барселоне можно жить. вопрос — как" author="редакция" meta="6 мин" />
        </div>
      </Spec>
      <Spec name="карточка события" note="формат и время, затем заголовок и блок с местом и датой. используется в сетке событий на главной." body="flush">
        <div className="g-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          <UI.EventCard color="peri" tag="лекция" time="20:00" title="неудобные вопросы с машей" place="грасиа · соседнее кафе" date="чт · 02.03" />
          <UI.EventCard color="coral" tag="воркшоп" time="12:00" title="резюме по-испански: правим вместе" place="онлайн" date="сб · 04.03" />
          <UI.EventCard color="yellow" tag="встреча" time="19:30" title="родители в барселоне: школы и кружки" place="побленоу · соседский клуб" date="пт · 03.03" />
          <UI.EventCard color="teal" tag="экскурсия" time="11:00" title="прогулка по готическому кварталу" place="старый город" date="вс · 05.03" />
        </div>
      </Spec>
      <Spec name="плитка события · календарь" note="квадратная плитка с днём и временем для календарной сетки." body="flush">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, background: "transparent" }}>
          <UI.EventTile color="teal" fmt="лекция" day="четверг" time="20:00" />
          <UI.EventTile color="red" fmt="воркшоп" day="суббота" time="12:00" />
          <UI.EventTile color="peri" fmt="встреча" day="пятница" time="19:30" />
          <UI.EventTile color="yellow" fmt="экскурсия" day="воскресенье" time="11:00" />
        </div>
      </Spec>
      <Spec name="плитка цифр" note="крупное число и короткая подпись. используется в блоке с цифрами на главной." body="flush">
        <div className="g-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          <UI.StatCard color="yellow" lab="[участники]" num="4 812" desc="подписчиков в телеграме" />
          <UI.StatCard color="coral" lab="[медиа]" num="217" desc="текстов в журнале" />
          <UI.StatCard color="ink" lab="[события]" num="130" desc="событий с начала 2024 года" />
          <UI.StatCard color="peri" lab="[юридическое]" num="89%" desc="дел довели до результата" />
        </div>
      </Spec>
      <Spec name="карточка курса" note="крупный код уровня и мотив. используется в блоке курсов на главной." body="flush">
        <div className="g-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          <UI.CourseCard color="peri" code="A1" title="испанский с нуля" lang="испанский" weeks="12 недель" motif={0} />
          <UI.CourseCard color="coral" code="A2" title="базовый каталанский" lang="каталанский" weeks="10 недель" motif={1} />
          <UI.CourseCard color="yellow" code="B1" title="испанский для работы и учёбы" lang="испанский" weeks="14 недель" motif={2} />
          <UI.CourseCard color="teal" code="B2" title="русский для детей" lang="детская группа" weeks="сб · €120/мес" motif={3} />
        </div>
      </Spec>
    </KitSection>

    {/* 07 — MOTIF */}
    <KitSection id="motif" n="07" title="мотив · плитки" meta="паттерны собираются из тех же модулей, что и на сайте.">
      <Spec name="плиточные примитивы" note="базовые модули: круги, шахматка, точки, полосы и цветок. у каждого можно менять цветовую пару." body="flush">
        <div className="g-motif">
          <div className="cell"><span className="label">круги 2×2</span><window.DotGrid bg="var(--sb-bone)" dot="var(--sb-red)" n={2} /></div>
          <div className="cell"><span className="label">круги 2×2 · синий</span><window.DotGrid bg="var(--sb-yellow)" dot="var(--sb-periwinkle)" n={2} /></div>
          <div className="cell"><span className="label">цветок</span><window.FlowerTile bg="var(--sb-yellow)" petal="var(--sb-coral)" core="var(--sb-red)" /></div>
          <div className="cell"><span className="label">шахматка</span><window.Checker a="var(--sb-red)" b="var(--sb-yellow)" n={2} /></div>
          <div className="cell"><span className="label">шахматка · хвойный</span><window.Checker a="var(--sb-teal)" b="var(--sb-bone)" n={2} /></div>
          <div className="cell"><span className="label">точки 2×2</span><window.DotGrid bg="var(--sb-yellow)" dot="var(--sb-red)" n={2} /></div>
          <div className="cell"><span className="label">полосы · вертикаль</span><window.Stripes dir="v" c1="var(--sb-yellow)" c2="var(--sb-red)" bands={8} /></div>
          <div className="cell"><span className="label">полосы · горизонталь</span><window.Stripes dir="h" c1="var(--sb-yellow)" c2="var(--sb-red)" bands={8} /></div>
          <div className="cell"><span className="label">полосы · синий</span><window.Stripes dir="h" c1="var(--sb-periwinkle)" c2="var(--sb-coral)" bands={8} /></div>
          <div className="cell"><span className="label">точки · 3×3</span><window.DotGrid bg="var(--sb-coral)" dot="var(--sb-ink)" n={3} /></div>
          <div className="cell" style={{ background: "var(--sb-periwinkle)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--sb-font-display)", fontSize: 100, letterSpacing: "-0.06em", lineHeight: 0.85 }}><span className="label">цифра</span>03</div>
          <div className="cell" style={{ background: "var(--sb-ink)", color: "var(--sb-bone)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--sb-font-display)", fontSize: 100, letterSpacing: "-0.05em" }}><span className="label">слэш</span>/</div>
        </div>
      </Spec>
      <Spec name="полоса на всю ширину" note="из таких модулей собираются разделители и полосы между секциями." body="flush">
        <div style={{ width: "100%", height: 189 }}>
          <window.TilePanel cols={8} rows={1} cells={[
            { kind: "stripes", dir: "v", c1: "var(--sb-yellow)", c2: "var(--sb-red)", bands: 8 },
            { kind: "check", a: "var(--sb-periwinkle)", b: "var(--sb-teal)", n: 2 },
            { kind: "flower", bg: "var(--sb-coral)", petal: "var(--sb-yellow)", core: "var(--sb-red)" },
            { kind: "dots", bg: "var(--sb-yellow)", dot: "var(--sb-red)", n: 2 },
            { kind: "check", a: "var(--sb-red)", b: "var(--sb-yellow)", n: 2 },
            { kind: "stripes", dir: "h", c1: "var(--sb-periwinkle)", c2: "var(--sb-coral)", bands: 8 },
            { kind: "dots", bg: "var(--sb-teal)", dot: "var(--sb-bone)", n: 2 },
            { kind: "flower", bg: "var(--sb-coral)", petal: "var(--sb-bone)", core: "var(--sb-red)" },
          ]} />
        </div>
      </Spec>
    </KitSection>

    {/* 08 — DATA */}
    <KitSection id="data" n="08" title="данные · служебное" meta="таблицы, аватары и прогресс. для списков, кабинетов и внутренних экранов.">
      <Spec name="список · таблица" note="базовый шаблон для списков и расписаний: заголовок, строки и статусные метки.">
        <UI.List head={["#", "название", "формат", "дата", "статус"]} rows={[
          ["01", <span className="ttl">неудобные вопросы с машей</span>, "лекция", "чт · 20:00", <span className="st live">сейчас</span>],
          ["02", <span className="ttl">резюме по-испански: правим вместе</span>, "воркшоп", "сб · 12:00", <span className="st soon">скоро</span>],
          ["03", <span className="ttl">родители в барселоне: школы и кружки</span>, "встреча", "пт · 19:30", <span className="st soon">скоро</span>],
          ["04", <span className="ttl">прогулка по готическому кварталу</span>, "экскурсия", "вс · 11:00", <span className="st soon">скоро</span>],
          ["05", <span className="ttl">книжный клуб · толстая тетрадь</span>, "клуб", "ср · 19:00", <span className="st done">прошло</span>],
        ]} />
      </Spec>
      <Spec name="аватар · стопка" note="инициалы набираем фирменной гарнитурой. в стопке — лёгкий нахлёст и светлый контур." body="tight mid">
        <UI.Avatar>м</UI.Avatar>
        <UI.Avatar color="coral">ак</UI.Avatar>
        <UI.Avatar color="peri">ан</UI.Avatar>
        <UI.Avatar color="teal">ол</UI.Avatar>
        <UI.Avatar color="ink">сб</UI.Avatar>
        <UI.Avatar lg>мк</UI.Avatar>
        <span style={{ width: 32 }} />
        <UI.AvatarStack>
          <UI.Avatar>м</UI.Avatar><UI.Avatar color="coral">ак</UI.Avatar><UI.Avatar color="peri">ан</UI.Avatar>
          <UI.Avatar color="teal">ол</UI.Avatar><UI.Avatar color="ink" style={{ fontFamily: "var(--sb-font-ui)", fontSize: 13 }}>+8</UI.Avatar>
        </UI.AvatarStack>
      </Spec>
      <Spec name="прогресс · загрузчик" note="сплошная полоса — для обычного прогресса, полосатая — для неопределённой загрузки. лоадер — сетка 2×2." body="mid">
        <UI.Progress value={65} caption="tie · собрали 65% документов" />
        <UI.Progress value={100} stripes caption="загрузка…" />
        <div><UI.Loader /><div className="sb-caption" style={{ marginTop: 8, opacity: 0.6 }}>загрузка</div></div>
      </Spec>
      <Spec name="клавиатура · шорткаты" note="моноширинный шрифт, молочный фон и тонкая чёрная линия." body="mid">
        <span style={{ fontFamily: "var(--sb-font-ui)", fontSize: 13 }}><kbd>⌘</kbd> <kbd>K</kbd> поиск по сайту</span>
        <span style={{ fontFamily: "var(--sb-font-ui)", fontSize: 13 }}><kbd>Esc</kbd> закрыть окно</span>
        <span style={{ fontFamily: "var(--sb-font-ui)", fontSize: 13 }}><kbd>←</kbd> <kbd>→</kbd> переключать карточки</span>
      </Spec>
    </KitSection>

    {/* 09 — FEEDBACK */}
    <KitSection id="feedback" n="09" title="обратная связь" meta="тосты, алерты и пустые состояния. коротко, спокойно, по делу.">
      <Spec name="тосты" note="временные сообщения снизу экрана. базовый вариант — чёрный, акцент зависит от ситуации." body="tight">
        <UI.Toast>заявка отправлена — ответим в течение дня</UI.Toast>
        <UI.Toast color="yellow">черновик сохранён</UI.Toast>
        <UI.Toast color="coral">проверь почту и попробуй ещё раз</UI.Toast>
      </Spec>
      <Spec name="алерты · внутри контента" note="встраиваются в контент и растягиваются на всю ширину. четыре уровня внимания." body="flush">
        <UI.Alert kind="info" icon="[i]" title="запись на tie:">новые слоты открываются по понедельникам в 9:00 — лучше подготовить документы заранее.</UI.Alert>
        <UI.Alert kind="ok" icon="[✓]" title="готово.">консультация появилась в календаре — ссылку отправили в телеграм.</UI.Alert>
        <UI.Alert kind="warn" icon="[!]" title="проверь контакт.">мы отвечаем в телеграме — убедись, что ник указан без ошибок.</UI.Alert>
        <UI.Alert kind="err" icon="[×]" title="не отправилось.">попробуй ещё раз или напиши нам в телеграм @sborka_bcn.</UI.Alert>
      </Spec>
      <Spec name="пустое состояние" note="плитка-мотив, короткое объяснение и одно действие." body="flush">
        <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", minHeight: 280, alignItems: "start" }}>
          <div style={{ width: "100%", aspectRatio: "1 / 1", alignSelf: "start", background: "var(--sb-yellow)" }}>
            <window.FlowerTile bg="var(--sb-yellow)" petal="var(--sb-red)" core="var(--sb-yellow)" />
          </div>
          <div style={{ padding: 40, display: "flex", flexDirection: "column", gap: 20, justifyContent: "center" }}>
            <UI.BracketBadge color="yellow" style={{ alignSelf: "flex-start" }}>пусто</UI.BracketBadge>
            <div style={{ fontFamily: "var(--sb-font-display)", fontSize: 40, lineHeight: 0.9, letterSpacing: "-0.03em", textTransform: "lowercase" }}>сохранённых материалов<br />пока нет.</div>
            <div style={{ fontFamily: "var(--sb-font-ui)", fontSize: 14, opacity: 0.65, maxWidth: 420 }}>полистай журнал и нажми на ✶ рядом с заголовком — так материал появится здесь.</div>
            <UI.Button variant="red" arrow style={{ alignSelf: "flex-start" }}>открыть журнал</UI.Button>
          </div>
        </div>
      </Spec>
    </KitSection>

    {/* 10 — ICONOGRAPHY */}
    <KitSection id="icons" n="10" title="иконки" meta="16 фирменных иконок на сетке 24 с обводкой 1.5px. без эмодзи и сторонних библиотек.">
      <Spec name="лоток иконок" note="рисуем одним цветом и перекрашиваем только через currentColor, без ручных исключений." body="flush">
        <div className="icon-tray" style={{ color: "var(--sb-ink)" }}>
          {UI.ICON_NAMES.map((name) => (
            <div key={name}><UI.Icon name={name} /><span className="name">{UI.ICON_LABELS?.[name] || name}</span></div>
          ))}
        </div>
      </Spec>
      <Spec name="матрица цветов" note="одна и та же иконка на разных фонах — проверяем контраст." body="flush">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", width: "100%", gap: 0, background: "transparent" }}>
          {[["bone", "var(--sb-ink)"], ["yellow", "var(--sb-ink)"], ["coral", "var(--sb-ink)"], ["red", "var(--sb-bone)"], ["teal", "var(--sb-bone)"], ["periwinkle", "var(--sb-ink)"], ["ink", "var(--sb-bone)"]].map(([bg, fg]) => (
            <div key={bg} style={{ aspectRatio: 1, background: bg === "red" ? "var(--sb-red)" : bg === "ink" ? "var(--sb-ink)" : `var(--sb-${bg})`, color: fg, display: "flex", alignItems: "center", justifyContent: "center", padding: 28 }}>
              <UI.Icon name="search" size="60%" />
            </div>
          ))}
        </div>
      </Spec>
    </KitSection>
  </div>
);

ReactDOM.createRoot(document.getElementById("root")).render(<UIKitGallery />);