// Dependencies
import orderBy from 'lodash.orderby'
// Hooks
import { useNavigation } from 'site/hooks/use-navigation.mjs'
// Components
import Link from 'next/link'
import { Ribbon } from 'shared/components/ribbon.mjs'
import { WordMark } from 'shared/components/wordmark.mjs'
import { SocialIcons } from 'shared/components/social/icons.mjs'
import { Sponsors, ns as sponsorsNs } from 'shared/components/sponsors/index.mjs'
import { FreeSewingIcon } from 'shared/components/icons.mjs'
export const ns = ['footer', ...sponsorsNs]

const onlyFooterLinks = (tree) => orderBy(tree, ['t'], ['asc']).filter((entry) => entry.f)

export const Footer = () => {
  const { siteNav } = useNavigation({ ignoreControl: true })

  return (
    <footer className="bg-neutral">
      <Ribbon />
      <div className="w-full sm:w-auto flex flex-col gap-2 items-center justify-center pt-12">
        <FreeSewingIcon className="w-24 lg:w-40 m-auto m-auto text-neutral-content" />
        <div className="mt-4">
          <WordMark />
        </div>
        <p className="text-neutral-content text-normal leading-5 text-center -mt-2 opacity-70">
          Come for the sewing patterns
          <br />
          Stay for the community
        </p>
      </div>

      <div className="w-full max-w-xl text-center py-8 m-auto">
        <ul className="text-neutral-content list inline font-medium text-center">
          {onlyFooterLinks(siteNav).map((page) => (
            <li key={page.s} className="block lg:inline">
              <Link href={page.s} className="p-3 hover:text-secondary-focus hover:text-underline">
                {page.t}
              </Link>
            </li>
          ))}
        </ul>
      </div>

      <div className="w-full sm:w-auto flex flex-row flex-wrap gap-6 lg:gap-8 items-center justify-center px-8 py-14">
        <SocialIcons />
      </div>

      <div className="mt-8 py-8 px-8 flex flex-row gap-8 flex-wrap 2xl:flex-nowrap justify-around text-neutral-content py-10 border border-solid border-l-0 border-r-0 border-b-0 border-base-300">
        <Sponsors />
      </div>
    </footer>
  )
}