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>
  );
}

/* Макет визитки */
function BusinessCardMockup({ side }: { side: "front" | "back" }) {
  /* 90×50 мм → пропорция 9:5. Отображаем 288×160px */
  if (side === "front") {
    return (
      <div
        className="rounded-xl overflow-hidden shadow-md"
        style={{ width: 288, height: 160, background: "#5b7b87", flexShrink: 0 }}
      >
        {/* Верхняя бирюзовая полоса */}
        <div style={{ height: 6, background: "#7ecfca" }} />

        <div className="flex h-full">
          {/* Левая колонка с логотипом */}
          <div
            className="flex items-center justify-center px-6"
            style={{ width: 110, borderRight: "1px solid rgba(255,255,255,0.15)" }}
          >
            <Image
              src="/logo/logo-transparent.png"
              alt="Логотип"
              width={80}
              height={28}
              className="object-contain"
              style={{ filter: "brightness(0) invert(1)" }}
            />
          </div>

          {/* Правая колонка с данными */}
          <div className="flex flex-col justify-center px-5 pb-2 gap-1">
            <p
              style={{
                fontFamily: "'DINPro', Arial, sans-serif",
                fontSize: 12,
                fontWeight: 700,
                color: "#ffffff",
              }}
            >
              Иванова Анна Викторовна
            </p>
            <p
              style={{
                fontFamily: "'DINPro', Arial, sans-serif",
                fontSize: 9,
                color: "rgba(255,255,255,0.7)",
              }}
            >
              Врач-оториноларинголог
            </p>
            <div className="mt-2 space-y-0.5">
              {["+7 (495) 000-00-00", "oclinica.ru"].map(line => (
                <p
                  key={line}
                  style={{
                    fontFamily: "'DINPro', Arial, sans-serif",
                    fontSize: 8,
                    color: "rgba(255,255,255,0.6)",
                  }}
                >
                  {line}
                </p>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div
      className="rounded-xl overflow-hidden shadow-md flex items-center justify-center"
      style={{ width: 288, height: 160, background: "#c4a882", flexShrink: 0 }}
    >
      <Image
        src="/logo/logo-transparent.png"
        alt="Логотип на обороте"
        width={140}
        height={50}
        className="object-contain"
        style={{
          filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
        }}
      />
    </div>
  );
}

/* Макет листовки */
function LeafletMockup() {
  /* А5 = 148×210 мм → пропорция ≈ 1:1.42. Отображаем 180×256px */
  return (
    <div
      className="rounded-xl overflow-hidden shadow-md"
      style={{ width: 180, height: 256, background: "#ffffff", border: "1px solid #e5e7eb", flexShrink: 0 }}
    >
      {/* Шапка */}
      <div
        className="px-4 pt-4 pb-3 flex items-end justify-between"
        style={{ background: "#5b7b87" }}
      >
        <Image
          src="/logo/logo-transparent.png"
          alt="Логотип"
          width={90}
          height={32}
          className="object-contain"
          style={{ filter: "brightness(0) invert(1)" }}
        />
      </div>

      {/* Тело */}
      <div className="px-4 pt-3">
        {/* Плейсхолдер фото */}
        <div
          className="w-full rounded mb-3"
          style={{ height: 70, background: "#e0f5f4" }}
        />
        {/* Заголовок */}
        <div
          className="h-3 rounded mb-1.5"
          style={{ background: "#1b4c72", width: "80%" }}
        />
        <div
          className="h-3 rounded mb-3"
          style={{ background: "#1b4c72", width: "60%" }}
        />
        {/* Текст-заглушка */}
        {[100, 90, 95, 80].map((w, i) => (
          <div
            key={i}
            className="h-1.5 rounded mb-1"
            style={{ background: "#e5e7eb", width: `${w}%` }}
          />
        ))}
        {/* CTA-кнопка */}
        <div
          className="mt-4 rounded py-2 text-center"
          style={{ background: "#7ecfca" }}
        >
          <p
            style={{
              fontFamily: "'DINPro', Arial, sans-serif",
              fontSize: 9,
              fontWeight: 700,
              color: "#ffffff",
            }}
          >
            ЗАПИСАТЬСЯ НА ПРИЁМ
          </p>
        </div>
      </div>
    </div>
  );
}

export default function PrintPage() {
  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.5
        </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)" }}>
          Листовки, визитки и digital-каналы клиники. Все материалы следуют
          единому фирменному стилю с использованием шрифта DINPro и цветов Oracal.
        </p>
      </div>

      {/* Визитки */}
      <Section
        title="Визитки"
        subtitle="Стандарт 90×50 мм. Двусторонняя печать. Изображены в масштабе."
      >
        <div className="flex flex-wrap gap-6 items-start">
          <div className="flex flex-col items-center gap-2">
            <BusinessCardMockup side="front" />
            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Лицевая сторона</p>
          </div>
          <div className="flex flex-col items-center gap-2">
            <BusinessCardMockup side="back" />
            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Оборотная сторона</p>
          </div>
        </div>

        <div
          className="mt-6 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>
              {[
                ["Лицевая — логотип", "Белый инвертированный на тёмно-серо-голубом фоне"],
                ["Лицевая — ФИО", "DINPro Bold, 10pt, белый"],
                ["Лицевая — должность", "DINPro Regular, 8pt, белый 70%"],
                ["Лицевая — контакты", "DINPro Regular, 7pt, белый 60%"],
                ["Оборотная", "Логотип тёмно-коричневый на бежевом фоне (081M)"],
                ["Размер", "90 × 50 мм, 4+4 офсет или цифровая печать"],
              ].map(([el, content]) => (
                <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>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* Листовки */}
      <Section
        title="Листовки"
        subtitle="Формат А5 (148×210 мм). Шаблон для акций и информационных материалов."
      >
        <div className="flex gap-8 items-start">
          <LeafletMockup />
          <div className="flex-1">
            <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
              Структура листовки
            </p>
            <div className="space-y-3">
              {[
                { zone: "Шапка", desc: "Логотип белый на тёмно-серо-голубом (073M)" },
                { zone: "Фото", desc: "Фото врача или процедуры, 70% ширины" },
                { zone: "Заголовок", desc: "DINPro Bold, тёмно-синий (050M), 18–22pt" },
                { zone: "Текст", desc: "DINPro Regular, 9–10pt, серый #374151" },
                { zone: "CTA-кнопка", desc: "Основной бирюзовый (053M), DINPro Bold белый" },
              ].map(({ zone, desc }) => (
                <div key={zone} className="flex gap-3">
                  <span
                    className="shrink-0 text-xs font-semibold px-2 py-0.5 rounded mt-0.5"
                    style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
                  >
                    {zone}
                  </span>
                  <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

      {/* Telegram-бот */}
      <Section
        title="Telegram-бот"
        subtitle="Цифровой канал взаимодействия с пациентами."
      >
        <div
          className="rounded-xl border p-6"
          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
        >
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
            {[
              { icon: "🤖", title: "Запись на приём", desc: "Выбор врача, даты и времени через бот" },
              { icon: "📋", title: "Результаты анализов", desc: "Уведомления и просмотр результатов" },
              { icon: "💬", title: "Напоминания", desc: "Напоминание о предстоящем визите" },
            ].map(({ icon, title, desc }) => (
              <div key={title} className="flex gap-3">
                <span className="text-2xl shrink-0">{icon}</span>
                <div>
                  <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
                    {title}
                  </p>
                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div
            className="mt-4 pt-4 border-t text-xs"
            style={{ borderColor: "var(--bb-border)", color: "var(--bb-text-muted)" }}
          >
            В Telegram-боте используется системный шрифт Telegram. Логотип и цвета бренда
            применяются в аватаре, приветственном изображении и кнопках меню.
          </div>
        </div>
      </Section>

    </div>
  );
}
