"use client";

import { Sparkles } from "lucide-react";

const columns = [
  {
    heading: "Product",
    links: ["Features", "Pricing", "Changelog", "Roadmap"],
  },
  {
    heading: "Company",
    links: ["About", "Blog", "Careers", "Press"],
  },
  {
    heading: "Resources",
    links: ["Docs", "Guides", "API reference", "Status"],
  },
  {
    heading: "Legal",
    links: ["Privacy", "Terms", "Security", "Cookies"],
  },
];

export default function FooterMultiColumn() {
  return (
    <footer className="w-full border-t border-border bg-background">
      <div className="container mx-auto px-6 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {columns.map((col) => (
            <div key={col.heading}>
              <h3 className="text-sm font-semibold text-foreground mb-4">{col.heading}</h3>
              <ul className="space-y-2">
                {col.links.map((l) => (
                  <li key={l}>
                    <a
                      href="#"
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {l}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-10 pt-6 border-t border-border flex items-center justify-between gap-4">
          <a href="#" className="flex items-center gap-2 text-foreground font-bold">
            <Sparkles className="w-5 h-5 text-primary" />
            <span>Acme</span>
          </a>
          <p className="text-xs text-muted-foreground">
            © {new Date().getFullYear()} Acme, Inc.
          </p>
        </div>
      </div>
    </footer>
  );
}