import Image from "next/image";
import { getSiteSettings } from "@/lib/api";
import Container from "@/components/ui/Container";

/**
 * Matches the source design's footer exactly: a single minimal dark bar —
 * logo mark, tagline, a "Back to top" link, and a copyright/EIN line. The
 * previous version of this component invented a two-column
 * "Company / Get Involved" nav-link footer that doesn't exist in the source
 * design at all; this replaces it rather than extending it.
 */
function str(theme: Record<string, unknown>, key: string, fallback: string): string {
  const v = theme[key];
  return typeof v === "string" && v ? v : fallback;
}

export default async function Footer() {
  const site = await getSiteSettings();
  const companyName = site.companyName || "NSP Foundation";
  const tagline = str(site.theme, "footerTagline", "Building the infrastructure behind community progress.");
  const ein = str(site.theme, "footerEin", "");

  return (
    <footer className="bg-ink text-white">
      <Container className="flex flex-col gap-6 py-10 md:flex-row md:items-center md:justify-between">
        <Image src="/logo.png" alt="NSP Foundation — Never Stop Pushing" width={170} height={62} className="w-[150px] h-auto" />
        <p className="text-sm text-white/60 text-center">{tagline}</p>
        <a href="#top" className="text-sm font-semibold text-teal hover:text-white text-center md:text-right">
          Back to top ↑
        </a>
      </Container>
      <div className="border-t border-white/10">
        <Container className="flex flex-col gap-1.5 py-5 text-xs text-white/50 md:flex-row md:items-center md:justify-between">
          <span>© {new Date().getFullYear()} {companyName}. All rights reserved.</span>
          <span>{companyName} is a 501(c)(3) public charity.{ein ? ` EIN ${ein}.` : ""}</span>
        </Container>
      </div>
    </footer>
  );
}