import React from 'react';
import { Link } from 'react-router-dom';
import { BuildingIcon, FacebookIcon, InstagramIcon, LinkedInIcon } from './icons.tsx';

const Footer: React.FC = () => {
  return (
    <footer className="bg-secondary text-white">
      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="space-y-4">
            <Link to="/" className="flex items-center space-x-2">
                <BuildingIcon className="h-8 w-8 text-primary" />
                <span className="text-xl font-bold">Next Horizon Realty</span>
            </Link>
            <p className="text-gray-400 text-sm">Your Property, Our Priority.</p>
            <div className="flex space-x-4">
                <a href="#" className="text-gray-400 hover:text-primary transition-colors"><FacebookIcon className="h-6 w-6" /></a>
                <a href="#" className="text-gray-400 hover:text-primary transition-colors"><InstagramIcon className="h-6 w-6" /></a>
                <a href="#" className="text-gray-400 hover:text-primary transition-colors"><LinkedInIcon className="h-6 w-6" /></a>
            </div>
          </div>
          <div>
            <h3 className="text-sm font-semibold text-gray-200 tracking-wider uppercase">Quick Links</h3>
            <ul className="mt-4 space-y-2">
              <li><Link to="/" className="text-base text-gray-400 hover:text-primary">Home</Link></li>
              <li><Link to="/about" className="text-base text-gray-400 hover:text-primary">About Us</Link></li>
              <li><Link to="/services" className="text-base text-gray-400 hover:text-primary">Services</Link></li>
              <li><Link to="/contact" className="text-base text-gray-400 hover:text-primary">Contact</Link></li>
            </ul>
          </div>
          <div>
            <h3 className="text-sm font-semibold text-gray-200 tracking-wider uppercase">Contact Info</h3>
            <ul className="mt-4 space-y-2 text-gray-400 text-sm">
                <li className="flex items-start">
                    <span className="mt-1 mr-2">📍</span>
                    <span>Opposite Primus Hybrid School, Spintex Road, Accra, Ghana</span>
                </li>
                <li className="flex items-center">
                    <span>📞</span>
                    <span className="ml-2">0544 344 129 / 0545 847 479</span>
                </li>
                <li className="flex items-center">
                    <span>📧</span>
                    <span className="ml-2">nexthorizonrealty@gmail.com</span>
                </li>
            </ul>
          </div>
          <div>
             <h3 className="text-sm font-semibold text-gray-200 tracking-wider uppercase">Newsletter</h3>
             <p className="mt-4 text-sm text-gray-400">Subscribe to our newsletter for updates.</p>
             <form className="mt-4 sm:flex sm:max-w-md">
                <label htmlFor="email-address" className="sr-only">Email address</label>
                <input type="email" name="email-address" id="email-address" autoComplete="email" required className="appearance-none min-w-0 w-full bg-white border border-transparent rounded-md py-2 px-4 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-primary" placeholder="Enter your email" />
                <div className="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                    <button type="submit" className="w-full bg-primary flex items-center justify-center border border-transparent rounded-md py-2 px-4 text-base font-medium text-white hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-primary">
                        Subscribe
                    </button>
                </div>
            </form>
          </div>
        </div>
        <div className="mt-8 border-t border-gray-700 pt-8 text-center">
          <p className="text-base text-gray-400">&copy; {new Date().getFullYear()} Next Horizon Realty Ltd. All Rights Reserved.</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;