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

const Footer: React.FC = () => {
  return (
    <footer className="bg-dark text-white">
      <div className="container-fluid py-4" style={{ maxWidth: '1800px' }}>
        <div className="row">
          <div className="col-lg-3">
            <h5 className="mb-3">
              <i className="bi bi-box-seam me-2"></i>
              CommunityRentals.App
            </h5>
            <p className="small text-white-50">
              The marketplace for renting anything, from anyone, anywhere.
            </p>
          </div>
          <div className="col-lg-2 col-md-6">
            <h6 className="mb-3">FAQ</h6>
            <ul className="list-unstyled small">
              <li className="mb-2">
                <Link to="/faq/renters" className="text-decoration-none text-white-50">
                  Renter FAQ
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/faq/owners" className="text-decoration-none text-white-50">
                  Owner FAQ
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/faq/payments" className="text-decoration-none text-white-50">
                  Payments
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/help" className="text-decoration-none text-white-50">
                  Help Center
                </Link>
              </li>
            </ul>
          </div>
          <div className="col-lg-2 col-md-6">
            <h6 className="mb-3">For Renters</h6>
            <ul className="list-unstyled small">
              <li className="mb-2">
                <Link to="/items" className="text-decoration-none text-white-50">
                  Browse Items
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/how-it-works" className="text-decoration-none text-white-50">
                  How It Works
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/safety" className="text-decoration-none text-white-50">
                  Safety Tips
                </Link>
              </li>
            </ul>
          </div>
          <div className="col-lg-2 col-md-6">
            <h6 className="mb-3">For Owners</h6>
            <ul className="list-unstyled small">
              <li className="mb-2">
                <Link to="/create-item" className="text-decoration-none text-white-50">
                  List an Item
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/owner-guide" className="text-decoration-none text-white-50">
                  Owner Guide
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/insurance" className="text-decoration-none text-white-50">
                  Insurance
                </Link>
              </li>
            </ul>
          </div>
          <div className="col-lg-2 col-md-6">
            <h6 className="mb-3">Company</h6>
            <ul className="list-unstyled small">
              <li className="mb-2">
                <Link to="/about" className="text-decoration-none text-white-50">
                  About Us
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/contact" className="text-decoration-none text-white-50">
                  Contact
                </Link>
              </li>
              <li className="mb-2">
                <Link to="/careers" className="text-decoration-none text-white-50">
                  Careers
                </Link>
              </li>
            </ul>
          </div>
          <div className="col-lg-1 col-md-6">
            <h6 className="mb-3">Follow Us</h6>
            <div className="d-flex gap-3">
              <a href="#" className="text-white-50">
                <i className="bi bi-facebook"></i>
              </a>
              <a href="#" className="text-white-50">
                <i className="bi bi-twitter"></i>
              </a>
              <a href="#" className="text-white-50">
                <i className="bi bi-instagram"></i>
              </a>
              <a href="#" className="text-white-50">
                <i className="bi bi-linkedin"></i>
              </a>
            </div>
          </div>
        </div>
        <hr className="my-4 bg-secondary" />
        <div className="row">
          <div className="col-md-6">
            <p className="small text-white-50 mb-0">
              © 2025 CommunityRentals.App. All rights reserved.
            </p>
          </div>
          <div className="col-md-6 text-md-end">
            <Link to="/privacy" className="text-decoration-none text-white-50 small me-3">
              Privacy Policy
            </Link>
            <Link to="/terms" className="text-decoration-none text-white-50 small">
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;