refactor: migrate internal links from <a href> to <StxLink>

Convert page-to-page navigation links to StxLink for SPA navigation:
- register.stx: home, terms, privacy, login links
- login.stx: home, forgot-password, register links
- TerritoryLeaderboard.stx: leaderboard link

Anchor links (#) and placeholder links remain as <a href>.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: glennmichael123

resources/components/TerritoryLeaderboard.stx

@@ -122,12 +122,12 @@ const typeLabels = {
 
     <!-- View All Link -->
     <div class="px-4 py-3 bg-gray-50 border-t border-gray-100">
-      <a href="/territories/leaderboard" class="text-emerald-600 font-medium text-sm hover:text-emerald-700 transition flex items-center justify-center">
+      <StxLink to="/territories/leaderboard" class="text-emerald-600 font-medium text-sm hover:text-emerald-700 transition flex items-center justify-center">
         View Full Leaderboard
         <svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
-      </a>
+      </StxLink>
     </div>
   </div>
 </template>

resources/views/login.stx

@@ -53,13 +53,13 @@ import { defineProps, withDefaults } from 'stx'
 @section('content')
   <!-- Header -->
   <div class="absolute top-0 left-0 right-0 p-6">
-    <a href="/" class="inline-flex items-center text-emerald-600 font-bold text-xl">
+    <StxLink to="/" class="inline-flex items-center text-emerald-600 font-bold text-xl">
       <svg class="w-8 h-8 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
       </svg>
       TrailBuddy
-    </a>
+    </StxLink>
   </div>
 
   <!-- Main Content -->
@@ -128,7 +128,7 @@ import { defineProps, withDefaults } from 'stx'
               <input type="checkbox" id="remember" class="w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500" />
               <span class="ml-2 text-sm text-gray-600">Remember me</span>
             </label>
-            <a href="/forgot-password" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium">Forgot password?</a>
+            <StxLink to="/forgot-password" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium">Forgot password?</StxLink>
           </div>
 
           <button
@@ -172,7 +172,7 @@ import { defineProps, withDefaults } from 'stx'
         <!-- Sign Up Link -->
         <p class="text-center text-sm text-gray-500 mt-8">
           Don't have an account?
-          <a href="/register" class="text-emerald-600 hover:text-emerald-700 font-semibold">Sign up for free</a>
+          <StxLink to="/register" class="text-emerald-600 hover:text-emerald-700 font-semibold">Sign up for free</StxLink>
         </p>
       </div>
 

resources/views/register.stx

@@ -59,13 +59,13 @@ import { defineProps, withDefaults } from 'stx'
 @section('content')
   <!-- Header -->
   <div class="absolute top-0 left-0 right-0 p-6">
-    <a href="/" class="inline-flex items-center text-emerald-600 font-bold text-xl">
+    <StxLink to="/" class="inline-flex items-center text-emerald-600 font-bold text-xl">
       <svg class="w-8 h-8 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
       </svg>
       TrailBuddy
-    </a>
+    </StxLink>
   </div>
 
   <!-- Main Content -->
@@ -164,7 +164,7 @@ import { defineProps, withDefaults } from 'stx'
           <div class="flex items-start">
             <input type="checkbox" id="terms" required class="w-4 h-4 mt-1 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500" />
             <label for="terms" class="ml-2 text-sm text-gray-600">
-              I agree to the <a href="/terms" class="text-emerald-600 hover:text-emerald-700">Terms of Service</a> and <a href="/privacy" class="text-emerald-600 hover:text-emerald-700">Privacy Policy</a>
+              I agree to the <StxLink to="/terms" class="text-emerald-600 hover:text-emerald-700">Terms of Service</StxLink> and <StxLink to="/privacy" class="text-emerald-600 hover:text-emerald-700">Privacy Policy</StxLink>
             </label>
           </div>
 
@@ -209,7 +209,7 @@ import { defineProps, withDefaults } from 'stx'
         <!-- Login Link -->
         <p class="text-center text-sm text-gray-500 mt-8">
           Already have an account?
-          <a href="/login" class="text-emerald-600 hover:text-emerald-700 font-semibold">Sign in</a>
+          <StxLink to="/login" class="text-emerald-600 hover:text-emerald-700 font-semibold">Sign in</StxLink>
         </p>
       </div>
     </div>