"use client";

import { Link, useTranslation } from "@/i18n/navigation";

const footerSections = [
  {
    titleKey: "guide" as const,
    links: [
      { labelKey: "roadmap" as const, href: "#roadmap" },
      { labelKey: "tools" as const, href: "#tools" },
      { labelKey: "destinations" as const, href: "#" },
    ],
  },
  {
    titleKey: "resources" as const,
    links: [
      { labelKey: "remoteJobs" as const, href: "#" },
      { labelKey: "visa" as const, href: "#" },
      { labelKey: "coliving" as const, href: "#" },
      { labelKey: "insurance" as const, href: "#" },
    ],
  },
  {
    titleKey: "community" as const,
    links: [
      { labelKey: "discord" as const, href: "#" },
      { labelKey: "wechat" as const, href: "#community" },
      { labelKey: "jike" as const, href: "#" },
      { labelKey: "github" as const, href: "#" },
    ],
  },
  {
    titleKey: "about" as const,
    links: [
      { labelKey: "aboutUs" as const, href: "#" },
      { labelKey: "contribute" as const, href: "#" },
      { labelKey: "privacy" as const, href: "#" },
      { labelKey: "contact" as const, href: "#" },
    ],
  },
];

export default function Footer() {
  const { t } = useTranslation("footer");
  return (
    <footer className="border-t border-slate-100 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
          <div className="lg:col-span-1">
            <Link href="/" className="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
              <span className="text-2xl">🌍</span>
              <span>{t("siteName")}</span>
            </Link>
            <p className="mt-3 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
              {t("tagline")}
              <br />
              {t("tagline2")}
            </p>
          </div>

          {footerSections.map((section) => (
            <div key={section.titleKey}>
              <h4 className="mb-4 text-sm font-bold text-slate-900 dark:text-slate-100">
                {t(`sections.${section.titleKey}`)}
              </h4>
              <ul className="space-y-2.5">
                {section.links.map((link) => (
                  <li key={link.labelKey}>
                    <a
                      href={link.href}
                      className="text-sm text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
                    >
                      {t(`links.${link.labelKey}`)}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 dark:border-slate-800 sm:flex-row">
          <p className="text-sm text-slate-400 dark:text-slate-500">
            {t("madeBy")}
          </p>
          <p className="text-sm text-slate-400 dark:text-slate-500">{t("openSource")}</p>
        </div>
      </div>
    </footer>
  );
}