Footer

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

export function Footer() {
  return (
    <footer className="mx-auto max-w-6xl px-6 py-16">
      <div className="grid grid-cols-1 gap-12 pb-12 lg:grid-cols-[1fr_1.2fr]">
        <div className="max-w-md">
          <p className="text-xl font-semibold tracking-tight">Website OS</p>
          <p className="mt-3 text-muted-foreground">Join the newsletter for new blocks and releases.</p>
          <form className="mt-4 flex gap-3">
            <input
              type="email"
              placeholder="Enter your email"
              className="w-full rounded-full border border-border bg-transparent px-4 py-2.5"
            />
            <button className="shrink-0 rounded-full bg-foreground px-5 text-background">Subscribe</button>
          </form>
        </div>
        <div className="grid grid-cols-3 gap-8">
          {columns.map((col) => (
            <div key={col.title}>
              <p className="mb-4 font-semibold">{col.title}</p>
              <ul className="space-y-3 text-sm text-muted-foreground">
                {col.links.map((l) => (
                  <li key={l}><a href="#">{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="flex flex-col-reverse items-start justify-between gap-4 border-t border-border pt-8 text-sm text-muted-foreground md:flex-row md:items-center">
        <p>© 2026 Website OS. All rights reserved.</p>
        <div className="flex gap-6">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Cookies</a>
        </div>
      </div>
    </footer>
  );
}