'use client'; import React, {useEffect, useMemo} from 'react'; import {Col, Container, Row} from 'react-bootstrap'; import Link from 'next/link'; import {usePathname} from 'next/navigation'; import {gsap} from 'gsap'; import {ScrollTrigger} from 'gsap/dist/ScrollTrigger'; import {useShowSetting} from '@/core/context/ShowSettingProvider'; import parse from 'html-react-parser'; import LinkOnly from "@/components/ui/link-only"; import Social from "@/components/ui/social"; import styled from "styled-components"; import theme from "@/styles/theme"; import GetInTouch from "@/components/ui/get-in-touch"; import useDeviceTypeTab from "@/components/hooks/useDeviceTypeTab"; gsap.registerPlugin(ScrollTrigger) export const StyledFooter = styled.section` background: ${theme.colors.footerBackground}; position: ${theme.position.relative}; overflow: ${theme.overflow.hidden}; z-index: ${theme.zIndex["0"]}; padding: 90px 0 40px; .footer-wrapper { .footer_menu { ul { li { margin-bottom: 10px; &:last-child { margin-bottom: 0; } a { font-family: ${theme.fonts.faustina}; color: ${theme.colors.metallicBronze}; font-weight: ${theme.fontWeights.regular}; font-style: ${theme.fontStyles.normal}; font-size: 0.89rem; /* 16px based on 18px body font */ line-height: 1.3; /* 130% */ letter-spacing: -0.02em; /* -2% */ &:hover { color: ${theme.colors.hover}; p { color: ${theme.colors.hover}; } } } } } } .footer_address { .dc-btn-link { display: ${theme.display.block}; } .single-link { display: ${theme.display.flex}; gap: 10px; margin-bottom: 30px; svg { margin: ${theme.numericScale.margin['0']}; padding: ${theme.numericScale.padding['0']}; height: ${theme.heightAutoMain}; } a { margin-bottom: 0 !important; } } a { font-family: ${theme.fonts.faustina}; font-weight: ${theme.fontWeights.regular}; font-style: ${theme.fontStyles.normal}; font-size: ${theme.fontSizes.base}; /* 18px based on 18px body font */ line-height: ${theme.lineHeights.default}; /* 120% */ letter-spacing: ${theme.letterSpacing.tight}; /* -2% */ color: ${theme.colors.metallicBronze}; margin-bottom: 30px; &:hover { color: ${theme.colors.hover}; p { color: ${theme.colors.hover}; } } } } } .container-copy-right { position: ${theme.position.relative}; margin-top: 55px; p { color: ${theme.colors.colorTwo50}; font-family: ${theme.fonts.faustina}; font-weight: ${theme.fontWeights.regular}; font-style: ${theme.fontStyles.normal}; font-size: 0.89rem; /* 16px based on 18px body font */ line-height: 1.3; /* 130% */ letter-spacing: ${theme.letterSpacing.tight}; /* -2% */ } a { p { color: ${theme.colors.colorTwo50}; transition: ${theme.mainTransition}; } &:hover { color: ${theme.colors.hover}; p { color: ${theme.colors.hover}; } } } } ${theme.mediaQueries.tablet} { .footer-wrapper { .footer-fav-logo { margin-bottom: 40px; } .footer_first { .footer_logo { order: ${theme.opacity["0"]}; } .footer_address { order: 1; margin-bottom: 80px; } .footer-social { margin: 30px 0 80px; order: 2; justify-content: flex-start !important; } .footer_menu { order: 3; } } .container-copy-right { .d-inline-flex.gap-2 { margin-top: 30px; } } } .footer_logo, .footer_menu, .footer_address { width: ${theme.widthAuto}; flex: 0 0 100%; } .social { justify-content: flex-start; } } `; const Footer = ({scroll}) => { const {getMenu, getSettings} = useShowSetting(); // Build sorted footer menus by sort_order (ascending) const footerMenu = useMemo(() => { const items = getMenu?.menu1?.data || getMenu?.menu2?.data || []; if (!Array.isArray(items)) return []; return [...items].sort((a, b) => { const av = a?.sort_order ?? a?.sortOrder; const bv = b?.sort_order ?? b?.sortOrder; const an = typeof av === 'number' ? av : parseInt((av ?? '').toString(), 10); const bn = typeof bv === 'number' ? bv : parseInt((bv ?? '').toString(), 10); const aNum = Number.isFinite(an) ? an : Number.POSITIVE_INFINITY; const bNum = Number.isFinite(bn) ? bn : Number.POSITIVE_INFINITY; return aNum - bNum; }); }, [getMenu]); const footerMenuBottom = footerMenu; const settingsData = getSettings; const isMobile = useDeviceTypeTab() const d = new Date(); let year = d.getFullYear(); const location = usePathname(); // Memoize the render function for each solution const renderFooterMenuItem = useMemo(() => { return footerMenu?.map((e, index) => { return (
    • ); }); }, [footerMenu]); const renderFooterMenuItemBottom = useMemo(() => { return footerMenuBottom?.map((e, index) => { return (
    • ); }); }, [footerMenu]); useEffect(() => { scroll?.update() ScrollTrigger.update(); ScrollTrigger.refresh() }, [scroll]); return ( <>
    Palmal Group of Industry Limited
    { !isMobile &&

    ©{year}
    {parse(settingsData?.copyright_text)}

    Site by Dcastalia

    } { footerMenu && footerMenu?.length > 0 &&
      { footerMenu && footerMenu?.length > 0 && renderFooterMenuItem }
    } { isMobile &&

    ©{year}
    {parse(settingsData?.copyright_text)}

    Site by Dcastalia

    }
    ); }; export default React.memo(Footer);