Queue-North-Website/src/components/layout/Footer.jsx

import { Link } from 'react-router-dom'

const Footer = () => {
  const currentYear = new Date().getFullYear()

  const companyInfo = {
    name: 'Queue North',
    tagline: 'Modern communications infrastructure without the vendor noise.',
    address: 'Orlando, FL',
    email: 'info@queuenorth.com',
    phone: '(321) 730-8020',
    tollFree: '(888) 656-2850',
  }

  const quickLinks = [
    { name: 'Home', href: '/' },
    { name: 'Services', href: '/services' },
    { name: 'Industries', href: '/industries' },
    { name: 'About', href: '/about' },
    { name: 'Contact', href: '/contact' },
    { name: 'Support', href: '/support' },
  ]

  const services = [
    { name: 'Unified Communications', href: '/services/unified-communications' },
    { name: 'Contact Center', href: '/services/contact-center' },
    { name: 'Managed Support', href: '/services/managed-support' },
    { name: 'Consulting & Training', href: '/services/consulting-training' },
    { name: 'Infrastructure Cabling', href: '/services/infrastructure-cabling' },
    { name: 'Wireless Access', href: '/services/wireless-access' },
    { name: 'Local Networking', href: '/services/local-networking' },
  ]

  const industries = [
    { name: 'Healthcare', href: '/industries/healthcare' },
    { name: 'Retail', href: '/industries/retail' },
    { name: 'Manufacturing', href: '/industries/manufacturing' },
    { name: 'Education & Finance', href: '/industries/education-finance' },
  ]

  return (
    <footer className="bg-primary-navy text-white">
      <div className="container mx-auto px-4 pt-20 pb-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
          {/* Company Info */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <img 
                src="/logo.png" 
                alt="Queue North" 
                className="h-8 w-auto" 
              />
              <span className="font-bold text-lg">Queue North</span>
            </div>
            <p className="text-navy-light text-sm mb-3">{companyInfo.tagline}</p>
            <p className="text-navy-light text-sm mb-3">{companyInfo.address}</p>
            <div className="space-y-2 text-navy-light text-sm mb-3">
              <div>
                <a href={`mailto:${companyInfo.email}`} className="hover:text-primary-cyan transition-colors" aria-label={`Send email to ${companyInfo.email}`}>{companyInfo.email}</a>
              </div>
              <div>
                <a href={`tel:+1${companyInfo.phone.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.phone}`}>{companyInfo.phone}</a>
              </div>
              <div>
                <a href={`tel:+1${companyInfo.tollFree.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.tollFree}`}>{companyInfo.tollFree}</a>
              </div>
              <Link to="/contact" className="inline-block text-primary-cyan hover:underline" aria-label="Fill out the contact form">Contact Form</Link>
            </div>
            <div className="mt-4">
              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-primary-cyan text-primary-navy hover:bg-primary-cyan/90 transition-colors" aria-label="Request a consultation">
                Request Consultation
              </Link>
            </div>
            <p className="text-navy-light text-xs">© {currentYear} Queue North Technologies. All rights reserved.</p>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Quick Links</h3>
            <ul className="space-y-2">
              {quickLinks.map((link) => (
                <li key={link.name}>
                  <Link
                    to={link.href}
                    className="text-navy-light hover:text-white transition-colors text-sm"
                    aria-label={link.name}
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Services */}
          <div>
            <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Services</h3>
            <ul className="space-y-2">
              {services.map((service) => (
                <li key={service.name}>
                  <Link
                    to={service.href}
                    className="text-navy-light hover:text-white transition-colors text-sm"
                    aria-label={service.name}
                  >
                    {service.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Industries */}
          <div>
            <h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-primary-cyan">Industries</h3>
            <ul className="space-y-2">
              {industries.map((industry) => (
                <li key={industry.name}>
                  <Link
                    to={industry.href}
                    className="text-navy-light hover:text-white transition-colors text-sm"
                    aria-label={industry.name}
                  >
                    {industry.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom */}
        <div className="border-t border-white/10 pt-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="text-center md:text-left">
              <p className="text-navy-light text-sm mb-2">
                8x8 and Cisco Certified Partner | Veteran Owned | 25+ Years Experience
              </p>
              <div className="flex justify-center md:justify-start gap-4 text-sm">
                <a href="https://linkedin.com/company/queue-north-technologies-llc" target="_blank" rel="noopener noreferrer" className="text-primary-cyan hover:text-white transition-colors" aria-label="Follow Queue North on LinkedIn">
                  LinkedIn
                </a>
              </div>
            </div>
            <div className="text-center md:text-right">
              <p className="text-navy-light text-xs">
                8x8® is a registered trademark of 8x8, Inc. Queue North Technologies is an independent certified partner and is not owned or operated by 8x8, Inc.
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer