---
import MobileMenu from "../../islands/MobileMenu.jsx";
import { Image } from "astro:assets";
import logo from "../../assets/logo.webp";

const links = [
  { name: "START", href: "/" },
  { name: "INTERNET ŚWIATŁOWODOWY", href: "/internet-swiatlowodowy" },
  { name: "INTERNET I TELEWIZJA", href: "/internet-telewizja" },
  { name: "TELEFON", href: "/telefon" },
  { name: "ZASIĘG SIECI", href: "/mapa-zasiegu" },
  { name: "KONTAKT", href: "/kontakt" },
  { name: "DOKUMENTY", href: "/dokumenty" },
  {
    name: "BOK",
    href: "https://panel.fuz.pl/userpanel/auth",
    external: true,
    target: "_blank",
  },
];
---

<nav class="f-navbar">
  <div class="f-navbar-inner">
    <a href="/" class="flex items-center gap-2 font-semibold">
      <Image
        src={logo}
        alt="FUZ Logo"
        class="f-navbar-logo"
        loading="eager"
        decoding="async"
      />
    </a>

    <div class="hidden md:flex f-navbar-links">
      {
        links.map((link) => (
          <a
            href={link.href}
            class="f-navbar-link"
            target={link.target}
            rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
          >
            {link.name}
          </a>
        ))
      }
    </div>

    <MobileMenu client:load links={links} />
  </div>
</nav>