"use client";
import { Brain} from "lucide-react";

const footerLinks = {
  Product: ["Features", "Pricing", "Integrations", "API"],
  Resources: ["Documentation", "Blog", "Support", "Community"],
  Company: ["About", "Careers", "Privacy", "Terms"]
};

export function Footer() {
  return (
    <footer className="pt-10 pb-12 border-t">
      <div className="container mx-auto px-6 lg:px-24">
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-12 mb-10">
          
          {/* Brand Column */}
          <div className="col-span-2 space-y-6">
            <div className="flex items-center gap-2  font-bold text-xl">
              <div className="p-1.5 rounded-lg bg-indigo-600">
                <Brain size={20} />
              </div>
              ProjectAI
            </div>
            <p className="text-gray-400 max-w-xs leading-relaxed">
              AI-powered project management for the modern enterprise.
            </p>
          </div>

          {/* Links Columns */}
          {Object.entries(footerLinks).map(([category, links]) => (
            <div key={category} className="space-y-3">
              <h4 className=" font-semibold">{category}</h4>
              <ul className="space-y-2">
                {links.map((link) => (
                  <li key={link}>
                    <a href="#" className="text-gray-400 hover:text-indigo-400 transition-colors text-sm">
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom Bar */}
        <div className="pt-8 border-t flex flex-col justify-between items-center gap-4">
          <p className="text-gray-400 text-sm">
            © 2025 ProjectAI. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}