"use client";

import { NAV_ITEMS } from "./navData";
export { NAV_ITEMS };

function NavItem({ item, isActive }: { item: (typeof NAV_ITEMS)[number]; isActive: boolean }) {
  const hasSubmenu = item.submenu.length > 0;

  return (
    <div className="bb-nav-item-wrap relative group">
      <a
        href="#"
        className="bb-nav-item px-2.5 py-3 whitespace-nowrap inline-flex items-center gap-1"
        style={{
          fontSize: 18,
          color: "#000",
          fontWeight: 400,
          textDecoration: "underline",
          textUnderlineOffset: "4px",
        }}
      >
        {item.label}
        {hasSubmenu && (
          <span className="text-xs" style={{ color: "#9ca3af", textDecoration: "none", display: "inline-block" }}>▾</span>
        )}
      </a>
      {hasSubmenu && (
        <div
          className="absolute left-0 top-full z-50 hidden group-hover:block min-w-[220px] py-1 rounded shadow-lg"
          style={{ background: "#fff", border: "1px solid #e5e7eb" }}
        >
          {item.submenu.map((sub) => (
            <a
              key={sub}
              href="#"
              className="block px-4 py-2 text-sm bb-nav-sub-item"
              style={{ color: "#333", textDecoration: "none" }}
            >
              {sub}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

export function NavigationBlock() {
  return (
    <div className="bg-white relative">
      {/* Верхняя панель: три столбца — логотип | ссылки | телефон+кнопка */}
      <div className="flex items-center px-6 py-4">
        {/* Столбец 1: Логотип */}
        <div className="shrink-0">
          <img
            src="/logo/logo-main.png"
            alt="Клиника ухо, горло, нос"
            className="h-20 w-auto"
          />
        </div>

        {/* Столбец 2: Три ссылки вертикально — прижат к логотипу */}
        <div className="flex flex-col gap-1.5 ml-6">
          <a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}>
            <span style={{ color: "#9ca3af" }}>📍</span>
            <span style={{ color: "#52b4bd", textDecoration: "underline" }}>К. Цеткин, 9</span>
          </a>
          <a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}>
            <span style={{ color: "#9ca3af" }}>📍</span>
            <span style={{ color: "#52b4bd", textDecoration: "underline" }}>Клиника лечения кашля и аллергии</span>
          </a>
          <a href="#" className="flex items-center gap-1.5 text-sm" style={{ color: "#9ca3af", textDecoration: "none" }}>
            <span style={{ color: "#9ca3af" }}>📍</span>
            <span style={{ color: "#52b4bd", textDecoration: "underline" }}>Центр диагностики и реабилитации</span>
          </a>
        </div>

        {/* Столбец 3: Телефон + кнопка вертикально — прижат вправо */}
        <div className="flex flex-col items-end gap-2 shrink-0 ml-auto">
          <span className="font-bold" style={{ color: "#000", fontSize: 25 }}>
            /342/ 255-53-84
          </span>
          <button className="bb-btn bb-btn-md bb-btn-pill">Заказать звонок</button>
        </div>
      </div>

      {/* Главное меню */}
      <nav className="flex bg-white">
        {NAV_ITEMS.map((item, i) => (
          <NavItem key={item.label} item={item} isActive={i === 0} />
        ))}
      </nav>
    </div>
  );
}