refactor: move navigation page from /components to /blocks section

- Moved /components/navigation → /blocks/navigation
- Updated Sidebar: navigation is now first item in "Блоки"
- Updated PreviewClient block path
- Updated seed block path
- Updated SPRINTS.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/app/blocks/navigation/page.tsx

@@ -0,0 +1,227 @@
+import type { Metadata } from "next";
+import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
+import { NavigationBlock, NAV_ITEMS } from "@/components/blocks/NavigationBlock";
+import { BlockMetaBar } from "@/components/ui/BlockMetaBar";
+
+export const metadata: Metadata = {
+  title: "Шапка и навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
+};
+
+const LLM_NAV_TEXT = `
+БЛОК: Шапка и навигация сайта (Header)
+Источник: perm.oclinica.ru/lor — реальная шапка сайта
+Версия: v1.0
+
+СТРУКТУРА ШАПКИ (3 зоны сверху вниз):
+
+1. ТОП-БАР (~40px высота, фон #fff, border-bottom 1px solid #e5e7eb)
+   Левая часть:
+   — Адрес: «Б. Цитная, 3» с иконкой 📍
+   — Ссылка: «Клиника ухо горло нос и аллергия»
+   — Ссылка: «Центр аллергологии и пульмонологии»
+   Правая часть:
+   — Телефон: «/342/ 255-53-84» (font-weight: bold, color: #111827)
+   — Кнопка «Заказать звонок» — стиль bb-btn-pill (#e9e4d4, border #d5cfbd, border-radius 25px)
+
+2. ЛОГОТИП (~64px, фон #fff)
+   — Иконка кружок синий (#0089c3) с крестом
+   — Текст «КЛИНИКА УХО ГОРЛО НОС» жирный uppercase, цвет #53514e
+   — Подпись «им. проф. Е.Н.Оленевой» мелкий, цвет #9ca3af
+
+3. ГЛАВНОЕ МЕНЮ (~46px, фон #fff, border-top 1px solid #e5e7eb)
+   Пункты (8 штук): Клиника | ЛОР врачи | Заболевания | Вопрос-ответ | ЛОР-операции | Сурдология | Цены | Контакты
+   Шрифт: Fira Sans 14px, weight 400
+   Цвет ссылок: #53514e (--brand-073m)
+   Активный / Hover: #0089c3 (--brand-053m)
+   Разделители: border-right 1px solid #f3f4f6 между пунктами
+
+ПРАВИЛА:
+✓ Логотип всегда кликабелен — ведёт на главную страницу раздела
+✓ Кнопка «Заказать звонок» всегда видна, pill-стиль
+✓ Телефон кликабелен (tel: ссылка)
+✓ Активный пункт меню — цвет #0089c3, остальные #53514e
+✕ Не добавлять пункты меню, которых нет на сайте
+✕ Не менять порядок пунктов меню
+`.trim();
+
+export default function NavigationPage() {
+  return (
+    <div className="p-8 max-w-5xl mx-auto space-y-10">
+      {/* Заголовок страницы */}
+      <div>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-1"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Блоки
+        </p>
+        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
+          Шапка и навигация
+        </h1>
+        <BlockMetaBar path="/blocks/navigation" defaultVersion="v1.0" defaultIsInPreview={true} />
+        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Точное воспроизведение шапки с perm.oclinica.ru/lor. Три зоны: топ-бар, логотип, главное меню.
+        </p>
+      </div>
+
+      {/* Живой пример */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Живой пример
+        </h2>
+        <div className="rounded-xl overflow-hidden">
+          <NavigationBlock />
+        </div>
+      </section>
+
+      {/* Анатомия */}
+      <section className="space-y-4">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Анатомия шапки
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {[
+            {
+              zone: "1. Топ-бар",
+              bg: "#f0f9ff",
+              height: "~40px",
+              color: "Фон: #fff",
+              desc: "Адрес, ссылки на разделы клиники, телефон, кнопка «Заказать звонок» (pill)",
+            },
+            {
+              zone: "2. Логотип",
+              bg: "#f0fdf4",
+              height: "~64px",
+              color: "Фон: #fff",
+              desc: "Иконка-кружок (#0089c3) + название клиники двумя строками + подпись мелким",
+            },
+            {
+              zone: "3. Навигация",
+              bg: "#fefce8",
+              height: "~46px",
+              color: "Фон: #fff, border-top",
+              desc: "8 горизонтальных пунктов, активный = #0089c3, остальные = #53514e",
+            },
+          ].map((z) => (
+            <div
+              key={z.zone}
+              className="rounded-xl p-4 space-y-2"
+              style={{ background: z.bg, border: "1px solid var(--bb-border)" }}
+            >
+              <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
+                {z.zone}
+              </p>
+              <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                {z.desc}
+              </p>
+              <p className="text-[11px] font-mono mt-1" style={{ color: "var(--bb-text-muted)" }}>
+                H: {z.height} · {z.color}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Пункты меню */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Пункты главного меню
+        </h2>
+        <div className="flex flex-wrap gap-2">
+          {NAV_ITEMS.map((item, i) => (
+            <span
+              key={item}
+              className="px-3 py-1.5 rounded text-sm"
+              style={{
+                background: i === 0 ? "#dff0fa" : "var(--bb-sidebar-bg)",
+                color: i === 0 ? "var(--brand-053m)" : "var(--bb-text)",
+                border: "1px solid var(--bb-border)",
+                fontWeight: i === 0 ? 500 : 400,
+              }}
+            >
+              {item}
+              {i === 0 && (
+                <span className="ml-1.5 text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
+                  (активный)
+                </span>
+              )}
+            </span>
+          ))}
+        </div>
+        <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+          Порядок пунктов фиксирован. Hover и активный пункт — цвет #0089c3 (--brand-053m).
+        </p>
+      </section>
+
+      {/* Токены */}
+      <section className="space-y-3">
+        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+          Цвета и токены
+        </h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {[
+            { label: "Фон шапки", value: "#ffffff", token: "—" },
+            { label: "Ссылки меню", value: "#53514e", token: "--brand-073m" },
+            { label: "Активный / hover", value: "#0089c3", token: "--brand-053m" },
+            { label: "Кнопка «Заказать»", value: "#e9e4d4", token: "bb-btn-pill" },
+          ].map((t) => (
+            <div
+              key={t.label}
+              className="p-3 rounded-xl space-y-2"
+              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
+            >
+              <div
+                className="w-8 h-8 rounded border"
+                style={{ background: t.value, borderColor: "var(--bb-border)" }}
+              />
+              <p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
+                {t.label}
+              </p>
+              <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
+                {t.value}
+              </p>
+              <p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
+                {t.token}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* LLM блок */}
+      <LlmBlock path="/blocks/navigation" version="v1.0" specText={LLM_NAV_TEXT}>
+        <LlmSection title="Зоны шапки" />
+        <LlmTable
+          headers={["Зона", "Высота", "Фон", "Содержимое"]}
+          rows={[
+            ["Топ-бар", "~40px", "#fff", "Адрес, ссылки разделов, телефон /342/ 255-53-84, кнопка «Заказать звонок»"],
+            ["Логотип", "~64px", "#fff", "Кружок #0089c3 + «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»"],
+            ["Навигация", "~46px", "#fff + border-top", "8 пунктов: Клиника / ЛОР врачи / Заболевания / Вопрос-ответ / ЛОР-операции / Сурдология / Цены / Контакты"],
+          ]}
+        />
+        <LlmSection title="Цвета" />
+        <LlmTable
+          headers={["Элемент", "Цвет", "Токен"]}
+          rows={[
+            ["Фон шапки", "#ffffff", "—"],
+            ["Ссылки меню (default)", "#53514e", "--brand-073m"],
+            ["Активный пункт / hover", "#0089c3", "--brand-053m"],
+            ["Кнопка «Заказать звонок»", "#e9e4d4 / border #d5cfbd", "bb-btn-pill"],
+            ["Телефон", "#111827, font-weight bold", "—"],
+          ]}
+        />
+        <LlmSection title="Правила" />
+        <LlmRules
+          rules={[
+            { ok: true, text: "Логотип ведёт на главную страницу раздела" },
+            { ok: true, text: "Кнопка «Заказать звонок» всегда видна, pill-стиль" },
+            { ok: true, text: "Телефон — кликабельная ссылка tel:" },
+            { ok: true, text: "Активный пункт меню — цвет #0089c3" },
+            { ok: false, text: "Не добавлять пункты меню, которых нет на сайте" },
+            { ok: false, text: "Не менять порядок 8 пунктов меню" },
+          ]}
+        />
+      </LlmBlock>
+    </div>
+  );
+}