"use client";

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

const footerSections = [
  {
    titleKey: "community" as const,
    links: [
      { labelKey: "join" as const, href: "/join" },
      { labelKey: "meetups" as const, href: "/meetups" },
      { labelKey: "dating" as const, href: "/dating" },
      { labelKey: "map" as const, href: "#" },
    ],
  },
  {
    titleKey: "tools" as const,
    links: [
      { labelKey: "dashboard" as const, href: "/dashboard" },
      { labelKey: "cost" as const, href: "/tools" },
      { labelKey: "ai" as const, href: "/ai" },
      { labelKey: "coworking" as const, href: "#" },
      { labelKey: "compare" as const, href: "#" },
    ],
  },
  {
    titleKey: "resources" as const,
    links: [
      { labelKey: "guide" as const, href: "#" },
      { labelKey: "cityGuide" as const, href: "#" },
      { labelKey: "stories" as const, href: "#" },
      { labelKey: "report" as const, href: "/report" },
      { labelKey: "faq" as const, href: "#" },
    ],
  },
  {
    titleKey: "about" as const,
    links: [
      { labelKey: "aboutUs" as const, href: "/about" },
      { labelKey: "pricing" as const, href: "/pricing" },
      { labelKey: "gigs" as const, href: "/gigs" },
      { labelKey: "recruit" as const, href: "/jobs" },
      { labelKey: "terms" 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-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-8">
          {footerSections.map((section) => (
            <div key={section.titleKey}>
              <h4 className="font-bold text-gray-900 dark:text-gray-100 text-sm mb-3">
                {t(section.titleKey)}
              </h4>
              <ul className="space-y-2 text-sm text-gray-500 dark:text-gray-400">
                {section.links.map((link) => (
                  <li key={link.labelKey}>
                    {link.href.startsWith("/") ? (
                      <Link
                        href={link.href}
                        className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
                      >
                        {t(`links.${link.labelKey}`)}
                      </Link>
                    ) : (
                      <a
                        href={link.href}
                        className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
                      >
                        {t(`links.${link.labelKey}`)}
                      </a>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pt-8 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <span className="text-xl">🌏</span>
            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">游牧中国</span>
          </div>
          <p className="text-xs text-gray-400 dark:text-gray-500">
            {t("copyright")}
          </p>
          <div className="flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
            <span>CNY ¥</span>
            <span>°C</span>
          </div>
        </div>
      </div>
    </footer>
  );
}