perf(landing): share one SSE socket for online counters, respect reduced motion

Header and hero/stats counters each opened their own EventSource to the
online-count stream; a shared subscriber now opens a single socket and
multicasts to every mounted counter. The entrance count-up animation skips
its requestAnimationFrame loop when the user prefers reduced motion.

src/components/animated-counter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useInView } from "motion/react";
+import { motion, useInView, useReducedMotion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 
 export function AnimatedCounter({
@@ -12,6 +12,7 @@ export function AnimatedCounter({
 }) {
 	const ref = useRef<HTMLSpanElement>(null);
 	const isInView = useInView(ref, { once: true, margin: "-50px" });
+	const prefersReducedMotion = useReducedMotion();
 	const started = useRef(false);
 	const [display, setDisplay] = useState(0);
 
@@ -24,6 +25,11 @@ export function AnimatedCounter({
 		}
 		started.current = true;
 
+		if (prefersReducedMotion) {
+			setDisplay(value);
+			return;
+		}
+
 		const duration = 1200;
 		const start = performance.now();
 		let raf = 0;
@@ -41,7 +47,7 @@ export function AnimatedCounter({
 
 		raf = requestAnimationFrame(tick);
 		return () => cancelAnimationFrame(raf);
-	}, [isInView, value]);
+	}, [isInView, value, prefersReducedMotion]);
 
 	return (
 		<motion.span

src/components/live-online-count.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-import { useEventSource } from "@/lib/use-event-source";
+import { useOnlineCount } from "@/lib/online-count-sse";
 
 /**
- * Live online user counter. Subscribes to the SSE online-count stream so the
- * displayed count updates in real-time (multicast) instead of only reflecting
- * the server-rendered value at page load.
+ * Live online user counter. Shares a single SSE connection (see
+ * `useOnlineCount`) so the whole page uses one socket instead of one per
+ * counter.
  */
 export function LiveOnlineCount({
 	initial,
@@ -17,17 +16,7 @@ export function LiveOnlineCount({
 	hotelName: string;
 }) {
 	const t = useTranslations("header");
-	const [count, setCount] = useState(initial);
-
-	const { data: onlineStream } = useEventSource<{ count: number }>(
-		"/api/online/count/stream",
-		{ enabled: true },
-	);
-	useEffect(() => {
-		if (onlineStream && typeof onlineStream.count === "number") {
-			setCount(onlineStream.count);
-		}
-	}, [onlineStream]);
+	const count = useOnlineCount(initial);
 
 	return <>{t("online", { count, hotel: hotelName })}</>;
 }

src/components/live-online-counter.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { AnimatedCounter } from "@/components/animated-counter";
-import { useEventSource } from "@/lib/use-event-source";
+import { useOnlineCount } from "@/lib/online-count-sse";
 
 /**
- * Live animated online-count number. Subscribes to the SSE online-count stream
- * so the stat updates in real-time (multicast) instead of only the initial SSR
- * value, while keeping the entrance counter animation.
+ * Live animated online-count number. Shares a single SSE connection (see
+ * `useOnlineCount`) so the whole page uses one socket instead of one per
+ * counter, while keeping the entrance counter animation.
  */
 export function LiveOnlineCounter({
 	initial,
@@ -16,17 +15,7 @@ export function LiveOnlineCounter({
 	initial: number;
 	suffix?: string;
 }) {
-	const [count, setCount] = useState(initial);
-
-	const { data: onlineStream } = useEventSource<{ count: number }>(
-		"/api/online/count/stream",
-		{ enabled: true },
-	);
-	useEffect(() => {
-		if (onlineStream && typeof onlineStream.count === "number") {
-			setCount(onlineStream.count);
-		}
-	}, [onlineStream]);
+	const count = useOnlineCount(initial);
 
 	return <AnimatedCounter value={count} suffix={suffix} />;
 }