Refactor Navigation component to use Next.js Link for navigation links, improving performance and accessibility.

components/Navigation.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import PlayerStats from "./PlayerStats";
 
 export default function Navigation() {
@@ -20,24 +21,24 @@ export default function Navigation() {
 
         {/* Navigation Links - Center */}
         <div className="flex items-center gap-6">
-          <a
+          <Link
             href="/"
             className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
           >
             HOME
-          </a>
-          <a
+          </Link>
+          <Link
             href="/events"
             className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
           >
             EVENTS
-          </a>
-          <a
+          </Link>
+          <Link
             href="/leaderboard"
             className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
           >
             LEADERBOARD
-          </a>
+          </Link>
         </div>
 
         {/* Player Stats - Right */}