"use client";

import { ArrowUp, Mail, MailCheck } from "lucide-react";
import React, { useEffect, useState } from "react";
import Image from "next/image";
// The footer menus were the last links still using next/link directly, so every
// footer navigation dropped ?lang and ?franchiseeId. Aliasing keeps the markup
// below unchanged while routing all of them through the language-aware link.
import Link from "@/src/lib/utils/LanguageAwareLink";
import ArrowButton from "../ui/ArrowButton";
import { ProcessedHeaderFooterHomeData } from "@/src/lib/types/header";
import { withCDN } from "@/src/lib/utils";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";
import ContactUsModal from "./ContactUsModal";

interface FooterProps {
  footerData: ProcessedHeaderFooterHomeData;
}

/**
 * TikTok badge, drawn inline: the CDN has no `tiktok_icon.png` next to the
 * facebook/youtube/whatsapp ones, so the mark is inlined to match their style
 * (brand-coloured disc, white glyph) without waiting on an asset upload.
 *
 * Geometry is copied from those PNGs so the row stays even: a 50x50 canvas
 * holding a 44px disc, i.e. a 3px transparent margin on every side. Drawing the
 * disc edge-to-edge instead makes it read ~14% larger than its neighbours at
 * the same box size.
 */
/**
 * A social profile URL as saved in the licensee's footer settings.
 *
 * The admin flags a missing scheme but doesn't block the save, so a bare
 * "facebook.com/handle" can reach us - left as-is the browser resolves it as an
 * internal route and the link lands on the licensee's own site. Empty settings
 * come back as "" so the caller can simply not render that icon.
 */
function socialUrl(raw?: string | null): string {
  const value = raw?.trim();

  if (!value) {
    return "";
  }

  return /^https?:\/\//i.test(value)
    ? value
    : `https://${value.replace(/^\/+/, "")}`;
}

export default function Footer({ footerData }: FooterProps) {
  const [showScrollTop, setShowScrollTop] = useState(false);
  const [backgroundImage, setBackgroundImage] = useState("");
  const [isMobile, setIsMobile] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);

  const updateBackgroundImage = () => {
    const width = window.innerWidth;
    if (width < 768) {
      // Mobile
      setBackgroundImage(withCDN("/FooterMobile.svg"));
      setIsMobile(true);
    } else if (width >= 768 && width < 1024) {
      // Tablet
      setBackgroundImage(withCDN("/FooterTab.svg"));
      setIsMobile(false);
    } else {
      // Desktop
      setBackgroundImage(withCDN("/footer_bg.svg"));
      setIsMobile(false);
    }
  };

  useEffect(() => {
    const handleScroll = () => {
      setShowScrollTop(window.scrollY > 300);
    };

    updateBackgroundImage();
    
    const handleResize = () => {
      updateBackgroundImage();
    };

    window.addEventListener("scroll", handleScroll);
    window.addEventListener("resize", handleResize);
    
    return () => {
      window.removeEventListener("scroll", handleScroll);
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // Normalize the copyright line: use the current year (both the {year} token and
  // any hardcoded year like "2023") and fill in the real company name.
  const currentYear = String(new Date().getFullYear());
  const copyrightText = (
    footerData.footer?.copyright_text ||
    `© COPYRIGHT {year} E SQUARE YOUNG ENGINEERS FRANCHISING LTD. ALL RIGHTS RESERVED. LEGO® IS A REGISTERED TRADEMARK OF COMPANIES WHICH DO NOT SPONSOR, AUTHORIZE OR ENDORSE THESE PROGRAMS OR THIS WEBSITE.`
  )
    .replace(/\{\{?\s*year\s*\}?\}/gi, currentYear)
    .replace(/\b(?:19|20)\d{2}\b/g, currentYear)
    .replace(/company name/gi, "E Square Young Engineers Franchising Ltd");

  // "Contact Us" button — the label comes from the backend footer settings
  // (footer.contact_info.button.text). Clicking it opens the Contact Us popup
  // form, which emails the message to the licensee's mailbox.
  const contactButton = footerData.footer?.contact_info?.button;
  const contactButtonText = contactButton?.text || "Contact Us";

  // Per-licensee social profiles (admin → Settings → Footer → Social Links
  // Configuration, which the CRM fills in from the Account's Facebook/Instagram
  // URL fields when a franchise is created).
  //
  // Facebook and Instagram are licensee-specific, like TikTok: each is rendered
  // only once that licensee actually has a URL, rather than falling back to the
  // global Young Engineers accounts. YouTube and WhatsApp below are still the
  // global ones.
  const socialLinks = footerData.footer?.social_links_configuration;
  const facebookUrl = socialUrl(socialLinks?.facebook);
  const instagramUrl = socialUrl(socialLinks?.instagram);
  const tiktokUrl = socialUrl(socialLinks?.tiktok);

  return (
    <section className="relative w-full pt-0 md:pt-0 mb-0 z-100 Footer">
      {/* ----- Desktop BG (lg and up) ----- */}
      <div 
        className="w-full bg-no-repeat text-white min-h-[200px] md:min-h-0 mb-0 relative pt-5 md:pt-0 xl:mt-[-80px]"
        style={{
          backgroundImage: `url('${backgroundImage}')`,
          backgroundSize: "cover",
          backgroundPosition: "top center",
          width: "100vw",
          maxWidth: "100vw",
          marginLeft: "calc(50% - 50vw)",
          marginRight: "calc(50% - 50vw)",
          zIndex: 100,
        }}
      >
        {/* Main Content Container with Padding */}
        <div className="max-w-[1300px] mx-auto w-full flex flex-col 2xl:h-[340px] h-auto md:h-[300px] md:px-8 lg:px-16 xl:px-0">
     
          <div className="relative mx-auto w-full">
         {/* <button
          onClick={scrollToTop} 
          aria-label="Scroll to top"
          className=" 
            hidden md:flex 
            items-center justify-center 
            absolute right-2 xl:right-[-60px]  2xl:bottom-50 xl:bottom-50 lg:bottom-38 md:bottom-48
            w-14 h-14 md:w-10 md:h-10 lg:w-12 lg:h-12
            z-10  cursor-pointer
            transition
          "
        >
          <Image
            src={withCDN("/arrow up.png")}
            alt="Scroll to top"
            width={48}
            height={48}
            className="w-full h-full object-contain"
          />
        </button> */}

            {/* Desktop screen */}
            <div className="hidden md:grid grid-cols-5 gap-5 lg:gap-16 3xl:gap-1 text-white md:mt-37 lg:mt-33 2xl:mt-40 mb-10 footer-wrapper">
              {/* Logo Section */}
              <div className="flex items-start col-span-2">
                <div className="w-fit  bg-transparent rounded-lg flex  justify-start">
                  <Image
                   src={withCDN("/logo%2Beu%20(1).png")}

                    alt="Young Engineers Logo"
                    width={500}
                    height={100}
                    className="hidden lg:block w-[240px] lg:w-[380px] h-auto object-contain"
                  />
                  <Image
                    src={withCDN("/logo_horizontal-tab%20(1).png")}
                    alt="Young Engineers Logo Tablet"
                    width={500}
                    height={100}
                    className="hidden md:block lg:hidden w-[130px] lg:w-[380px] h-auto object-contain"
                  />
                </div>
              </div>

              {/* Menu */}
              <div className="flex flex-col gap-4 text-centre quick-links">
                {footerData.footer?.footer_menu && footerData.footer.footer_menu.length > 0 ? (
                  footerData.footer.footer_menu.map((item: any) => (
                    <Link
                      key={item.name}
                      href={item.url || "#"}
                      className="font-[400] uppercase tracking-[0.02em] text-[10px] lg:text-[15px] leading-[100%]"
                    >
                      {item.name}
                    </Link>
                  ))
                ) : (
                  <>
                    <Link href="/programs" className="font-[400] uppercase tracking-[0.02em] text-[10px] lg:text-[15px] leading-[100%] ">
                      Programs
                    </Link>
                    <Link href="/workshops" className="font-[400] uppercase tracking-[0.02em] text-[10px] lg:text-[15px] leading-[100%] ">
                      Workshops
                    </Link>
                    <Link href="/class-registration" className="font-[400] uppercase tracking-[0.02em] text-[10px] lg:text-[15px] leading-[100%] ">
                      Class Registration
                    </Link>
                    <Link href="#" className="font-[400] uppercase tracking-[0.02em] text-[10px] lg:text-[15px] leading-[100%]">
                      Worldwide Site
                    </Link>
                    <Link href="#" className="font-[400] uppercase tracking-[0.02em] text-[10px] lg:text-[15px] leading-[100%]">
                      Student Zone
                    </Link>
                  </>
                )}
              </div>

              {/* Contact Us */}
              <div className="xl:ml-[-30px] md:ml-[-30px] lg:ml-0 contact-info">
                <h3 className="text-[10px] lg:text-[15px] font-[700] uppercase tracking-[0.02em] leading-[100%] text-left mb-3">
                  {footerData.footer?.contact_info?.heading || "Contact Us"}
                </h3>
                <div className="space-y-1">
                  {footerData.footer?.contact_info?.items && footerData.footer.contact_info.items.length > 0 ? (
                    footerData.footer.contact_info.items.map((item: any) => (
                      <div key={item.name} className={item.name.toLowerCase() === "email" ? "flex items-center" : "flex items-center gap-1 "}>
                        <Image
                          src={item.name.toLowerCase() === "email" ? withCDN("/Vector.svg") : withCDN("/home/contact-phone_icon%20(1).png")}
                          alt={`${item.name} icon`}
                          width={20}
                          height={20}
                        />
                        {item.name.toLowerCase() === "email" ? (
                          <a
                            href={`mailto:${item.value}`}
                            className="text-[10px] lg:text-[15px] font-[400] leading-[20px] lg:leading-[25px] tracking-[0.02em]  hover:underline ml-2"
                          >
                            {item.value}
                          </a>
                        ) : (
                          <a
                            href={`tel:+${item.value.replace(/\D/g, "")}`}
                            className="text-[10px] lg:text-[15px] font-[400]  hover:underline"
                          >
                            {item.value}
                          </a>
                        )}
                      </div>
                    ))
                  ) : (
                    <>
                      <div className="flex items-center mb-3">
                        <Image
                          src={withCDN("/Vector.svg")}

                          alt="Email icon"
                          width={20}
                          height={20}
                        unoptimized
                        />
                        <a
                          href="mailto:info@youngengineers.org"
                          className="text-[10px] lg:text-[15px] font-[400] leading-[20px] lg:leading-[30px] tracking-[0.02em]  hover:underline ml-2 w-[90%]"
                        >
                          info@youngengineers.org
                        </a>
                      </div>

                      <div className="flex items-center gap-1">
                        <Image
                          src={withCDN("/home/contact-phone_icon%20(1).png")}
                          alt="Phone icon"
                          width={20}
                          height={20}
                        />
                        <a
                          href="tel:+12486023162"
                          className="text-[10px] lg:text-[15px] font-[400] hover:underline"
                        >
                          +1-248-6023162
                        </a>
                      </div>
                    </>
                  )}
                </div>
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="mt-5 flex w-full items-center justify-center gap-3 bg-white text-[#0097DC] rounded-full px-5 py-2.5 font-[600] uppercase tracking-[0.02em] text-[14px] shadow-sm hover:bg-gray-100 transition cursor-pointer"
                >
                  <Image
                    src={withCDN("/gear-blue.png")}
                    alt="Gear icon"
                    width={22}
                    height={22}
                    className="w-[22px] h-[22px] shrink-0"
                  />
                  {contactButtonText}
                </button>
              </div>
              <div className="social-links">
                <h3 className="text-[10px] lg:text-[15px] font-bold uppercase tracking-wide mb-4 lg:mb-6 mt-[-10]">
                  We are here for you
                </h3>
                <div className="flex gap-2 flex-wrap">
                  {facebookUrl && (
                    <a
                      href={facebookUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-12 h-12 rounded-full bg-transparent flex items-center justify-center hover:bg-blue-700 transition"
                      aria-label="Facebook"
                    >
                      <Image
                        src={withCDN("/socials/facebook_icon.svg")}
                        alt="Facebook"
                        width={43}
                        height={43}
                        className="w-11 h-11 object-contain"
                      unoptimized
                      />
                    </a>
                  )}
                  <a
                    href="https://www.youtube.com/@YoungEngineersOfficial"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-12 h-12 rounded-full bg-transparent flex items-center justify-center hover:bg-red-700 transition"
                    aria-label="YouTube"
                  >
                    <Image
                      src={withCDN("/socials/youtube_icon.svg")}
                      alt="YouTube"
                      width={43}
                      height={43}
                      className="w-11 h-11 object-contain"
                    unoptimized
                    />
                  </a>
                  <a
                    href="https://wa.me/12072505980"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="w-12 h-12 rounded-full bg-transparent flex items-center justify-center hover:bg-green-600 transition"
                    aria-label="WhatsApp"
                  >
                    <Image
                      src={withCDN("/socials/whatsapp_icon.svg")}
                      alt="WhatsApp"
                      width={43}
                      height={43}
                      className="w-11 h-11 object-contain"
                    unoptimized
                    />
                  </a>
                  {instagramUrl && (
                    <a
                      href={instagramUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-12 h-12 rounded-full bg-transparent flex items-center justify-center"
                      aria-label="Instagram"
                    >
                      <Image
                        src={withCDN("/socials/instagram_icon.svg")}
                        alt="Instagram"
                        width={43}
                        height={43}
                        className="w-11 h-11 object-contain"
                        unoptimized
                      />
                    </a>
                  )}
                  {tiktokUrl && (
                    <a
                      href={tiktokUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-12 h-12 rounded-full bg-transparent flex items-center justify-center"
                      aria-label="TikTok"
                    >
                      <Image
                        src={withCDN("/socials/tik-tok_icon.svg")}
                        alt="TikTok"
                        width={43}
                        height={43}
                        className="w-11 h-11 object-contain"
                        unoptimized
                      />
                    </a>
                  )}
                </div>
              </div>
            </div>

            {/* tablet screen */}
            <div className="hidden md:hidden xl:hidden grid-cols-3 mb-2 gap-10 text-white mt-34">
              {/* Logo Section */}
              <div className="flex items-top col-span-1">
                <div className="w-fit h-fit bg-transparent rounded-lg flex justify-start mt-10">
                  <Image
                    src={withCDN("/logo%2Beu%20(1).png")}
                    alt="Young Engineers Logo"
                    width={400}
                    height={110}
                    loading="lazy"
                    className="md:w-[276px] md:h-[56px] w-[380px] h-auto object-contain"
                  />
                </div>
              </div>

              {/* Menu */}
              <div className="flex flex-col gap-5 text-center">
                {footerData.footer?.footer_menu && footerData.footer.footer_menu.length > 0 ? (
                  footerData.footer.footer_menu.map((item: any) => (
                    <Link
                      key={item.name}
                      href={item.url || "#"}
                      className="font-[400] text-[10px] uppercase tracking-[0.02em]  leading-[100%] "
                    >
                      {item.name}
                    </Link>
                  ))
                ) : (
                  <>
                    <Link href="/programs" className="font-[400] text-[10px] uppercase tracking-[0.02em]  leading-[100%] ">
                      Programs
                    </Link>
                    <Link href="/workshops" className="font-[400]  text-[10px] uppercase tracking-[0.02em]  leading-[100%] ">
                      Workshops
                    </Link>
                    <Link href="/class-registration" className="font-[400] text-[10px]  uppercase tracking-[0.02em] leading-[100%]">
                      Class Registration
                    </Link>
                    <Link href="#" className="font-[400] text-[10px] uppercase tracking-[0.02em] leading-[100%]">
                      Worldwide Site
                    </Link>
                    <Link href="#" className="font-[400] text-[10px] uppercase tracking-[0.02em] leading-[100%] ">
                      Student Zone
                    </Link>
                  </>
                )}
              </div>

              {/* Contact Us */}
              <div>
                <h3 className="text-[10px] font-[700] uppercase tracking-[0.02em] leading-[100%] text-left  mb-3">
                  {footerData.footer?.contact_info?.heading || "Contact Us"}
                </h3>
                <div className="space-y-1 ">
                  {footerData.footer?.contact_info?.items && footerData.footer.contact_info.items.length > 0 ? (
                    footerData.footer.contact_info.items.map((item: any) => (
                      <div key={item.name} className={item.name.toLowerCase() === "email" ? "flex items-center space-x-1 mb-[-3]" : "flex items-center space-x-1"}>
                        <Image
                          src={item.name.toLowerCase() === "email" ? withCDN("/Vector.svg") : withCDN("/home/contact-phone_icon%20(1).png")}
                          alt={`${item.name} icon`}
                          width={item.name.toLowerCase() === "email" ? 18 : 16}
                          height={item.name.toLowerCase() === "email" ? 18 : 16}
                        />
                        {item.name.toLowerCase() === "email" ? (
                          <a
                            href={`mailto:${item.value}`}
                            className="text-[10px] font-[400]  tracking-[0.02em]  hover:underline "
                          >
                            {item.value}
                          </a>
                        ) : (
                          <a
                            href={`tel:+${item.value.replace(/\D/g, "")}`}
                            className="text-[10px] font-[400] leading-[40px] tracking-[0.02em] hover:underline"
                          >
                            {item.value}
                          </a>
                        )}
                      </div>
                    ))
                  ) : (
                    <>
                      <div className="flex items-center space-x-1 mb-[-3]">
                        <Image
                          src={withCDN("/Vector.svg")}

                          alt="Email icon"
                          width={18}
                          height={18}
                        unoptimized
                        />
                        <a
                          href="mailto:info@youngengineers.org"
                          className="text-[10px] font-[400]  tracking-[0.02em] hover:underline "
                        >
                          info@youngengineers.org
                        </a>
                      </div>

                      <div className="flex items-center space-x-1 ">
                        <Image
                          src={withCDN("/home/contact-phone_icon%20(1).png")}
                          alt="Phone icon"
                          width={16}
                          height={16}
                        />
                        <a
                          href="tel:+12486023162"
                          className="text-[10px] font-[400] leading-[40px] tracking-[0.02em] hover:underline"
                        >
                          +1-248-6023162
                        </a>
                      </div>
                    </>
                  )}
                </div>
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="my-3 flex w-full items-center justify-center gap-1.5 bg-white text-[#0097DC] rounded-full px-3 py-1.5 font-[600] uppercase tracking-[0.02em] text-[10px] shadow-sm hover:bg-gray-100 transition cursor-pointer"
                >
                  <Image
                    src={withCDN("/gear-blue.png")}
                    alt="Gear icon"
                    width={14}
                    height={14}
                    className="w-[14px] h-[14px] shrink-0"
                  />
                  {contactButtonText}
                </button>
                <div>
                  <h3 className="text-[10px] font-bold uppercase tracking-wide mb-2.5">
                    We are here for you
                  </h3>
                  <div className="flex ">
                    {facebookUrl && (
                      <a
                        href={facebookUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="w-8 h-7.5 rounded-full bg-transparent flex items-center justify-center hover:bg-blue-700 transition"
                        aria-label="Facebook"
                      >
                        <Image
                          src={withCDN("/socials/facebook_icon.svg")}
                          alt="Facebook"
                          width={30}
                          height={30}
                          className="w-[30px] h-[30px]"
                        unoptimized
                        />
                      </a>
                    )}
                    <a
                      href="https://www.youtube.com/@YoungEngineersOfficial"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-8 h-7.5 rounded-full bg-transparent flex items-center justify-center hover:bg-red-700 transition"
                      aria-label="YouTube"
                    >
                      <Image
                        src={withCDN("/socials/youtube_icon.svg")}
                        alt="YouTube"
                        width={30}
                        height={30}
                        className="w-[30px] h-[30px]"
                      unoptimized
                      />
                    </a>
                    <a
                      href="https://wa.me/12072505980"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-8 h-7.5 rounded-full bg-transparent flex items-center justify-center hover:bg-green-600 transition"
                      aria-label="WhatsApp"
                    >
                      <Image
                        src={withCDN("/socials/whatsapp_icon.svg")}
                        alt="WhatsApp"
                        width={30}
                        height={30}
                        className="w-[30px] h-[30px]"
                      unoptimized
                      />
                    </a>
                    {instagramUrl && (
                      <a
                        href={instagramUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="w-8 h-7.5 rounded-full bg-transparent flex items-center justify-center"
                        aria-label="Instagram"
                      >
                        <Image
                          src={withCDN("/socials/instagram_icon.svg")}
                          alt="Instagram"
                          width={30}
                          height={30}
                          className="w-[30px] h-[30px]"
                          unoptimized
                        />
                      </a>
                    )}
                    {tiktokUrl && (
                      <a
                        href={tiktokUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="w-8 h-7.5 rounded-full bg-transparent flex items-center justify-center"
                        aria-label="TikTok"
                      >
                        <Image
                          src={withCDN("/socials/tik-tok_icon.svg")}
                          alt="TikTok"
                          width={30}
                          height={30}
                          className="w-[30px] h-[30px]"
                          unoptimized
                        />
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* ===== MOBILE (sm-only) ===== */}
            <div className="md:hidden grid grid-cols-1 gap-2.5 text-white mt-24">
              {/* Logo */}
              <div className="flex justify-center">
                <Image
                  src={withCDN("/logo%2Beu%20(1).png")}
                  alt="Young Engineers Logo"
                  width={320}
                  height={70}
                  className="w-[290px] h-[70px] object-contain"
                />
              </div>

              {/* Menu - NOW IN SEPARATE DIV */}
              <div className="flex flex-col items-center gap-3">
                {footerData.footer?.footer_menu && footerData.footer.footer_menu.length > 0 ? (
                  footerData.footer.footer_menu.map((item: any) => (
                    <Link
                      key={item.name}
                      href={item.url || "#"}
                      className="text-[14px] uppercase"
                    >
                      {item.name}
                    </Link>
                  ))
                ) : (
                  <>
                    <Link href="/programs" className="text-[14px] uppercase ">
                      Programs
                    </Link>
                    <Link href="/workshops" className="text-[14px] uppercase">
                      Workshops
                    </Link>
                    <Link href="/class-registration" className="text-[14px] uppercase ">
                      Class Registration
                    </Link>
                    <Link href="#" className="text-[14px] uppercase ">
                      Worldwide Site
                    </Link>
                    <Link href="#" className="text-[14px] uppercase ">
                      Student Zone
                    </Link>
                  </>
                )}
              </div>

              {/* 1. First Horizontal Border (Below Menu, Above Contact Us) */}
              {/* Adding border-t and border-b for the two lines */}
              <div className="flex flex-col items-center pt-3 pb-4 px-4 border-t border-b border-white border-opacity-30 gap-3 mx-12">
                {/* Contact Heading */}
                <h3 className="text-[10px] font-bold uppercase tracking-wide">
                  {footerData.footer?.contact_info?.heading || "Contact Us"}
                </h3>

                {/* Contact Items */}
                {footerData.footer?.contact_info?.items && footerData.footer.contact_info.items.length > 0 ? (
                  footerData.footer.contact_info.items.map((item: any) => (
                    <div key={item.name} className="flex items-center gap-3">
                      {item.name.toLowerCase() === "email" ? (
                        <>
                          <Mail size={18} strokeWidth={1.5} />
                          <a
                            href={`mailto:${item.value}`}
                            className="text-[14px] hover:underline"
                          >
                            {item.value}
                          </a>
                        </>
                      ) : (
                        <>
                          <Image
                            src={withCDN("/home/contact-phone_icon%20(1).png")}
                            alt="Phone"
                            width={20}
                            height={20}
                            className="brightness-0 invert"
                          />
                          <a
                            href={`tel:+${item.value.replace(/\D/g, "")}`}
                            className="text-[14px] hover:underline"
                          >
                            {item.value}
                          </a>
                        </>
                      )}
                    </div>
                  ))
                ) : (
                  <>
                    {/* Email */}
                    <div className="flex items-center gap-3">
                      <Mail size={18} strokeWidth={1.5} />
                      <a
                        href="mailto:info@youngengineers.org"
                        className="text-[14px] hover:underline"
                      >
                        info@youngengineers.org
                      </a>
                    </div>

                    {/* Phone */}
                    <div className="flex items-center gap-3">
                      <Image
                        src={withCDN("/home/contact-phone_icon%20(1).png")}
                        alt="Phone"
                        width={20}
                        height={20}
                        className="brightness-0 invert"
                      />
                      <a
                        href="tel:+12486023162"
                        className="text-[14px] hover:underline"
                      >
                        +1-248-6023162
                      </a>
                    </div>

                  </>
                )}

                {/* Outside the conditional above: this used to sit in its else
                    branch, so the button only appeared while the footer had no
                    contact rows of its own. Once any row existed - which is now
                    always, since a franchise inherits the global ones - the
                    first branch rendered and mobile lost its Contact Us button
                    while desktop and tablet kept theirs. */}
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="mt-0 flex w-full items-center justify-center gap-3 bg-white text-[#0097DC] rounded-full px-5 py-2.5 font-[600] uppercase tracking-[0.02em] text-[14px] shadow-sm hover:bg-gray-100 transition cursor-pointer"
                >
                  <Image
                    src={withCDN("/gear-blue.png")}
                    alt="Gear icon"
                    width={22}
                    height={22}
                    className="w-[22px] h-[22px] shrink-0"
                  />
                  {contactButtonText}
                </button>
              </div>

              {/* 2. Second Horizontal Border (Above Social Media) and Social Media section */}
              <div className="flex flex-col items-center pt-6 gap-6">
                {/* Social Media Heading */}
                <h3 className="text-[10px] font-bold uppercase tracking-wide">
                  We are here for you
                </h3>
                {/* Social Media Icons */}
                <div className="flex gap-6 mb-10">
                  {facebookUrl && (
                    <a
                      href={facebookUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label="Facebook"
                    >
                      <Image
                        src={withCDN("/socials/facebook_icon.svg")}
                        alt="Facebook"
                        width={38}
                        height={38}
                      unoptimized
                      />
                    </a>
                  )}
                  <a
                    href="https://www.youtube.com/@YoungEngineersOfficial"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="YouTube"
                  >
                    <Image
                      src={withCDN("/socials/youtube_icon.svg")}
                      alt="YouTube"
                      width={38}
                      height={38}
                    unoptimized
                    />
                  </a>
                  <a
                    href="https://wa.me/12072505980"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="WhatsApp"
                  >
                    <Image
                      src={withCDN("/socials/whatsapp_icon.svg")}
                      alt="WhatsApp"
                      width={38}
                      height={38}
                    unoptimized
                    />
                  </a>
                  {instagramUrl && (
                    <a
                      href={instagramUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label="Instagram"
                    >
                      <Image
                        src={withCDN("/socials/instagram_icon.svg")}
                        alt="Instagram"
                        width={38}
                        height={38}
                        unoptimized
                      />
                    </a>
                  )}
                  {tiktokUrl && (
                    <a
                      href={tiktokUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label="TikTok"
                    >
                      <Image
                        src={withCDN("/socials/tik-tok_icon.svg")}
                        alt="TikTok"
                        width={38}
                        height={38}
                        unoptimized
                      />
                    </a>
                  )}
                </div>
              </div>

              {/* Scroll Top */}
            </div>
          </div>
        </div>

        {/* Scroll to Top Button - Desktop/Tablet */}


        {/* Scroll to Top Button - Mobile 
        <button
          onClick={scrollToTop}
          aria-label="Scroll to top"
          className="
            md:hidden
            absolute right-4 bottom-70
            w-12 h-12
            z-10
            transition
          "
        >
          <Image
            src={withCDN("/arrow up.png")}
            alt="Scroll to top"
            width={48}
            height={48}
            className="w-full h-full object-contain"
          />
        </button> */}
      </div>

      {/* Copyright Section - Outside the background */}
      <div className="bg-[#F5F2EE] text-center py-4 px-4 mt-0">
        {/* Legal links */}
        <div className="flex items-center justify-center gap-3 md:gap-4 mb-2">
          <LanguageAwareLink
            href="/privacy-policy"
            className="text-[10px] 2xl:text-[13px] text-gray-600 uppercase tracking-wider font-regular hover:text-[#0097DC] transition-colors cursor-pointer"
          >
            Privacy Policy
          </LanguageAwareLink>
          <span className="text-gray-400 text-[10px] 2xl:text-[13px]">|</span>
          <LanguageAwareLink
            href="/terms-of-use"
            className="text-[10px] 2xl:text-[13px] text-gray-600 uppercase tracking-wider font-regular hover:text-[#0097DC] transition-colors cursor-pointer"
          >
            Terms of Use
          </LanguageAwareLink>
          <span className="text-gray-400 text-[10px] 2xl:text-[13px]">|</span>
          <LanguageAwareLink
            href="/cookie-policy"
            className="text-[10px] 2xl:text-[13px] text-gray-600 uppercase tracking-wider font-regular hover:text-[#0097DC] transition-colors"
          >
            Cookie Notice
          </LanguageAwareLink>
        </div>
        <div className="text-center">
          <p className="text-[7px] text-[10px] 2xl:text-[13px] text-gray-600 uppercase tracking-wider leading-relaxed font-regular">
            {copyrightText}
          </p>
        </div>
      </div>

      {/* Contact Us popup form — emails the licensee's mailbox */}
      <ContactUsModal
        isOpen={contactOpen}
        onClose={() => setContactOpen(false)}
        heading={contactButtonText}
      />
    </section>
  );
}