Footer — four link columns

import { Globe, Instagram, Linkedin, Twitter, Youtube } from "lucide-react";

const columns = [
  { title: "Product", links: [["Invoices", "/invoices"], ["Payments", "/payments"], ["Reminders", "/reminders"], ["Recurring billing", "/recurring"], ["Pricing", "/pricing"]] },
  { title: "Resources", links: [["Help centre", "/help"], ["Invoice templates", "/templates"], ["Guides", "/guides"], ["Blog", "/blog"], ["Status", "/status"]] },
  { title: "Company", links: [["About", "/about"], ["Careers", "/careers"], ["Customers", "/customers"], ["Press", "/press"], ["Contact", "/contact"]] },
  { title: "Legal", links: [["Terms", "/terms"], ["Privacy", "/privacy"], ["Cookies", "/cookies"], ["Security", "/security"], ["Accessibility", "/accessibility"]] },
];

const socials = [
  { label: "X", href: "#", icon: Twitter },
  { label: "LinkedIn", href: "#", icon: Linkedin },
  { label: "Instagram", href: "#", icon: Instagram },
  { label: "YouTube", href: "#", icon: Youtube },
];

export function FooterFourColumn() {
  return (
    <footer className="border-t border-border bg-bg px-5 pb-7 pt-12 font-sans sm:px-10 sm:pt-16">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-wrap items-start justify-between gap-x-10 gap-y-5 border-b border-border pb-10">
          <div className="max-w-[340px]">
            <a href="/" className="inline-flex items-center gap-2 text-base font-semibold tracking-tight text-fg">
              <span className="size-6 rounded-sm bg-primary" aria-hidden />Tallybook
            </a>
            <p className="mt-2.5 text-sm leading-relaxed text-fg-muted">Invoicing and payments for small businesses that would rather be doing the work.</p>
          </div>
          <div className="flex flex-wrap items-center gap-2.5">
            <a href="/status" className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-[12.5px] text-fg-muted">
              <span className="size-[7px] rounded-full bg-success" aria-hidden />All systems normal
            </a>
            <label className="inline-flex items-center gap-2 text-fg-muted">
              <Globe className="size-4" aria-hidden />
              <span className="sr-only">Language</span>
              <select defaultValue="en" className="h-[34px] rounded border border-border-strong bg-bg px-2.5 text-[13px] text-fg">
                <option value="en">English</option><option value="es">Español</option><option value="fr">Français</option>
              </select>
            </label>
          </div>
        </div>

        <nav aria-label="Footer" className="mt-10 grid grid-cols-2 gap-x-5 gap-y-8 sm:grid-cols-4">
          {columns.map((col) => (
            <div key={col.title}>
              <h2 className="mb-3.5 text-[13px] font-semibold text-fg">{col.title}</h2>
              <ul className="grid gap-2.5">
                {col.links.map(([label, href]) => (
                  <li key={label}><a href={href} className="text-[13.5px] text-fg-muted transition hover:text-fg">{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </nav>

        <div className="mt-12 flex flex-wrap items-center justify-between gap-3 border-t border-border pt-6 text-[13px] text-fg-subtle">
          <p>© {new Date().getFullYear()} Tallybook Ltd. All rights reserved.</p>
          <div className="flex gap-1">
            {socials.map(({ label, href, icon: Icon }) => (
              <a key={label} href={href} aria-label={"Tallybook on " + label} className="grid size-8 place-items-center rounded transition hover:bg-surface-2 hover:text-fg">
                <Icon className="size-4" aria-hidden />
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}