export const NAV_ITEMS = [
  "Клиника",
  "ЛОР врачи",
  "Заболевания",
  "Вопрос-ответ",
  "ЛОР-операции",
  "Сурдология",
  "Цены",
  "Контакты",
];

export function NavigationBlock() {
  return (
    <div
      className="overflow-hidden"
      style={{ border: "1px solid #e5e7eb", boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
    >
      {/* Топ-бар */}
      <div
        className="flex items-center justify-between px-6 py-2 text-xs border-b"
        style={{ background: "#fff", borderColor: "#e5e7eb", color: "#6b7280" }}
      >
        <div className="flex items-center gap-4">
          <span>📍 Б. Цитная, 3</span>
          <a href="#" style={{ color: "#0089c3" }}>
            Клиника ухо горло нос и аллергия
          </a>
          <a href="#" style={{ color: "#0089c3" }}>
            Центр аллергологии и пульмонологии
          </a>
        </div>
        <div className="flex items-center gap-4">
          <span className="font-bold text-sm" style={{ color: "#111827" }}>
            /342/ 255-53-84
          </span>
          <button className="bb-btn bb-btn-sm bb-btn-pill">Заказать звонок</button>
        </div>
      </div>

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

      {/* Главное меню */}
      <nav className="flex border-t bg-white" style={{ borderColor: "#e5e7eb" }}>
        {NAV_ITEMS.map((item, i) => (
          <a
            key={item}
            href="#"
            className="px-4 py-3 text-sm whitespace-nowrap"
            style={{
              color: i === 0 ? "#0089c3" : "#53514e",
              borderRight: "1px solid #f3f4f6",
              fontWeight: i === 0 ? 500 : 400,
              textDecoration: "none",
            }}
          >
            {item}
          </a>
        ))}
      </nav>
    </div>
  );
}