Footer Newsletter

import Link from "next/link";

import { Button } from "@/components/ui/button";

const columns = [
  { title: "Product", links: ["Features", "Pricing", "Changelog", "Docs"] },
  { title: "Company", links: ["About", "Blog", "Careers", "Contact"] },
  { title: "Legal", links: ["Privacy", "Terms", "Security"] },
];

export default function FooterNewsletter() {
  return (
    <footer className="border-t border-border/60 bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-14">
        <div className="grid gap-12 lg:grid-cols-2">
          <div className="max-w-sm">
            <p className="font-semibold">Acme</p>
            <p className="mt-3 text-sm text-muted-foreground">
              The monthly dispatch: what shipped, what's next, and one thing
              we learned the hard way.
            </p>
            <form className="mt-5 flex gap-2">
              <label htmlFor="footer-nl-email" className="sr-only">
                Email address
              </label>
              <input
                id="footer-nl-email"
                type="email"
                autoComplete="email"
                placeholder="you@company.com"
                className="h-9 w-full flex-1 rounded-lg border border-input bg-background px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
              />
              <Button type="submit" variant="outline" className="shrink-0">
                Subscribe
              </Button>
            </form>
          </div>

          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
            {columns.map((column) => (
              <div key={column.title}>
                <h3 className="text-sm font-medium">{column.title}</h3>
                <ul className="mt-3 space-y-2">
                  {column.links.map((label) => (
                    <li key={label}>
                      <Link
                        href="#"
                        className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                      >
                        {label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-12 flex flex-col justify-between gap-2 border-t border-border/60 pt-6 sm:flex-row">
          <p className="text-xs text-muted-foreground">
            © 2026 Acme Inc. All rights reserved.
          </p>
          <p className="font-mono text-xs text-muted-foreground">
            status.acme.dev · all systems normal
          </p>
        </div>
      </div>
    </footer>
  );
}