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="/components/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="/components/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>
  );
}
