Footer

import type { ReactNode } from "react";

export interface FooterProps {
  /** The name. It is also drawn very large along the bottom edge. */
  brand: string;
  /** A sentence about what this is, under the name. */
  line?: ReactNode;
  columns: { title: string; links: { label: string; href: string; badge?: string }[] }[];
  /** A place to leave an email address. `href` is where the form is sent. */
  subscribe?: { title: string; note?: ReactNode; placeholder: string; label: string; href: string };
  /** The small print. */
  legal?: ReactNode;
  /** Draw the name large along the bottom edge. */
  wordmark?: boolean;
  className?: string;
}

// A button with a little depth: a highlight along the top edge, a shade along the bottom, and a soft cast in its own colour.
const raised =
  "bg-(--tui-footer-accent) text-(--tui-footer-accent-fg) [background-image:linear-gradient(to_bottom,rgb(255_255_255_/_0.18),rgb(255_255_255_/_0)_55%,rgb(0_0_0_/_0.14))] [box-shadow:inset_0_1px_0_rgb(255_255_255_/_0.24),inset_0_-1px_0_rgb(0_0_0_/_0.2),0_1px_2px_rgb(0_0_0_/_0.2),0_8px_16px_-8px_var(--tui-footer-accent)]";

/**
 * The bottom of a site. A raised panel holds the name, what it is and a
 * place to leave an address; the shell it sits in lists the links. Under
 * both is the small print, and the name again, very large, fading into the
 * bottom edge.
 */
export function Footer({ brand, line, columns, subscribe, legal, wordmark = true, className }: FooterProps) {
  return (
    <footer
      data-slot="footer"
      className={["@container flex w-full flex-col items-center gap-(--tui-footer-gap) overflow-hidden bg-(--tui-footer-bg) px-6 pt-(--tui-footer-padding-y) font-(family-name:--tui-font) text-(--tui-footer-fg)", wordmark ? "" : "pb-8", className].filter(Boolean).join(" ")}
    >
      <div data-slot="footer-shell" className="grid w-full max-w-(--tui-footer-width) grid-cols-1 rounded-(--tui-footer-radius) bg-(--tui-footer-shell-bg) p-1.5 [box-shadow:inset_0_0_0_1px_var(--tui-footer-border)] lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
        <div data-slot="footer-panel" className="relative flex flex-col items-start gap-4 overflow-hidden rounded-[calc(var(--tui-footer-radius)_-_6px)] bg-(--tui-footer-card-bg) p-(--tui-footer-padding) [box-shadow:0_0_0_1px_var(--tui-footer-border),0_1px_2px_rgb(0_0_0_/_0.05),0_8px_20px_-12px_rgb(0_0_0_/_0.18)]">
          <span aria-hidden className="pointer-events-none absolute -top-28 -left-16 size-72 rounded-full bg-(--tui-footer-glow) blur-3xl" />
          <span className="relative flex items-center gap-2.5 text-[18px] font-semibold tracking-[-0.015em]">
            <span aria-hidden className={`flex size-7 items-center justify-center rounded-[9px] ${raised}`}>
              <span className="size-2.5 rounded-full bg-current" />
            </span>
            {brand}
          </span>
          {line && <p className="relative m-0 max-w-[22rem] text-[15px] leading-relaxed text-pretty text-(--tui-footer-muted)">{line}</p>}
          {subscribe && (
            <div className="relative mt-auto flex w-full flex-col gap-3 pt-6">
              <p className="m-0 text-[14px] font-semibold">{subscribe.title}</p>
              <form action={subscribe.href} data-slot="footer-subscribe" className="flex h-12 items-center gap-2 rounded-full bg-(--tui-footer-shell-bg) p-1 pl-4 [box-shadow:inset_0_0_0_1px_var(--tui-footer-border),inset_0_1px_2px_rgb(0_0_0_/_0.05)] focus-within:[outline:2px_solid_var(--tui-ring)] focus-within:[outline-offset:2px]">
                <input type="email" name="email" required aria-label={subscribe.placeholder} placeholder={subscribe.placeholder} className="h-full min-w-0 flex-1 border-none bg-transparent p-0 font-[inherit] text-[14px] text-(--tui-footer-fg) outline-none placeholder:text-(--tui-footer-muted)" />
                <button type="submit" className={`inline-flex h-10 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border-none px-4 font-[inherit] text-[14px] font-semibold transition-[filter,scale] duration-(--tui-duration) hover:brightness-110 active:scale-[0.98] ${raised}`}>
                  {subscribe.label}
                  <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="size-3.5">
                    <path d="M3.500 8h9M8.500 4l4 4-4 4" />
                  </svg>
                </button>
              </form>
              {subscribe.note && <p className="m-0 text-[12px] text-(--tui-footer-muted)">{subscribe.note}</p>}
            </div>
          )}
        </div>
        <nav aria-label="Footer" className="grid grid-cols-2 content-start gap-x-6 gap-y-9 p-(--tui-footer-padding) sm:grid-cols-4">
          {columns.map((column) => (
            <div key={column.title} className="flex flex-col gap-4">
              <h3 className="m-0 text-[11px] font-semibold tracking-[0.09em] text-(--tui-footer-muted) uppercase">{column.title}</h3>
              <ul className="m-0 flex list-none flex-col gap-3 p-0">
                {column.links.map((item) => (
                  <li key={item.label}>
                    <a href={item.href} className="group/link inline-flex items-center gap-2 text-[14px] text-(--tui-footer-fg) no-underline">
                      <span className="opacity-80 transition-[opacity,translate] duration-(--tui-duration) group-hover/link:translate-x-0.5 group-hover/link:opacity-100">{item.label}</span>
                      {item.badge && <span className="inline-flex h-[18px] items-center rounded-full bg-(--tui-footer-glow) px-1.5 text-[10px] font-semibold tracking-[0.05em] text-(--tui-footer-accent) uppercase">{item.badge}</span>}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      </div>

      {legal && <p className="m-0 w-full max-w-(--tui-footer-width) px-2 text-[13px] text-(--tui-footer-muted)">{legal}</p>}

      {wordmark && (
        <span
          aria-hidden
          data-slot="footer-wordmark"
          className="pointer-events-none -mb-[0.16em] block max-w-full bg-clip-text text-center text-[17cqw] leading-[0.8] font-semibold tracking-[-0.055em] whitespace-nowrap text-transparent select-none [background-image:linear-gradient(to_bottom,var(--tui-footer-wordmark),transparent_82%)]"
        >
          {brand}
        </span>
      )}
    </footer>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Footer */
  --tui-footer-padding-y: calc(var(--tui-space) * 16);
  --tui-footer-gap: calc(var(--tui-space) * 8);
  --tui-footer-width: 1040px;
  --tui-footer-padding: calc(var(--tui-space) * 8);
  --tui-footer-radius: calc(var(--tui-radius) * 3);
  --tui-footer-bg: var(--tui-bg);
  --tui-footer-shell-bg: var(--tui-muted);
  --tui-footer-card-bg: var(--tui-bg);
  --tui-footer-fg: var(--tui-fg);
  --tui-footer-muted: var(--tui-muted-fg);
  --tui-footer-border: var(--tui-border);
  --tui-footer-glow: color-mix(in srgb, var(--tui-primary) 12%, transparent);
  --tui-footer-accent: var(--tui-primary);
  --tui-footer-accent-fg: var(--tui-primary-fg);
  --tui-footer-wordmark: color-mix(in srgb, var(--tui-fg) 13%, transparent);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}