"use client";

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

/* ─── Утилиты конвертации ──────────────────────────────────────────── */
function hexToRgb(hex: string): { r: number; g: number; b: number } {
  const m = /^#([0-9a-f]{6})$/i.exec(hex);
  if (!m) return { r: 0, g: 0, b: 0 };
  return {
    r: parseInt(m[1].slice(0, 2), 16),
    g: parseInt(m[1].slice(2, 4), 16),
    b: parseInt(m[1].slice(4, 6), 16),
  };
}

function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h = 0, s = 0;
  const l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

function luminance(r: number, g: number, b: number): number {
  const a = [r, g, b].map(v => {
    v /= 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}

function contrastRatio(hex1: string, hex2: string): number {
  const { r: r1, g: g1, b: b1 } = hexToRgb(hex1);
  const { r: r2, g: g2, b: b2 } = hexToRgb(hex2);
  const l1 = luminance(r1, g1, b1);
  const l2 = luminance(r2, g2, b2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return Math.round(((lighter + 0.05) / (darker + 0.05)) * 10) / 10;
}

/* ─── Данные цветов ────────────────────────────────────────────────── */
const BRAND_COLORS = [
  {
    oracal: "053M",
    name: "Основной бирюзовый",
    hex: "#0089c3",
    usage: "Акцентный цвет, CTA-кнопки, иконки, активные состояния",
    cssVar: "--brand-053m",
  },
  {
    oracal: "073M",
    name: "Тёмный серо-голубой",
    hex: "#53514e",
    usage: "Тёмный фон, хедер, акценты на тёмных поверхностях",
    cssVar: "--brand-073m",
  },
  {
    oracal: "066M",
    name: "Средний бирюзовый",
    hex: "#00818c",
    usage: "Вторичные акценты, фоны секций, иллюстрации",
    cssVar: "--brand-066m",
  },
  {
    oracal: "050M",
    name: "Тёмно-синий",
    hex: "#1b2e5d",
    usage: "Наружная реклама, полиграфия, заголовки на светлом фоне",
    cssVar: "--brand-050m",
  },
  {
    oracal: "081M",
    name: "Бежевый",
    hex: "#a8885c",
    usage: "Форма сотрудников, оффлайн носители, тёплые акценты",
    cssVar: "--brand-081m",
  },
  {
    oracal: "080M",
    name: "Тёмно-коричневый",
    hex: "#432f1e",
    usage: "Текст на бежевых поверхностях, логотип на форме",
    cssVar: "--brand-080m",
  },
  {
    oracal: "—",
    name: "Белый",
    hex: "#ffffff",
    usage: "Фон, инвертированный текст, логотип на тёмных фонах",
    cssVar: "--brand-white",
  },
];

/* ─── Соответствие цветов ──────────────────────────────────────────── */
const COLOR_MAPPING = [
  {
    brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#0089c3" },
    web:   { name: "Бирюзовый", hex: "#63bac3", count: 4 },
    note:  "Oracal — насыщенный синий; сайт — светлее и голубее",
  },
  {
    brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#53514e" },
    web:   { name: "Серо-бирюзовый", hex: "#60959c", count: 7 },
    note:  "Oracal — тёмно-серый; сайт — серо-бирюзовый (значительное расхождение)",
  },
  {
    brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#00818c" },
    web:   { name: "Бирюзовый средний", hex: "#52b4bd", count: 4 },
    note:  "Oracal — тёмный бирюзовый; сайт — светлее",
  },
  {
    brand: { oracal: "081M", name: "Бежевый", hex: "#a8885c" },
    web:   { name: "Бежевый", hex: "#bf9975", count: 12 },
    note:  "Oracal — тёплый охристый; сайт — прохладнее и светлее",
  },
  {
    brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b2e5d" },
    web:   null,
    note:  "Не найден в CSS сайта",
  },
  {
    brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#432f1e" },
    web:   null,
    note:  "Не найден в CSS сайта",
  },
  {
    brand: null,
    web:   { name: "Основной текст", hex: "#464646", count: 3 },
    note:  "Только на сайте — нет Oracal-аналога",
  },
  {
    brand: null,
    web:   { name: "Второстепенный текст", hex: "#949290", count: 4 },
    note:  "Только на сайте — нет Oracal-аналога",
  },
  {
    brand: null,
    web:   { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", count: 1 },
    note:  "Только на сайте — фон Hero-баннера страниц разделов. Нет Oracal-аналога",
  },
  {
    brand: null,
    web:   { name: "Кремовый фон", hex: "#e9e4d4", count: 1 },
    note:  "Только на сайте — тёплые фоны кнопок-пилюль, вторичные секции. Нет Oracal-аналога",
  },
  {
    brand: null,
    web:   { name: "Коралловый", hex: "#ffa39c", count: 2 },
    note:  "Только на сайте — CTA-кнопки, нет в оффлайн-палитре",
  },
  {
    brand: null,
    web:   { name: "Светло-жёлтый фон", hex: "#eef4d1", count: 1 },
    note:  "Только на сайте — фон карточек отзывов",
  },
  {
    brand: null,
    web:   { name: "Светло-зелёный фон", hex: "#f2fee6", count: 1 },
    note:  "Только на сайте — фон секции новостей",
  },
];

/* ─── Цвета с сайта ────────────────────────────────────────────────── */
// Источник: https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css
// Извлечены парсингом CSS: grep + python Counter по property/value, 2026-03-22
const WEB_COLORS = [
  { name: "Бежевый", hex: "#bf9975", usage: "Основной тёплый акцент, фоны, рамки, текст", count: 12, group: "Акценты" },
  { name: "Серо-бирюзовый", hex: "#60959c", usage: "Основной холодный акцент, ссылки", count: 7, group: "Акценты" },
  { name: "Бирюзовый", hex: "#63bac3", usage: "Фоны акцентных блоков, иконки", count: 4, group: "Акценты" },
  { name: "Бирюзовый средний", hex: "#52b4bd", usage: "Вторичные цветовые акценты", count: 4, group: "Акценты" },
  { name: "Основной текст", hex: "#464646", usage: "Цвет основного текста на сайте", count: 3, group: "Текст" },
  { name: "Второстепенный текст", hex: "#949290", usage: "Подписи, второстепенный контент", count: 4, group: "Текст" },
  { name: "Светло-бирюзовый фон", hex: "#b8e6ed", usage: "Фон формы записи («Будьте здоровы!»)", count: 1, group: "Фоны" },
  { name: "Светло-кремовый фон (Hero)", hex: "#f9f4e7", usage: "Фон Hero-баннера страниц разделов", count: 1, group: "Фоны" },
  { name: "Кремовый фон", hex: "#e9e4d4", usage: "Тёплые фоны кнопок-пилюль, вторичные секции", count: 1, group: "Фоны" },
  { name: "Коралловый", hex: "#ffa39c", usage: "CTA-кнопки («Запишите меня!»), акцентные призывы к действию", count: 2, group: "Акценты" },
  { name: "Светло-жёлтый фон", hex: "#eef4d1", usage: "Фон карточек отзывов (секция «Отзывы о нас»)", count: 1, group: "Фоны" },
  { name: "Светло-зелёный фон", hex: "#f2fee6", usage: "Фон секции новостей", count: 1, group: "Фоны" },
];

const CONTRAST_PAIRS = [
  { fg: "#ffffff", bg: "#53514e", label: "Белый на тёмном серо-голубом (073M)" },
  { fg: "#ffffff", bg: "#1b2e5d", label: "Белый на тёмно-синем (050M)" },
  { fg: "#ffffff", bg: "#432f1e", label: "Белый на тёмно-коричневом (080M)" },
  { fg: "#ffffff", bg: "#00818c", label: "Белый на среднем бирюзовом (066M)" },
  { fg: "#111827", bg: "#0089c3", label: "Тёмный текст на основном бирюзовом (053M)" },
  { fg: "#111827", bg: "#a8885c", label: "Тёмный текст на бежевом (081M)" },
  { fg: "#432f1e", bg: "#a8885c", label: "Тёмно-коричневый на бежевом (форма, 080M/081M)" },
];

/* ─── Компоненты ───────────────────────────────────────────────────── */
function CopyBadge({ value, label }: { value: string; label: string }) {
  const [copied, setCopied] = useState(false);
  const copy = useCallback(() => {
    navigator.clipboard.writeText(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }, [value]);
  return (
    <button
      onClick={copy}
      className="flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors"
      style={{
        background: copied ? "#d1fae5" : "#f3f4f6",
        color: copied ? "#065f46" : "#374151",
        border: "1px solid",
        borderColor: copied ? "#6ee7b7" : "#e5e7eb",
      }}
      title={`Скопировать ${label}`}
    >
      {copied ? "✓" : "⎘"} {value}
    </button>
  );
}

function ColorCard({ color }: { color: typeof BRAND_COLORS[0] }) {
  const { r, g, b } = hexToRgb(color.hex);
  const { h, s, l } = rgbToHsl(r, g, b);
  const isLight = l > 55;

  return (
    <div
      className="rounded-xl overflow-hidden border"
      style={{ borderColor: "var(--bb-border)" }}
    >
      {/* Свотч */}
      <div
        className="h-32 flex items-end justify-between px-4 pb-3"
        style={{ background: color.hex }}
      >
        {color.oracal !== "—" && (
          <span
            className="text-xs font-semibold px-2 py-0.5 rounded"
            style={{
              background: isLight ? "rgba(0,0,0,0.15)" : "rgba(255,255,255,0.2)",
              color: isLight ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.9)",
            }}
          >
            Oracal {color.oracal}
          </span>
        )}
      </div>

      {/* Информация */}
      <div className="p-4" style={{ background: "var(--bb-content-bg)" }}>
        <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
          {color.name}
        </p>
        <p className="text-xs mb-3" style={{ color: "var(--bb-text-muted)" }}>
          {color.usage}
        </p>

        {/* Коды */}
        <div className="flex flex-wrap gap-1.5">
          <CopyBadge value={color.hex.toUpperCase()} label="HEX" />
          <CopyBadge value={`rgb(${r}, ${g}, ${b})`} label="RGB" />
          <CopyBadge value={`hsl(${h}, ${s}%, ${l}%)`} label="HSL" />
          <CopyBadge value={color.cssVar} label="CSS var" />
        </div>
      </div>
    </div>
  );
}

function ContrastRow({ pair }: { pair: typeof CONTRAST_PAIRS[0] }) {
  const ratio = contrastRatio(pair.fg, pair.bg);
  const aa = ratio >= 4.5;
  const aaa = ratio >= 7;
  const aaLarge = ratio >= 3;

  return (
    <div
      className="flex items-center gap-4 p-4 rounded-xl border"
      style={{ borderColor: "var(--bb-border)" }}
    >
      {/* Превью */}
      <div
        className="w-32 shrink-0 h-12 rounded-lg flex items-center justify-center text-sm font-medium"
        style={{ background: pair.bg, color: pair.fg }}
      >
        Aa Бб Вв
      </div>

      {/* Описание */}
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate" style={{ color: "var(--bb-text)" }}>
          {pair.label}
        </p>
        <div className="flex gap-1 mt-1 items-center">
          <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
            {pair.fg} / {pair.bg}
          </span>
        </div>
      </div>

      {/* Ratio и бейджи */}
      <div className="shrink-0 flex items-center gap-3">
        <span className="font-mono font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
          {ratio}:1
        </span>
        <div className="flex gap-1">
          {[
            { label: "AA", pass: aa },
            { label: "AAA", pass: aaa },
            { label: "AA large", pass: aaLarge },
          ].map(({ label, pass }) => (
            <span
              key={label}
              className="text-[10px] font-semibold px-1.5 py-0.5 rounded"
              style={{
                background: pass ? "#d1fae5" : "#fee2e2",
                color: pass ? "#065f46" : "#991b1b",
              }}
            >
              {pass ? "✓" : "✕"} {label}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function WebColorCard({ color }: { color: typeof WEB_COLORS[0] }) {
  const { r, g, b } = hexToRgb(color.hex);
  const { h, s, l } = rgbToHsl(r, g, b);
  const isLight = l > 60;

  return (
    <div
      className="rounded-xl overflow-hidden border"
      style={{ borderColor: "var(--bb-border)" }}
    >
      <div
        className="h-24 flex items-end justify-between px-4 pb-3"
        style={{ background: color.hex }}
      >
        <span
          className="text-xs font-semibold px-2 py-0.5 rounded"
          style={{
            background: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.18)",
            color: isLight ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.9)",
          }}
        >
          {color.group}
        </span>
        <span
          className="text-xs px-2 py-0.5 rounded font-mono"
          style={{
            background: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.18)",
            color: isLight ? "rgba(0,0,0,0.75)" : "rgba(255,255,255,0.9)",
          }}
        >
          ×{color.count}
        </span>
      </div>
      <div className="p-4" style={{ background: "var(--bb-content-bg)" }}>
        <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
          {color.name}
        </p>
        <p className="text-xs mb-3" style={{ color: "var(--bb-text-muted)" }}>
          {color.usage}
        </p>
        <div className="flex flex-wrap gap-1.5">
          <CopyBadge value={color.hex.toUpperCase()} label="HEX" />
          <CopyBadge value={`rgb(${r}, ${g}, ${b})`} label="RGB" />
          <CopyBadge value={`hsl(${h}, ${s}%, ${l}%)`} label="HSL" />
        </div>
      </div>
    </div>
  );
}

/* ─── Экспорт токенов ──────────────────────────────────────────────── */
function exportTokens() {
  const tokens: Record<string, Record<string, unknown>> = { colors: {} };
  BRAND_COLORS.forEach(c => {
    const key = c.oracal !== "—" ? `brand-${c.oracal.toLowerCase()}` : "brand-white";
    const { r, g, b } = hexToRgb(c.hex);
    const { h, s, l } = rgbToHsl(r, g, b);
    tokens.colors[key] = {
      oracal: c.oracal,
      name: c.name,
      hex: c.hex.toUpperCase(),
      rgb: `rgb(${r}, ${g}, ${b})`,
      hsl: `hsl(${h}, ${s}%, ${l}%)`,
      cssVar: c.cssVar,
    };
  });
  const blob = new Blob([JSON.stringify(tokens, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url; a.download = "oclinica-brand-tokens.json"; a.click();
  URL.revokeObjectURL(url);
}

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

ФИРМЕННЫЕ ЦВЕТА (Oracal) — точные значения из каталога
Oracal | Название             | HEX     | RGB              | CSS-переменная | Применение
053M   | Основной бирюзовый   | #0089C3 | rgb(0,137,195)   | --brand-053m   | Акцент, CTA-кнопки, иконки, активные состояния
073M   | Тёмный серо-голубой  | #53514E | rgb(83,81,78)    | --brand-073m   | Тёмный фон, хедер, заголовки навигации
066M   | Средний бирюзовый    | #00818C | rgb(0,129,140)   | --brand-066m   | Вторичные акценты, фоны секций
050M   | Тёмно-синий          | #1B2E5D | rgb(27,46,93)    | --brand-050m   | Наружная реклама, полиграфия, заголовки
081M   | Бежевый              | #A8885C | rgb(168,136,92)  | --brand-081m   | Форма сотрудников, тёплые акценты
080M   | Тёмно-коричневый     | #432F1E | rgb(67,47,30)    | --brand-080m   | Текст на бежевом, логотип на форме
—      | Белый                | #FFFFFF | rgb(255,255,255) | --brand-white  | Фон, инвертированный текст, логотип на тёмных

ЦВЕТА САЙТА oclinica.ru (CSS: clinic_bootstrap_mobile/css/style.css)
Название             | HEX     | Группа  | × | Применение
Бежевый              | #BF9975 | Акценты | 12| Тёплый акцент, фоны, рамки, текст
Серо-бирюзовый       | #60959C | Акценты | 7 | Холодный акцент, ссылки
Бирюзовый            | #63BAC3 | Акценты | 4 | Фоны акцентных блоков, иконки
Бирюзовый средний    | #52B4BD | Акценты | 4 | Вторичные цветовые акценты
Коралловый           | #FFA39C | Акценты | 2 | CTA-кнопки («Запишите меня!»)
Основной текст       | #464646 | Текст   | 3 | Цвет основного текста сайта
Второстепенный текст | #949290 | Текст   | 4 | Подписи, второстепенный контент
Светло-кремовый Hero | #F9F4E7 | Фоны    | 1 | Фон Hero-баннера страниц разделов
Светло-бирюзовый фон | #B8E6ED | Фоны    | 1 | Фон формы записи («Будьте здоровы!»)
Кремовый фон         | #E9E4D4 | Фоны    | 1 | Тёплые фоны кнопок-пилюль, вторичные секции
Светло-жёлтый фон    | #EEF4D1 | Фоны    | 1 | Фон карточек отзывов
Светло-зелёный фон   | #F2FEE6 | Фоны    | 1 | Фон секции новостей

СООТВЕТСТВИЕ ORACAL → САЙТ (цифровая адаптация плёночных цветов)
053M #0089C3 → #63BAC3 (Oracal ярко-синий; сайт светлее и голубее)
073M #53514E → #60959C (Oracal тёмно-серый; сайт серо-бирюзовый — значительное расхождение)
066M #00818C → #52B4BD (Oracal тёмный бирюзовый; сайт светлее)
081M #A8885C → #BF9975 (Oracal тёплый охристый; сайт прохладнее и светлее)
050M #1B2E5D → не найден в CSS сайта
080M #432F1E → не найден в CSS сайта

КОНТРАСТНОСТЬ WCAG 2.1
#FFFFFF / #53514E  | 7.9:1  | AA PASS | AAA PASS
#FFFFFF / #1B2E5D  | 13.2:1 | AA PASS | AAA PASS
#FFFFFF / #432F1E  | 12.6:1 | AA PASS | AAA PASS
#FFFFFF / #00818C  | 4.7:1  | AA PASS | AAA FAIL
#111827 / #0089C3  | 4.7:1  | AA PASS | AAA FAIL
#111827 / #A8885C  | 5.5:1  | AA PASS | AAA FAIL
#432F1E / #A8885C  | 3.8:1  | AA FAIL | AAA FAIL | только крупный текст ≥18pt

ПРАВИЛА
✓ Только цвета из фирменной палитры
✓ Digital → цвета сайта; оффлайн → коды Oracal
✓ Текст на цветном фоне: минимум WCAG AA (4.5:1)
✓ Белый текст на: 073M (#53514E), 066M (#00818C), 050M (#1B2E5D), 080M (#432F1E)
✓ Тёмный текст (#111827) на: 053M (#0089C3), 081M (#A8885C)
✕ Произвольные цвета вне фирменной палитры
✕ Изменение насыщенности / оттенка фирменных цветов
✕ Тёплые и холодные акценты рядом без нейтрального разделителя`.trim();

/* ─── Страница ─────────────────────────────────────────────────────── */
export default function ColorsPage() {
  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.3
        </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)" }}>
          Фирменная цветовая палитра основана на кодах плёнки Oracal. HEX-значения
          подобраны как ближайшие эквиваленты. Для точной печати используйте коды Oracal.
        </p>

        <div className="mt-4 flex items-center justify-between">
          <div
            className="px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
            style={{ borderColor: "#bae6fd", background: "#f0f9ff", color: "#075985" }}
          >
            <span>ℹ</span>
            <span>
              HEX-значения рассчитаны по точным RGB из каталога Oracal.
              Для оффлайн-носителей используйте официальные коды Oracal.
            </span>
          </div>
          <button
            onClick={exportTokens}
            className="ml-4 shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
            style={{
              background: "var(--brand-053m)",
              color: "#ffffff",
            }}
          >
            ↓ Экспорт JSON
          </button>
        </div>
      </div>

      {/* 1. Палитра */}
      <section className="mb-12">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Фирменные цвета
          </h2>
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Нажмите на значение, чтобы скопировать его в буфер обмена.
          </p>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {BRAND_COLORS.map(c => (
            <ColorCard key={c.oracal} color={c} />
          ))}
        </div>
      </section>

      {/* 2. Контрастность */}
      <section className="mb-12">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Контрастность пар (WCAG)
          </h2>
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Проверка соответствия требованиям доступности для основных комбинаций цветов.
            AA = 4.5:1 для обычного текста, 3:1 для крупного (&gt;18pt).
          </p>
        </div>
        <div className="flex flex-col gap-3">
          {CONTRAST_PAIRS.map(pair => (
            <ContrastRow key={pair.label} pair={pair} />
          ))}
        </div>
      </section>

      {/* 3. Цвета с сайта */}
      <section className="mb-12">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Цвета с сайта
          </h2>
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Реальные цвета, используемые на сайте oclinica.ru. Извлечены из CSS темы сайта.
            Число применений показано в правом углу карточки.
          </p>
          <div
            className="mt-3 flex items-center gap-2 px-3 py-2 rounded-lg text-xs w-fit font-mono"
            style={{ background: "var(--bb-sidebar-bg)", color: "var(--bb-text-muted)", border: "1px solid var(--bb-border)" }}
          >
            <span style={{ color: "var(--brand-053m)" }}>CSS</span>
            perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css
          </div>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {WEB_COLORS.map(c => (
            <WebColorCard key={c.hex} color={c} />
          ))}
        </div>
      </section>

      {/* 4. Соответствие */}
      <section className="mb-12">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Соответствие: Oracal → Сайт
          </h2>
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Сравнение фирменной палитры (Oracal, брендбук) с реальными цветами, применёнными на сайте.
            Расхождения ожидаемы — цифровая адаптация плёночных цветов под экран.
          </p>
        </div>
        <div className="flex flex-col gap-3">
          {COLOR_MAPPING.map((row, i) => (
            <div
              key={i}
              className="flex items-center gap-3 p-4 rounded-xl border"
              style={{ borderColor: "var(--bb-border)", background: "var(--bb-content-bg)" }}
            >
              {/* Левая сторона — Oracal */}
              <div className="flex items-center gap-3 w-56 shrink-0">
                {row.brand ? (
                  <>
                    <div
                      className="w-10 h-10 rounded-lg shrink-0 border"
                      style={{ background: row.brand.hex, borderColor: "var(--bb-border)" }}
                    />
                    <div>
                      <p className="text-xs font-semibold font-mono" style={{ color: "var(--bb-text)" }}>
                        {row.brand.hex.toUpperCase()}
                      </p>
                      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
                        Oracal {row.brand.oracal}
                      </p>
                    </div>
                  </>
                ) : (
                  <div
                    className="w-10 h-10 rounded-lg shrink-0 flex items-center justify-center text-lg border"
                    style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
                  >
                    —
                  </div>
                )}
              </div>

              {/* Стрелка */}
              <div className="shrink-0 text-sm font-bold" style={{ color: "var(--bb-text-muted)" }}>→</div>

              {/* Правая сторона — Сайт */}
              <div className="flex items-center gap-3 w-56 shrink-0">
                {row.web ? (
                  <>
                    <div
                      className="w-10 h-10 rounded-lg shrink-0 border"
                      style={{ background: row.web.hex, borderColor: "var(--bb-border)" }}
                    />
                    <div>
                      <p className="text-xs font-semibold font-mono" style={{ color: "var(--bb-text)" }}>
                        {row.web.hex.toUpperCase()}
                      </p>
                      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
                        {row.web.name} · ×{row.web.count}
                      </p>
                    </div>
                  </>
                ) : (
                  <div className="flex items-center gap-2">
                    <div
                      className="w-10 h-10 rounded-lg shrink-0 flex items-center justify-center text-lg border"
                      style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
                    >
                      —
                    </div>
                    <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Нет на сайте</p>
                  </div>
                )}
              </div>

              {/* Примечание */}
              <p className="flex-1 text-xs" style={{ color: "var(--bb-text-muted)" }}>
                {row.note}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* 5. Применение */}
      <section className="mb-10">
        <div className="mb-6">
          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
            Правила применения
          </h2>
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {[
            {
              icon: "✓",
              color: "#d1fae5",
              textColor: "#065f46",
              title: "Используйте фирменные цвета",
              text: "Только цвета из палитры обеспечивают узнаваемость бренда на всех носителях.",
            },
            {
              icon: "✓",
              color: "#d1fae5",
              textColor: "#065f46",
              title: "Соблюдайте контрастность",
              text: "Текст на цветном фоне должен соответствовать минимум AA по WCAG 2.1.",
            },
            {
              icon: "✕",
              color: "#fee2e2",
              textColor: "#991b1b",
              title: "Не смешивайте произвольно",
              text: "Не используйте фирменные цвета с посторонними цветами без согласования.",
            },
            {
              icon: "✕",
              color: "#fee2e2",
              textColor: "#991b1b",
              title: "Не изменяйте насыщенность",
              text: "Осветление, затемнение или изменение оттенка недопустимо без необходимости.",
            },
          ].map(item => (
            <div
              key={item.title}
              className="flex gap-3 p-4 rounded-xl border"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <span
                className="shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold"
                style={{ background: item.color, color: item.textColor }}
              >
                {item.icon}
              </span>
              <div>
                <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
                  {item.title}
                </p>
                <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
                  {item.text}
                </p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 6. 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/colors"
          version="v2.2"
          specText={LLM_COLORS_TEXT}
        >
          {/* Фирменные цвета */}
          <div className="space-y-2">
            <LlmSection title="Фирменные цвета (Oracal)" />
            <LlmTable
              headers={["Oracal", "HEX", "RGB", "CSS-переменная", "Применение"]}
              rows={BRAND_COLORS.map(c => {
                const { r, g, b } = hexToRgb(c.hex);
                return [
                  <span key="o" className="flex items-center gap-1.5">
                    <span className="w-3 h-3 rounded-sm shrink-0 border inline-block" style={{ background: c.hex, borderColor: "var(--bb-border)" }} />
                    {c.oracal}
                  </span>,
                  <span key="h" style={{ color: "var(--bb-text)" }}>{c.hex.toUpperCase()}</span>,
                  `rgb(${r},${g},${b})`,
                  <span key="v" style={{ color: "var(--brand-073m)" }}>{c.cssVar}</span>,
                  c.usage,
                ];
              })}
            />
          </div>

          {/* Цвета сайта */}
          <div className="space-y-2">
            <LlmSection title="Цвета сайта oclinica.ru" />
            <LlmTable
              headers={["Название", "HEX", "Группа", "×", "Применение"]}
              rows={WEB_COLORS.map(c => [
                <span key="n" className="flex items-center gap-1.5">
                  <span className="w-3 h-3 rounded-sm shrink-0 border inline-block" style={{ background: c.hex, borderColor: "var(--bb-border)" }} />
                  {c.name}
                </span>,
                <span key="h" style={{ color: "var(--bb-text)" }}>{c.hex.toUpperCase()}</span>,
                c.group,
                String(c.count),
                c.usage,
              ])}
            />
          </div>

          {/* Контрастность */}
          <div className="space-y-2">
            <LlmSection title="Контрастность WCAG 2.1" />
            <LlmTable
              headers={["Пара (fg / bg)", "Ratio", "AA (4.5:1)", "AAA (7:1)", "AA large (3:1)"]}
              rows={CONTRAST_PAIRS.map(p => {
                const ratio = contrastRatio(p.fg, p.bg);
                const aa = ratio >= 4.5, aaa = ratio >= 7, aal = ratio >= 3;
                const badge = (pass: boolean) => (
                  <span key={String(pass)} style={{ color: pass ? "#059669" : "#dc2626", fontWeight: 700 }}>
                    {pass ? "PASS" : "FAIL"}
                  </span>
                );
                return [
                  <span key="pair" className="flex items-center gap-1.5">
                    <span className="w-3 h-3 rounded-sm border inline-block shrink-0" style={{ background: p.bg, borderColor: "var(--bb-border)" }} />
                    {p.fg} / {p.bg}
                  </span>,
                  `${ratio}:1`,
                  badge(aa),
                  badge(aaa),
                  badge(aal),
                ];
              })}
            />
          </div>

          {/* Правила */}
          <div className="space-y-2">
            <LlmSection title="Правила применения" />
            <LlmRules rules={[
              { ok: true,  text: "Только цвета из фирменной палитры" },
              { ok: true,  text: "Digital → цвета сайта; оффлайн → коды Oracal" },
              { ok: true,  text: "Текст на цветном фоне: минимум WCAG AA (4.5:1)" },
              { ok: true,  text: "Белый текст на: 073M (#53514E), 066M (#00818C), 050M (#1B2E5D), 080M (#432F1E)" },
              { ok: true,  text: "Тёмный текст (#111827) на: 053M (#0089C3), 081M (#A8885C)" },
              { ok: false, text: "Произвольные цвета вне фирменной палитры" },
              { ok: false, text: "Изменение насыщенности / оттенка фирменных цветов" },
              { ok: false, text: "Тёплые + холодные акценты рядом без разделителя" },
            ]} />
          </div>
        </LlmBlock>
      </section>

    </div>
  );
}
