Footer — big call to action

import { ArrowRight, Mail } from "lucide-react";

const columns = [
  { title: "Product", links: [["Invoices", "/invoices"], ["Payments", "/payments"], ["Reminders", "/reminders"], ["Recurring billing", "/recurring"]] },
  { title: "Resources", links: [["Help centre", "/help"], ["Invoice templates", "/templates"], ["Guides", "/guides"], ["Blog", "/blog"]] },
  { title: "Company", links: [["About", "/about"], ["Careers", "/careers"], ["Customers", "/customers"], ["Press", "/press"]] },
];

const legal = [["Terms", "/terms"], ["Privacy", "/privacy"], ["Cookies", "/cookies"]];

export function FooterBigCta() {
  return (
    <footer className="overflow-hidden bg-surface px-5 pt-12 font-sans sm:px-10 sm:pt-16">
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-6 border-b border-border pb-12 lg:grid-cols-[1fr_auto] lg:items-end">
          <h2 className="max-w-[14ch] text-4xl font-semibold leading-none tracking-tighter text-fg sm:text-6xl">Send your next invoice in two minutes.</h2>
          <div className="flex flex-wrap gap-2.5">
            <a href="/signup" className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">
              Start free <ArrowRight className="size-4" aria-hidden />
            </a>
            <a href="/demo" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 text-[15px] font-medium text-fg transition hover:bg-surface-2">Book a demo</a>
          </div>
        </div>

        <div className="mt-10 grid gap-8 lg:grid-cols-[1fr_1.4fr]">
          <div className="grid content-start gap-2.5">
            <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="max-w-[36ch] text-sm text-fg-muted">Made for small businesses by a small business.</p>
            <a href="mailto:hello@tallybook.example" className="inline-flex items-center gap-1.5 text-[13.5px] font-medium text-primary hover:underline">
              <Mail className="size-3.5" aria-hidden />hello@tallybook.example
            </a>
          </div>
          <nav aria-label="Footer" className="grid grid-cols-3 gap-5">
            {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>

        <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.</p>
          <nav aria-label="Legal">
            <ul className="flex gap-5">{legal.map(([label, href]) => <li key={label}><a href={href} className="hover:text-fg">{label}</a></li>)}</ul>
          </nav>
        </div>

        <p aria-hidden className="mt-10 select-none whitespace-nowrap bg-gradient-to-b from-border-strong to-surface bg-clip-text text-center text-[19vw] font-bold leading-[0.78] tracking-tighter text-transparent lg:text-[236px]">
          tallybook
        </p>
      </div>
    </footer>
  );
}