"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 { useState } from "react";
import { Menu, X, ChevronDown } from "lucide-react";
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 } 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[];
}

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

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 = [] }: NavbarProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeMenu, setActiveMenu] = useState<string | null>(null);
  const [languageDropdownOpen, setLanguageDropdownOpen] = useState(false);
  const { currentLanguage, toggleLanguage } = useLanguage();
  const [mobileSubmenuOpen, setMobileSubmenuOpen] = useState<string | null>(null);


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

  // Process menu items: filter active + sort by order
  const activeMenuItems = filterActiveMenuItems(menuItems);
  const sortedMenuItems = sortMenuItems(activeMenuItems);

  // Construct WhatsApp link from API data
  const getWhatsAppLink = () => {
    if (!whatsappData?.phone_number) {
      return "https://wa.me/";
    }

    // Remove '+' from country code if present
    const countryCode = whatsappData.country_code.replace('+', '');
    const phoneNumber = whatsappData.phone_number;
    const fullNumber = `${countryCode}${phoneNumber}`;

    // Add welcome message if available
    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 { push } = useLocalizedNavigation();

  /* Whether the device actually has a hovering pointer. This replaces the old
     `window.innerWidth > 1024` test: iPad landscape is 1180px, so it counted as
     desktop and the dropdown was driven by mouseenter/mouseleave. A tap fires a
     synthetic mouseenter that opens the menu, but lifting the finger never
     fires mouseleave, so it could never close. Asking about the pointer instead
     of the width puts every touch device on the click path. */
  const canHover = () =>
    typeof window !== "undefined" &&
    window.matchMedia("(hover: hover)").matches;

  const isSwitchable =
    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) => {
    return str
      .toLowerCase()
      .split(" ")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ");
  };

  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);

    if (newLang === "translated" && generalSettings?.language_code) {
      push(`${pathname}`, undefined, generalSettings.language_code);
    } else {
      // Explicitly "en" rather than "default" (which writes no param at all):
      // the root layout reads a missing lang as "no choice made" and redirects
      // to the licensee's primary language, so a bare URL would bounce a
      // French-primary site straight back to French.
      push(`${pathname}`, undefined, "en");
    }
    setLanguageDropdownOpen(false);
  };


  return (
    <header
      className="w-full fixed top-0 left-0 right-0 z-[9999] bg-[#fafafa] border-b"
      style={{
        fontFamily: "var(--font-open-sans)" }}
    >
      {/* Mobile Layout */}
      <div className="md:hidden bg-[#FAFAFA]">
        <div className="w-full mx-auto px-4 h-[70px] grid grid-cols-[1fr_auto_1fr]">
          <div className="flex items-center gap-1">
            <div className="relative">
              <button
                onClick={() => {
                  if (isSwitchable) {
                    handleLanguageToggle();
                  }
                }}
                className={`flex items-center gap-1 ${isSwitchable ? "cursor-pointer" : "cursor-default"
                  }`}
                title={
                  !isSwitchable
                    ? "English"
                    : 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>
              </button>
              {languageDropdownOpen && isSwitchable && (
                <div className="absolute top-full left-0 mt-1 bg-white border border-[#ccc] rounded shadow-md z-50">
                  <button
                    onClick={() => {

                      handleLanguageToggle("default");
                    }}
                    className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100 whitespace-nowrap"
                  >
                    En
                  </button>
                  {generalSettings?.language_code && (
                    <button
                      onClick={() => {

                        handleLanguageToggle("translated");
                      }}
                      className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-100 whitespace-nowrap"
                    >
                      {generalSettings.language_code}
                    </button>
                  )}
                </div>
              )}
            </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
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="flex items-center justify-end"
          >
            {mobileMenuOpen ? (
              <X size={26} className="text-[#0097DC]" />
            ) : (
              <Menu size={26} className="text-[#0097DC]" />
            )}
          </button>
        </div>

        {/* Mobile Menu Items - Dynamically rendered from API */}
        {mobileMenuOpen && (
          <nav className="bg-[#fafafa] px-4 py-3 space-y-2">
            {sortedMenuItems.map((item) => {
              const isPrograms = item.name.trim().toLowerCase() === "programs";
              const isWorkshops = item.name.trim().toLowerCase() === "workshops";

              // ✅ Check if current menu is active
             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>
               ) : (
                 <>
                   {/* BUTTON */}
                   <button
                     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
                       grid-rows 0fr -> 1fr animates to the content's ACTUAL
                       height. The previous max-h-96 (384px) was a guess: the
                       list is ~230px, so opening hit full height in ~60% of the
                       duration and closing spent its first ~40% collapsing empty
                       space before anything moved — which is what made it feel
                       jerky. It also clipped outright once a franchisee had
                       enough programs to pass 384px. */}
                   <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)}
                               className={`text-[#0097DC] text-[14px] whitespace-nowrap ${
                                 isSubActive ? "font-bold" : ""
                               }`}
                             >
                               {sub.name}
                             </LanguageAwareLink>
                           </li>
                         );
                       })}
                     </ul>
                    </div>
                   </div>
                 </>
               )}
                </div>
              );
            })}

            {/* contact div for mobile header */}
            <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" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="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" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="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" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="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" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="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.95272C13.5505 5.7183 13.6822 5.40036 13.6822 5.06884V3.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" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="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>

        {/* Menu - Dynamically rendered from API */}
        <nav className="flex items-center justify-center gap-4 md:gap-[30px] lg:gap-[50px] xl:gap-[70px]">
        {sortedMenuItems.map((item) => {
               const isPrograms = item.name.trim().toLowerCase() === "programs";
               const isWorkshops = item.name.trim().toLowerCase() === "workshops";

               const hasDropdown = isPrograms || isWorkshops;
               const menuKey = isPrograms ? "programs" : "workshops";
               const isMenuOpen = hasDropdown && activeMenu === menuKey;

               // Same active/bold rule as before, lifted out so the link and the
               // dropdown button below stay styled identically.
               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 (ALL ITEMS SAME) */}
        {hasDropdown ? (
          /* Programs / Workshops only open their dropdown now — they no longer
             navigate. Reaching the listing page is what "All Programs" and
             "All Workshops" inside the dropdown are for, so you can jump
             straight between two programs without going via the index page. */
          <button
            type="button"
            aria-expanded={isMenuOpen}
            onClick={() =>
              /* Toggle on touch. On a hover device only ever open: the pointer
                 already governs closing, and toggling there would shut what
                 hover just opened with no way to reopen until the pointer left
                 and came back. Keyboard activation still opens it either way. */
              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>
        )}

        {/* ONLY PROGRAMS DROPDOWN
            Kept mounted and toggled with .is-open so it can animate both ways —
            a conditional render would pop in and out with no closing frame.
            The animation lives in globals.css (.nav-dropdown): Tailwind here
            does not emit arbitrary utilities like duration-[300ms] or
            scale-[0.97], so those classes reached the HTML with no CSS behind
            them and transition-duration fell back to 0s — the card opened and
            shut instantly. */}
        {hasDropdown ? (
          <div
            aria-hidden={!isMenuOpen}
            className={`absolute top-full -left-[26px] rounded-bl-[20px] pl-[26px] pr-[10px] rounded-br-[20px] min-w-[178px] w-max bg-white shadow-[0px_14px_14px_#0000001f] 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}
                    /* Items fade up in sequence behind the panel for the open,
                       and all leave together on close (delay 0) so shutting the
                       menu still feels immediate. Inline styles always apply,
                       unlike the arbitrary Tailwind classes above. */
                    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>


        {/* Icons */}
        <div className="flex items-center gap-[5px] md:gap-2.5 language-switcher">
          <div className="relative language-dropdown">
            <button
              onClick={() => {
              if (isSwitchable) {
                setLanguageDropdownOpen((prev) => !prev);
              }
            }}
              className={`flex items-center gap-1 ${isSwitchable ? "cursor-pointer" : "cursor-default"
                }`}
              title={
                !isSwitchable
                  ? "English"
                  : 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>
            {languageDropdownOpen && isSwitchable && (
              <div className="absolute top-full w-[32px] right-[0px] mt-0 px-[2px] rounded-[50px] rounded-tl-none rounded-tr-none bg-white border border-[#fff] rounded shadow-md z-50 drop-open">
                <button
                  onClick={() => handleLanguageToggle("default")}
                  className="block w-full text-center px-0 py-0 mt-1 text-sm hover:bg-gray-100 whitespace-nowraprelative z-99"
                >  
                {/*  En*/}
                  <Image
                        src={withCDN(getFlagByLanguageCode("en"))}
                        alt="English"
                        width={28}
                        height={28}
                        className="rounded-full w-[28px] h-[28px] object-cover "
                   />
                </button>
                {generalSettings?.language_code && (
                  <button
                    onClick={() => handleLanguageToggle("translated")}
                    className="block w-full text-center px-0 py-0 mt-1 mb-1 text-sm hover:bg-gray-100 whitespace-nowrap"
                  >
                   {/* {generalSettings.language_code}*/}

                    <Image
                     src={withCDN(getFlagByLanguageCode(generalSettings.language_code))}
                     alt="Translated"
                     width={28}
                     height={28}
                     className="rounded-full w-[28px] h-[28px] object-cover "
                   />
                  </button>
                )}
              </div>
            )}
          </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>
  );
}