import Link from "next/link";
import { BrandLogo } from "@/components/public/brand";
import { commonTexts } from "@/lib/i18n/common";
import { publicTexts } from "@/lib/i18n/public";

const COLUMNS: { title: string; links: { href: string; label: string }[] }[] = [
  {
    title: publicTexts.footerProduct,
    links: [
      { href: "/services", label: publicTexts.footerLinkServices },
      { href: "/api", label: publicTexts.footerLinkApi },
      { href: "/#how-it-works", label: publicTexts.footerLinkHowItWorks },
      { href: "/#faq", label: publicTexts.footerLinkFaq },
    ],
  },
  {
    title: publicTexts.footerAccount,
    links: [
      { href: "/signin", label: publicTexts.footerLinkSignIn },
      { href: "/signup", label: publicTexts.footerLinkSignUp },
      { href: "/forgot-password", label: publicTexts.footerLinkForgot },
    ],
  },
  {
    title: publicTexts.footerLegal,
    links: [{ href: "/terms", label: publicTexts.footerLinkTerms }],
  },
];

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

  return (
    <footer className="border-t bg-card/40">
      <div className="mx-auto w-full max-w-6xl px-5 py-14 sm:px-8">
        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.6fr_1fr_1fr_1fr]">
          <div className="max-w-sm">
            <BrandLogo />
            <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
              {publicTexts.footerBlurb}
            </p>
          </div>

          {COLUMNS.map((column) => (
            <nav key={column.title} aria-label={column.title}>
              <h2 className="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">
                {column.title}
              </h2>
              <ul className="mt-4 space-y-2.5">
                {column.links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>

        <div className="mt-12 flex flex-col gap-2 border-t pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs text-muted-foreground">
            © {year} {commonTexts.appName}. {publicTexts.footerRights}
          </p>
          <p className="text-xs text-muted-foreground/70">
            {publicTexts.footerBrandNote}
          </p>
        </div>
      </div>
    </footer>
  );
}

export default PublicFooter;