// Responsive styles live in index.html, keyed off [data-bp-and-below~="…"]
// or @container queries on .r-tower. Do not add new inline ternaries on
// viewport width or `compact` — convert to a CSS class instead.
// Extracted from matrix.jsx 2026-05-14. No logic change — pure split.
function ScrollHint({ scrollRef, headOffsetReady, t, lang, dark }) {
const [visible, setVisible] = useState(false);
const [dismissed, setDismissed] = useState(false);
const [convertedByScroll, setConvertedByScroll] = useState(false);
useEffect(() => {
if (!headOffsetReady || dismissed) return;
if (typeof window === "undefined") return;
try {
if (window.sessionStorage && window.sessionStorage.getItem("reu.scrollHintShown")) return;
} catch {}
if (window.__reuSidebarTouched) return;
if (!window.matchMedia || !window.matchMedia("(pointer: fine)").matches) return;
const el = scrollRef.current;
if (!el) return;
if (el.scrollWidth <= el.clientWidth) return;
const showTimer = setTimeout(() => {
if (window.__reuSidebarTouched) return;
if (!scrollRef.current) return;
if (scrollRef.current.scrollLeft > 0) return;
setVisible(true);
try { window.sessionStorage.setItem("reu.scrollHintShown", "1"); } catch {}
}, 4000);
return () => clearTimeout(showTimer);
}, [headOffsetReady, dismissed, scrollRef]);
useEffect(() => {
if (!visible) return;
const el = scrollRef.current;
if (!el) return;
const onScroll = () => {
if (el.scrollLeft > 0) {
setConvertedByScroll(true);
setDismissed(true);
}
};
el.addEventListener("scroll", onScroll, { passive: true });
const autoHide = setTimeout(() => setDismissed(true), 8000);
return () => {
el.removeEventListener("scroll", onScroll);
clearTimeout(autoHide);
};
}, [visible, scrollRef]);
if (!visible || dismissed) {
if (dismissed) {
return ;
}
return null;
}
const bg = dark ? "#22201E" : "#393433";
const fg = "#FAF7F3";
const copy = (typeof window.pickLang === "function" && window.pickLang(window.COPY?.matrixScrollHint, lang))
|| (lang === "es" ? "Más oportunidades → desliza para ver todas" : "More offerings → scroll to see all");
const dismissLabel = lang === "es" ? "Cerrar" : "Dismiss";
return (
{copy}
);
}