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 UniformPage() {
  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.1
        </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
        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/uniform/uniform-1.jpeg"
                alt="Бежевая форма сотрудника клиники с коричневым логотипом"
                width={742}
                height={990}
                className="w-full object-cover"
                style={{ maxHeight: 480, objectPosition: "top" }}
              />
            </div>
            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
              Бежевый вариант
            </p>
            <p className="text-sm mb-3" style={{ color: "var(--bb-text-muted)" }}>
              Основная форма для медицинского персонала. Логотип — тёмно-коричневый.
            </p>
            <div className="flex gap-2">
              <div className="flex items-center gap-1.5">
                <div
                  className="w-4 h-4 rounded"
                  style={{ background: "#c4a882", border: "1px solid #e5e7eb" }}
                />
                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
                  Oracal 081M
                </span>
              </div>
              <span style={{ color: "var(--bb-text-muted)" }}>·</span>
              <div className="flex items-center gap-1.5">
                <div
                  className="w-4 h-4 rounded"
                  style={{ background: "#5c2e0e", border: "1px solid #e5e7eb" }}
                />
                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
                  Логотип 080M
                </span>
              </div>
            </div>
          </div>

          {/* Синий вариант */}
          <div>
            <div
              className="rounded-xl overflow-hidden border mb-4"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <Image
                src="/offline/uniform/uniform-2.jpeg"
                alt="Синяя форма сотрудника клиники с белым логотипом"
                width={580}
                height={773}
                className="w-full object-cover"
                style={{ maxHeight: 480, objectPosition: "top" }}
              />
            </div>
            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
              Синий вариант
            </p>
            <p className="text-sm mb-3" style={{ color: "var(--bb-text-muted)" }}>
              Альтернативный вариант. Логотип — белый инвертированный.
            </p>
            <div className="flex gap-2">
              <div className="flex items-center gap-1.5">
                <div
                  className="w-4 h-4 rounded"
                  style={{ background: "#4a90c4", border: "1px solid #e5e7eb" }}
                />
                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
                  Синий медицинский
                </span>
              </div>
              <span style={{ color: "var(--bb-text-muted)" }}>·</span>
              <div className="flex items-center gap-1.5">
                <div
                  className="w-4 h-4 rounded"
                  style={{ background: "#ffffff", border: "1px solid #e5e7eb" }}
                />
                <span className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
                  Логотип белый
                </span>
              </div>
            </div>
          </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>
              {[
                ["До 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>

      {/* Правила */}
      <Section title="Правила использования">
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {[
            { ok: true,  text: "Носить комплект в полном составе" },
            { ok: true,  text: "Поддерживать чистоту и опрятность формы" },
            { ok: true,  text: "Логотип только в утверждённых цветовых вариантах" },
            { ok: false, text: "Носить форму без логотипа" },
            { ok: false, text: "Изменять цвет или материал формы" },
            { ok: false, text: "Добавлять сторонние нашивки и знаки" },
          ].map(item => (
            <div
              key={item.text}
              className="flex items-start gap-3 p-4 rounded-lg border"
              style={{
                borderColor: item.ok ? "#a7f3d0" : "#fecaca",
                background: item.ok ? "#f0fdf4" : "#fff5f5",
              }}
            >
              <span style={{ color: item.ok ? "#16a34a" : "#ef4444" }}>
                {item.ok ? "✓" : "✕"}
              </span>
              <p className="text-sm" style={{ color: item.ok ? "#14532d" : "#7f1d1d" }}>
                {item.text}
              </p>
            </div>
          ))}
        </div>
      </Section>

    </div>
  );
}
