import { useState, useEffect } from 'react'
import { Sheet, SheetTrigger, SheetContent, SheetTitle } from '@/components/ui/Sheet'
import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
import { Link } from 'react-router-dom'

const Header = () => {
  const [isScrolled, setIsScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

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

  const serviceLinks = [
    { 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 industryLinks = [
    { name: 'Healthcare', href: '/industries/healthcare' },
    { name: 'Retail', href: '/industries/retail' },
    { name: 'Manufacturing', href: '/industries/manufacturing' },
    { name: 'Education & Finance', href: '/industries/education-finance' },
  ]

  const closeMobileMenu = () => setMobileMenuOpen(false)

  return (
    <header className={`sticky top-0 z-40 w-full transition-all duration-300 ${isScrolled ? 'bg-primary-navy shadow-md' : 'bg-primary-navy/95'}`}>
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <div className="flex items-center gap-3">
            <img 
              src="/logo.svg" 
              alt="Queue North Technologies" 
              className="h-8 w-auto flex-shrink-0" 
            />
            <span className="font-bold text-xl text-white hidden sm:block tracking-tight">Queue North</span>
          </div>

          {/* Desktop Nav */}
          <nav className="hidden md:flex items-center gap-6">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                to={link.href}
                className="text-sm font-medium text-navy-light hover:text-white transition-colors"
              >
                {link.name}
              </Link>
            ))}
          </nav>

          {/* CTA Button */}
          <div className="hidden md:block">
            <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
              Request Consultation
            </Link>
          </div>

          {/* Mobile Menu */}
          <div className="md:hidden">
            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
              <SheetTrigger asChild>
                <button className="p-2 text-white hover:text-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-cyan rounded-md">
                  <span className="sr-only">Open menu</span>
                  <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>
                </button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[300px] sm:w-[350px] bg-primary-navy text-white">
                <VisuallyHidden.Root asChild>
                  <SheetTitle>Navigation Menu</SheetTitle>
                </VisuallyHidden.Root>
                <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">
                    <div>
                      <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Primary</h4>
                      <ul className="space-y-2">
                        {navLinks.map((link) => (
                          <li key={link.name}>
                            <Link to={link.href} onClick={closeMobileMenu} className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2">
                              {link.name}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div>
                      <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Services</h4>
                      <ul className="space-y-2">
                        {serviceLinks.map((service) => (
                          <li key={service.name}>
                            <Link to={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}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div>
                      <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Industries</h4>
                      <ul className="space-y-2">
                        {industryLinks.map((industry) => (
                          <li key={industry.name}>
                            <Link to={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}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </nav>

                  <div className="mt-auto pt-6">
                    <Link to="/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
                    </Link>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  )
}

export default Header