import type { Metadata } from "next";
import Image from "next/image";

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

function Section({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <section 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>
  );
}

export default function NavigationPage() {
  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)" }}
        >
          Оффлайн элементы → 6.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)" }}>
          Система навигационных табличек и указателей внутри клиники.
          На оргстекле, наклейки из плёнок Оракл 053M и 073M.
        </p>
      </div>

      {/* Макеты таблечек */}
      <Section
        title="Макеты навигационных табличек"
        subtitle="Два типа: табличка кабинета с бирюзовым заголовком и карточка врача с логотипом и QR-кодом."
      >
        <div className="max-w-lg">
          <div
            className="rounded-xl overflow-hidden border mb-4"
            style={{ borderColor: "var(--bb-border)" }}
          >
            <Image
              src="/offline/navigation/nav-mockup-signs.jpeg"
              alt="Макеты навигационных табличек: Кабинет 04 с бирюзовым заголовком и карточка врача Лебединской"
              width={620}
              height={570}
              className="w-full object-cover"
            />
          </div>
          <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
            Макет из брендбука
          </p>
          <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
            Табличка «Кабинет 04»: бирюзовый заголовок (Oracal 053M), специализация и ФИО врачей.
            Карточка врача: логотип клиники, имя, должности, QR-код на страницу врача.
          </p>
        </div>
      </Section>

      {/* Нумерация дверей */}
      <Section
        title="Нумерация кабинетов на дверях"
        subtitle="Номер кабинета размещается непосредственно на двери — крупный шрифт, плёнка Oracal."
      >
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
          <div>
            <div
              className="rounded-xl overflow-hidden border mb-4"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <Image
                src="/offline/navigation/nav-door-31.png"
                alt="Белая дверь кабинета 31 с крупным номером из плёнки"
                width={770}
                height={963}
                className="w-full object-cover"
                style={{ maxHeight: 420, objectPosition: "top" }}
              />
            </div>
            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
              Кабинет 31 — белая дверь
            </p>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Крупный номер в верхней части двери. Тёмная плёнка на белом фоне.
            </p>
          </div>

          <div>
            <div
              className="rounded-xl overflow-hidden border mb-4"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <Image
                src="/offline/navigation/nav-3.jpeg"
                alt="Серая дверь кабинета 13 с крупным номером"
                width={800}
                height={463}
                className="w-full object-cover"
                style={{ maxHeight: 420, objectPosition: "left" }}
              />
            </div>
            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
              Кабинет 13 — серая дверь
            </p>
            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
              Тёмная дверь с крупным номером. Рядом — табличка кабинета на стене.
            </p>
          </div>
        </div>
      </Section>

      {/* Указатели по этажам */}
      <Section
        title="Указатели по этажам"
        subtitle="Навигационные панели в холлах — показывают расположение кабинетов и специализации на каждом этаже."
      >
        <div
          className="rounded-xl overflow-hidden border"
          style={{ borderColor: "var(--bb-border)" }}
        >
          <Image
            src="/offline/navigation/nav-render-p13.jpeg"
            alt="Навигационные панели по этажам: кабинеты 01-06, 21-25, 31-37, 41-45"
            width={2105}
            height={1489}
            className="w-full"
          />
        </div>
        <p className="mt-3 text-sm" style={{ color: "var(--bb-text-muted)" }}>
          Слева — указатель с этажом и направлением, справа — панель с полным перечнем кабинетов.
          Активный этаж выделяется бирюзовым фоном (Oracal 053M).
        </p>
      </Section>

      {/* Технические требования */}
      <Section
        title="Технические требования"
        subtitle="Материалы и цвета для производства."
      >
        <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>
              {[
                ["Основной материал", "Оргстекло"],
                ["Покрытие", "Наклейка из плёнок Oracal"],
                ["Шрифт", "DINPro Bold / Regular"],
                ["Крепление", "Дистанционные держатели"],
              ].map(([param, value]) => (
                <tr
                  key={param}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
                    {param}
                  </td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>
                    {value}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* Цвета Oracal */}
      <Section
        title="Цвета Oracal для навигации"
        subtitle="Допустимые цвета плёнки по коду Oracal."
      >
        <div className="flex gap-6">
          {[
            { code: "053M", hex: "#7ecfca", name: "Заголовок таблички / активный этаж" },
            { code: "073M", hex: "#5b7b87", name: "Дополнительный акцент" },
          ].map(c => (
            <div
              key={c.code}
              className="flex items-center gap-4 rounded-xl border p-4"
              style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
            >
              <div
                className="w-12 h-12 rounded-lg shrink-0"
                style={{ background: c.hex }}
              />
              <div>
                <p className="font-medium text-sm" style={{ color: "var(--bb-text)" }}>
                  Oracal {c.code}
                </p>
                <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
                  {c.name}
                </p>
                <p className="font-mono text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
                  {c.hex}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Section>

    </div>
  );
}
