const FOOTER_COLUMNS = [
  {
    title: "О клинике",
    links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
  },
  {
    title: "Заболевания",
    links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
  },
  {
    title: "Вопрос-ответ",
    links: [
      "Что нужно знать до операции на ухо",
      "Что нужно знать до операции на нос",
      "Отзывы до и после лечения у детей",
      "Что нужно знать при лечении у детей",
    ],
  },
  {
    title: "Операции",
    links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
  },
];

export function FooterBlock() {
  return (
    <div
      className="rounded-xl overflow-hidden"
      style={{ border: "1px solid var(--bb-border)" }}
    >
      {/* 4 колонки ссылок */}
      <div
        className="grid grid-cols-4 gap-6 p-8"
        style={{ background: "#f8f9fa", borderBottom: "1px solid #e5e7eb" }}
      >
        {FOOTER_COLUMNS.map((col) => (
          <div key={col.title}>
            <p className="font-semibold text-sm mb-3" style={{ color: "#111827" }}>
              {col.title}
            </p>
            <ul className="space-y-1.5">
              {col.links.map((link) => (
                <li key={link}>
                  <a
                    href="#"
                    className="text-xs bb-nav-link"
                    style={{ color: "#53514e", textDecoration: "none" }}
                  >
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Нижняя полоса */}
      <div
        className="flex items-start justify-between gap-6 px-8 py-5"
        style={{ background: "#fff" }}
      >
        {/* Логотип */}
        <div className="flex items-center gap-2 shrink-0">
          <div
            className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold"
            style={{ background: "#0089c3" }}
          >
            ✚
          </div>
          <div>
            <div
              className="text-[10px] font-bold uppercase leading-tight"
              style={{ color: "#53514e" }}
            >
              Клиника<br />ухо, горло, нос
            </div>
            <div className="text-[8px] leading-tight" style={{ color: "#9ca3af" }}>
              им. проф. Е.Н.Оленевой
            </div>
          </div>
        </div>

        {/* Адрес и соцсети */}
        <div className="text-center space-y-2">
          <p className="text-xs" style={{ color: "#374151" }}>
            Мы находимся по адресу: Пермь, ул. Г. Звезда, 31а
          </p>
          <div className="flex items-center justify-center gap-2">
            {["VK", "OK", "YT", "TG"].map((s) => (
              <a
                key={s}
                href="#"
                className="text-[11px] px-2 py-1 rounded"
                style={{
                  background: "var(--bb-sidebar-bg)",
                  border: "1px solid var(--bb-border)",
                  color: "var(--bb-text-muted)",
                }}
              >
                {s}
              </a>
            ))}
          </div>
        </div>

        {/* Часы работы */}
        <div className="text-right text-xs space-y-1" style={{ color: "#374151" }}>
          <p className="font-semibold text-xs mb-1" style={{ color: "#111827" }}>
            Часы работы:
          </p>
          <p>Пн–пт: 9:00–21:00</p>
          <p>Сб: 9:00–18:00</p>
          <p>Вс: выходной</p>
        </div>
      </div>
    </div>
  );
}