---
import "./header.style.css";
import { Image } from "astro:assets";
import Logo from "@images/main/header/logo.svg";
import Logo2 from "@images/main/footer/logo.svg";
import Phone from "@images/main/footer/phone.png";
import Email from "@images/main/footer/email.png";
import { languages, type SupportedLang } from "@/i18n/ui";
import {
  getLangFromUrl,
  useTranslatedPath,
  useTranslations,
} from "@/i18n/utils";

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const translatePath = useTranslatedPath(lang);
---

<header>
  <div class="cont">
    <div class="logo">
      <a href="/"><Image src={Logo} alt="MID" /></a>
    </div>

    <nav class="navigation">
      <a href={translatePath("/#services")}>{t("menu.services")}</a>
      <a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
      <a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
      <a href="/blog">{t("menu.blog")}</a>
      <a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
    </nav>

    <nav class="lang-switcher" aria-label="Language switcher">
      {
        Object.entries(languages).map(([locale, label]) => {
          const targetLang = locale as SupportedLang;
          return (
            <a
              href={translatePath("/", targetLang)}
              class={targetLang === lang ? "active" : ""}
            >
              {label}
            </a>
          );
        })
      }
    </nav>

    <button
      class="mobile-menu-btn"
      aria-label="Toggle menu"
      aria-expanded="false"
    >
      <span id="top-left"></span>
      <span id="top-right"></span>
      <span id="center-left"></span>
      <span id="center-right"></span>
      <span id="bottom-left"></span>
      <span id="bottom-right"></span>
    </button>

    <div class="mobile-menu">
      <Image src={Logo2} alt="MID Creative Digital Agency" />

      <nav class="navigation">
        <a href={translatePath("/#top")}>{t("menu.home")}</a>
        <a href={translatePath("/#services")}>{t("menu.services")}</a>
        <a href={translatePath("/#about-us")}>{t("menu.about_us")}</a>
        <a href={translatePath("/#projects")}>{t("menu.portfolio")}</a>
        <a href="/blog">{t("menu.blog")}</a>
        <a href={translatePath("/#contact-us")}>{t("menu.contact_us")}</a>
      </nav>

      <nav class="lang-switcher" aria-label="Language switcher mobile">
        {
          Object.entries(languages).map(([locale, label]) => {
            const targetLang = locale as SupportedLang;
            return (
              <a
                href={translatePath("/", targetLang)}
                class={targetLang === lang ? "active" : ""}
              >
                {label}
              </a>
            );
          })
        }
      </nav>

      <div class="header-contacts">
        <a href="tel:+37126620770">+371 2662 0770</a>
      </div>
      <div class="header-contacts">
        <a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
      </div>
    </div>
  </div>
</header>

<script>
  const btn = document.querySelector(".mobile-menu-btn") as HTMLElement;
  const menu = document.querySelector(".mobile-menu") as HTMLElement;

  btn.addEventListener("click", () => {
    const isOpen = menu.classList.toggle("open");
    btn.classList.toggle("open");
    btn.setAttribute("aria-expanded", String(isOpen));
  });

  document.addEventListener("click", (e) => {
    if (!menu.contains(e.target as Node) && !btn.contains(e.target as Node)) {
      menu.classList.remove("open");
      btn.classList.remove("open");
      btn.setAttribute("aria-expanded", "false");
    }
  });

  window.addEventListener("resize", () => {
    menu.classList.remove("open");
    btn.classList.remove("open");
    btn.setAttribute("aria-expanded", "false");
  });
</script>