"use client";

export default function Navigation() {
  return (
    <nav className="w-full fixed top-0 left-0 z-50 px-8 py-6 bg-black/80 backdrop-blur-sm border-b border-gray-800/30">
      <div className="max-w-7xl mx-auto flex items-center justify-between">
        {/* Logo - Left */}
        <div className="flex flex-col">
          <div className="text-white text-2xl font-gaming font-bold tracking-tight">
            GAME.OF.TECH
          </div>
          <div className="text-pixel-gold text-sm font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
            <span>✦</span>
            <span>Game of Tech</span>
            <span>✦</span>
          </div>
        </div>

        {/* Navigation Links - Center */}
        <div className="flex items-center gap-6">
          <a
            href="/"
            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
          >
            HOME
          </a>
          <a
            href="/events"
            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
          >
            EVENTS
          </a>
          <a
            href="/leaderboard"
            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
          >
            LEADERBOARD
          </a>
        </div>

        {/* Play Now Button - Right */}
        <div>
          <button className="px-6 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
            PLAY NOW
          </button>
        </div>
      </div>
    </nav>
  );
}