import { getTranslations } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { LocaleSwitcher } from "@/components/locale-switcher";

export async function SiteFooter() {
  const t = await getTranslations("footer");
  const tc = await getTranslations("courses");
  const year = new Date().getFullYear();

  return (
    <footer className="relative mt-auto overflow-hidden rounded-t-[2rem] bg-[var(--navy)] text-slate-300 shadow-[0_-12px_48px_rgba(15,23,42,0.12)]">
      <div
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-amber-400/40 to-transparent"
        aria-hidden
      />
      <div className="from-background absolute -top-px left-0 right-0 h-8 bg-gradient-to-b to-transparent opacity-90" />

      <div className="site-container section-block-compact relative pb-16 pt-10 sm:pb-10 sm:pt-12">
        <div className="grid gap-8 lg:grid-cols-4 lg:gap-10">
          <div className="lg:col-span-1">
            <p className="font-serif text-xl font-bold text-white">金策弘论社</p>
            <p className="mt-3 text-sm leading-relaxed text-slate-400">{t("tagline")}</p>
            <p className="mt-5 text-xs text-slate-500">{t("rights", { year })}</p>
            <LocaleSwitcher />
          </div>
          <div className="grid grid-cols-3 gap-5 border-t border-white/10 pt-6 lg:col-span-3 lg:border-0 lg:pt-0">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.15em] text-amber-400/90">
                {t("quick")}
              </p>
              <ul className="mt-3 space-y-2.5 text-sm">
                <li>
                  <Link href="/courses" className="transition hover:text-white">
                    {tc("title")}
                  </Link>
                </li>
                <li>
                  <Link href="/faq" className="transition hover:text-white">
                    {t("faq")}
                  </Link>
                </li>
                <li>
                  <Link href="/purchase-guarantee" className="transition hover:text-white">
                    {t("guarantee")}
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="transition hover:text-white">
                    {t("contactUs")}
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.15em] text-amber-400/90">
                {t("legal")}
              </p>
              <ul className="mt-3 space-y-2.5 text-sm">
                <li>
                  <Link href="/legal/terms" className="transition hover:text-white">
                    {t("terms")}
                  </Link>
                </li>
                <li>
                  <Link href="/legal/privacy" className="transition hover:text-white">
                    {t("privacy")}
                  </Link>
                </li>
                <li>
                  <Link href="/legal/copyright" className="transition hover:text-white">
                    {t("copyright")}
                  </Link>
                </li>
              </ul>
            </div>
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.15em] text-amber-400/90">
                {t("contact")}
              </p>
              <p className="mt-3 text-sm leading-relaxed text-slate-400">
                {t("phone")}
                <br />
                <span className="text-slate-200">{t("phoneValue")}</span>
              </p>
              <p className="mt-3 text-sm leading-relaxed text-slate-400">
                {t("email")}
                <br />
                <a
                  href={`mailto:${t("emailValue")}`}
                  className="break-all text-slate-200 underline-offset-2 transition hover:text-white hover:underline"
                >
                  {t("emailValue")}
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}