function useTheme() {
	const [theme, setTheme] = React.useState(() => {
		const saved = localStorage.getItem("theme");
		if (saved) return saved;
		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
	});

	React.useEffect(() => {
		document.documentElement.setAttribute("data-theme", theme);
		localStorage.setItem("theme", theme);
	}, [theme]);

	const toggleTheme = React.useCallback(() => {
		setTheme((prev) => {
			const next = prev === "dark" ? "light" : "dark";
			document.documentElement.setAttribute("data-theme", next);
			localStorage.setItem("theme", next);
			return next;
		});
	}, []);

	return { theme, toggleTheme };
}