Footer Sitemap

"use client";

import { useId, useState, type FormEvent } from "react";
import { cn } from "@/lib/utils";

export interface FooterSitemapProps {
  brand?: string;
  columns?: { title: string; links: { label: string; href: string; badge?: string }[] }[];
  newsletter?: { title: string; button: string; onSubscribe?: (email: string) => void | Promise<void> };
  languages?: string[];
  legal?: { label: string; href: string }[];
  copyright?: string;
  className?: string;
}

const DEFAULT_COLUMNS: FooterSitemapProps["columns"] = [
  { title: "Product", links: [{ label: "Changelog pages", href: "#" }, { label: "In-app widget", href: "#" }, { label: "AI summaries", href: "#", badge: "New" }, { label: "Digests", href: "#" }, { label: "Pricing", href: "#" }] },
  { title: "Integrations", links: [{ label: "GitHub", href: "#" }, { label: "GitLab", href: "#" }, { label: "Linear", href: "#" }, { label: "Slack", href: "#" }, { label: "Zapier", href: "#" }] },
  { title: "Developers", links: [{ label: "Docs", href: "#" }, { label: "API reference", href: "#" }, { label: "Webhooks", href: "#" }, { label: "Status", href: "#" }] },
  { title: "Resources", links: [{ label: "Blog", href: "#" }, { label: "Templates", href: "#" }, { label: "Customers", href: "#" }, { label: "Guides", href: "#" }] },
  { title: "Company", links: [{ label: "About", href: "#" }, { label: "Careers", href: "#", badge: "3" }, { label: "Press", href: "#" }, { label: "Contact", href: "#" }] },
];

export function FooterSitemap({
  brand = "Shipyard",
  columns = DEFAULT_COLUMNS,
  newsletter = { title: "One email per month. Only what shipped.", button: "Subscribe" },
  languages = ["English", "Français", "Deutsch", "日本語"],
  legal = [
    { label: "Privacy", href: "#" },
    { label: "Terms", href: "#" },
    { label: "DPA", href: "#" },
    { label: "Security", href: "#" },
  ],
  copyright = `© ${new Date().getFullYear()} Shipyard Labs, Inc.`,
  className,
}: FooterSitemapProps) {
  const emailId = useId();
  const langId = useId();
  const [done, setDone] = useState(false);

  async function subscribe(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const email = new FormData(e.currentTarget).get("email");
    if (typeof email !== "string") return;
    await newsletter.onSubscribe?.(email);
    setDone(true);
  }

  return (
    <footer className={cn("da-stroke-t bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container py-14">
        <div className="da-stroke grid bg-da-surface text-da-surface-fg shadow-da-md md:grid-cols-[1fr_1.2fr]">
          <p className="p-6 font-da-display text-2xl leading-tight tracking-da-display uppercase md:da-stroke-r">{newsletter.title}</p>
          {done ? (
            <p role="status" className="flex items-center bg-da-success p-6 font-bold text-da-success-fg">
              ✓ You’re in. First issue lands next month.
            </p>
          ) : (
            <form onSubmit={subscribe} className="flex flex-col sm:flex-row">
              <label htmlFor={emailId} className="sr-only">
                Email
              </label>
              <input
                id={emailId}
                name="email"
                type="email"
                required
                autoComplete="email"
                placeholder="you@company.com"
                className="da-focus da-stroke-t min-w-0 flex-1 bg-transparent px-6 py-5 text-lg md:border-t-0"
              />
              <button type="submit" className="da-focus da-stroke-t bg-da-fg px-6 py-5 font-bold text-da-bg hover:bg-da-secondary hover:text-da-secondary-fg sm:da-stroke-l sm:border-t-0">
                {newsletter.button}
              </button>
            </form>
          )}
        </div>

        <div className="mt-12 grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5">
          {(columns ?? []).map((c) => (
            <nav key={c.title} aria-label={c.title}>
              <h2 className="da-stroke-b pb-2 font-da-mono text-xs font-bold tracking-da-label uppercase">{c.title}</h2>
              <ul className="mt-3 space-y-2 text-sm">
                {c.links.map((l) => (
                  <li key={l.label}>
                    <a href={l.href} className="da-focus inline-flex items-center gap-2 font-medium hover:bg-da-primary hover:text-da-primary-fg">
                      {l.label}
                      {l.badge && <span className="da-stroke bg-da-accent px-1 font-da-mono text-[10px] font-bold text-da-accent-fg">{l.badge}</span>}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>

        <div className="da-stroke-t mt-12 flex flex-col gap-4 pt-6 lg:flex-row lg:items-center lg:justify-between">
          <p className="flex items-center gap-3 font-da-display text-xl tracking-da-display uppercase">
            {brand}
            <span className="font-da-mono text-xs font-normal tracking-normal normal-case text-da-muted-fg">{copyright}</span>
          </p>
          <div className="flex flex-wrap items-center gap-4">
            <ul className="flex flex-wrap gap-4 font-da-mono text-xs font-bold uppercase">
              {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>
            <label htmlFor={langId} className="sr-only">
              Language
            </label>
            <select id={langId} className="da-focus da-stroke bg-da-surface px-3 py-1.5 font-da-mono text-xs font-bold text-da-surface-fg">
              {languages.map((l) => (
                <option key={l}>{l}</option>
              ))}
            </select>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default FooterSitemap;