import { Link } from 'react-router-dom';
import { 
  MapPin, 
  Phone, 
  Mail, 
  Facebook,
  Twitter,
  Instagram,
  Linkedin,
  Heart
} from 'lucide-react';

export function Footer() {

  const currentYear = new Date().getFullYear();

  const quickLinks = [
    { label: 'Home',     path: '/' },
    { label: 'About Us', path: '/about' },
    { label: 'Services', path: '/#services' },
    { label: 'Articles', path: '/articles' },
    { label: 'Contact',  path: '/contact' },
  ];

  return (
    <footer className="bg-[#383838] text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="py-16 grid lg:grid-cols-3 gap-8">
          
          {/* Company Info */}
          <div className="space-y-6">
            <div className="flex items-center space-x-3">
              <div className="w-12 h-12 bg-[#8ac642] rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-xl">H</span>
              </div>
              <div>
                <h3 className="text-xl font-bold">HEAREX</h3>
                <p className="text-sm text-gray-300">
                  Hearing Solutions Since 2011
                </p>
              </div>
            </div>
            
            <p className="text-gray-300 leading-relaxed">
              Providing comprehensive hearing healthcare with cutting-edge 
              technology and personalized care for over a decade. 
              Your hearing health is our priority.
            </p>
          </div>

          {/* Contact */}
          <div className="space-y-6">
            <h4 className="text-lg font-semibold">
              Contact Information
            </h4>
            
            <div className="space-y-4">
              <div className="flex items-center space-x-3 text-gray-300">
                <MapPin className="w-5 h-5 text-[#8ac642] shrink-0" />
                <a href="https://maps.app.goo.gl/tsFC4Mnsxay4dGEb7" target="_blank" rel="noopener noreferrer" className="hover:text-[#8ac642] transition-colors duration-300">
                  Vetro Medica Complex,Al-Mutanabbi St.67
                </a>
              </div>

              <div className="flex items-center space-x-3 text-gray-300">
                <Phone className="w-5 h-5 text-[#8ac642] shrink-0" />
                <a href="tel:+962064601818" className="hover:text-[#8ac642] transition-colors duration-300">
                  (06) 460 1818
                </a>
              </div>

              <div className="flex items-center space-x-3 text-gray-300">
                <Mail className="w-5 h-5 text-[#8ac642] shrink-0" />
                <a href="mailto:info@hearex.com" className="hover:text-[#8ac642] transition-colors duration-300">
                  info@hearex.com
                </a>
              </div>
            </div>

            {/* Social */}
            <div className="space-y-3">
              <h5 className="font-medium">Follow Us</h5>
              <div className="flex space-x-4">
                {[Facebook, Twitter, Instagram, Linkedin].map((Social, index) => (
                  <button
                    key={index}
                    className="w-10 h-10 bg-gray-700 hover:bg-[#8ac642] rounded-lg flex items-center justify-center transition-colors duration-300"
                  >
                    <Social className="w-5 h-5" />
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* Quick Links */}
          <div className="space-y-6">
            <h4 className="text-lg font-semibold">
              Quick Links
            </h4>

            <ul className="space-y-3">
              {quickLinks.map((link) => (
                <li key={link.path}>
                  <Link
                    to={link.path}
                    className="text-gray-300 hover:text-[#8ac642] transition-colors duration-300 text-sm flex items-center gap-2 group"
                  >
                    <span className="w-1.5 h-1.5 rounded-full bg-[#8ac642] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

        </div>

        {/* Bottom */}
        <div className="border-t border-gray-700 py-8">
          <div className="text-center">
            <div className="flex flex-col items-center space-y-3 text-gray-300">
              <p className="text-sm">
                © {currentYear} HEAREX. All rights reserved.
              </p>
              <div className="flex items-center space-x-1 text-sm">
                <span>Made with</span>
                <Heart className="w-4 h-4 text-[#8ac642] fill-current" />
                <span>for better hearing health</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </footer>
  );
}