"use client";

import { useLocalizedNavigation } from "@/src/lib/hooks/useLocalizedNavigation";
import { detailHref } from "@/src/lib/utils/detailHref";
import Image from "next/image";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";

import { useEffect, useRef, useState } from "react";
import { Menu, X, ChevronDown } from "lucide-react";
import { AnimatePresence, motion } from "framer-motion";
import {
  HeaderData,
  MenuItem,
  WhatsAppData,
  GeneralSettings,
} from "@/src/lib/types/header";
import { withCDN } from "@/src/lib/utils";
import { useLanguage } from "@/src/lib/context/LanguageContext";
import { usePathname, useSearchParams } from "next/navigation";
import { getFlagByLanguageCode, getLanguageName } from "@/src/lib/constants/languages";

import { ProcessedProgram } from "@/src/lib/types/programs";
import { Activity } from "@/src/lib/services/workshopService";

interface NavbarProps {
  headerData?: HeaderData;
  whatsappData?: WhatsAppData | null;
  generalSettings?: GeneralSettings;
  programs?: ProcessedProgram[];
  workshops?: Activity[];
  /** Every published language code (header-footer `available_templates`). */
  availableLanguages?: string[];
  /** The corporate site, which offers every published language. */
  isGlobalSite?: boolean;
}

function sortMenuItems(items: MenuItem[]): MenuItem[] {
  return [...items].sort((a, b) => a.order_no - b.order_no);
}

/**
 * A language named in itself - "Français", "Español". The menu shows only flag
 * and code, so this is what screen readers announce for each option. Falls
 * back to the English name.
 */
function nativeLanguageName(code: string): string {
  try {
    const name = new Intl.DisplayNames([code], { type: "language" }).of(code);
    if (name && name.toLowerCase() !== code.toLowerCase()) {
      return name.charAt(0).toUpperCase() + name.slice(1);
    }
  } catch {
    // Unknown or malformed code - use the mapping below.
  }
  return getLanguageName(code);
}

/**
 * Which dropdown a menu item opens. Matched on its link: the name is
 * translated on non-English sites ("PROGRAMMES", "TALLERES"), so comparing it
 * to "programs" lost the dropdowns there. The English name still counts, for
 * a site whose item links somewhere unusual.
 */
function menuSection(item: MenuItem): "programs" | "workshops" | null {
  const path = (item.url || "")
    .replace(/^https?:\/\/[^/]+/i, "")
    .split(/[?#]/)[0]
    .replace(/\/+$/, "")
    .toLowerCase();
  const name = (item.name || "").trim().toLowerCase();

  if (path === "/programs" || name === "programs") return "programs";
  if (path === "/workshops" || name === "workshops") return "workshops";
  return null;
}

function filterActiveMenuItems(items: MenuItem[]): MenuItem[] {
  return items.filter(
    (item) =>
      (item.access === null ||
        item.access === undefined ||
        item.access) &&
      item.status
  );
}

export default function Navbar({
  headerData,
  whatsappData,
  generalSettings,
  programs = [],
  workshops = [],
  availableLanguages = [],
  isGlobalSite = false,
}: NavbarProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeMenu, setActiveMenu] = useState<string | null>(null);
  const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false);
  const mobileLanguageRef = useRef<HTMLDivElement>(null);
  const desktopLanguageRef = useRef<HTMLDivElement>(null);
  const [mobileSubmenuOpen, setMobileSubmenuOpen] = useState<string | null>(
    null
  );

  const { currentLanguage, toggleLanguage } = useLanguage();

  const menuItems = headerData?.menu || [];
  const logoUrl = headerData?.logo || null;

  const activeMenuItems = filterActiveMenuItems(menuItems);
  const sortedMenuItems = sortMenuItems(activeMenuItems);

  const getWhatsAppLink = () => {
    if (!whatsappData?.phone_number) {
      return "https://wa.me/";
    }

    const countryCode = whatsappData.country_code.replace("+", "");
    const phoneNumber = whatsappData.phone_number;
    const fullNumber = `${countryCode}${phoneNumber}`;

    if (whatsappData.welcome_message) {
      const encodedMessage = encodeURIComponent(
        whatsappData.welcome_message
      );

      return `https://wa.me/${fullNumber}?text=${encodedMessage}`;
    }

    return `https://wa.me/${fullNumber}`;
  };

  const whatsappLink = getWhatsAppLink();

  const pathname = usePathname();
  const searchParams = useSearchParams();
  const { assign } = useLocalizedNavigation();

  const canHover = () =>
    typeof window !== "undefined" &&
    window.matchMedia("(hover: hover)").matches;

  // Desktop dropdown reference.
  const desktopNavRef = useRef<HTMLElement | null>(null);

  // Reference ONLY the open mobile menu, not the entire mobile header.
  // This allows taps on the logo, language switcher, and page content
  // to count as outside taps.
  const mobileMenuRef = useRef<HTMLElement | null>(null);

  // The burger/X button is a sibling of the menu, not a child, so an
  // outside-tap check that only knows about mobileMenuRef treats a tap on X as
  // "outside": pointerdown closed the menu and the button's own click then
  // toggled it straight back open, so X appeared to do nothing. Skip the
  // button here and let its onClick own the toggle.
  const menuToggleRef = useRef<HTMLButtonElement | null>(null);

  // Existing desktop dropdown outside-click and Escape handling.
  useEffect(() => {
    if (!activeMenu) return;

    const closeIfOutside = (event: Event) => {
      const root = desktopNavRef.current;

      if (root && !root.contains(event.target as Node)) {
        setActiveMenu(null);
      }
    };

    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setActiveMenu(null);
      }
    };

    document.addEventListener("pointerdown", closeIfOutside, true);
    document.addEventListener("keydown", closeOnEscape);

    return () => {
      document.removeEventListener("pointerdown", closeIfOutside, true);
      document.removeEventListener("keydown", closeOnEscape);
    };
  }, [activeMenu]);

  // NEW: Close the mobile menu when tapping outside it.
  // Taps inside the menu, including submenu links and buttons,
  // do not trigger this handler.
  useEffect(() => {
    if (!mobileMenuOpen) return;

    const handleOutsideClick = (event: PointerEvent) => {
      const menu = mobileMenuRef.current;
      const toggle = menuToggleRef.current;

      if (toggle && toggle.contains(event.target as Node)) return;

      if (menu && !menu.contains(event.target as Node)) {
        setMobileMenuOpen(false);
        setMobileSubmenuOpen(null);
        setLanguageDropdownOpen(false);
      }
    };

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setMobileMenuOpen(false);
        setMobileSubmenuOpen(null);
        setLanguageDropdownOpen(false);
      }
    };

    document.addEventListener("pointerdown", handleOutsideClick, true);
    document.addEventListener("keydown", handleEscape);

    return () => {
      document.removeEventListener("pointerdown", handleOutsideClick, true);
      document.removeEventListener("keydown", handleEscape);
    };
  }, [mobileMenuOpen]);

  // Close the language menu on a tap outside it or on Escape. The handler
  // above only runs while the mobile nav is open, so on its own the language
  // menu stayed open until a language was picked.
  useEffect(() => {
    if (!languageDropdownOpen) return;

    const closeIfOutside = (event: PointerEvent) => {
      const target = event.target as Node;
      if (
        mobileLanguageRef.current?.contains(target) ||
        desktopLanguageRef.current?.contains(target)
      ) {
        return;
      }
      setLanguageDropdownOpen(false);
    };

    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") setLanguageDropdownOpen(false);
    };

    document.addEventListener("pointerdown", closeIfOutside, true);
    document.addEventListener("keydown", closeOnEscape);

    return () => {
      document.removeEventListener("pointerdown", closeIfOutside, true);
      document.removeEventListener("keydown", closeOnEscape);
    };
  }, [languageDropdownOpen]);

  // A licensee's site switches between English and its own language (General
  // Settings). The corporate site has no language of its own, so it offers
  // every published one instead.
  const globalLanguages = isGlobalSite
    ? availableLanguages
        .map((code) => code.toLowerCase())
        .filter((code) => code && code !== "en")
    : [];

  const isSwitchable =
    globalLanguages.length > 0 ||
    (!isGlobalSite &&
      !!generalSettings?.language_code &&
      generalSettings.language_code.toLowerCase() !== "en");

  const langParam = (
    searchParams.get("lang") || searchParams.get("language")
  )?.toLowerCase();

  const displayCode = langParam || currentLanguage;

  const flagSrc = getFlagByLanguageCode(
    displayCode === "translated"
      ? generalSettings?.language_code
      : displayCode
  );

  const formatMenuName = (str: string) =>
    str.trim().replace(/\s+/g, " ");

  const programSubmenu = [
    ...programs.map((p) => {
      const age = p.age_range?.trim();

      return {
        name: age
          ? `${formatMenuName(p.title)} (${age})`
          : formatMenuName(p.title),
        url: detailHref("/programs", p.id || p.slug, p.slug),
      };
    }),
    { name: "All Programs", url: "/programs" },
  ];

  const workshopSubmenu = [
    ...workshops.map((w) => ({
      name: formatMenuName(
        w.activity_details?.activity_name || w.title
      ),
      url: detailHref("/workshops", w.id, w.slug),
    })),
    { name: "All Workshops", url: "/workshops" },
  ];

  const handleLanguageToggle = (lang?: string) => {
    if (!isSwitchable) {
      console.error("[Navbar] ERROR: Cannot toggle - not switchable", {
        isSwitchable,
      });
      return;
    }

    const newLang =
      lang ||
      (currentLanguage === "default" || currentLanguage === "en"
        ? "translated"
        : "default");

    toggleLanguage(newLang);

    // A full load, not push(): the header and footer come from the root layout,
    // which a client-side navigation keeps in the old language.
    if (
      newLang === "translated" &&
      generalSettings?.language_code
    ) {
      assign(pathname, generalSettings.language_code);
    } else if (newLang !== "default" && newLang !== "en") {
      // A specific code picked from the corporate site's language menu.
      assign(pathname, newLang);
    } else {
      assign(pathname, "en");
    }

    setLanguageDropdownOpen(false);
  };

  // The language shown now, as a plain code ("en", "fr").
  const activeCode = (
    displayCode === "translated" ? generalSettings?.language_code : displayCode
  )?.toLowerCase();
  const currentCode = !activeCode || activeCode === "default" ? "en" : activeCode;

  // English first, then the site's other language(s).
  const menuLanguages = [
    "en",
    ...(isGlobalSite
      ? globalLanguages
      : generalSettings?.language_code
        ? [generalSettings.language_code.toLowerCase()]
        : []),
  ];

  const selectLanguage = (code: string) =>
    handleLanguageToggle(
      code === "en" ? "default" : isGlobalSite ? code : "translated"
    );

  // The same menu in both layouts - a flag and a code per language. Mobile
  // opens it under the flag at the left of the bar, desktop under the flag at
  // the right.
  const renderLanguageMenu = (align: "left" | "right") => (
    <AnimatePresence>
      {languageDropdownOpen && isSwitchable && (
        <motion.div
          role="menu"
          aria-label="Choose language"
          initial={{ opacity: 0, y: -6, scale: 0.96 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -6, scale: 0.96 }}
          transition={{ duration: 0.16, ease: "easeOut" }}
          className={`absolute top-full z-50 mt-2.5 w-[104px] rounded-2xl bg-white p-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.16)] ring-1 ring-black/5 ${
            align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
          }`}
        >
          {/* Pointer towards the flag */}
          <span
            aria-hidden
            className={`absolute -top-[6px] h-3 w-3 rotate-45 rounded-tl-[3px] border-l border-t border-black/[0.06] bg-white ${
              align === "left" ? "left-[10px]" : "right-[10px]"
            }`}
          />

          {menuLanguages.map((code) => {
            const isActive = code === currentCode;

            return (
              <button
                key={code}
                type="button"
                role="menuitemradio"
                aria-checked={isActive}
                aria-label={nativeLanguageName(code)}
                onClick={() => selectLanguage(code)}
                className={`flex w-full items-center gap-2.5 rounded-xl px-2.5 py-2 transition-colors ${
                  isActive
                    ? "bg-[#0097DC]/10 text-[#0097DC]"
                    : "text-[#1F2937] hover:bg-gray-50 active:bg-gray-100"
                }`}
              >
                <Image
                  src={withCDN(getFlagByLanguageCode(code))}
                  alt=""
                  width={22}
                  height={22}
                  className="h-[22px] w-[22px] shrink-0 rounded-full object-cover ring-1 ring-black/10"
                />
                <span
                  className={`text-[14px] uppercase tracking-wide ${
                    isActive ? "font-bold" : "font-semibold"
                  }`}
                >
                  {code}
                </span>
              </button>
            );
          })}
        </motion.div>
      )}
    </AnimatePresence>
  );

  return (
    <header
      className="w-full fixed top-0 left-0 right-0 z-[9999] bg-[#fafafa] border-b"
      style={{
        fontFamily: "var(--font-open-sans)",
        paddingTop: "env(safe-area-inset-top)",
      }}
    >
      {/* Mobile Layout */}
      <div className="md:hidden bg-[#FAFAFA]">
        <div className="w-full mx-auto px-4 h-[70px] grid grid-cols-[1fr_auto_1fr]">
          {/* Language and WhatsApp */}
          <div className="flex items-center gap-1">
            <div className="relative" ref={mobileLanguageRef}>
              <button
                type="button"
                onClick={() => {
                  if (!isSwitchable) return;
                  // With several languages there is nothing to toggle to -
                  // open the menu instead.
                  if (isGlobalSite) {
                    setLanguageDropdownOpen((prev) => !prev);
                  } else {
                    handleLanguageToggle();
                  }
                }}
                aria-haspopup={isGlobalSite ? "menu" : undefined}
                aria-expanded={isGlobalSite ? languageDropdownOpen : undefined}
                className={`flex items-center gap-1 rounded-full py-1 pl-0.5 pr-1 transition-colors ${
                  isSwitchable ? "cursor-pointer active:bg-gray-100" : "cursor-default"
                } ${languageDropdownOpen ? "bg-white shadow-sm ring-1 ring-black/5" : ""}`}
                title={
                  !isSwitchable
                    ? "English"
                    : isGlobalSite
                      ? "Change language"
                      : currentLanguage === "default"
                        ? `Switch to ${
                            generalSettings?.language_name || "Translated"
                          }`
                        : "Switch to English"
                }
              >
                <div className="w-6 h-6 relative overflow-hidden rounded-full border border-gray-100">
                  <Image
                    src={withCDN(flagSrc)}
                    alt="Language"
                    width={33}
                    height={33}
                    className="object-cover w-[24px] h-[22px]"
                  />
                </div>

                <span className="text-sm text-[#0097DC] font-normal uppercase language-text">
                  {displayCode === "default" ||
                  displayCode === "en" ||
                  !displayCode
                    ? "En"
                    : displayCode === "translated"
                      ? generalSettings?.language_code || "Translated"
                      : displayCode}
                </span>

                {isGlobalSite && isSwitchable && (
                  <ChevronDown
                    aria-hidden
                    className={`h-3.5 w-3.5 text-[#0097DC] transition-transform duration-200 ${
                      languageDropdownOpen ? "rotate-180" : ""
                    }`}
                  />
                )}
              </button>

              {renderLanguageMenu("left")}
            </div>

            <LanguageAwareLink
              href={whatsappLink}
              target="_blank"
              rel="noopener noreferrer"
            >
              <Image
                src={withCDN("/whatsapp.png")}
                alt="WhatsApp"
                width={33}
                height={33}
                className="w-7 h-7"
              />
            </LanguageAwareLink>
          </div>

          {/* Center: Logo */}
          <LanguageAwareLink href="/" className="flex items-center">
            {logoUrl ? (
              <Image
                src={logoUrl}
                alt="Franchisee Logo"
                width={120}
                height={40}
                priority
                className="h-11 w-auto"
              />
            ) : (
              <Image
                src={withCDN("/YoungEngineerLogo.png")}
                alt="Young Engineers Logo"
                width={120}
                height={60}
                priority
                className="h-9 w-auto"
              />
            )}
          </LanguageAwareLink>

          {/* Right: Hamburger Menu */}
          <button
            type="button"
            ref={menuToggleRef}
            aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
            aria-expanded={mobileMenuOpen}
            onClick={() => {
              setMobileMenuOpen((prev) => {
                if (prev) {
                  setMobileSubmenuOpen(null);
                  setLanguageDropdownOpen(false);
                }

                return !prev;
              });
            }}
            className="flex items-center justify-end"
          >
            {mobileMenuOpen ? (
              <X size={26} className="text-[#0097DC]" />
            ) : (
              <Menu size={26} className="text-[#0097DC]" />
            )}
          </button>
        </div>

        {/* Mobile Menu Items */}
        {mobileMenuOpen && (
          <nav
            ref={mobileMenuRef}
            className="bg-[#fafafa] px-4 py-3 space-y-2 max-h-[calc(100dvh-70px)] overflow-y-auto overscroll-contain touch-pan-y"
          >
            {sortedMenuItems.map((item) => {
              const isPrograms = menuSection(item) === "programs";

              const isWorkshops = menuSection(item) === "workshops";

              const isActive =
                item.url === "/"
                  ? pathname === "/" || pathname === ""
                  : pathname === item.url ||
                    pathname.startsWith(item.url + "/");

              return (
                <div
                  className={`w-[200px] mx-auto ${
                    mobileSubmenuOpen === item.name
                      ? "active-mobile-submenu"
                      : ""
                  }`}
                  key={`mobile-${item.order_no}`}
                >
                  {/* Normal Menu */}
                  {!(isPrograms || isWorkshops) ? (
                    <LanguageAwareLink
                      href={item.url}
                      className={`block text-[#0097DC] text-[14px] tracking-[0.02em] hover:font-bold py-2 text-center ${
                        isActive ? "font-bold" : "font-normal"
                      }`}
                      onClick={() => {
                        setMobileMenuOpen(false);
                        setMobileSubmenuOpen(null);
                      }}
                    >
                      {item.name}
                    </LanguageAwareLink>
                  ) : (
                    <>
                      {/* Programs / Workshops Button */}
                      <button
                        type="button"
                        aria-expanded={
                          mobileSubmenuOpen === item.name
                        }
                        onClick={() =>
                          setMobileSubmenuOpen(
                            mobileSubmenuOpen === item.name
                              ? null
                              : item.name
                          )
                        }
                        className={`w-full flex justify-center items-center gap-2 text-[#0097DC] text-[14px] uppercase tracking-[0.02em] py-2 ${
                          isActive ||
                          mobileSubmenuOpen === item.name
                            ? "font-bold"
                            : "font-normal"
                        }`}
                      >
                        <span>{item.name}</span>

                        <svg
                          className={`w-5 h-5 transition-transform duration-300 ${
                            mobileSubmenuOpen === item.name
                              ? "rotate-180"
                              : ""
                          }`}
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fillRule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </button>

                      {/* Submenu Accordion */}
                      <div
                        className={`nav-accordion ${
                          mobileSubmenuOpen === item.name
                            ? "is-open"
                            : ""
                        }`}
                      >
                        <div>
                          <ul className="pl-4 submenu-list">
                            {(
                              isPrograms
                                ? programSubmenu
                                : workshopSubmenu
                            ).map((sub) => {
                              const isSubActive =
                                pathname === sub.url ||
                                pathname.startsWith(sub.url + "/");

                              return (
                                <li
                                  key={sub.name}
                                  className="py-1"
                                >
                                  <LanguageAwareLink
                                    href={sub.url}
                                    onClick={() => {
                                      setMobileMenuOpen(false);
                                      setMobileSubmenuOpen(null);
                                    }}
                                    className={`text-[#0097DC] text-[14px] whitespace-nowrap ${
                                      isSubActive ? "font-bold" : ""
                                    }`}
                                  >
                                    {sub.name}
                                  </LanguageAwareLink>
                                </li>
                              );
                            })}
                          </ul>
                        </div>
                      </div>
                    </>
                  )}
                </div>
              );
            })}

            {/* Contact Section */}
            <div className="px-[30px] border-t border-[#545454] mt-[20px]">
              <div className="w-[151px] py-[30px] mx-auto">
                <h3 className="text-[10px] text-[#58585A] uppercase font-bold mb-4 text-center">
                  Contact us
                </h3>

                <div className="flex items-center gap-[7px] mb-4">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12.5 3.12506H2.5C1.80964 3.12506 1.25 3.68471 1.25 4.37506V10.6251C1.25 11.3154 1.80964 11.8751 2.5 11.8751H12.5C13.1904 11.8751 13.75 11.3154 13.75 10.6251V4.37506C13.75 3.68471 13.1904 3.12506 12.5 3.12506Z"
                      stroke="#58585A"
                      strokeWidth="1.25"
                      strokeLinecap="round"
                      strokeLinejoin="bevel"
                    />
                    <path
                      d="M1.61328 3.49384L6.75703 8.63134C6.87312 8.74756 7.01098 8.83976 7.16273 8.90266C7.31448 8.96557 7.47714 8.99794 7.64141 8.99794C7.80568 8.99794 7.96833 8.96557 8.12008 8.90266C8.27183 8.83976 8.40969 8.74756 8.52578 8.63134L13.5258 3.63134"
                      stroke="#58585A"
                      strokeWidth="1.25"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>

                  <a
                    href="mailto:info@youngengineers.org"
                    className="text-[10px] text-[#58585A]"
                  >
                    info@youngengineers.org
                  </a>
                </div>

                <div className="flex items-center gap-[7px]">
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M10.7627 12.5999H4.37517C4.17274 12.5999 3.97333 12.5508 3.79409 12.4567C3.61485 12.3626 3.46114 12.2264 3.34617 12.0598C3.2312 11.8932 3.15841 11.7012 3.13407 11.5002C3.10973 11.2992 3.13456 11.0954 3.20642 10.9061L4.41267 7.69363C4.50029 7.45521 4.65848 7.24914 4.86616 7.10287C5.07384 6.9566 5.32116 6.87707 5.57517 6.87488H9.55642C9.81182 6.87405 10.0613 6.95148 10.2714 7.09674C10.4815 7.24201 10.642 7.44813 10.7314 7.68738L11.9314 10.8999C12.0046 11.0895 12.0304 11.294 12.0067 11.4958C11.983 11.6976 11.9104 11.8906 11.7953 12.058C11.6802 12.2255 11.526 12.3623 11.346 12.4568C11.1661 12.5512 10.9659 12.6003 10.7627 12.5999Z"
                      stroke="#58585A"
                      strokeWidth="1.25"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M7.57031 10.9937C8.26067 10.9937 8.82031 10.4341 8.82031 9.74371C8.82031 9.05336 8.26067 8.49371 7.57031 8.49371C6.87996 8.49371 6.32031 9.05336 6.32031 9.74371C6.32031 10.4341 6.87996 10.9937 7.57031 10.9937Z"
                      stroke="#58585A"
                      strokeWidth="1.25"
                      strokeLinecap="round"
                      strokeLinejoin="bevel"
                    />
                    <path
                      d="M1.30097 3.58134V5.06884C1.30097 5.40036 1.43266 5.7183 1.66708 5.95272C1.9015 6.18714 2.21945 6.31884 2.55097 6.31884H3.12597C3.45749 6.31884 3.77543 6.18714 4.00985 5.95272C4.24427 5.7183 4.37597 5.40036 4.37597 5.06884V4.27509C6.43911 3.86489 8.56283 3.86489 10.626 4.27509V5.06884C10.626 5.40036 10.7577 5.7183 10.9921 5.95272C11.2265 6.18714 11.5444 6.31884 11.876 6.31884H12.4322C12.7637 6.31884 13.0817 6.18714 13.3161 5.95272V3.58134C13.6849 3.43424 13.6356 3.29091 13.543 3.17659C13.4504 3.06226 13.3204 2.98427 13.176 2.95634C9.4178 2.2001 5.54663 2.2001 1.78847 2.95634C1.64748 2.98809 1.52185 3.06772 1.43297 3.18167C1.34408 3.29563 1.29744 3.43686 1.30097 3.58134Z"
                      stroke="#58585A"
                      strokeWidth="1.25"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>

                  <a
                    href="tel:+1-248-6023162"
                    className="text-[10px] text-[#58585A]"
                  >
                    +1-248-6023162
                  </a>
                </div>
              </div>
            </div>
          </nav>
        )}
      </div>

      {/* Desktop + Tablet Layout */}
      <div
        className="hidden bg-[#FAFAFA] md:flex w-full mx-auto items-center justify-between px-6 md:px-8 lg:px-16 xl:px-0 py-3 md:py-[11px] index-header"
        style={{
          fontFamily: "var(--font-open-sans)",
          width: "100%",
          maxWidth: "1300px",
        }}
      >
        {/* Logo */}
        <LanguageAwareLink
          href="/"
          className="flex items-center justify-center"
        >
          {logoUrl ? (
            <Image
              src={logoUrl}
              alt="Franchisee Logo"
              width={160}
              height={52}
              priority
              className="md:w-[140px] md:h-auto lg:w-[160px]"
            />
          ) : (
            <Image
              src={withCDN("/YoungEngineerLogo.png")}
              alt="Young Engineers Logo"
              width={160}
              height={52}
              priority
              className="md:w-[140px] md:h-auto lg:w-[160px]"
            />
          )}
        </LanguageAwareLink>

        {/* Desktop Navigation */}
        <nav
          ref={desktopNavRef}
          className="flex items-center justify-center gap-4 md:gap-[30px] lg:gap-[50px] xl:gap-[70px]"
        >
          {sortedMenuItems.map((item) => {
            const isPrograms = menuSection(item) === "programs";

            const isWorkshops = menuSection(item) === "workshops";

            const hasDropdown = isPrograms || isWorkshops;

            const menuKey = isPrograms ? "programs" : "workshops";

            const isMenuOpen =
              hasDropdown && activeMenu === menuKey;

            const isCurrent =
              item.url === "/"
                ? pathname === "/" || pathname === ""
                : pathname === item.url ||
                  pathname.startsWith(item.url + "/");

            const triggerClass = `text-[#0097DC] uppercase tracking-[0.02em] whitespace-nowrap md:text-[13px] lg:text-[15px] leading-[16px] flex items-center gap-1 dropdown relative z-9999 ${
              isCurrent ? "font-bold" : "font-normal"
            }`;

            return (
              <div
                key={item.order_no}
                className="relative menu-item"
                onMouseEnter={() => {
                  if (!canHover()) return;

                  if (isPrograms) setActiveMenu("programs");
                  if (isWorkshops) setActiveMenu("workshops");
                }}
                onMouseLeave={() => {
                  if (!canHover()) return;
                  setActiveMenu(null);
                }}
              >
                {/* Main Menu */}
                {hasDropdown ? (
                  <button
                    type="button"
                    aria-expanded={isMenuOpen}
                    onClick={() =>
                      setActiveMenu((prev) =>
                        prev === menuKey && !canHover()
                          ? null
                          : menuKey
                      )
                    }
                    className={`${triggerClass} cursor-pointer bg-transparent p-0`}
                  >
                    {item.name}

                    <ChevronDown
                      size={14}
                      className={`transition-transform duration-300 nav-ease ${
                        isMenuOpen ? "rotate-180" : "rotate-0"
                      }`}
                    />
                  </button>
                ) : (
                  <LanguageAwareLink
                    href={item.url}
                    className={triggerClass}
                  >
                    {item.name}
                  </LanguageAwareLink>
                )}

                {/* Desktop Dropdown */}
                {hasDropdown ? (
                  <div
                    aria-hidden={!isMenuOpen}
                    className={`absolute top-full -left-[26px] pl-[26px] pr-[10px] min-w-[178px] w-max z-[999] p-4 acc-bg nav-dropdown ${
                      isMenuOpen ? "is-open" : ""
                    }`}
                  >
                    <ul className="space-y-2">
                      {(
                        isPrograms
                          ? programSubmenu
                          : workshopSubmenu
                      ).map((sub, index) => {
                        const isActive = pathname.startsWith(sub.url);

                        return (
                          <li
                            key={sub.name}
                            style={{
                              transitionDelay: isMenuOpen
                                ? `${70 + index * 35}ms`
                                : "0ms",
                            }}
                            className="flex items-center gap-1 submenu-item nav-dropdown-item"
                          >
                            {isActive && (
                              <span className="w-[5px] h-[5px] bg-[#0097DC]" />
                            )}

                            <LanguageAwareLink
                              href={sub.url}
                              onClick={() => setActiveMenu(null)}
                              className={`text-[#0097DC] text-[13px] leading-[24px] tracking-[0.5px] whitespace-nowrap hover:font-bold transition ${
                                isActive
                                  ? "font-bold tracking-normal"
                                  : "tracking-[0.5px]"
                              } ${
                                index ===
                                (isPrograms
                                  ? programSubmenu
                                  : workshopSubmenu
                                ).length -
                                  1
                                  ? "pt-2 mt-1 block w-full border-box"
                                  : ""
                              }`}
                            >
                              {sub.name}
                            </LanguageAwareLink>
                          </li>
                        );
                      })}
                    </ul>
                  </div>
                ) : null}
              </div>
            );
          })}
        </nav>

        {/* Desktop Language and WhatsApp */}
        <div className="flex items-center gap-[5px] md:gap-2.5 language-switcher">
          <div className="relative language-dropdown" ref={desktopLanguageRef}>
            <button
              type="button"
              onClick={() => {
                if (isSwitchable) {
                  setLanguageDropdownOpen((prev) => !prev);
                }
              }}
              aria-haspopup={isSwitchable ? "menu" : undefined}
              aria-expanded={isSwitchable ? languageDropdownOpen : undefined}
              className={`flex items-center gap-1 ${
                isSwitchable ? "cursor-pointer" : "cursor-default"
              }`}
              title={
                !isSwitchable
                  ? "English"
                  : isGlobalSite
                    ? "Change language"
                    : currentLanguage === "default"
                      ? `Switch to ${
                          generalSettings?.language_name || "Translated"
                        }`
                      : "Switch to English"
              }
            >
              <Image
                src={withCDN(flagSrc)}
                alt="Language"
                width={28}
                height={28}
                className="w-7 h-7 rounded-full object-cover border border-gray-100"
              />
            </button>

            {renderLanguageMenu("right")}
          </div>

          <LanguageAwareLink
            href={whatsappLink}
            target="_blank"
            rel="noopener noreferrer"
          >
            <Image
              src={withCDN("/whatsapp.png")}
              alt="WhatsApp"
              width={33}
              height={33}
              className="w-[33px] h-[33px]"
            />
          </LanguageAwareLink>
        </div>
      </div>
    </header>
  );
}