import { useTranslations } from 'next-intl';
import Image from 'next/image';

import { Link } from '@/i18n/navigation';

export default function Footer() {
  const t = useTranslations('footer');

  return (
    <footer className="w-full bg-[#0f172a] text-white">
      <div className="mx-auto max-w-boxed px-site py-10 sm:py-12 lg:py-16">
        <div className="grid gap-10 lg:grid-cols-[1.1fr_1.6fr] lg:items-start">
          <div className="">
            <Link href="/" className="text-xl lg:text-3xl uppercase tracking-[0.3em] text-white/60">
              {t('title')}
            </Link>
            {/* <div className="inline-flex bg-white/70 px-3 py-2">
              <Image
                src="/assets/images/logo/logo-large.svg"
                alt={t("title")}
                width={180}
                height={48}
                className="h-10 w-auto"
              />
            </div> */}
            <p className="text-base text-white/70">{t('subtitle')}</p>
          </div>

          <div className="space-y-6">
            <div className="flex flex-wrap gap-x-8 gap-y-3 text-sm uppercase tracking-[0.22em] text-white/70">
              <Link href="/impresszum" className="hover:text-white">
                {t('impressum')}
              </Link>
              <Link href="/projekt-jellemzoi" className="hover:text-white">
                {t('projectFeatures')}
              </Link>
              <Link href="/oldal-mukodese" className="hover:text-white">
                {t('siteOperation')}
              </Link>
              <a href="mailto:azopus@mmakiado.hu" className="hover:text-white">
                {t('contact')}
              </a>
              <Link href="/sutitajekoztato" className="hover:text-white">
                {t('cookiePolicy')}
              </Link>
              <Link href="/adatkezelesi-tajekoztato" className="hover:text-white">
                {t('privacyPolicy')}
              </Link>
              <Link href="/szerzoi-jogok" className="hover:text-white">
                {t('copyright')}
              </Link>
            </div>

            <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-6">
              <a
                href="https://mma.hu/"
                target="_blank"
                rel="noreferrer"
                title="Magyar Művészeti Akadémia"
                className="flex items-center justify-center  border border-white/10 bg-white/5 p-3 transition hover:bg-white/10"
              >
                <Image
                  src="/assets/images/logo/partnerek/mma-full.png"
                  alt="MMA"
                  width={120}
                  height={64}
                  className="h-10 w-auto object-contain brightness-0 invert"
                />
              </a>

              <a
                href="https://mmakiado.hu/"
                target="_blank"
                rel="noreferrer"
                title="MMA Kiadó"
                className="flex items-center justify-center  border border-white/10 bg-white/5 p-3 transition hover:bg-white/10"
              >
                <Image
                  src="/assets/images/logo/partnerek/mma_kiado_uj_logo.png"
                  alt="MMA Kiadó"
                  width={120}
                  height={64}
                  className="h-10 w-auto object-contain brightness-0 invert"
                />
              </a>

              <a
                href="https://mucsarnok.hu/"
                target="_blank"
                rel="noreferrer"
                title="Műcsarnok"
                className="flex items-center justify-center  border border-white/10 bg-white/5 p-3 transition hover:bg-white/10"
              >
                <Image
                  src="/assets/images/logo/partnerek/mucsarnok.svg"
                  alt="Műcsarnok"
                  width={120}
                  height={64}
                  className="h-10 w-auto object-contain brightness-0 invert"
                />
              </a>

              <a
                href="https://vigado.hu/"
                target="_blank"
                rel="noreferrer"
                title="Pesti Vigadó"
                className="flex items-center justify-center  border border-white/10 bg-white/5 p-3 transition hover:bg-white/10"
              >
                <Image
                  src="/assets/images/logo/partnerek/vigado.svg"
                  alt="Pesti Vigadó"
                  width={100}
                  height={64}
                  className="h-10 w-auto object-contain brightness-0 invert"
                />
              </a>

              <a
                href="https://memmdk.hu/"
                target="_blank"
                rel="noreferrer"
                title="Magyar Építészeti Múzeum"
                className="flex items-center justify-center  border border-white/10 bg-white/5 p-3 transition hover:bg-white/10"
              >
                <Image
                  src="/assets/images/logo/partnerek/epiteszeti_muzeum.png"
                  alt="Magyar Építészeti Múzeum"
                  width={120}
                  height={64}
                  className="h-10 w-auto object-contain brightness-0 invert"
                />
              </a>

              <a
                href="https://mma-mmki.hu/"
                target="_blank"
                rel="noreferrer"
                title="MMA MMKI"
                className="flex items-center justify-center  border border-white/10 bg-white/5 p-3 transition hover:bg-white/10"
              >
                <Image
                  src="/assets/images/logo/partnerek/mmki_logo_short_white.svg"
                  alt="MMA MMKI"
                  width={120}
                  height={64}
                  className="h-10 w-auto object-contain brightness-0 invert"
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}