import { Avatar, Button } from "@sisyphos-ui/react";
// Inline social SVGs (lucide@1.x doesn't ship brand icons over
// trademark concerns; bring your own or swap in react-icons).
import { GitHubIcon, TwitterXIcon, LinkedInIcon } from "@/icons";

const COLUMNS = [
  { title: "Product",   links: ["Components", "Templates", "Theming", "Pricing", "Changelog"] },
  { title: "Resources", links: ["Docs", "Examples", "Tutorials", "MCP server", "Support"] },
  { title: "Company",   links: ["About", "Blog", "Careers", "Press kit", "Contact"] },
];

const SOCIAL = [
  { label: "GitHub",   icon: GitHubIcon,   href: "https://github.com/your/repo" },
  { label: "Twitter",  icon: TwitterXIcon, href: "https://twitter.com/you" },
  { label: "LinkedIn", icon: LinkedInIcon, href: "https://linkedin.com/company/you" },
];

export function SiteFooter() {
  return (
    <footer className="border-t bg-white px-6 pb-10 pt-20">
      <div className="mx-auto max-w-6xl">
        <div className="grid grid-cols-2 gap-10 md:grid-cols-4">
          <div className="col-span-2 md:col-span-1">
            <div className="flex items-center gap-2">
              <Avatar size="sm" color="primary" shape="rounded" fallback="S" aria-label="Brand logo" />
              <span className="text-base font-bold">Your Brand</span>
            </div>
            <p className="mt-4 max-w-xs text-sm text-zinc-600">
              Open source, accessible, themeable at runtime.
            </p>
          </div>

          {COLUMNS.map((col) => (
            <div key={col.title}>
              <h4 className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
                {col.title}
              </h4>
              <ul className="mt-4 flex flex-col gap-2.5">
                {col.links.map((link) => (
                  <li key={link}>
                    <a href="#" className="text-sm text-zinc-600 hover:text-zinc-900">
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-14 flex flex-col items-start justify-between gap-4 border-t pt-6 sm:flex-row sm:items-center">
          <p className="text-xs text-zinc-500">
            © {new Date().getFullYear()} Your Brand · MIT
          </p>
          <ul className="flex items-center gap-2">
            {SOCIAL.map(({ label, icon: Icon, href }) => (
              <li key={label}>
                <Button href={href} variant="outlined" size="sm" aria-label={label}>
                  <Icon className="size-4" />
                </Button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}
Components used

Used in templates
