feat: add accessibility features to UI

components/logo.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { useSyncExternalStore } from "react";
+
+const emptySubscribe = () => () => {};
+
+function useMounted() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false,
+  );
+}
+
+export function Logo({
+  className,
+  height = 48,
+}: {
+  className?: string;
+  height?: number;
+}) {
+  const { resolvedTheme } = useTheme();
+  const mounted = useMounted();
+
+  // Aspect ratio from the original images: 480x200 = 2.4:1
+  const width = Math.round(height * 2.4);
+
+  // Before mount, show the dark logo (works on both themes as a fallback)
+  const isDark = mounted ? resolvedTheme === "dark" : false;
+
+  return (
+    <Image
+      src={isDark ? "/logo_light.png" : "/logo_dark.png"}
+      alt="Prabhupāda Says"
+      width={width}
+      height={height}
+      className={className}
+      priority
+    />
+  );
+}