// components/Navbar.tsx
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Navbar() {
  const pathname = usePathname();

  const isActive = (path: string) => {
    if (path === '/') {
      return pathname === path;
    }
    return pathname.startsWith(path);
  };

  return (
    <nav className="border-b border-white/10 bg-[#0a0a0a]/80 backdrop-blur-xl sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex items-center justify-between h-16">
          {/* Logo - links to home */}
          <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
            <img 
              src="https://openwheels.racing/files/img/Openwheels_landscape.svg" 
              alt="OpenWheels" 
              className="h-6 hidden sm:block brightness-0 invert"
            />
          </Link>

          {/* Nav Links */}
          <div className="flex items-center space-x-1">
            <Link 
              href="/"
              className={`px-4 py-2 text-sm font-medium transition-colors ${
                isActive('/') && pathname === '/'
                  ? 'text-white border-b-2 border-white' 
                  : 'text-white/50 hover:text-white'
              }`}
            >
              HOME
            </Link>
            <Link 
              href="/dashboard"
              className={`px-4 py-2 text-sm font-medium transition-colors ${
                isActive('/dashboard')
                  ? 'text-white border-b-2 border-white' 
                  : 'text-white/50 hover:text-white'
              }`}
            >
              DASHBOARD
            </Link>
            <Link 
              href="/rankings"
              className={`px-4 py-2 text-sm font-medium transition-colors ${
                isActive('/rankings')
                  ? 'text-white border-b-2 border-white' 
                  : 'text-white/50 hover:text-white'
              }`}
            >
              RANKINGS
            </Link>
            <Link 
              href="/events"
              className={`px-4 py-2 text-sm font-medium transition-colors ${
                isActive('/events')
                  ? 'text-white border-b-2 border-white' 
                  : 'text-white/50 hover:text-white'
              }`}
            >
              EVENTS
            </Link>
            <Link 
              href="/live"
              className={`px-4 py-2 text-sm font-medium transition-colors ${
                isActive('/live')
                  ? 'text-white border-b-2 border-white' 
                  : 'text-white/50 hover:text-white'
              }`}
            >
              LIVE
            </Link>
            <a 
              href="https://discord.gg/nvuB8EvT9P" 
              target="_blank"
              rel="noopener noreferrer"
              className="ml-4 px-5 py-2 text-sm border border-white hover:bg-white hover:text-[#0a0a0a] transition-all"
            >
              DISCORD
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
}