import React from 'react';
import { Link } from 'react-router-dom';
import { Building2, Mail, Phone, MapPin } from 'lucide-react';

const PublicFooter = () => {
  const footerLinks = {
    company: [
      { name: 'About Us', href: '/about' },
      { name: 'Our Addresses', href: '/addresses' },
      { name: 'Blog', href: '/blog' },
      { name: 'FAQ', href: '/faq' },
      { name: 'Contact Us', href: '/contact' },
    ],
    legal: [
      { name: 'Terms of Service', href: '/terms' },
      { name: 'Privacy Policy', href: '/privacy' },
      { name: 'Refund Policy', href: '/refund' },
    ],
    services: [
      { name: 'Virtual Office', href: '/addresses' },
      { name: 'Mail Forwarding', href: '/pricing' },
      { name: 'Phone Services', href: '/pricing' },
      { name: 'Business Setup', href: '/business-setup' },
    ],
  };

  return (
    <footer className="bg-gray-50 border-t border-gray-200 mt-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <div className="feature-icon w-10 h-10">
                <Building2 className="w-5 h-5 text-white" />
              </div>
              <span className="text-xl font-bold gradient-text">
                Virtual Office Dubai
              </span>
            </div>
            <p className="text-gray-500 text-sm">
              VIRTUAL OFFICE DUBAI: Establish your business presence in Dubai with Virtual Office Dubai. Get a virtual office address, local phone number, phone answering & mail forwarding.
            </p>
            <div className="flex space-x-4">
              <div className="flex items-center space-x-2 text-sm text-gray-500">
                <MapPin className="w-4 h-4 text-red-600" />
                <span>Dubai, UAE</span>
              </div>
            </div>
          </div>

          <div>
            <h4 className="text-gray-900 font-semibold mb-4 block">Company</h4>
            <ul className="space-y-2">
              {footerLinks.company.map((link) => (
                <li key={link.name}>
                  <Link
                    to={link.href}
                    className="text-gray-600 hover:text-red-600 transition-colors text-sm"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="text-gray-900 font-semibold mb-4 block">Services</h4>
            <ul className="space-y-2">
              {footerLinks.services.map((link) => (
                <li key={link.name}>
                  <Link
                    to={link.href}
                    className="text-gray-600 hover:text-red-600 transition-colors text-sm"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="text-gray-900 font-semibold mb-4 block">Legal</h4>
            <ul className="space-y-2">
              {footerLinks.legal.map((link) => (
                <li key={link.name}>
                  <Link
                    to={link.href}
                    className="text-gray-600 hover:text-red-600 transition-colors text-sm"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-500 text-sm">
            © 2025 Virtual Office Dubai. All rights reserved.
          </p>
          <div className="flex items-center space-x-6 mt-4 md:mt-0">
            <a href="mailto:info@virtualofficesdubai.ae" className="flex items-center space-x-2 text-sm text-gray-500 hover:text-red-600">
              <Mail className="w-4 h-4" />
              <span>info@virtualofficesdubai.ae</span>
            </a>
            <div className="flex items-center space-x-2 text-sm text-gray-500">
              <Phone className="w-4 h-4" />
              <span>+971 4 123 4567</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default PublicFooter;