import { Facebook, Instagram, Linkedin, Twitter, Youtube } from 'lucide-react';

export default function Footer() {
  return (
    <footer className="bg-gradient-to-b from-green-50 to-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-8">
          {/* Need Help Section */}
          <div>
            <h3 className="text-red-600 font-bold text-lg mb-4">Need Help?</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Member Login</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Sign Up</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Partner Search</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">How to Use Shaadi.com</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Premium Memberships</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Customer Support</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Site Map</a></li>
            </ul>
          </div>

          {/* Company Section */}
          <div>
            <h3 className="text-red-600 font-bold text-lg mb-4">Company</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">About Us</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Shaadi Blog</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Careers</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Awards & Recognition</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Cov-Aid</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Contact Us</a></li>
            </ul>
          </div>

          {/* Privacy & You Section */}
          <div>
            <h3 className="text-red-600 font-bold text-lg mb-4">Privacy & You</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Terms of Use</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Privacy Policy</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Be Safe Online</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Report Misuse</a></li>
            </ul>
          </div>

          {/* More Section */}
          <div>
            <h3 className="text-red-600 font-bold text-lg mb-4">More</h3>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">VIP Shaadi</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Select Shaadi</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Sangam</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Shaadi Centres</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Success Stories</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Shaadi Live</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Elite Matrimony by Shaadi.com</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Astrochat.com</a></li>
              <li><a href="#" className="text-gray-600 hover:text-green-600 transition-colors">Chat with Astrologers</a></li>
            </ul>
          </div>

          {/* Social Media & Apps Section */}
          <div>
            <h3 className="text-red-600 font-bold text-lg mb-4">Find us on:</h3>
            <div className="flex gap-3 mb-6">
              <a href="#" className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all">
                <Facebook className="w-5 h-5 text-gray-700" />
              </a>
              <a href="#" className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all">
                <Instagram className="w-5 h-5 text-gray-700" />
              </a>
              <a href="#" className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all">
                <Linkedin className="w-5 h-5 text-gray-700" />
              </a>
              <a href="#" className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all">
                <Twitter className="w-5 h-5 text-gray-700" />
              </a>
              <a href="#" className="bg-white border border-gray-300 p-2 rounded hover:bg-green-50 hover:border-green-500 transition-all">
                <Youtube className="w-5 h-5 text-gray-700" />
              </a>
            </div>

            <h3 className="text-red-600 font-bold text-lg mb-4">Get the Shaadi App</h3>
            <div className="space-y-3">
              <a href="#" className="block">
                <img 
                  src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" 
                  alt="Download on App Store" 
                  className="h-10 hover:opacity-80 transition-opacity"
                />
              </a>
              <a href="#" className="block">
                <img 
                  src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" 
                  alt="Get it on Google Play" 
                  className="h-10 hover:opacity-80 transition-opacity"
                />
              </a>
            </div>
            <p className="text-xs text-gray-500 mt-3">
              Apple and the Apple Logo are trademarks of Apple Inc.
            </p>
            <p className="text-xs text-gray-500 mt-1">
              Google Play and the Google Play logo are trademarks of Google LLC.
            </p>
          </div>
        </div>

        {/* Bottom Copyright Section */}
        <div className="border-t border-gray-200 pt-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-sm text-gray-600 mb-4 md:mb-0">
              © 1996-2025 Shaadi.com, The World's Leading Matchmaking Service™
            </p>
            <p className="text-sm text-gray-600">
              Passionately created by <span className="text-green-600 font-semibold">People Group</span> ▶
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}