import React from 'react';
import { Link } from 'react-router-dom';

const Footer: React.FC = () => {
  return (
    <footer className="bg-netflix-black text-netflix-gray py-12 px-4 md:px-16">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          <div>
            <h3 className="text-netflix-light text-lg font-semibold mb-4">Navigation</h3>
            <ul className="space-y-2">
              <li><Link to="/" className="hover:text-netflix-light transition">Home</Link></li>
              <li><Link to="/movies" className="hover:text-netflix-light transition">Movies</Link></li>
              <li><Link to="/tv-shows" className="hover:text-netflix-light transition">TV Shows</Link></li>
              <li><Link to="/my-list" className="hover:text-netflix-light transition">My List</Link></li>
            </ul>
          </div>
          
          <div>
            <h3 className="text-netflix-light text-lg font-semibold mb-4">Categories</h3>
            <ul className="space-y-2">
              <li><Link to="/movies?genre=action" className="hover:text-netflix-light transition">Action</Link></li>
              <li><Link to="/movies?genre=comedy" className="hover:text-netflix-light transition">Comedy</Link></li>
              <li><Link to="/movies?genre=drama" className="hover:text-netflix-light transition">Drama</Link></li>
              <li><Link to="/tv-shows?genre=reality" className="hover:text-netflix-light transition">Reality</Link></li>
            </ul>
          </div>
          
          <div>
            <h3 className="text-netflix-light text-lg font-semibold mb-4">About</h3>
            <ul className="space-y-2">
              <li><Link to="/about" className="hover:text-netflix-light transition">About Us</Link></li>
              <li><Link to="/contact" className="hover:text-netflix-light transition">Contact</Link></li>
              <li><Link to="/terms" className="hover:text-netflix-light transition">Terms of Use</Link></li>
              <li><Link to="/privacy" className="hover:text-netflix-light transition">Privacy Policy</Link></li>
            </ul>
          </div>
          
          <div>
            <h3 className="text-netflix-light text-lg font-semibold mb-4">Connect</h3>
            <ul className="space-y-2">
              <li><a href="#" className="hover:text-netflix-light transition">Twitter</a></li>
              <li><a href="#" className="hover:text-netflix-light transition">Instagram</a></li>
              <li><a href="#" className="hover:text-netflix-light transition">Facebook</a></li>
              <li><a href="#" className="hover:text-netflix-light transition">YouTube</a></li>
            </ul>
          </div>
        </div>
        <div className="mt-12 pt-6 border-t border-netflix-gray/30 text-center text-xs">
          <p className="mb-2">© 2025 Nexora. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;