worldcup/components/nav.tsx

'use client'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { useState, useEffect } from 'react'

const NAV_LINKS = [
  { href: '/', label: 'Home' },
  { href: '/groups', label: 'Groups' },
  { href: '/stats', label: 'Statistics' },
  { href: '/history', label: 'History' },
]

export function Nav() {
  const pathname = usePathname()
  const router = useRouter()
  const [q, setQ] = useState('')
  const [open, setOpen] = useState(false)

  // Close menu on route change
  useEffect(() => { setOpen(false) }, [pathname])

  // Lock body scroll when menu open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : ''
    return () => { document.body.style.overflow = '' }
  }, [open])

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (q.trim()) {
      router.push(`/search?q=${encodeURIComponent(q.trim())}`)
      setOpen(false)
      setQ('')
    }
  }

  const isActive = (href: string) =>
    href === '/' ? pathname === '/' : pathname.startsWith(href)

  return (
    <>
      <nav
        className="fixed top-0 left-0 right-0 z-50 h-[60px] border-b border-green/[18%]"
        style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)' }}
      >
      <div className="max-w-[1200px] mx-auto px-7 h-full flex items-center">
        {/* Logo */}
        <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 cursor-pointer select-none">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/favicon.svg" style={{ height: '36px', width: 'auto' }} alt="" />
          <span className="font-['Bebas_Neue'] text-lg tracking-[3px] text-green whitespace-nowrap">WORLD CUP</span>
        </Link>

        {/* Desktop links */}
        <div className="hidden md:flex gap-0.5 flex-1 min-w-0 ml-5">
          {NAV_LINKS.map(({ href, label }) => (
            <Link key={href} href={href}
              className={`px-3.5 py-1.5 rounded-lg text-[13px] font-medium whitespace-nowrap transition-colors
                ${isActive(href) ? 'bg-green/[12%] text-green' : 'text-green-mid hover:text-green-sec'}`}>
              {label}
            </Link>
          ))}
        </div>

        {/* Desktop search */}
        <form onSubmit={handleSearch} className="relative flex-shrink-0 ml-auto hidden md:block">
          <input
            type="text" value={q} onChange={e => setQ(e.target.value)}
            placeholder="Search…"
            className="w-44 pl-8 pr-3.5 py-1.5 rounded-[20px] text-[13px] text-text outline-none bg-green/[6%] border border-green/[18%]"
          />
          <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
        </form>

        {/* Hamburger */}
        <button
          onClick={() => setOpen(o => !o)}
          className={`ml-auto md:hidden flex flex-col justify-center items-center w-9 h-9 gap-[5px] rounded-lg transition-colors ${open ? 'bg-green/10' : ''}`}
          aria-label="Menu"
        >
          <span className={`block w-5 h-[2px] bg-green rounded-full transition-all origin-center ${open ? 'rotate-45 translate-y-[7px]' : ''}`} />
          <span className={`block w-5 h-[2px] bg-green rounded-full transition-all ${open ? 'opacity-0' : ''}`} />
          <span className={`block w-5 h-[2px] bg-green rounded-full transition-all origin-center ${open ? '-rotate-45 -translate-y-[7px]' : ''}`} />
        </button>
      </div>
      </nav>

      {/* Mobile menu overlay */}
      {open && (
        <div
          className="fixed inset-0 z-40 md:hidden"
          style={{ background: 'rgba(4,13,8,0.6)', backdropFilter: 'blur(4px)', top: '60px' }}
          onClick={() => setOpen(false)}
        />
      )}

      {/* Mobile menu panel */}
      <div
        className={`fixed left-0 right-0 z-40 md:hidden transition-all duration-200 border-b border-green/[18%] ${open ? 'top-[60px] opacity-100' : 'top-[48px] opacity-0 pointer-events-none'}`}
        style={{ background: 'rgba(4,13,8,0.98)' }}
      >
        <div className="px-5 py-4 flex flex-col gap-1">
          {NAV_LINKS.map(({ href, label }) => (
            <Link key={href} href={href}
              className={`px-4 py-3 rounded-xl text-[15px] font-medium transition-colors
                ${isActive(href) ? 'bg-green/[12%] text-green' : 'text-green-sec hover:bg-green/[6%]'}`}>
              {label}
            </Link>
          ))}

          <form onSubmit={handleSearch} className="relative mt-3">
            <input
              type="text" value={q} onChange={e => setQ(e.target.value)}
              placeholder="Search players, teams, tournaments…"
              className="w-full pl-9 pr-4 py-3 rounded-xl text-[14px] text-text outline-none bg-green/[6%] border border-green/[18%]"
            />
            <svg className="absolute left-3 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
            </svg>
          </form>
        </div>
      </div>
    </>
  )
}