components/Footer.jsx

import { Github, Twitter, Linkedin, Mail, MapPin, Phone, ArrowRight } from 'lucide-react';

export default function Footer() {
  const links = {
    product: ['Features', 'Integrations', 'Pricing', 'API', 'Documentation'],
    company: ['About Us', 'Careers', 'Blog', 'Contact', 'Partners'],
    resources: ['Community', 'Help Center', 'Status', 'Terms', 'Privacy'],
    contact: ['Email', 'Phone', 'Social Media', 'Office Location']
  };

  return (
    <footer className="bg-slate-950 border-t border-slate-800 pt-20 pb-10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-16">
          <div className="lg:col-span-1">
            <div className="flex items-center gap-2 mb-6">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <span className="text-white font-bold text-xl">AI</span>
              </div>
              <span className="text-xl font-bold text-white">NeuralScroll</span>
            </div>
            <p className="text-slate-400 mb-6">
              Creating the next generation of AI-powered 3D scrolling experiences for the web.
            </p>
            <div className="flex gap-4">
              {[Twitter, Github, Linkedin, Mail].map((Icon, index) => (
                <a 
                  key={index} 
                  href="#" 
                  className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 hover:text-white transition-all duration-200"
                >
                  <Icon size={20} />
                </a>
              ))}
            </div>
          </div>
          
          <div className="lg:col-span-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
            {Object.entries(links).map(([category, items], index) => (
              <div key={index}>
                <h4 className="text-white font-bold mb-4">{category.charAt(0).toUpperCase() + category.slice(1)}</h4>
                <ul className="space-y-3">
                  {items.map((item, itemIndex) => (
                    <li key={itemIndex}>
                      <a 
                        href="#" 
                        className="text-slate-400 hover:text-white hover:translate-x-1 transition-all duration-200 flex items-center gap-2 group"
                      >
                        <ArrowRight size={16} className="opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
                        {item}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        
        <div className="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="text-slate-500 text-sm">
            © {new Date().getFullYear()} NeuralScroll. All rights reserved.
          </div>
          
          <div className="flex flex-wrap justify-center gap-8">
            <a href="#" className="text-slate-500 hover:text-white transition-colors duration-200 text-sm">
              Privacy Policy
            </a>
            <a href="#" className="text-slate-500 hover:text-white transition-colors duration-200 text-sm">
              Terms of Service
            </a>
            <a href="#" className="text-slate-500 hover:text-white transition-colors duration-200 text-sm">
              Cookie Policy
            </a>
          </div>
          
          <div className="flex items-center gap-2 text-sm text-slate-500">
            <MapPin size={16} />
            <span>San Francisco, CA</span>
          </div>
        </div>
      </div>
    </footer>
  );
}