import { Link } from 'react-router-dom';
import { Facebook, Twitter, Instagram, Youtube } from 'lucide-react';

const Footer = () => {
  return (
    <footer className="bg-[#0f0f0f] border-t border-gray-800">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <Link to="/" className="flex items-center space-x-2">
              <span className="text-blue-500 text-xl font-bold">CarFleet</span>
            </Link>
            <p className="mt-4 text-gray-400 text-sm">
              Premium electric vehicle rental and subscription service for the modern driver.
            </p>
            <div className="mt-6 flex space-x-4">
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
                aria-label="Facebook"
              >
                <Facebook size={20} />
              </a>
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
                aria-label="Twitter"
              >
                <Twitter size={20} />
              </a>
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
                aria-label="Instagram"
              >
                <Instagram size={20} />
              </a>
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
                aria-label="Youtube"
              >
                <Youtube size={20} />
              </a>
            </div>
          </div>

          <div>
            <h3 className="text-white font-medium mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link to="/" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Home
                </Link>
              </li>
              <li>
                <Link to="/about" className="text-gray-400 hover:text-white transition-colors text-sm">
                  About Us
                </Link>
              </li>
              <li>
                <Link to="/vehicles" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Our Fleet
                </Link>
              </li>
              <li>
                <Link to="/pricing" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Pricing
                </Link>
              </li>
              <li>
                <Link to="/contact" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Contact
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="text-white font-medium mb-4">Car Categories</h3>
            <ul className="space-y-2">
              <li>
                <Link to="/vehicles?type=sedan" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Sedans
                </Link>
              </li>
              <li>
                <Link to="/vehicles?type=suv" className="text-gray-400 hover:text-white transition-colors text-sm">
                  SUVs
                </Link>
              </li>
              <li>
                <Link to="/vehicles?type=truck" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Trucks
                </Link>
              </li>
              <li>
                <Link to="/vehicles?type=luxury" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Luxury
                </Link>
              </li>
              <li>
                <Link to="/vehicles?type=sports" className="text-gray-400 hover:text-white transition-colors text-sm">
                  Sports Cars
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="text-white font-medium mb-4">Contact Info</h3>
            <ul className="space-y-2">
              <li className="text-gray-400 text-sm">123 Main Street, City, CA 94105</li>
              <li className="text-gray-400 text-sm">+1 (555) 123-4567</li>
              <li>
                <a href="mailto:info@carfleet.com" className="text-gray-400 hover:text-white transition-colors text-sm">
                  info@carfleet.com
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-500 text-sm">© 2025 CarFleet. All rights reserved.</p>
          <div className="flex space-x-6 mt-4 md:mt-0">
            <Link to="/terms" className="text-gray-500 hover:text-white transition-colors text-sm">
              Terms of Service
            </Link>
            <Link to="/privacy" className="text-gray-500 hover:text-white transition-colors text-sm">
              Privacy Policy
            </Link>
            <Link to="/faq" className="text-gray-500 hover:text-white transition-colors text-sm">
              FAQ
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;