import Link from 'next/link'
import Image from 'next/image'

import { useGlobals } from '@/lib/globals'
import type { Props as IconProps } from '@/components/shared/Icon'
import Container from '@/components/shared/Container'
import FooterNewsletter from '@/components/shared/FooterNewsletter'
import Icon from '@/components/shared/Icon'

interface footerMenuSectionChildItems {
  id: string
  path: string
  cssClasses: []
  label: string
  linkRelationship: string
  target: string
  parentId: string
  childItems: { nodes: [] }
}

interface footerMenuSection {
  id: string
  path: string
  label: string
  linkRelationship: string
  target: string
  parentId: string
  childItems: {
    nodes: [footerMenuSectionChildItems]
  }
}

export default function Footer() {
  const { footerMenu, globalSettings, socialLinks } = useGlobals()

  return (
    <>
      <section className="bg-black">
        <Container>
          <FooterNewsletter containerStyles="bg-black lg:pt-60px pt-50px pb-50px" />
          <div className="sm:grid md:grid-cols-5 sm:grid-cols-3 lg:gap-x-20 md:gap-x-4 sm:gap-x-5">
            {footerMenu.map((item: footerMenuSection) => (
              <div key={item.id} className="pb-10">
                <h4 id={item.id} className="md:text-2xl text-xl text-white font-medium mb-3">
                  {item.label}
                </h4>
                {item.childItems?.nodes.length && (
                  <ul className="list-none p-0 m-0">
                    {item.childItems.nodes.map(item => (
                      <li key={item.id} className="mb-1">
                        <a
                          href={item.path}
                          className={`block text-white font-light transition ease-in-out delay-150 hover:text-opacity-60 ${item.cssClasses.join(
                            ' '
                          )}`}
                        >
                          {item.label}
                        </a>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </div>
        </Container>
      </section>
      <section className="bg-white py-16">
        <Container>
          <div className="grid sm:grid-cols-12 sm:gap-4">
            <div className="lg:col-span-3 sm:col-span-4">
              <Link href="/" className="block md:mb-0 mb-8">
                <Image
                  src="/corporate-image-logo.svg"
                  alt="CORPORATE IMAGE"
                  className="md:w-[289px] w-[200px] h-auto"
                  width={287}
                  height={128}
                />
              </Link>
            </div>

            <div className="lg:col-start-5 lg:col-span-8 md:col-start-6 md:col-span-6 sm:col-span-8">
              <div className="lg:flex lg:justify-between lg:items-end">
                <div>
                  <p className="mb-10">
                    <span className="block text-base leading-8 mb-1 md:w-full w-[70%]">{globalSettings.address}</span>
                    <span className="flex items-center flex-wrap text-base leading-8 mb-1">
                      <a href={`tel:+1${globalSettings.phone1}`}>{globalSettings.phone1}</a>{' '}
                      <span className="inline-block bg-accent-blue w-[3px] h-[17px] mx-3"></span>
                      <a href={`tel:+1${globalSettings.phone2}`}>{globalSettings.phone2}</a>{' '}
                      <span className="hidden sm:inline-block bg-accent-blue w-[3px] h-[17px] mx-3"></span>
                      <span className="max-sm:w-full max-sm:pt-1">
                        FAX <a href={`tel:+1${globalSettings.fax}`}>{globalSettings.fax}</a>
                      </span>
                    </span>
                    <a
                      className="text-base leading-8 btn-underlined-link"
                      href={`mailto:${globalSettings.contactEmail}`}
                    >
                      {globalSettings.contactEmail}
                    </a>
                  </p>
                  <div className="text-base leading-8 -mx-2 lg:mb-0 mb-8">
                    <span className="px-2">&copy; {new Date().getFullYear()} Corporate Image</span>
                    <Link href={globalSettings.privacyPolicy.url} className="btn-underlined-link px-2">
                      {globalSettings.privacyPolicy.title}
                    </Link>
                    {/* <span className="sm:inline-block block">
                      <a href={globalSettings.termsOfUse.url} className="btn-underlined-link px-2">
                        {globalSettings.termsOfUse.title}
                      </a>
                    </span> */}
                  </div>
                </div>
                <div>
                  <div className="flex items-end ml-auto">
                    <div className="flex items-center justify-end">
                      {Object.keys(socialLinks).map(key => (
                        <a
                          key={socialLinks[key]}
                          href={socialLinks[key]}
                          target="_blank"
                          rel="noreferrer"
                          className="social-link flex md:w-[55px] md:h-[55px] w-[45px] h-[45px] items-center justify-center md:text-black text-white md:bg-transparent bg-black mr-1"
                        >
                          <Icon name={key as IconProps['name']} className="w-[55px] h-[26px]" />
                        </a>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>
    </>
  )
}