Footer Mega

import { cn } from "@/lib/utils";

export interface FooterMegaColumn {
  title: string;
  links: { label: string; href: string }[];
}

export interface FooterMegaProps {
  brand?: string;
  tagline?: string;
  columns?: FooterMegaColumn[];
  legal?: { label: string; href: string }[];
  copyright?: string;
  status?: { label: string; href: string };
  className?: string;
}

const DEFAULT_COLUMNS: FooterMegaColumn[] = [
  {
    title: "Product",
    links: [
      { label: "Changelog pages", href: "#" },
      { label: "In-app widget", href: "#" },
      { label: "AI summaries", href: "#" },
      { label: "Integrations", href: "#" },
      { label: "Pricing", href: "#" },
    ],
  },
  {
    title: "Developers",
    links: [
      { label: "Documentation", href: "#" },
      { label: "API reference", href: "#" },
      { label: "GitHub Action", href: "#" },
      { label: "Status", href: "#" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "#" },
      { label: "Blog", href: "#" },
      { label: "Careers", href: "#" },
      { label: "Contact", href: "#" },
    ],
  },
];

export function FooterMega({
  brand = "Shipyard",
  tagline = "Release notes your users actually read.",
  columns = DEFAULT_COLUMNS,
  legal = [
    { label: "Privacy", href: "#" },
    { label: "Terms", href: "#" },
    { label: "DPA", href: "#" },
  ],
  copyright = `© ${new Date().getFullYear()} Shipyard Labs, Inc.`,
  status = { label: "All systems operational", href: "#status" },
  className,
}: FooterMegaProps) {
  return (
    <footer className={cn("bg-da-fg text-da-bg", className)}>
      <div className="da-container grid gap-12 py-16 md:grid-cols-[1.3fr_repeat(3,1fr)]">
        <div>
          <p className="font-da-display text-2xl tracking-da-display uppercase">{brand}</p>
          <p className="mt-3 max-w-xs opacity-80">{tagline}</p>
          <a
            href={status.href}
            className="da-focus mt-6 inline-flex items-center gap-2 border-[length:var(--da-border-width)] border-current px-3 py-1.5 font-da-mono text-xs font-bold tracking-da-label uppercase"
          >
            <span aria-hidden className="size-2.5 bg-da-success" />
            {status.label}
          </a>
        </div>
        {columns.map((col) => (
          <nav key={col.title} aria-label={col.title}>
            <h2 className="font-da-mono text-xs font-bold tracking-da-label uppercase opacity-70">{col.title}</h2>
            <ul className="mt-4 space-y-2.5">
              {col.links.map((l) => (
                <li key={l.label}>
                  <a href={l.href} className="da-focus font-medium underline-offset-4 hover:bg-da-primary hover:text-da-primary-fg">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        ))}
      </div>

      <p
        aria-hidden
        className="da-container overflow-hidden font-da-display text-[clamp(3rem,13vw,11rem)] leading-[0.8] tracking-da-display whitespace-nowrap uppercase select-none"
      >
        {brand}
      </p>

      <div className="border-t-[length:var(--da-border-width)] border-current">
        <div className="da-container flex flex-col gap-3 py-5 font-da-mono text-xs sm:flex-row sm:items-center sm:justify-between">
          <p>{copyright}</p>
          <ul className="flex gap-5">
            {legal.map((l) => (
              <li key={l.label}>
                <a href={l.href} className="da-focus underline underline-offset-4 hover:no-underline">
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}

export default FooterMega;