import Link from "next/link";
import { APP_CONFIG } from "@/config/app.config";
import { ROUTES } from "@/config/routes.config";

export function Footer() {
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-border bg-surface">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 px-4 py-6 text-sm text-muted sm:flex-row sm:px-6">
        <p>
          © {year} {APP_CONFIG.name}. All rights reserved.
        </p>
        <nav aria-label="Footer">
          <ul className="flex items-center gap-5">
            <li>
              <Link
                href={ROUTES.templates}
                className="hover:text-foreground transition-colors"
              >
                Templates
              </Link>
            </li>
            <li>
              <Link
                href={ROUTES.pricing}
                className="hover:text-foreground transition-colors"
              >
                Pricing
              </Link>
            </li>
            <li>
              <Link
                href={ROUTES.contact}
                className="hover:text-foreground transition-colors"
              >
                Contact
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    </footer>
  );
}