import { useTranslations } from 'next-intl';
import { PageLink } from '#web-runtime/components/links';
import { SiteSettings } from '#web-runtime/types';
import { Link } from '#i18n/navigation';

export default function SiteFooter({ settings }: { settings: SiteSettings }) {
  const t = useTranslations('Components.Footer');

  const hasLegalLinks = Boolean(settings.legal.privacyPath || settings.legal.termsPath);

  return (
    <footer className="bg-[#172019] pt-[clamp(4rem,8vw,7rem)] pb-8 text-[#f6f5ef]">
      <div className="mx-auto w-[min(calc(100%-2rem),76rem)] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)]">
        <div className="grid grid-cols-[minmax(15rem,0.75fr)_minmax(0,1.25fr)] gap-[clamp(3rem,8vw,8rem)] max-lg:grid-cols-1">
          <div>
            <Link
              className="inline-block text-[1.45rem] font-extrabold tracking-[-0.06em] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#99d900]"
              href="/"
            >
              CRUX
              <span className="text-[#99d900]" aria-hidden="true">
                .
              </span>
            </Link>
          </div>

          {settings.footer.menus.length > 0 ? (
            <nav
              className="grid grid-cols-3 gap-8 max-[45rem]:grid-cols-2"
              aria-label={t('navigation')}
            >
              {settings.footer.menus.map((menu, menuIndex) => (
                <div
                  className="flex flex-col items-start gap-1.5"
                  key={`${menu.title}-${menuIndex}`}
                >
                  {menu.title ? (
                    <h2 className="mb-3 font-mono text-[0.7rem] font-semibold tracking-widest text-[#aab4aa] uppercase">
                      {menu.title}
                    </h2>
                  ) : null}
                  {menu.items.map((item, itemIndex) => (
                    <PageLink
                      key={`${item.label}-${itemIndex}`}
                      link={item}
                      className="text-sm font-medium text-[#f6f5ef] hover:text-[#c7ff3f]"
                    />
                  ))}
                </div>
              ))}
            </nav>
          ) : null}
        </div>

        <div className="mt-[clamp(4rem,8vw,7rem)] flex items-center justify-between gap-8 border-t border-white/15 pt-6 text-[0.78rem] text-[#aab4aa] max-[45rem]:flex-col max-[45rem]:items-start">
          {settings.footer.copyright ? <p>{settings.footer.copyright}</p> : <span />}
          {hasLegalLinks ? (
            <nav className="flex gap-5" aria-label={t('legal')}>
              {settings.legal.privacyPath ? (
                <a className="hover:text-white" href={settings.legal.privacyPath}>
                  {t('privacy')}
                </a>
              ) : null}
              {settings.legal.termsPath ? (
                <a className="hover:text-white" href={settings.legal.termsPath}>
                  {t('terms')}
                </a>
              ) : null}
            </nav>
          ) : null}
        </div>
      </div>
    </footer>
  );
}