Footer Newsletter

"use client";

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

export interface FooterNewsletterProps {
  brand?: string;
  tagline?: string;
  columns?: { title: string; links: { label: string; href: string }[] }[];
  newsletterTitle?: string;
  onSubscribe?: (email: string) => void | Promise<void>;
  legal?: string;
  className?: string;
}

const DEFAULT_COLUMNS = [
  {
    title: "Product",
    links: [
      { label: "Alerting", href: "#alerting" },
      { label: "On-call", href: "#on-call" },
      { label: "Status pages", href: "#status-pages" },
      { label: "Pricing", href: "#pricing" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Docs", href: "#docs" },
      { label: "API", href: "#api" },
      { label: "Incident playbooks", href: "#playbooks" },
      { label: "Changelog", href: "#changelog" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "#about" },
      { label: "Careers", href: "#careers" },
      { label: "Security", href: "#security" },
      { label: "Contact", href: "#contact" },
    ],
  },
];

/** Footer with an inline newsletter form next to the brand, three link columns and a legal row. */
export function FooterNewsletter({
  brand = "Tracewise",
  tagline = "Incident response for teams that ship fast.",
  columns = DEFAULT_COLUMNS,
  newsletterTitle = "Get the monthly Pager Digest",
  onSubscribe,
  legal = "© 2026 Tracewise, Inc. All rights reserved.",
  className,
}: FooterNewsletterProps) {
  const id = useId();
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);

  return (
    <footer className={cn("border-t border-da-border bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container grid gap-12 py-14 lg:grid-cols-[1.4fr_2fr]">
        <div>
          <p className="text-[15px] font-semibold tracking-tight">{brand}</p>
          <p className="mt-2 max-w-xs text-sm text-da-muted-fg">{tagline}</p>
          <form
            className="mt-8 max-w-sm"
            onSubmit={async (e) => {
              e.preventDefault();
              if (!email) return;
              await onSubscribe?.(email);
              setDone(true);
            }}
          >
            <label htmlFor={`${id}-email`} className="text-[13px] font-medium">
              {newsletterTitle}
            </label>
            <div className="mt-2 flex gap-2">
              <input
                id={`${id}-email`}
                type="email"
                required
                autoComplete="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@company.com"
                disabled={done}
                className="da-focus h-9 min-w-0 flex-1 rounded-da-md border border-da-border bg-da-input px-3 text-sm placeholder:text-da-muted-fg disabled:opacity-60"
              />
              <button
                type="submit"
                disabled={done}
                className="da-focus da-transition h-9 rounded-da-md bg-da-fg px-3.5 text-sm font-medium text-da-bg hover:bg-da-fg/85 disabled:opacity-60"
              >
                {done ? "Subscribed" : "Subscribe"}
              </button>
            </div>
            <p role="status" className="mt-2 min-h-5 text-[12px] text-da-muted-fg">
              {done ? "Thanks — see you next month." : ""}
            </p>
          </form>
        </div>
        <nav aria-label="Footer" className="grid grid-cols-2 gap-8 sm:grid-cols-3">
          {columns.map((c) => (
            <div key={c.title}>
              <h2 className="text-[13px] font-medium">{c.title}</h2>
              <ul className="mt-4 space-y-2.5">
                {c.links.map((l) => (
                  <li key={l.href}>
                    <a href={l.href} className="da-focus da-transition rounded-da-sm text-sm text-da-muted-fg hover:text-da-fg">
                      {l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      </div>
      <div className="border-t border-da-border">
        <p className="da-container py-5 text-xs text-da-muted-fg">{legal}</p>
      </div>
    </footer>
  );
}

export default FooterNewsletter;