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 BadgesPage() {
  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.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)" }}>
          Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм,
          магнитное крепление. Белый фон, чёрный текст.
        </p>
      </div>

      {/* Фотографии */}
      <Section
        title="Образцы бейджей"
        subtitle="Фотографии реальных бейджей из брендбука клиники."
      >
        <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/badges/badge-2.jpeg"
                alt="Лицевая сторона бейджа: Лебединская Елена Александровна, врач оториноларинголог"
                width={690}
                height={347}
                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)" }}>
              Белый фон, скруглённые углы. ФИО — крупный шрифт,
              должности — мелкий. Металлическая рамка.
            </p>
          </div>

          {/* Оборотная сторона */}
          <div>
            <div
              className="rounded-xl overflow-hidden border mb-4"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <Image
                src="/offline/badges/badge-1.jpeg"
                alt="Оборотная сторона бейджа с магнитным креплением"
                width={657}
                height={369}
                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)" }}>
              Чёрный пластик, магнитное крепление (CAUTION MAGNETIC).
              Не требует проколов в одежде.
            </p>
          </div>
        </div>
      </Section>

      {/* Технические параметры */}
      <Section
        title="Технические параметры"
        subtitle="Единый стандарт для всех сотрудников клиники."
      >
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
          {[
            { label: "Ширина", value: "70 мм" },
            { label: "Высота", value: "30 мм" },
            { label: "Материал", value: "Металл / ПВХ" },
            { label: "Крепление", value: "Магнитное" },
          ].map(({ label, value }) => (
            <div
              key={label}
              className="rounded-xl border p-4 text-center"
              style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
            >
              <p className="font-mono text-lg font-semibold" style={{ color: "var(--brand-073m)" }}>
                {value}
              </p>
              <p className="text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
                {label}
              </p>
            </div>
          ))}
        </div>
      </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>
              {[
                ["ФИО", "Фамилия Имя Отчество", "Крупный шрифт, первая строка"],
                ["Должность", "Основная должность", "Мелкий шрифт, вторая строка"],
                ["Специализация", "Специализация / учёная степень (если есть)", "Мелкий шрифт, третья строка"],
              ].map(([el, content, style]) => (
                <tr
                  key={el}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{style}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Пример из фото */}
        <div
          className="mt-4 rounded-xl border p-4 flex items-start gap-3"
          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
        >
          <div
            className="w-1.5 self-stretch rounded-full shrink-0"
            style={{ background: "var(--brand-053m)" }}
          />
          <div>
            <p className="text-xs font-medium mb-1" style={{ color: "var(--bb-text-muted)" }}>
              Пример из брендбука
            </p>
            <p className="text-sm font-semibold" style={{ color: "var(--bb-text)" }}>
              Лебединская Елена Александровна
            </p>
            <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
              врач оториноларинголог · ведущий хирург · кандидат медицинских наук
            </p>
          </div>
        </div>
      </Section>

    </div>
  );
}
