"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.
 */
function TikTokIcon({ size, className }: { size: number; className?: string }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 50 50"
      role="img"
      aria-hidden="true"
      focusable="false"
      className={className}
    >
      <circle cx="25" cy="25" r="22" fill="#010101" />
      {/* 24-unit glyph scaled to half the disc, then centred on it. */}
      <path
        fill="#ffffff"
        transform="translate(14 14) scale(0.9167)"
        d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"
      />
    </svg>
  );
}

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). The Facebook/YouTube/WhatsApp icons below stay pointed at
  // the global Young Engineers accounts; TikTok is licensee-specific, so it is
  // only rendered once that licensee has actually saved a URL.
  //
  // The admin flags a missing scheme but doesn't block the save, so a bare
  // "tiktok.com/@handle" can reach us — left as-is it would resolve as an
  // internal route, so the protocol is filled in here.
  const rawTiktokUrl = footerData.footer?.social_links_configuration?.tiktok?.trim();
  const tiktokUrl = rawTiktokUrl
    ? /^https?:\/\//i.test(rawTiktokUrl)
      ? rawTiktokUrl
      : `https://${rawTiktokUrl.replace(/^\/+/, "")}`
    : "";

  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.png")}

                    alt="Young Engineers Logo"
                    width={500}
                    height={100}
                    className="w-[240px] 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-0">
                  {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-[50px] 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">
                        <Image
                          src={withCDN("/Vector.svg")}

                          alt="Email icon"
                          width={20}
                          height={20}
                        />
                        <a
                          href="mailto:info@youngengineers.org"
                          className="text-[10px] lg:text-[15px] font-[400] leading-[20px] lg:leading-[50px] tracking-[0.02em]  hover:underline ml-2"
                        >
                          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>
                <h3 className="text-[10px] lg:text-[15px] font-bold uppercase tracking-wide mb-6 mt-[-10]">
                  We are here for you
                </h3>
                <div className="flex gap-4">
                  <a
                    href="https://www.facebook.com/youngengineersfranchise/"
                    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("/facebook_icon.png")}
                      alt="Facebook"
                      width={43}
                      height={43}
                      className="w-11 h-11 object-contain"
                    />
                  </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("/youtube_icon.png")}
                      alt="YouTube"
                      width={43}
                      height={43}
                      className="w-11 h-11 object-contain"
                    />
                  </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("/whatsapp_footer_icon.png")}
                      alt="WhatsApp"
                      width={43}
                      height={43}
                      className="w-11 h-11 object-contain"
                    />
                  </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"
                    >
                      <TikTokIcon size={43} className="w-11 h-11" />
                    </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.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}
                        />
                        <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 ">
                    <a
                      href="https://www.facebook.com/youngengineersfranchise/"
                      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("/facebook_icon.png")}
                        alt="Facebook"
                        width={30}
                        height={30}
                        className="w-[30px] h-[30px]"
                      />
                    </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("/youtube_icon.png")}
                        alt="YouTube"
                        width={30}
                        height={30}
                        className="w-[30px] h-[30px]"
                      />
                    </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("/whatsapp_footer_icon.png")}
                        alt="WhatsApp"
                        width={30}
                        height={30}
                        className="w-[30px] h-[30px]"
                      />
                    </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"
                      >
                        <TikTokIcon size={30} className="w-[30px] h-[30px]" />
                      </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.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-[10px] 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-[10px] 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-[10px] hover:underline"
                      >
                        +1-248-6023162
                      </a>
                    </div>

                    <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">
                  <a
                    href="https://www.facebook.com/youngengineersfranchise/"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Facebook"
                  >
                    <Image
                      src={withCDN("/facebook_icon.png")}
                      alt="Facebook"
                      width={38}
                      height={38}
                    />
                  </a>
                  <a
                    href="https://www.youtube.com/@YoungEngineersOfficial"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="YouTube"
                  >
                    <Image
                      src={withCDN("/youtube_icon.png")}
                      alt="YouTube"
                      width={38}
                      height={38}
                    />
                  </a>
                  <a
                    href="https://wa.me/12072505980"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="WhatsApp"
                  >
                    <Image
                      src={withCDN("/whatsapp_footer_icon.png")}
                      alt="WhatsApp"
                      width={38}
                      height={38}
                    />
                  </a>
                  {tiktokUrl && (
                    <a
                      href={tiktokUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label="TikTok"
                    >
                      <TikTokIcon size={38} />
                    </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"
          >
            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"
          >
            Terms of Use
          </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>
  );
}