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 Technologies',
    tagline: 'Modern communications infrastructure without the vendor noise.',
    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' },
    { name: 'Privacy Policy', href: '/privacy-policy' },
  ]

  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-24 pb-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <Link to="/" className="flex items-center gap-3 mb-3 group" aria-label="Queue North Technologies Home">
              <img
                src="/logo.png"
                alt="Queue North Technologies"
                className="brand-logo-on-dark h-12 w-auto shrink-0 transition-opacity group-hover:opacity-90"
                loading="lazy"
                decoding="async"
                width="200"
                height="200"
              />
              <span className="font-bold text-sm leading-tight tracking-tight text-white sm:text-xl sm:whitespace-nowrap">Queue North Technologies</span>
            </Link>
            <p className="text-navy-light text-sm leading-relaxed mb-5">{companyInfo.tagline}</p>
            {/* space-y-4, not space-y-2: see .tap-target in index.css. The links
                are 17px tall and their hit boxes are 33px, so the rows have to be
                at least 33px apart or the boxes overlap and only the last one
                painted is really tappable. */}
            <div className="space-y-4 text-navy-light text-sm mb-6">
              <div>
                <a href={`tel:+1${companyInfo.phone.replace(/\D/g, '')}`} className="tap-target block w-fit 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="tap-target block w-fit hover:text-primary-cyan transition-colors" aria-label={`Call toll-free ${companyInfo.tollFree}`}>{companyInfo.tollFree} (Toll-Free)</a>
              </div>
            </div>
            <Link
              to="/contact#contact-form"
              className="inline-flex items-center gap-2 rounded-md text-sm font-semibold px-5 py-2.5 bg-primary-cyan text-primary-navy hover:bg-white transition-colors duration-200"
             
            >
              Get a Free Quote
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </Link>
          </div>

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

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

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

        {/* Veteran Owned & Operated */}
        <div className="border-t border-white/10 mt-10 py-6">
          <div className="flex flex-col items-center gap-4 text-center">
            <span className="flex h-24 w-20 items-center justify-center rounded-md border border-white/10 bg-white p-1 shadow-sm">
              <img
                src="/assets/brand/veteran-owned-certified.webp"
                alt="SBA Veteran-Owned Certified badge"
                className="h-full w-full object-contain"
                loading="lazy"
                decoding="async"
              />
            </span>
            <p className="text-primary-cyan text-xs font-semibold uppercase tracking-[0.18em]">
              Veteran Owned &amp; Operated
            </p>
            <div className="flex flex-wrap justify-center gap-2">
              <span className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-white/85">
                United States Marine Corps
              </span>
              <span className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-white/85">
                United States Air Force
              </span>
            </div>
          </div>
        </div>

        {/* Bottom */}
        <div className="border-t border-white/10 pt-8">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div className="flex flex-col gap-1">
              <p className="text-navy-light text-xs">
                © {currentYear} Queue North Technologies. All rights reserved.
              </p>
              <Link
                to="/privacy-policy"
                className="tap-target text-navy-light text-xs hover:text-primary-cyan transition-colors w-fit"
                aria-label="Read the Queue North Technologies Privacy Policy"
              >
                Privacy Policy
              </Link>
            </div>
            <div className="flex items-center gap-4">
              <a
                href="https://linkedin.com/company/queue-north-technologies-llc"
                target="_blank"
                rel="noopener noreferrer"
                className="text-navy-light hover:text-primary-cyan transition-colors"
                aria-label="Follow Queue North on LinkedIn"
              >
                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
                <span className="sr-only">LinkedIn</span>
              </a>
              <a
                href="https://www.facebook.com/QueueNorth"
                target="_blank"
                rel="noopener noreferrer"
                className="text-navy-light hover:text-primary-cyan transition-colors"
                aria-label="Follow Queue North on Facebook"
              >
                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                </svg>
                <span className="sr-only">Facebook</span>
              </a>
              <a
                href="https://www.instagram.com/queue_north/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-navy-light hover:text-primary-cyan transition-colors"
                aria-label="Follow Queue North Technologies on Instagram"
              >
                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M7.75 2h8.5A5.76 5.76 0 0122 7.75v8.5A5.76 5.76 0 0116.25 22h-8.5A5.76 5.76 0 012 16.25v-8.5A5.76 5.76 0 017.75 2zm0 2A3.75 3.75 0 004 7.75v8.5A3.75 3.75 0 007.75 20h8.5A3.75 3.75 0 0020 16.25v-8.5A3.75 3.75 0 0016.25 4h-8.5zM12 7a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6zm5.25-2.5a1.25 1.25 0 110 2.5 1.25 1.25 0 010-2.5z" />
                </svg>
                <span className="sr-only">Instagram</span>
              </a>
            </div>
          </div>
          <p className="text-navy-light text-xs mt-4">
            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>
    </footer>
  )
}

export default Footer