import Link from 'next/link';
import type { ApexConfig } from '@/lib/apex-config';

/**
 * Shared apex footer in the dealer-template footer idiom: solid black,
 * white links with the template's #f57c00 orange hover, muted fine print.
 */
export function ApexFooter({ apex }: { apex: ApexConfig }) {
  return (
    <footer className="bg-black text-white">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-4 px-4 py-10 text-center sm:px-6 md:py-12">
        <nav className="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm font-semibold">
          <Link
            href="/dealers"
            className="rounded text-white transition-colors hover:text-[#f57c00] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f8981d]"
          >
            Dealer Directory
          </Link>
          <Link
            href="https://amsoil.aimclear.com/"
            className="rounded text-white transition-colors hover:text-[#f57c00] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f8981d]"
          >
            Become a Dealer
          </Link>
          <Link
            href="/terms"
            className="rounded text-white transition-colors hover:text-[#f57c00] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f8981d]"
          >
            Terms
          </Link>
        </nav>
        <p className="max-w-2xl text-sm leading-relaxed text-white/70">
          {apex.siteName} is a directory of independent AMSOIL dealer sites. AMSOIL and the AMSOIL
          logo are registered trademarks of AMSOIL INC.
        </p>
      </div>
    </footer>
  );
}