Footer

<footer className="border-t bg-card">
  <div className="max-w-6xl mx-auto px-6 py-12">
    <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div>
        <h3 className="font-bold text-lg mb-4">Brand</h3>
        <p className="text-sm text-muted-foreground">Brief brand description.</p>
      </div>
      {linkGroups.map((group) => (
        <div key={group.title}>
          <h4 className="text-sm font-semibold mb-3">{group.title}</h4>
          <ul className="space-y-2">
            {group.links.map((link) => (
              <li key={link.label}>
                <a href={link.href} className="text-sm text-muted-foreground hover:text-foreground">
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </div>
  <div className="border-t px-6 py-4 text-center text-xs text-muted-foreground">
    2026 Brand. All rights reserved.
  </div>
</footer>