Refactor admin preferences management to use global site preferences, update UI components for better user experience, and implement image selection for background settings.

components/LeaderboardSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useBackgroundImage } from "@/hooks/usePreferences";
 
 interface LeaderboardEntry {
   rank: number;
@@ -18,6 +19,10 @@ const formatScore = (score: number): string => {
 export default function LeaderboardSection() {
   const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]);
   const [loading, setLoading] = useState(true);
+  const backgroundImage = useBackgroundImage(
+    "leaderboard",
+    "/leaderboard-bg.jpg"
+  );
 
   useEffect(() => {
     fetch("/api/leaderboard")
@@ -45,7 +50,7 @@ export default function LeaderboardSection() {
       <div
         className="absolute inset-0 bg-cover bg-center bg-no-repeat"
         style={{
-          backgroundImage: `url('/leaderboard-bg.jpg')`,
+          backgroundImage: `url('${backgroundImage}')`,
         }}
       >
         {/* Dark overlay for readability */}