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 TransportPage() {
  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.4
        </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="rounded-xl overflow-hidden border"
          style={{ borderColor: "var(--bb-border)" }}
        >
          <Image
            src="/offline/transport/tram-mockup.jpeg"
            alt="Макет брендирования трамвая: вид спереди и сзади с логотипом Клиники ухо горло нос им. проф. Е.Н.Оленевой"
            width={1884}
            height={977}
            className="w-full"
          />
        </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)" }}>
                {["Зона", "Цвет", "Oracal", "Высота", "Содержимое"].map(h => (
                  <th
                    key={h}
                    className="text-left px-4 py-3 font-medium"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Верхняя полоса", "#7ecfca", "053M", "~17% высоты", "Декоративная"],
                ["Центральная полоса", "#c4a882", "081M", "~48% высоты", "Логотип клиники (по центру)"],
                ["Нижняя полоса", "#5b7b87", "073M", "~35% высоты", "Декоративная / контактная информация"],
              ].map(([zone, hex, oracal, height, content]) => (
                <tr
                  key={zone}
                  className="border-t"
                  style={{ borderColor: "var(--bb-border)" }}
                >
                  <td className="px-4 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
                    {zone}
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      <div
                        className="w-5 h-5 rounded"
                        style={{ background: hex as string, border: "1px solid #e5e7eb" }}
                      />
                      <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
                        {hex}
                      </span>
                    </div>
                  </td>
                  <td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
                    {oracal}
                  </td>
                  <td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{height}</td>
                  <td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* Логотип на транспорте */}
      <Section
        title="Размещение логотипа"
        subtitle="На центральной полосе, горизонтально по центру борта."
      >
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {[
            { label: "Минимальная длина логотипа", value: "600 мм" },
            { label: "Отступ от краёв борта", value: "≥ 400 мм" },
            { label: "Вертикальное выравнивание", value: "По центру полосы" },
            { label: "Цвет логотипа", value: "Тёмно-коричневый (080M)" },
          ].map(({ label, value }) => (
            <div
              key={label}
              className="flex items-center gap-4 p-4 rounded-xl border"
              style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
            >
              <div
                className="w-2 h-2 rounded-full shrink-0"
                style={{ background: "var(--brand-053m)" }}
              />
              <div>
                <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{label}</p>
                <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>{value}</p>
              </div>
            </div>
          ))}
        </div>
      </Section>

      <div
        className="rounded-xl border p-4 text-sm flex items-start gap-3"
        style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
      >
        <span className="text-base shrink-0">⚠️</span>
        <p>
          Финальные макеты для производства предоставляются дизайнером в форматах AI / PDF с
          реальными размерами конкретного транспортного средства.
        </p>
      </div>

    </div>
  );
}
