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

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

function RuleTag({ children }: { children: React.ReactNode }) {
  return (
    <span
      className="inline-block px-2 py-0.5 rounded text-xs font-medium"
      style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
    >
      {children}
    </span>
  );
}

function Section({
  id,
  title,
  subtitle,
  children,
}: {
  id?: string;
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <section id={id} className="mb-12">
      <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 LogoCard({
  src,
  alt,
  label,
  description,
  tag,
  dark = false,
}: {
  src: string;
  alt: string;
  label: string;
  description: string;
  tag: string;
  dark?: boolean;
}) {
  return (
    <div>
      <div
        className="flex items-center justify-center rounded-xl border p-8 mb-4"
        style={{
          background: dark ? "var(--brand-073m)" : "#f8f9fa",
          borderColor: dark ? "transparent" : "var(--bb-border)",
          minHeight: 200,
        }}
      >
        <Image
          src={src}
          alt={alt}
          width={320}
          height={130}
          className="object-contain"
          style={{ filter: dark ? "brightness(0) invert(1)" : undefined }}
        />
      </div>
      <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
        {label}
      </p>
      <p className="text-sm mb-2" style={{ color: "var(--bb-text-muted)" }}>
        {description}
      </p>
      <RuleTag>{tag}</RuleTag>
    </div>
  );
}

function ProhibitedItem({ label }: { label: string }) {
  return (
    <div
      className="flex items-start gap-3 p-4 rounded-lg border"
      style={{ borderColor: "#fecaca", background: "#fff5f5" }}
    >
      <span className="text-red-400 text-lg leading-none mt-0.5">✕</span>
      <p className="text-sm" style={{ color: "#7f1d1d" }}>{label}</p>
    </div>
  );
}

const LLM_LOGO_TEXT = `ЛОГОТИП — LLM-спецификация
Версия: v1.0 · /foundation/logo

ФАЙЛЫ
PNG с прозрачным фоном: /public/logo/logo-transparent.png
SVG/AI: ожидается от дизайнера

СИМВОЛИКА ЗНАКА
Три округлых элемента с равной дистанцией от центра.
- Незамкнутая симметрия: символ развития и жизни, а не завершённости
- Три элемента: структура ухо-горло-нос, триада равновесия
- Отсутствие замкнутой формы: открытость, доступность, человечность

ЦВЕТОВЫЕ ВАРИАНТЫ
Вариант         | Фон               | CSS-фильтр                                                              | Применение
Основной        | Светлый (#f8f9fa) | нет                                                                     | Сайт, полиграфия на белом
Инвертированный | #5b7b87 (073M)   | brightness(0) invert(1)                                                 | Хедер, тёмные секции
На форме (беж)  | #c4a882 (081M)   | brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45) | Форма сотрудников (бежевый)
На форме (синий)| #1b4c72 (050M)   | brightness(0) invert(1)                                                 | Форма сотрудников (синий)

ОХРАННАЯ ЗОНА
Минимальный отступ со всех сторон = высота буквы «К» в слове «КЛИНИКА»

РАЗМЕРЫ НА ФОРМЕ СОТРУДНИКОВ
До 46 р. | 70 мм × 25,5 мм | Левая сторона груди
От 48 р. | 90 мм × 32,8 мм | Левая сторона груди

ПРАВИЛА
✓ Применять только одобренные цветовые варианты
✓ Соблюдать охранную зону
✓ Использовать PNG с прозрачным фоном для digital
✓ Белый логотип (invert) на тёмных фонах (073M, 050M)
✕ Не изменять пропорции или искажать логотип
✕ Не изменять цвета элементов логотипа
✕ Не добавлять рядом произвольный текст
✕ Не размещать на фоне без достаточного контраста
✕ Не применять тени, обводки, градиенты`.trim();

export default function LogoPage() {
  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.2
        </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
          className="mt-4 px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
          style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
        >
          <span>⚠️</span>
          <span>
            Изображение извлечено из PDF-брендбука. Векторный SVG будет добавлен
            после передачи исходных файлов от дизайнера.
          </span>
        </div>
      </div>

      {/* 1. Логотип */}
      <Section
        id="hierarchy"
        title="Логотип"
        subtitle="Единый логотип клиники. Применяется на всех носителях."
      >
        <LogoCard
          src="/logo/logo-transparent.png"
          alt="Логотип Клиника ухо, горло, нос им. проф. Е.Н. Оленевой"
          label="Логотип клиники"
          description="Применяется в точках контакта с клиентами, на лендингах и сайтах направлений. Применяется для онлайн и оффлайн коммуникаций с клиентами, во внутренней документации."
          tag="Онлайн · Оффлайн · Документация"
        />
      </Section>

      {/* 2. Символика знака */}
      <Section
        id="symbol"
        title="Символика знака"
        subtitle="О том, что стоит за формой логотипа."
      >
        {/* Главный тезис */}
        <div
          className="rounded-xl border p-6 mb-6"
          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
        >
          <p className="text-sm leading-relaxed" style={{ color: "var(--bb-text)" }}>
            В знаке клиники — три округлых элемента, расположенных с равной дистанцией от центра.
            Это создаёт ощущение симметрии, порядка и движения, но без завершённой формы (звезды или круга).
          </p>
          <div className="mt-4 flex flex-col gap-2">
            {[
              "Сохраняет баланс и лёгкость",
              "Намекает на естественность и органику",
              "Не замыкает символ — оставляет «дыхание», открытость",
            ].map(item => (
              <div key={item} className="flex items-start gap-2.5">
                <div
                  className="w-1.5 h-1.5 rounded-full mt-1.5 shrink-0"
                  style={{ background: "var(--brand-053m)" }}
                />
                <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>{item}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Три значения */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 mb-6">
          {[
            {
              num: "1",
              title: "Незамкнутая симметрия",
              text: "Это процесс, а не результат. Знак говорит: «мы развиваемся, мы живые, мы не идеальны, но гармоничны».",
            },
            {
              num: "2",
              title: "Три элемента",
              text: "Классическая структура уха–горла–носа. Триада равновесия, ритм дыхания, символ доверия и открытости.",
            },
            {
              num: "3",
              title: "Отсутствие замкнутости",
              text: "Нет барьера — есть приглашение. Открытая форма передаёт заботу, доступность и человечность.",
            },
          ].map(item => (
            <div
              key={item.num}
              className="rounded-xl border p-5"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <div
                className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold mb-3"
                style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
              >
                {item.num}
              </div>
              <p className="font-medium text-sm mb-2" style={{ color: "var(--bb-text)" }}>
                {item.title}
              </p>
              <p className="text-sm leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>
                {item.text}
              </p>
            </div>
          ))}
        </div>

        {/* Почему не звезда */}
        <div
          className="rounded-xl border p-5 flex gap-4"
          style={{ borderColor: "#e0f5f4", background: "#f8fffe" }}
        >
          <div
            className="w-8 h-8 rounded-full flex items-center justify-center shrink-0 mt-0.5"
            style={{ background: "#e0f5f4" }}
          >
            <span className="text-base leading-none">○</span>
          </div>
          <div>
            <p className="font-medium text-sm mb-1.5" style={{ color: "var(--bb-text)" }}>
              Почему нет законченной звезды
            </p>
            <p className="text-sm leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>
              Звезда — символ завершённости и сакрального порядка. Знак клиники — символ жизни
              и взаимодействия. Он ближе по духу к живой биоморфной форме (капли, клетки, лепестки),
              чем к идеальной математической фигуре. Такой дизайн передаёт не «власть формы»,
              а заботу, мягкость и человечность.
            </p>
          </div>
        </div>
      </Section>

      {/* 3. Цветовые варианты */}
      <Section
        id="variants"
        title="Цветовые варианты"
        subtitle="Логотип существует в нескольких вариантах в зависимости от фона носителя."
      >
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
          <div>
            <div
              className="flex items-center justify-center rounded-xl border p-6 mb-3"
              style={{ background: "#f8f9fa", borderColor: "var(--bb-border)", minHeight: 160 }}
            >
              <Image src="/logo/logo-transparent.png" alt="Логотип на светлом фоне"
                width={220} height={87} className="object-contain" />
            </div>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Основной — на светлом фоне
            </p>
          </div>
          <div>
            <div
              className="flex items-center justify-center rounded-xl p-6 mb-3"
              style={{ background: "var(--brand-073m)", minHeight: 160 }}
            >
              {/* brightness(0) делает всё чёрным, invert(1) — белым */}
              <Image src="/logo/logo-transparent.png" alt="Логотип инвертированный"
                width={220} height={87} className="object-contain"
                style={{ filter: "brightness(0) invert(1)" }} />
            </div>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Инвертированный — на тёмном фоне
            </p>
          </div>
          <div>
            <div
              className="flex items-center justify-center rounded-xl border p-6 mb-3"
              style={{ background: "var(--brand-081m)", borderColor: "transparent", minHeight: 160 }}
            >
              {/* Коричневый: насыщенный sepia + darkening */}
              <Image src="/logo/logo-transparent.png" alt="Логотип коричневый на форме"
                width={220} height={87} className="object-contain"
                style={{ filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)" }} />
            </div>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Коричневый — на форме (бежевый костюм)
            </p>
          </div>
        </div>
      </Section>

      {/* 3. Охранная зона */}
      <Section
        id="clearspace"
        title="Охранная зона"
        subtitle="Вокруг логотипа всегда должно быть свободное пространство — не менее высоты буквы «x» в слове «КЛИНИКА»."
      >
        <div
          className="flex items-center justify-center rounded-xl border p-16 relative"
          style={{ background: "#f8f9fa", borderColor: "var(--bb-border)" }}
        >
          <div className="absolute inset-8 border-2 border-dashed rounded-lg"
            style={{ borderColor: "var(--brand-053m)", opacity: 0.5 }} />
          {["top","bottom","left","right"].map(side => (
            <div key={side} className={`absolute text-xs font-medium
              ${side==="top" ? "top-2 left-1/2 -translate-x-1/2" : ""}
              ${side==="bottom" ? "bottom-2 left-1/2 -translate-x-1/2" : ""}
              ${side==="left" ? "left-2 top-1/2 -translate-y-1/2" : ""}
              ${side==="right" ? "right-2 top-1/2 -translate-y-1/2" : ""}
            `} style={{ color: "var(--brand-053m)" }}>x</div>
          ))}
          <Image src="/logo/logo-transparent.png" alt="Логотип с охранной зоной"
            width={320} height={126} className="object-contain relative z-10" />
        </div>
        <p className="mt-3 text-sm" style={{ color: "var(--bb-text-muted)" }}>
          Пунктирная рамка — граница охранной зоны. Никакие другие элементы не должны её пересекать.
        </p>
      </Section>

      {/* 4. Минимальные размеры */}
      <Section
        id="sizes"
        title="Размеры логотипа для размещения на форме сотрудников"
      >
        <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>
              {[
                ["До 46 (включительно)", "70 мм", "25,5 мм", "Левая сторона груди"],
                ["От 48", "90 мм", "32,8 мм", "Левая сторона груди"],
              ].map(([size, w, h, pos]) => (
                <tr key={size} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{size}</td>
                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{w}</td>
                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{h}</td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* 5. Недопустимые варианты */}
      <Section
        id="prohibited"
        title="Недопустимые варианты использования"
      >
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <ProhibitedItem label="Изменять пропорции или искажать логотип" />
          <ProhibitedItem label="Изменять цвета элементов логотипа" />
          <ProhibitedItem label="Добавлять рядом произвольный текст" />
          <ProhibitedItem label="Размещать на фоне без достаточного контраста" />
          <ProhibitedItem label="Использовать отдельные элементы без остальных" />
          <ProhibitedItem label="Применять тени, обводки, градиенты" />
        </div>
      </Section>

      {/* 6. Скачать */}
      <Section id="download" title="Скачать файлы">
        <div
          className="rounded-xl border p-6 flex flex-col sm:flex-row items-start sm:items-center gap-4"
          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
        >
          <div className="flex-1">
            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
              Векторные файлы логотипа (SVG, AI, PNG)
            </p>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Будут доступны после передачи исходных файлов от дизайнера.
            </p>
          </div>
          <button disabled className="px-4 py-2 rounded-lg text-sm font-medium cursor-not-allowed"
            style={{ background: "#e5e7eb", color: "#9ca3af" }}>
            Скачать (скоро)
          </button>
        </div>
      </Section>

      {/* LLM-блок */}
      <LlmBlock
        path="/foundation/logo"
        version="v1.0"
        specText={LLM_LOGO_TEXT}
      >
        <LlmSection title="Файлы логотипа" />
        <LlmTable
          headers={["Файл", "Формат", "Путь", "Статус"]}
          rows={[
            ["logo-transparent.png", "PNG с прозрачным фоном", "/public/logo/logo-transparent.png", "✓ Доступен"],
            ["logo.svg / logo.ai", "Вектор", "—", "Ожидается от дизайнера"],
          ]}
        />
        <LlmSection title="Цветовые варианты" />
        <LlmTable
          headers={["Вариант", "Фон", "CSS-фильтр", "Применение"]}
          rows={[
            ["Основной", "Светлый (#f8f9fa)", "нет", "Сайт, полиграфия на белом"],
            ["Инвертированный", "#5b7b87 (073M)", "brightness(0) invert(1)", "Хедер, тёмные секции"],
            ["На форме (беж)", "#c4a882 (081M)", "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)", "Форма сотрудников (бежевый костюм)"],
            ["На форме (синий)", "#1b4c72 (050M)", "brightness(0) invert(1)", "Форма сотрудников (синий костюм)"],
          ]}
        />
        <LlmSection title="Охранная зона и размеры на форме" />
        <LlmTable
          headers={["Носитель", "Условие", "Длина", "Высота", "Расположение"]}
          rows={[
            ["Форма сотрудников", "Размер до 46 р.", "70 мм", "25,5 мм", "Левая сторона груди"],
            ["Форма сотрудников", "Размер от 48 р.", "90 мм", "32,8 мм", "Левая сторона груди"],
            ["Охранная зона", "Все носители", "≥ высота буквы «К»", "≥ высота буквы «К»", "Вокруг логотипа со всех сторон"],
          ]}
        />
        <LlmSection title="Правила использования" />
        <LlmRules
          rules={[
            { ok: true, text: "Применять только одобренные цветовые варианты" },
            { ok: true, text: "Соблюдать охранную зону (≥ высота буквы «К»)" },
            { ok: true, text: "Использовать PNG с прозрачным фоном для digital" },
            { ok: true, text: "Белый логотип на тёмных фонах (073M, 050M, 080M)" },
            { ok: false, text: "Не изменять пропорции или искажать логотип" },
            { ok: false, text: "Не изменять цвета элементов логотипа" },
            { ok: false, text: "Не добавлять рядом произвольный текст" },
            { ok: false, text: "Не размещать на фоне без достаточного контраста" },
            { ok: false, text: "Не применять тени, обводки, градиенты" },
          ]}
        />
      </LlmBlock>

    </div>
  );
}
