Footer Newsletter

"use client";

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

export interface FooterNewsletterProps {
  brand?: string;
  brandHref?: string;
  columns?: { title: string; links: { label: string; href: string }[] }[];
  onSubscribe?: (email: string) => void;
  className?: string;
}

const DEFAULT_COLUMNS = [
  {
    title: "Product",
    links: [
      { label: "Measure", href: "#measure" },
      { label: "Reduce", href: "#reduce" },
      { label: "Report", href: "#report" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "#about" },
      { label: "Careers", href: "#careers" },
      { label: "Contact", href: "#contact" },
    ],
  },
];

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Footer with an inline journal signup: logo + rounded email form in a sage-tinted card on the left, two link columns on the right, and a sand-colored bottom strip. */
export function FooterNewsletter({ brand = "Grove", brandHref = "/", columns = DEFAULT_COLUMNS, onSubscribe, className }: FooterNewsletterProps) {
  const id = useId();
  const [done, setDone] = useState(false);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubscribe?.(String(new FormData(e.currentTarget).get("email")));
    setDone(true);
  };
  return (
    <footer className={cn("bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-10 py-14 lg:grid-cols-[1.4fr_1fr]">
        <div className="rounded-da-lg bg-da-accent p-8 text-da-accent-fg">
          <a href={brandHref} className="da-focus inline-flex items-center gap-2.5 rounded-da-pill font-da-display text-2xl">
            <GroveMark />
            {brand}
          </a>
          <p className="mt-4 max-w-sm">A calm monthly letter on climate work inside companies.</p>
          {done ? (
            <p role="status" className="mt-6 font-da-display text-xl">
              You’re in. Thank you!
            </p>
          ) : (
            <form onSubmit={submit} className="mt-6 flex max-w-md flex-col gap-2 sm:flex-row">
              <label htmlFor={id} className="sr-only">
                Email
              </label>
              <input
                id={id}
                name="email"
                type="email"
                required
                autoComplete="email"
                placeholder="you@company.com"
                className="da-focus h-12 min-w-0 rounded-da-pill bg-da-surface px-5 text-da-surface-fg placeholder:text-da-muted-fg sm:flex-1"
              />
              <button type="submit" className="da-focus h-12 rounded-da-pill bg-da-primary px-6 font-medium text-da-primary-fg hover:bg-da-primary/90">
                Subscribe
              </button>
            </form>
          )}
        </div>
        <div className="grid grid-cols-2 gap-8 self-center">
          {columns.map((c) => (
            <nav key={c.title} aria-label={c.title}>
              <h2 className="font-da-display text-lg">{c.title}</h2>
              <ul className="mt-4 space-y-2.5">
                {c.links.map((l) => (
                  <li key={l.label}>
                    <a href={l.href} className="da-focus rounded-da-sm text-da-muted-fg hover:text-da-fg">
                      {l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>
      </div>
      <p className="bg-da-surface-2 py-5 text-center text-sm text-da-muted-fg">© 2026 {brand} SAS · Privacy · Terms · Imprint</p>
    </footer>
  );
}

export default FooterNewsletter;