"use client"; import React, { useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import { services } from "@/data/services"; export default function Footer2() { useEffect(() => { const headings = document.querySelectorAll(".footer-heading-mobile"); const toggleOpen = (event) => { const parent = event.target.closest(".footer-col-block"); const content = parent.querySelector(".tf-collapse-content"); if (parent.classList.contains("open")) { parent.classList.remove("open"); content.style.height = "0px"; } else { parent.classList.add("open"); content.style.height = content.scrollHeight + 10 + "px"; } }; headings.forEach((heading) => { heading.addEventListener("click", toggleOpen); }); // Clean up event listeners when the component unmounts return () => { headings.forEach((heading) => { heading.removeEventListener("click", toggleOpen); }); }; }, []); // Empty dependency array means this will run only once on mount return (