"use client";

import Link from "next/link";
import { useTranslation } from "@/app/hooks/useTranslation";

export default function Footer() {
  const { site } = useTranslation();

  return (
    <footer className="w-full bg-surface-container-low border-t border-white/5 py-10 lg:py-16">
      <div className="flex flex-col lg:flex-row justify-between items-center px-[var(--spacing-gutter)] gap-10 lg:gap-8 w-full max-w-hd mx-auto">
        <div className="font-[var(--font-label-caps)] text-base lg:text-xl text-primary tracking-widest font-bold uppercase">
          {site.brand.name}
        </div>
        <div className="flex flex-wrap justify-center gap-8 lg:gap-16">
          {site.footer.links.map((l) => (
            <Link
              key={l.label}
              className="text-on-surface-variant font-[var(--font-label-caps)] text-xs lg:text-sm hover:text-primary transition-colors"
              href={l.href}
            >
              {l.label}
            </Link>
          ))}
        </div>
        <div className="text-[13px] lg:text-[14px] text-on-surface-variant/40 text-center lg:text-right max-w-sm leading-relaxed uppercase tracking-widest">
          {site.footer.copyright}
        </div>
      </div>
    </footer>
  );
}