Footer Glass

"use client";

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

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

export interface FooterGlassProps {
  brand?: string;
  tagline?: string;
  columns?: FooterGlassColumn[];
  newsletter?: { title: string; placeholder: string; button: string; onSubscribe?: (email: string) => void | Promise<void> };
  copyright?: string;
  legal?: { label: string; href: string }[];
  className?: string;
}

const DEFAULT_COLUMNS: FooterGlassColumn[] = [
  { title: "Product", links: [{ label: "Notetaker", href: "#" }, { label: "Async video", href: "#" }, { label: "Integrations", href: "#" }, { label: "Pricing", href: "#" }] },
  { title: "Resources", links: [{ label: "Help center", href: "#" }, { label: "Meeting templates", href: "#" }, { label: "API", href: "#" }, { label: "Status", href: "#" }] },
  { title: "Company", links: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }, { label: "Security", href: "#" }, { label: "Press kit", href: "#" }] },
];

export function FooterGlass({
  brand = "Halo",
  tagline = "Your meetings, summarized. Your updates, async.",
  columns = DEFAULT_COLUMNS,
  newsletter = { title: "Monthly product notes, no fluff.", placeholder: "you@company.com", button: "Subscribe" },
  copyright = `© ${new Date().getFullYear()} Halo Labs Inc.`,
  legal = [
    { label: "Privacy", href: "#" },
    { label: "Terms", href: "#" },
    { label: "Cookies", href: "#" },
  ],
  className,
}: FooterGlassProps) {
  const inputId = 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("px-4 pb-4 text-da-fg", className)}>
      <div className="da-stroke mx-auto max-w-(--da-container) rounded-da-lg bg-da-surface p-8 shadow-da-lg backdrop-blur-da backdrop-saturate-150 sm:p-12">
        <div className="grid gap-10 lg:grid-cols-[1.4fr_repeat(3,1fr)]">
          <div>
            <p className="flex items-center gap-2 font-da-display text-xl font-semibold tracking-da-display">
              <span aria-hidden className="grid size-7 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent">
                <span className="size-3 rounded-full bg-da-bg/90" />
              </span>
              {brand}
            </p>
            <p className="mt-3 max-w-xs text-sm text-da-muted-fg">{tagline}</p>
            <div className="mt-6">
              {done ? (
                <p role="status" className="text-sm font-semibold text-da-success">
                  Thanks — see you next month.
                </p>
              ) : (
                <form onSubmit={subscribe}>
                  <label htmlFor={inputId} className="text-sm font-semibold">
                    {newsletter.title}
                  </label>
                  <div className="da-stroke mt-2 flex max-w-sm rounded-da-pill bg-da-input p-1 focus-within:ring-2 focus-within:ring-da-ring">
                    <input
                      id={inputId}
                      name="email"
                      type="email"
                      required
                      autoComplete="email"
                      placeholder={newsletter.placeholder}
                      className="min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-da-muted-fg"
                    />
                    <button type="submit" className="da-focus da-transition rounded-da-pill bg-da-fg px-4 py-2 text-sm font-semibold text-da-bg hover:opacity-90">
                      {newsletter.button}
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
          {columns.map((col) => (
            <nav key={col.title} aria-label={col.title}>
              <h2 className="text-sm font-semibold">{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 da-transition rounded-da-sm text-sm text-da-muted-fg hover:text-da-fg">
                      {l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>
        <div className="mt-12 flex flex-col gap-4 border-t border-da-border-strong/60 pt-6 text-sm text-da-muted-fg 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 da-transition rounded-da-sm hover:text-da-fg">
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}

export default FooterGlass;