import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/Sheet'
import { useState } from 'react'

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

  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)
  }

  return (
    <div className="md:hidden">
      <Sheet open={isOpen} onOpenChange={setIsOpen}>
        <SheetTrigger asChild>
          <button className="p-2 text-white hover:text-cyan focus:outline-none focus:ring-2 focus:ring-cyan rounded-md">
            <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 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.svg" 
                alt="Queue North" 
                className="h-9 w-auto" 
              />
              <span className="font-bold text-xl">Queue North</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}>
                      <a
                        href={link.href}
                        onClick={closeMobileMenu}
                        className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2"
                      >
                        {link.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Services */}
              <div>
                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Services</h4>
                <ul className="space-y-2">
                  {services.map((service) => (
                    <li key={service.name}>
                      <a
                        href={service.href}
                        onClick={closeMobileMenu}
                        className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
                      >
                        {service.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Industries */}
              <div>
                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Industries</h4>
                <ul className="space-y-2">
                  {industries.map((industry) => (
                    <li key={industry.name}>
                      <a
                        href={industry.href}
                        onClick={closeMobileMenu}
                        className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
                      >
                        {industry.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </nav>

            <div className="mt-auto pt-6">
              <a
                href="/contact"
                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"
              >
                Request Consultation
              </a>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}

export default MobileNav