Footer CTA

import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FooterCtaProps {
  headline?: string;
  cta?: { label: string; href: string };
  brand?: string;
  columns?: { title: string; links: { label: string; href: string }[] }[];
  social?: { label: string; href: string }[];
  copyright?: string;
  className?: string;
}

export function FooterCta({
  headline = "Got a release coming? Let's make it loud.",
  cta = { label: "Start shipping", href: "#signup" },
  brand = "Shipyard",
  columns = [
    { title: "Product", links: [{ label: "Changelog", href: "#" }, { label: "Widget", href: "#" }, { label: "Pricing", href: "#" }] },
    { title: "Resources", links: [{ label: "Docs", href: "#" }, { label: "API", href: "#" }, { label: "Templates", href: "#" }] },
    { title: "Company", links: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#" }] },
  ],
  social = [
    { label: "GitHub", href: "#" },
    { label: "X", href: "#" },
    { label: "LinkedIn", href: "#" },
  ],
  copyright = `© ${new Date().getFullYear()} Shipyard Labs, Inc.`,
  className,
}: FooterCtaProps) {
  return (
    <footer className={cn("bg-da-bg text-da-fg", className)}>
      <div className="da-stroke-t da-stroke-b bg-da-primary text-da-primary-fg">
        <div className="da-container flex flex-col gap-8 py-14 lg:flex-row lg:items-end lg:justify-between">
          <p className="max-w-3xl font-da-display text-[clamp(2.25rem,6vw,4.5rem)] leading-[0.95] tracking-da-display uppercase">{headline}</p>
          <a
            href={cta.href}
            className="da-focus da-transition da-stroke group inline-flex shrink-0 items-center gap-3 self-start bg-da-fg px-6 py-4 text-lg font-bold text-da-bg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none lg:self-end"
          >
            {cta.label}
            <ArrowRight aria-hidden className="da-transition size-5 group-hover:translate-x-1" strokeWidth={3} />
          </a>
        </div>
      </div>
      <div className="da-container grid gap-10 py-12 sm:grid-cols-2 lg:grid-cols-[1.5fr_repeat(3,1fr)]">
        <div>
          <p className="font-da-display text-2xl tracking-da-display uppercase">{brand}</p>
          <ul className="mt-4 flex gap-2">
            {social.map((s) => (
              <li key={s.label}>
                <a href={s.href} className="da-focus da-stroke block bg-da-surface px-3 py-1.5 font-da-mono text-xs font-bold text-da-surface-fg hover:bg-da-fg hover:text-da-bg">
                  {s.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
        {columns.map((c) => (
          <nav key={c.title} aria-label={c.title}>
            <h2 className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{c.title}</h2>
            <ul className="mt-3 space-y-2">
              {c.links.map((l) => (
                <li key={l.label}>
                  <a href={l.href} className="da-focus font-bold underline decoration-transparent decoration-[3px] underline-offset-4 hover:decoration-da-fg">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        ))}
      </div>
      <p className="da-container da-stroke-t py-5 font-da-mono text-xs text-da-muted-fg">{copyright}</p>
    </footer>
  );
}

export default FooterCta;