Website footer

import { Globe, Mail, Rss } from "lucide-react";

const columns = [
  { title: "Product", links: [["Invoices", "/invoices"], ["Reminders", "/reminders"], ["Payments", "/payments"], ["Pricing", "/pricing"], ["Changelog", "/changelog"]] },
  { title: "Company", links: [["About", "/about"], ["Customers", "/customers"], ["Careers", "/careers"], ["Contact", "/contact"]] },
  { title: "Resources", links: [["Journal", "/journal"], ["Templates", "/templates"], ["Help centre", "/help"], ["API docs", "/docs"]] },
  { title: "Legal", links: [["Privacy", "/privacy"], ["Terms", "/terms"], ["Security", "/security"], ["Cookies", "/cookies"]] },
];

export function SiteFooter() {
  return (
    <footer className="border-t border-border bg-surface font-sans">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6">
        <div className="grid gap-10 lg:grid-cols-[1.6fr_repeat(4,1fr)] lg:gap-6">
          <div className="flex flex-col items-start gap-4">
            <a href="/" className="flex items-center gap-2 text-[15px] font-semibold tracking-tight text-fg">
              <span aria-hidden className="size-6 rounded-sm bg-primary" /> Fernbill
            </a>
            <p className="max-w-xs text-[13px] leading-relaxed text-fg-muted">Invoices and reminders for freelancers and small studios.</p>
            <a href="https://status.example.com" className="inline-flex items-center gap-2 rounded-full border border-border bg-bg px-2.5 py-1 text-xs text-fg-muted">
              <span className="size-1.5 rounded-full bg-success" aria-hidden /> All systems normal
            </a>
          </div>
          <div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 lg:contents">
            {columns.map((col) => (
              <nav key={col.title} aria-label={col.title}>
                <h2 className="text-[13px] font-medium text-fg">{col.title}</h2>
                <ul className="mt-3 grid gap-2.5">
                  {col.links.map(([label, href]) => (
                    <li key={href}><a href={href} className="text-[13px] text-fg-muted transition hover:text-fg">{label}</a></li>
                  ))}
                </ul>
              </nav>
            ))}
          </div>
        </div>

        <div className="mt-12 flex flex-wrap items-center justify-between gap-4 border-t border-border pt-6 text-[13px] text-fg-subtle">
          <p>© {new Date().getFullYear()} Fernbill Labs. All rights reserved.</p>
          <div className="flex items-center gap-0.5">
            <a href="mailto:hello@example.com" aria-label="Email us" className="inline-grid size-8 place-items-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg"><Mail className="size-4" /></a>
            <a href="/journal/rss.xml" aria-label="RSS feed" className="inline-grid size-8 place-items-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg"><Rss className="size-4" /></a>
            <button type="button" aria-label="Language: English" className="inline-flex h-8 items-center gap-1.5 rounded px-2 text-fg-muted hover:bg-surface-2 hover:text-fg">
              <Globe className="size-4" aria-hidden /> English
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
}