import { FaFacebook } from 'react-icons/fa'

const Footer = () => {
  return (
    <footer className="bg-secondary text-accent-snow py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 className="text-xl font-bold mb-4">
            DeafGain LLC
          </h3>
          <p className="text-accent-lake">
          Empowering the Deaf community through  <br />innovation and shared progress.
          </p>
        </div>
          <div>
            <h4 className="text-lg font-semibold mb-4 text-center">Quick Links</h4>
            <ul className="space-y-2 text-center">
              <li><a href="/services" className="hover:text-accent-lake">Services</a></li>
              <li><a href="/about" className="hover:text-accent-lake">About Us</a></li>
              <li><a href="/contact" className="hover:text-accent-lake">Contact</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4 text-center">Connect With Us</h4>
            <div className="flex justify-center">
              <a href="https://www.facebook.com/profile.php?id=61562623814859" target="_blank" rel="noopener noreferrer" className="hover:text-accent-lake">
                <FaFacebook size={24} />
              </a>
            </div>
          </div>
        </div>
        <div className="mt-8 pt-8 border-t border-accent-lake/20 text-center">
          <p>© {new Date().getFullYear()} <span className="text-yellow-400">DeafGain LLC.</span> All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}

export default Footer