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"
                    style={{ color: "#52b4bd", 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 shrink-0">
          <img
            src="/logo/logo-main.png"
            alt="Клиника ухо, горло, нос"
            className="h-12 w-auto"
          />
        </div>

        {/* Адреса и соцсети */}
        <div className="text-center space-y-2">
          <div className="text-xs space-y-0.5" style={{ color: "#374151" }}>
            <p>Мы находимся по адресам:</p>
            <p>г. Пермь, ул. Клары Цеткин, 9</p>
            <p>г. Пермь, ул. Газеты Звезда, 31А</p>
          </div>
          <div className="flex items-center justify-center gap-2">
            {["VK", "YT", "TG", "OK", "Дзен"].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-2" style={{ color: "#374151" }}>
          <p className="font-semibold text-xs" style={{ color: "#111827" }}>
            Время работы клиники:
          </p>
          <div>
            <p className="font-medium" style={{ color: "#111827" }}>Газеты Звезда 31а</p>
            <p>пн – пт: с 09.00 до 21.00</p>
            <p>сб – вс: с 09:00 до 19:00</p>
          </div>
          <div>
            <p className="font-medium" style={{ color: "#111827" }}>Клары Цеткин 9</p>
            <p>пн – сб: с 09.00 до 17.00</p>
            <p>вс – выходной</p>
          </div>
        </div>
      </div>
    </div>
  );
}