import Link from "next/link";

import { Brand } from "@/components/home/Brand";
import { getFooterColumns } from "@/data/footer.data";
import type { Dictionary } from "@/lib/i18n";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

type FooterProps = {
  dictionary: Dictionary;
  locale: Locale;
};

export default function Footer({ dictionary, locale }: FooterProps) {
  const columns = getFooterColumns(locale, dictionary);

  return (
    <footer className="mt-3 border-t border-[#edf0f6] bg-white">
      <div className="mx-auto grid max-w-[1360px] gap-7 px-6 py-8 sm:grid-cols-2 lg:grid-cols-[1.4fr_repeat(4,0.85fr)] xl:px-8">
        <div>
          <Link href={localizedPath(locale)} aria-label="PureSaaS home">
            <Brand compact />
          </Link>
          <p className="mt-3 max-w-[240px] text-[12px] leading-[1.75] text-[#77849a]">
            {dictionary.footer.description}
          </p>
        </div>

        {columns.map((column) => (
          <div key={column.title}>
            <h3 className="text-[12px] font-extrabold text-[#34405d]">{column.title}</h3>
            <div className="mt-3 space-y-1.5">
              {column.items.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="block text-[12px] text-[#78859b] transition-colors hover:text-[#5865ff]"
                >
                  {item.label}
                </Link>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="mx-auto flex max-w-[1360px] flex-col justify-between gap-3 border-t border-[#edf0f6] px-6 py-4 text-[10px] text-[#8b96a8] sm:flex-row xl:px-8">
        <p>&copy; 2026 {dictionary.footer.rights}</p>
        <div className="flex gap-6">
          <Link href={localizedPath(locale, "/privacy")} className="hover:text-[#5865ff]">
            {dictionary.footer.privacy}
          </Link>
          <Link href={localizedPath(locale, "/terms")} className="hover:text-[#5865ff]">
            {dictionary.footer.terms}
          </Link>
          <Link href={localizedPath(locale, "/security")} className="hover:text-[#5865ff]">
            {dictionary.footer.security}
          </Link>
        </div>
      </div>
    </footer>
  );
}