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

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

/* ─── Шкала типографики ────────────────────────────────────────────── */
const DIN_SCALE = [
  { token: "h1", size: "40px / 2.5rem", weight: "700", lh: "1.2", sample: "Клиника ухо, горло, нос" },
  { token: "h2", size: "32px / 2rem",   weight: "700", lh: "1.25", sample: "Наши специалисты" },
  { token: "h3", size: "24px / 1.5rem", weight: "700", lh: "1.3",  sample: "Запись на приём" },
  { token: "h4", size: "20px / 1.25rem",weight: "700", lh: "1.35", sample: "Расписание врачей" },
  { token: "h5", size: "16px / 1rem",   weight: "700", lh: "1.4",  sample: "Услуги и цены" },
  { token: "h6", size: "14px / 0.875rem",weight:"700", lh: "1.4",  sample: "Контакты клиники" },
];

const FIRA_SCALE = [
  { token: "h1",       size: "40px / 2.5rem",  weight: "600", lh: "1.2",  sample: "Клиника ухо, горло, нос" },
  { token: "h2",       size: "32px / 2rem",    weight: "600", lh: "1.25", sample: "Наши специалисты" },
  { token: "h3",       size: "24px / 1.5rem",  weight: "600", lh: "1.3",  sample: "Запись на приём" },
  { token: "h4",       size: "20px / 1.25rem", weight: "500", lh: "1.35", sample: "Расписание врачей" },
  { token: "h5",       size: "16px / 1rem",    weight: "500", lh: "1.4",  sample: "Услуги и цены" },
  { token: "h6",       size: "14px / 0.875rem",weight: "500", lh: "1.4",  sample: "Контакты клиники" },
  { token: "body",     size: "16px / 1rem",    weight: "400", lh: "1.6",  sample: "ЛОР-клиника предоставляет полный спектр услуг по диагностике и лечению заболеваний уха, горла и носа." },
  { token: "body-sm",  size: "14px / 0.875rem",weight: "400", lh: "1.6",  sample: "Запись по телефону или через форму на сайте. Работаем без выходных." },
  { token: "caption",  size: "12px / 0.75rem", weight: "400", lh: "1.5",  sample: "Лицензия № ЛО-77-01-018234 от 12.01.2022" },
  { token: "label",    size: "12px / 0.75rem", weight: "500", lh: "1.4",  sample: "СПЕЦИАЛИЗАЦИЯ ВРАЧА" },
  { token: "overline", size: "10px / 0.625rem",weight: "600", lh: "1.4",  sample: "ФУНДАМЕНТ → 1.4" },
];

/* ─── LLM spec text ────────────────────────────────────────────────── */
const LLM_TYPOGRAPHY_TEXT = `# ТИПОГРАФИКА — LLM-СПЕЦИФИКАЦИЯ
# Клиника ухо, горло, нос им. проф. Е.Н.Оленевой
# docs/LLM_CONTEXT.md · /foundation/typography · v2.0 · 2026-03-22

ШРИФТЫ БРЕНДА
Шрифт    | Тип    | Применение                                    | CSS
DINPro   | Бренд  | Оффлайн, физические носители (бейджи, таблички, транспорт, форма) | font-family: 'DINPro', Arial, sans-serif
Fira Sans| Веб    | Сайт, цифровые материалы, брендбук            | font-family: 'Fira Sans', sans-serif; Google Fonts; weights: 300/400/500/600

ПРАВИЛО ВЫБОРА: носитель цифровой → Fira Sans; физический/печатный → DINPro

DINPro — ШКАЛА (оффлайн)
Стиль | font-size | rem      | weight | line-height
h1    | 40px      | 2.5rem   | 700    | 1.20
h2    | 32px      | 2rem     | 700    | 1.25
h3    | 24px      | 1.5rem   | 700    | 1.30
h4    | 20px      | 1.25rem  | 700    | 1.35
h5    | 16px      | 1rem     | 700    | 1.40
h6    | 14px      | 0.875rem | 700    | 1.40

Fira Sans — ШКАЛА (веб)
Стиль    | font-size | rem      | weight | line-height | letter-spacing
h1       | 40px      | 2.5rem   | 600    | 1.20        | -0.025em
h2       | 32px      | 2rem     | 600    | 1.25        | -0.020em
h3       | 24px      | 1.5rem   | 600    | 1.30        | -0.010em
h4       | 20px      | 1.25rem  | 500    | 1.35        |  0em
h5       | 16px      | 1rem     | 500    | 1.40        |  0em
h6       | 14px      | 0.875rem | 500    | 1.40        | +0.010em
body     | 16px      | 1rem     | 400    | 1.60        |  0em
body-sm  | 14px      | 0.875rem | 400    | 1.60        |  0em
caption  | 12px      | 0.75rem  | 400    | 1.50        | +0.020em
label    | 12px      | 0.75rem  | 500    | 1.40        | +0.030em
overline | 10px      | 0.625rem | 600    | 1.40        | +0.100em (uppercase)

ПРИМЕНЕНИЕ ПО НОСИТЕЛЮ
Носитель                            | Шрифт
Сайт, цифровые материалы, брендбук  | Fira Sans
Форма сотрудников, бейджи           | DINPro
Вывески, таблички, навигация        | DINPro
Брендирование транспорта            | DINPro
Визитки, листовки, полиграфия       | DINPro
Telegram-бот, пуш-уведомления       | Fira Sans (системный)

ПРАВИЛА
✓ H1 — только один на странице
✓ Не пропускать уровни заголовков (h1 → h2 → h3)
✓ Минимальный размер текста на экране: 12px
✓ Кириллица → Fira Sans (не DINPro)
✓ Fira Sans: доступные веса 300 / 400 / 500 / 600
✕ DINPro на сайте без явного согласования дизайнера
✕ Light (300) для текста < 14px
✕ Смешивать DINPro и Fira Sans на одном носителе`.trim();

/* ─── Компоненты ───────────────────────────────────────────────────── */
function Section({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <section className="mb-14">
      <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 UsageBadge({ label, color }: { label: string; color: string }) {
  return (
    <span
      className="inline-block px-2 py-0.5 rounded text-xs font-medium"
      style={{ background: color === "teal" ? "#e0f5f4" : "#fef3c7", color: color === "teal" ? "var(--brand-073m)" : "#92400e" }}
    >
      {label}
    </span>
  );
}

function TypeRow({
  token,
  size,
  weight,
  lh,
  sample,
  fontFamily,
}: {
  token: string;
  size: string;
  weight: string;
  lh: string;
  sample: string;
  fontFamily: string;
}) {
  const [sizeVal] = size.split(" / ");
  const pxSize = parseInt(sizeVal);

  return (
    <div
      className="border-t py-4 grid gap-4"
      style={{
        borderColor: "var(--bb-border)",
        gridTemplateColumns: "80px 1fr 140px",
        alignItems: "start",
      }}
    >
      {/* Токен */}
      <div className="pt-1">
        <span
          className="font-mono text-xs px-2 py-0.5 rounded"
          style={{ background: "#f3f4f6", color: "#374151" }}
        >
          {token}
        </span>
      </div>

      {/* Образец */}
      <div
        style={{
          fontFamily,
          fontSize: `${Math.min(pxSize, 28)}px`,
          fontWeight: weight,
          lineHeight: lh,
          color: "var(--bb-text)",
          wordBreak: "break-word",
        }}
      >
        {sample}
      </div>

      {/* Метаданные */}
      <div className="pt-1 space-y-1 text-right">
        <p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
          {size}
        </p>
        <p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
          w{weight} · lh{lh}
        </p>
      </div>
    </div>
  );
}

/* ─── Страница ─────────────────────────────────────────────────────── */
export default function TypographyPage() {
  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)" }}
        >
          Фундамент → 1.4
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Типографика
        </h1>
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Бренд использует два шрифта с чётким разделением по контексту применения.
          Никогда не смешивайте их в одном носителе без необходимости.
        </p>
      </div>

      {/* Карточки шрифтов */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold mb-6" style={{ color: "var(--bb-text)" }}>
          Шрифты бренда
        </h2>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {/* DINPro */}
          <div
            className="rounded-xl border p-6"
            style={{ borderColor: "var(--bb-border)" }}
          >
            <div className="flex items-start justify-between mb-3">
              <div>
                <p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
                  DINPro
                </p>
                <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
                  Бренд-шрифт · не Google Fonts
                </p>
              </div>
              <UsageBadge label="Оффлайн · Бренд" color="yellow" />
            </div>
            <div
              className="text-4xl mb-4 font-bold"
              style={{ fontFamily: "'DINPro', Arial, sans-serif", color: "var(--bb-text)" }}
            >
              Aa Бб Вв
            </div>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Применяется на: форме сотрудников, бейджах, вывесках, транспорте,
              полиграфии. Лицензионный шрифт — передаётся дизайнером.
            </p>
            <p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block"
              style={{ background: "#f3f4f6", color: "#374151" }}>
              --font-brand
            </p>
          </div>

          {/* Fira Sans */}
          <div
            className="rounded-xl border p-6"
            style={{ borderColor: "var(--bb-border)" }}
          >
            <div className="flex items-start justify-between mb-3">
              <div>
                <p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
                  Fira Sans
                </p>
                <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
                  Веб-шрифт · Google Fonts
                </p>
              </div>
              <UsageBadge label="Веб · Цифровой" color="teal" />
            </div>
            <div
              className="text-4xl mb-4 font-semibold"
              style={{ fontFamily: "var(--font-fira-sans)", color: "var(--bb-text)" }}
            >
              Aa Бб Вв
            </div>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Применяется на: сайте oclinica.ru, в цифровом брендбуке, онлайн-материалах.
              Подключён через next/font/google (кириллица + латиница).
            </p>
            <p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block"
              style={{ background: "#f3f4f6", color: "#374151" }}>
              --font-web
            </p>
          </div>
        </div>
      </section>

      {/* Таблица применения */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold mb-4" style={{ color: "var(--bb-text)" }}>
          Правило применения
        </h2>
        <div
          className="overflow-hidden rounded-xl border"
          style={{ borderColor: "var(--bb-border)" }}
        >
          <table className="w-full text-sm">
            <thead>
              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
                {["Носитель", "Шрифт"].map(h => (
                  <th
                    key={h}
                    className="text-left px-5 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Сайт, цифровые материалы, брендбук",   "Fira Sans"],
                ["Форма сотрудников, бейджи",             "DINPro"],
                ["Вывески, таблички, навигация",          "DINPro"],
                ["Брендирование транспорта",              "DINPro"],
                ["Визитки, листовки, полиграфия",         "DINPro"],
                ["Telegram-бот, пуш-уведомления",        "Fira Sans (системный)"],
              ].map(([media, font]) => (
                <tr
                  key={media}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{media}</td>
                  <td className="px-5 py-3 font-medium" style={{ color: "var(--brand-073m)" }}>
                    {font}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* DINPro Scale */}
      <Section
        title="DINPro — шкала заголовков"
        subtitle="Бренд-шрифт. Используется в оффлайн-носителях. Отображается с системным фоллбэком Arial, если шрифт не установлен."
      >
        <div>
          {DIN_SCALE.map(row => (
            <TypeRow
              key={row.token}
              {...row}
              fontFamily="'DINPro', 'DIN Pro', Arial, sans-serif"
            />
          ))}
        </div>
      </Section>

      {/* Fira Sans Scale */}
      <Section
        title="Fira Sans — полная шкала"
        subtitle="Веб-шрифт. Используется на сайте и в цифровых материалах. Загружается через Google Fonts."
      >
        <div>
          {FIRA_SCALE.map(row => (
            <TypeRow
              key={row.token}
              {...row}
              fontFamily="var(--font-fira-sans, 'Fira Sans', sans-serif)"
            />
          ))}
        </div>
      </Section>

      {/* Живой пример */}
      <Section
        title="Живой пример — блок контента"
        subtitle="Типичная комбинация заголовка и тела текста на сайте."
      >
        <div
          className="rounded-xl border p-8"
          style={{
            borderColor: "var(--bb-border)",
            background: "var(--bb-sidebar-bg)",
            fontFamily: "var(--font-fira-sans, 'Fira Sans', sans-serif)",
          }}
        >
          <p
            className="text-xs font-semibold uppercase tracking-widest mb-3"
            style={{ color: "var(--brand-053m)", letterSpacing: "0.1em" }}
          >
            Наши специалисты
          </p>
          <h2
            className="mb-4"
            style={{ fontSize: 28, fontWeight: 600, lineHeight: 1.3, color: "var(--bb-text)" }}
          >
            Запись к ЛОР-врачу<br />без очереди и ожидания
          </h2>
          <p
            className="mb-4 max-w-xl"
            style={{ fontSize: 16, fontWeight: 400, lineHeight: 1.6, color: "var(--bb-text-muted)" }}
          >
            В нашей клинике работают специалисты высшей категории с опытом от 15 лет.
            Диагностика и лечение заболеваний уха, горла, носа и смежных органов.
          </p>
          <p
            style={{ fontSize: 12, fontWeight: 400, lineHeight: 1.5, color: "#9ca3af" }}
          >
            Лицензия № ЛО-77-01-018234 · Москва, ул. Примерная, д. 1
          </p>
        </div>
      </Section>

      {/* Типографика сайта — фактическое состояние 23.03.2026 */}
      <Section
        title="Типографика сайта — факт на 23.03.2026"
        subtitle="Реальные размеры и стили, задокументированные по perm.oclinica.ru/lor. Источник: скриншот + CSS темы clinic_bootstrap_mobile."
      >
        <div
          className="overflow-hidden rounded-xl border"
          style={{ borderColor: "var(--bb-border)" }}
        >
          <table className="w-full text-sm">
            <thead>
              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
                {["Элемент / блок", "Шрифт", "Размер", "Weight", "Цвет", "Пример"].map(h => (
                  <th key={h} className="text-left px-4 py-3 font-medium text-xs"
                    style={{ color: "var(--bb-text-muted)" }}>
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["H1 страницы (над Hero)", "Fira Sans", "36px", "700", "#cb9768", "ЛОР Клиника ухо, горло, нос…"],
                ["H2 секции", "Fira Sans", "36px", "700", "#000000", "Приём ведут опытные ЛОР врачи"],
                ["Заголовок Hero-баннера", "Fira Sans", "22px", "700", "#333333", "ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ…"],
                ["Статистика (цифра+текст)", "Fira Sans", "~18px", "700", "#60959c", "Ежедневно 27 ЛОР врачей…"],
                ["Подзаголовок секции", "Fira Sans", "~14px", "400", "#374151", "Фундаментальная теоретическая…"],
                ["Пункт checklist (ключ)", "Fira Sans", "13px", "700", "#111827", "БЕЗОПАСНО"],
                ["Пункт checklist (описание)", "Fira Sans", "13px", "400", "#374151", "оперируют хирурги с 15-летним…"],
                ["Имя врача в карточке", "Fira Sans", "12px", "500", "#60959c", "Макарова Людмила Германовна"],
                ["Специализация врача", "Fira Sans", "11px", "400", "#374151", "ЛОР врач, сурдолог"],
              ].map(([el, font, size, w, color, example]) => (
                <tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
                  <td className="px-4 py-3 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{el}</td>
                  <td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--brand-073m)" }}>{font}</td>
                  <td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text)" }}>{size}</td>
                  <td className="px-4 py-3 text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>{w}</td>
                  <td className="px-4 py-3">
                    <span className="flex items-center gap-1.5">
                      <span className="w-3 h-3 rounded-sm inline-block border shrink-0"
                        style={{ background: color, borderColor: "var(--bb-border)" }} />
                      <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{color}</span>
                    </span>
                  </td>
                  <td className="px-4 py-3 text-xs" style={{ color: "var(--bb-text-muted)" }}>{example}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* LLM-спецификация */}
      <section className="mb-8">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            LLM-спецификация
          </h2>
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Машиночитаемые данные раздела для использования AI-ассистентами при разработке
            дизайна, макетов и кода. Нажмите «Скопировать» чтобы получить полный текст.
          </p>
        </div>
        <LlmBlock
          path="/foundation/typography"
          version="v2.0"
          specText={LLM_TYPOGRAPHY_TEXT}
        >
          {/* Шрифты */}
          <div className="space-y-2">
            <LlmSection title="Шрифты бренда" />
            <LlmTable
              headers={["Шрифт", "Тип", "Применение", "CSS font-family"]}
              rows={[
                [
                  <span key="d" style={{ color: "var(--bb-text)", fontWeight: 600 }}>DINPro</span>,
                  "Бренд",
                  "Оффлайн, физические носители (бейджи, таблички, транспорт, форма)",
                  "'DINPro', Arial, sans-serif",
                ],
                [
                  <span key="f" style={{ color: "var(--bb-text)", fontWeight: 600 }}>Fira Sans</span>,
                  "Веб",
                  "Сайт, цифровые материалы, брендбук",
                  "'Fira Sans', sans-serif · Google Fonts · 300/400/500/600",
                ],
              ]}
            />
          </div>

          {/* DINPro шкала */}
          <div className="space-y-2">
            <LlmSection title="DINPro — шкала (оффлайн)" />
            <LlmTable
              headers={["Стиль", "font-size", "rem", "weight", "line-height"]}
              rows={DIN_SCALE.map(r => {
                const [px, rem] = r.size.split(" / ");
                return [r.token, px, rem, r.weight, r.lh];
              })}
            />
          </div>

          {/* Fira Sans шкала */}
          <div className="space-y-2">
            <LlmSection title="Fira Sans — шкала (веб)" />
            <LlmTable
              headers={["Стиль", "font-size", "rem", "weight", "line-height", "letter-spacing"]}
              rows={[
                ["h1",       "40px", "2.5rem",   "600", "1.20", "-0.025em"],
                ["h2",       "32px", "2rem",     "600", "1.25", "-0.020em"],
                ["h3",       "24px", "1.5rem",   "600", "1.30", "-0.010em"],
                ["h4",       "20px", "1.25rem",  "500", "1.35",  "0em"],
                ["h5",       "16px", "1rem",     "500", "1.40",  "0em"],
                ["h6",       "14px", "0.875rem", "500", "1.40", "+0.010em"],
                ["body",     "16px", "1rem",     "400", "1.60",  "0em"],
                ["body-sm",  "14px", "0.875rem", "400", "1.60",  "0em"],
                ["caption",  "12px", "0.75rem",  "400", "1.50", "+0.020em"],
                ["label",    "12px", "0.75rem",  "500", "1.40", "+0.030em"],
                ["overline", "10px", "0.625rem", "600", "1.40", "+0.100em"],
              ]}
            />
          </div>

          {/* Применение */}
          <div className="space-y-2">
            <LlmSection title="Применение по носителю" />
            <LlmTable
              headers={["Носитель", "Шрифт"]}
              rows={[
                ["Сайт, цифровые материалы, брендбук", <span key="fs" style={{ color: "var(--brand-073m)" }}>Fira Sans</span>],
                ["Форма сотрудников, бейджи",           <span key="d1" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
                ["Вывески, таблички, навигация",        <span key="d2" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
                ["Брендирование транспорта",            <span key="d3" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
                ["Визитки, листовки, полиграфия",       <span key="d4" style={{ color: "var(--brand-073m)" }}>DINPro</span>],
                ["Telegram-бот, пуш-уведомления",       <span key="fs2" style={{ color: "var(--brand-073m)" }}>Fira Sans (системный)</span>],
              ]}
            />
          </div>

          {/* Правила */}
          <div className="space-y-2">
            <LlmSection title="Правила применения" />
            <LlmRules rules={[
              { ok: true,  text: "H1 — только один на странице" },
              { ok: true,  text: "Не пропускать уровни заголовков (h1 → h2 → h3)" },
              { ok: true,  text: "Минимальный размер текста на экране: 12px" },
              { ok: true,  text: "Кириллица → Fira Sans (не DINPro)" },
              { ok: true,  text: "Fira Sans: доступные веса 300 / 400 / 500 / 600" },
              { ok: false, text: "DINPro на сайте без явного согласования дизайнера" },
              { ok: false, text: "Light (300) для текста < 14px" },
              { ok: false, text: "Смешивать DINPro и Fira Sans на одном носителе" },
            ]} />
          </div>
        </LlmBlock>
      </section>

    </div>
  );
}
