import Link from "next/link";
import { CookieSettingsLink } from "@/components/consent/ConsentManager";
import { TextLink } from "@/components/ui/Button";
import { Logo } from "@/components/ui/Logo";
import { industryCatalog, serviceCatalog } from "@/content/catalog";
import { resourceCatalog } from "@/content/resources/catalog";
import { routes } from "@/lib/routes";
import { formatAddress, siteConfig } from "@/lib/site";

const columns = [
  {
    title: "Services",
    links: serviceCatalog.map((service) => ({ label: service.name, href: routes.service(service.slug) })),
  },
  {
    title: "Industries",
    links: industryCatalog.map((industry) => ({ label: industry.title, href: industry.href })),
  },
  {
    title: "Resources",
    links: [
      { label: "All resources", href: routes.resources },
      ...resourceCatalog.slice(0, 4).map((resource) => ({ label: resource.title, href: routes.resource(resource.slug) })),
      { label: "Growth diagnostic", href: "/#growth-diagnostic" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "How We Work", href: routes.howWeWork },
      { label: "About", href: routes.about },
      { label: "Contact", href: routes.contact },
      { label: "Get a Growth Audit", href: routes.audit },
    ],
  },
];

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

  return (
    <footer className="border-t border-line bg-paper-deep" aria-labelledby="site-footer-heading">
      <h2 id="site-footer-heading" className="sr-only">
        Site footer
      </h2>
      <div className="container-page grid gap-14 py-16 lg:grid-cols-12 lg:gap-6 lg:py-20">
        <div className="lg:col-span-4">
          <Logo />
          <p className="mt-6 max-w-sm text-ink-soft">
            Growth marketing for SaaS and e-commerce companies. Acquisition, conversion, measurement, and retention,
            connected to revenue.
          </p>
          <TextLink href={routes.audit} className="mt-6">
            Get a Growth Audit
          </TextLink>
        </div>

        <nav aria-label="Footer" className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4 lg:col-span-8">
          {columns.map((column) => (
            <div key={column.title}>
              <p className="text-label uppercase text-muted">{column.title}</p>
              <ul className="mt-5 space-y-3 text-[0.9375rem]">
                {column.links.map((link) => (
                  <li key={link.href}>
                    <Link href={link.href} className="link-underline-hover text-ink-soft transition-colors hover:text-ink">
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      </div>

      <div className="border-t border-line">
        <div className="container-page flex flex-col gap-4 py-7 text-sm text-muted lg:flex-row lg:items-center lg:justify-between">
          <p className="max-w-3xl">
            © {year} {siteConfig.legalName} · Company No. {siteConfig.companyNumber} ·{" "}
            <span className="whitespace-normal">{formatAddress()}</span>
          </p>
          <ul className="flex flex-wrap gap-x-6 gap-y-2">
            <li>
              <Link href={routes.privacy} className="link-underline-hover hover:text-ink">
                Privacy
              </Link>
            </li>
            <li>
              <Link href={routes.terms} className="link-underline-hover hover:text-ink">
                Terms
              </Link>
            </li>
            <li>
              <Link href={routes.cookiePolicy} className="link-underline-hover hover:text-ink">
                Cookie policy
              </Link>
            </li>
            <li>
              <CookieSettingsLink className="link-underline-hover hover:text-ink" />
            </li>
          </ul>
        </div>
      </div>
    </footer>
  );
}