"use client";

import { Link, useTranslation } from "@/app/digital/i18n/navigation";
import { useCrossSiteUrls } from "@/app/digital/lib/useCrossSiteUrls";
import DigitalThemeIcon from "./DigitalThemeIcon";

export default function Footer() {
  const { t } = useTranslation("footer");
  const { meetupUrl, vipUrl } = useCrossSiteUrls();
  const footerSections = [
    {
      titleKey: "guide" as const,
      links: [
        { labelKey: "roadmap" as const, href: "#roadmap" },
        { labelKey: "tools" as const, href: "#tools" },
        { labelKey: "destinations" as const, href: meetupUrl, openInNewTab: true },
      ],
    },
    {
      titleKey: "resources" as const,
      links: [
        { labelKey: "remoteJobs" as const, href: "/jobs", internal: true },
        { labelKey: "visa" as const, href: "/services", internal: true },
        { labelKey: "coliving" as const, href: "/services", internal: true },
        { labelKey: "insurance" as const, href: "/services", internal: true },
      ],
    },
    {
      titleKey: "community" as const,
      links: [
        { labelKey: "discord" as const, href: "/join", internal: true },
        { labelKey: "wechat" as const, href: vipUrl, openInNewTab: true },
        { labelKey: "jike" as const, href: "/discuss", internal: true },
      ],
    },
    {
      titleKey: "about" as const,
      links: [
        { labelKey: "aboutUs" as const, href: "/about", internal: true },
        { labelKey: "recruit" as const, href: "/jobs", internal: true },
        { labelKey: "privacy" as const, href: "/privacy", internal: true, openInNewTab: true },
        { labelKey: "contact" as const, href: "/contact", internal: true },
      ],
    },
  ];
  return (
    <footer className="dn-footer border-t border-slate-100 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div className="dn-container 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="dn-brand flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
              <DigitalThemeIcon name="globe" emoji="🌍" className="h-7 w-7 text-2xl" />
              <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}>
                    {"internal" in link && link.internal ? (
                      <Link
                        href={link.href}
                        target={"openInNewTab" in link && link.openInNewTab ? "_blank" : undefined}
                        rel={"openInNewTab" in link && link.openInNewTab ? "noopener noreferrer" : undefined}
                        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}`)}
                      </Link>
                    ) : (
                      <a
                        href={link.href}
                        target={"openInNewTab" in link && link.openInNewTab ? "_blank" : undefined}
                        rel={"openInNewTab" in link && link.openInNewTab ? "noopener noreferrer" : undefined}
                        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>
  );
}