import Link from "next/link";
import Image from "next/image";
import { getPublicContactSettings, getPublicGeneralSettings } from "@/lib/api/cms";

export async function Footer() {
  const [{ data: settings }, { data: contact }] = await Promise.all([
    getPublicGeneralSettings(),
    getPublicContactSettings(),
  ]);

  return (
    <footer
      id="site-footer"
      className="border-t border-kolabora-neutral-dark/10 bg-kolabora-neutral-dark text-kolabora-neutral-white"
    >
      <div className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10 text-sm sm:flex-row sm:items-start sm:justify-between 2xl:max-w-7xl">
        <div>
          {settings.footer_logo_url ? (
            // eslint-disable-next-line @next/next/no-img-element -- admin-provided URL, not on next/image allowlist
            <img src={settings.footer_logo_url} alt={settings.platform_name ?? "Kolaborativ"} className="h-8 w-auto" />
          ) : (
            <Image src="/kolabora-wordmark.svg" alt="Kolaborativ" width={140} height={18} />
          )}
          <p className="mt-1 text-kolabora-neutral-white/70">
            Your Ticketing and Collaboration Partner.
          </p>
          {/* FR-142: link ke halaman "Tentang Kolabora" (dikelola lewat CMS Kelola Halaman, FR-CMS-001–006). */}
          <Link
            href="/pages/about"
            className="mt-3 inline-block rounded text-kolabora-neutral-white/70 hover:text-kolabora-neutral-white focus:outline-none focus-visible:ring-2 focus-visible:ring-kolabora-neutral-white focus-visible:ring-offset-2 focus-visible:ring-offset-kolabora-neutral-dark"
          >
            About Us
          </Link>
          <p className="mt-6 text-xs text-kolabora-neutral-white/50">
            {settings.footer_copyright_text || `© ${new Date().getFullYear()} Kolaborativ. Powered by OASE.`}
          </p>
        </div>

        <div className="flex flex-col gap-1">
          {contact.contact_email && (
            <>
              <p className="font-semibold">Contact us</p>
              <a
                href={`mailto:${contact.contact_email}`}
                className="rounded text-kolabora-neutral-white/70 hover:text-kolabora-neutral-white focus:outline-none focus-visible:ring-2 focus-visible:ring-kolabora-neutral-white focus-visible:ring-offset-2 focus-visible:ring-offset-kolabora-neutral-dark"
              >
                {contact.contact_email}
              </a>
            </>
          )}
          <Link
            href="/terms"
            className={`rounded text-kolabora-neutral-white/70 hover:text-kolabora-neutral-white focus:outline-none focus-visible:ring-2 focus-visible:ring-kolabora-neutral-white focus-visible:ring-offset-2 focus-visible:ring-offset-kolabora-neutral-dark ${contact.contact_email ? "mt-3" : ""}`}
          >
            Terms &amp; Conditions
          </Link>
          <Link
            href="/privacy"
            className="rounded text-kolabora-neutral-white/70 hover:text-kolabora-neutral-white focus:outline-none focus-visible:ring-2 focus-visible:ring-kolabora-neutral-white focus-visible:ring-offset-2 focus-visible:ring-offset-kolabora-neutral-dark"
          >
            Privacy Policy
          </Link>
        </div>
      </div>
    </footer>
  );
}