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

components/EventsPageSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useBackgroundImage } from "@/hooks/usePreferences";
 
 interface Event {
   id: string;
@@ -67,6 +68,7 @@ const getStatusBadge = (status: Event["status"]) => {
 export default function EventsPageSection() {
   const [events, setEvents] = useState<Event[]>([]);
   const [loading, setLoading] = useState(true);
+  const backgroundImage = useBackgroundImage("events", "/got-2.jpg");
 
   useEffect(() => {
     fetch("/api/events")
@@ -94,7 +96,7 @@ export default function EventsPageSection() {
       <div
         className="absolute inset-0 bg-cover bg-center bg-no-repeat"
         style={{
-          backgroundImage: `url('/got-2.jpg')`,
+          backgroundImage: `url('${backgroundImage}')`,
         }}
       >
         {/* Dark overlay for readability */}