import { Heart, MapPin, Phone, Mail, Clock } from "lucide-react";

export default function Footer() {
  const quickLinks = [
    "About Us",
    "Our Services", 
    "Pre-Planning",
    "Grief Support",
    "Resources"
  ];

  const services = [
    "Traditional Funerals",
    "Memorial Services",
    "Cremation Services", 
    "Veteran Services",
    "Online Obituaries"
  ];

  return (
    <footer className="bg-charcoal text-white py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <div className="flex items-center mb-4">
              <Heart className="text-gold text-xl mr-2" />
              <span className="font-serif text-lg font-bold">WP ORGANIC</span>
            </div>
            <p className="text-gray-300 mb-4">
              Providing compassionate funeral services to families for over 50 years.
            </p>
            <div className="flex space-x-4">
              <a href="#" className="text-gray-300 hover:text-gold transition-colors duration-300">
                <i className="fab fa-facebook-f"></i>
              </a>
              <a href="#" className="text-gray-300 hover:text-gold transition-colors duration-300">
                <i className="fab fa-twitter"></i>
              </a>
              <a href="#" className="text-gray-300 hover:text-gold transition-colors duration-300">
                <i className="fab fa-instagram"></i>
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-serif text-lg font-semibold mb-4">Quick Links</h3>
            <ul className="space-y-2">
              {quickLinks.map((link, index) => (
                <li key={index}>
                  <a href="#" className="text-gray-300 hover:text-gold transition-colors duration-300">
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Services */}
          <div>
            <h3 className="font-serif text-lg font-semibold mb-4">Services</h3>
            <ul className="space-y-2">
              {services.map((service, index) => (
                <li key={index}>
                  <a href="#" className="text-gray-300 hover:text-gold transition-colors duration-300">
                    {service}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h3 className="font-serif text-lg font-semibold mb-4">Contact Info</h3>
            <div className="space-y-3">
              <div className="flex items-start">
                <MapPin className="text-gold mt-1 mr-3 w-4 h-4" />
                <span className="text-gray-300">123 Memorial Drive<br />Springfield, IL 62701</span>
              </div>
              <div className="flex items-center">
                <Phone className="text-gold mr-3 w-4 h-4" />
                <span className="text-gray-300">(555) 123-4567</span>
              </div>
              <div className="flex items-center">
                <Mail className="text-gold mr-3 w-4 h-4" />
                <span className="text-gray-300">info@wporganic.com</span>
              </div>
              <div className="flex items-center">
                <Clock className="text-gold mr-3 w-4 h-4" />
                <span className="text-gray-300">24/7 Emergency Service</span>
              </div>
            </div>
          </div>
        </div>

        <div className="border-t border-gray-600 mt-8 pt-8 text-center">
          <p className="text-gray-300">
            © 2024 WP Organic Funeral Home. All rights reserved. | Privacy Policy | Terms of Service
          </p>
        </div>
      </div>
    </footer>
  );
}