import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'

const MobileNav = () => {
  const [isOpen, setIsOpen] = useState(false)
  const location = useLocation()

  const primaryLinks = [
    { name: 'Home', href: '/' },
    { 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' },
  ]

  const closeMobileMenu = () => {
    setIsOpen(false)
  }

  const isActive = (href) => location.pathname === href

  return (
    <div className="md:hidden">
      <Sheet open={isOpen} onOpenChange={setIsOpen}>
        <SheetTrigger asChild>
          <button
            className="p-2 text-white hover:text-primary-cyan rounded-md"
            aria-label="Open navigation menu"
            aria-expanded={isOpen}
            aria-controls="mobile-nav-content"
          >
            <svg
              className="h-6 w-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
            <span className="sr-only">Open menu</span>
          </button>
        </SheetTrigger>
        <SheetContent id="mobile-nav-content" side="right" className="w-[300px] sm:w-[350px] bg-primary-navy text-white">
          <div className="flex flex-col h-full">
            <div className="flex items-center gap-3 mb-6">
              <img 
                src="/logo.png" 
                alt="Queue North Technologies" 
                className="brand-logo-on-dark h-12 w-auto"
                loading="lazy"
                decoding="async"
                width="200"
                height="200"
              />
              <span className="font-bold text-xl leading-tight">Queue North Technologies</span>
            </div>
            
            <nav className="flex flex-col space-y-6">
              {/* Primary Links */}
              <div>
                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Primary</h4>
                <ul className="space-y-2">
                  {primaryLinks.map((link) => (
                    <li key={link.name}>
                      <Link
                        to={link.href}
                        onClick={closeMobileMenu}
                        className={`block text-base font-medium py-2 transition-colors ${isActive(link.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
                        aria-label={link.name}
                      >
                        {link.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Services */}
              <div>
                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3" aria-hidden="true">Services</h4>
                <ul className="space-y-2">
                  {services.map((service) => (
                    <li key={service.name}>
                      <Link
                        to={service.href}
                        onClick={closeMobileMenu}
                        className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
                        aria-label={'Learn about ' + service.name}
                      >
                        {service.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Industries */}
              <div>
                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3" aria-hidden="true">Industries</h4>
                <ul className="space-y-2">
                  {industries.map((industry) => (
                    <li key={industry.name}>
                      <Link
                        to={industry.href}
                        onClick={closeMobileMenu}
                        className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
                        aria-label={'Learn about ' + industry.name + ' industry solutions'}
                      >
                        {industry.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </nav>

            <div className="mt-auto pt-6">
              <Link
                to="/contact#contact-form"
                onClick={closeMobileMenu}
                className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors"
                aria-label="Request a consultation"
              >
                Request Consultation
              </Link>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}

export default MobileNav
