// 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.
// Cascading: [data-bp-and-below~="mobile"] also matches at narrow.
// Use exact [data-bp="…"] only when the rule applies at one bucket alone.
const { useState, useMemo, useEffect, useRef, Fragment } = React;
// ═══════════════════════════════════════════════════════════════
// SIDEBAR — profile filters
// ═══════════════════════════════════════════════════════════════
function Sidebar({ profile, setProfile, t, lang, setLang, dark, onReset, onClose, products }) {
const isDark = dark;
const bg = isDark ? "#1A1817" : "#FFFFFF";
const border = isDark ? "#2A2825" : "#E2E0DF";
const text = isDark ? "#FAF7F3" : "#393433";
const muted = isDark ? "#8A827F" : "#6B6361";
const faint = isDark ? "#6B6361" : "#9A9290";
const surface = isDark ? "#0D0D0D" : "#FAF7F3";
const accent = "#4866B2";
const filled = window.countProfile(profile);
const total = window.FILTERS.length;
// Mark sidebar as touched when any profile field is set — used by the
// matrix scroll-hint chip to skip showing the hint if the user has
// already engaged the sidebar filters.
useEffect(() => {
if (profile && Object.values(profile).some(v => v != null && !(Array.isArray(v) && v.length === 0))) {
window.__reuSidebarTouched = true;
}
}, [profile]);
// Bridge for detail slideover "Filtered out" reason buttons: scroll a
// FilterRow into view, flash a highlight, and focus its first control.
useEffect(() => {
window.focusFilter = (filterKey) => {
if (!filterKey || typeof document === "undefined") return;
const row = document.querySelector(`[data-filter-key="${CSS.escape(filterKey)}"]`);
if (!row) return;
row.scrollIntoView({ behavior: "smooth", block: "center" });
row.classList.add("r-filter-row-flash");
setTimeout(() => row.classList.remove("r-filter-row-flash"), 1200);
const ctrl = row.querySelector("select, button, input, [tabindex]");
if (ctrl && typeof ctrl.focus === "function") {
setTimeout(() => ctrl.focus({ preventScroll: true }), 320);
}
};
return () => { try { delete window.focusFilter; } catch {} };
}, []);
// Conditional visibility: a filter with showWhen = { fieldKey: [allowedValues] }
// only renders when the current profile matches one of those values.
const isFilterVisible = (f) => {
if (!f.showWhen) return true;
for (const [key, allowed] of Object.entries(f.showWhen)) {
const v = profile[key];
if (v == null) return false;
const list = Array.isArray(allowed) ? allowed : [allowed];
if (!list.includes(v)) return false;
}
return true;
};
// Render filters in display_order (the sheet's 08-FilterDimensions
// display_order column drives window.FILTERS array order at sync time).
// Visibility rules (showWhen) are applied at render time.
const HIDDEN_FILTER_KEYS = new Set(window.SETTINGS?.hiddenFilterKeys ?? ["accredited", "impactTilt"]);
const visibleFilters = window.FILTERS
.filter((f) => !HIDDEN_FILTER_KEYS.has(f.key))
.filter(isFilterVisible);
return (
);
}
// ─────────────────────────────────────────────────────────────
// FilterRow — renders pills for small option sets, select for large
// ─────────────────────────────────────────────────────────────
function FilterRow({ filter, value, onChange, lang, dark, t }) {
const filled = value != null && value !== "";
const border = dark ? "#2A2825" : "#E2E0DF";
const text = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
const faint = dark ? "#6B6361" : "#9A9290";
const accent = "#4866B2";
const surface = dark ? "#22201E" : "#F6F2EC";
const [whyOpen, setWhyOpen] = useState(false);
return (
{filter.why && (
)}
{whyOpen && filter.why && (
{filter.why[lang]}
)}
{filter.kind === "pills" ? (
) : (
)}
{/* An always-visible hint under the control (content/filters.json "hint"), for choices that are
easy to get wrong, such as tax residency for someone living outside their home country. */}
{filter.hint && (
);
}
function PillButton({ active, onClick, dark, children, placeholder, ariaPressed }) {
const text = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
const faint = dark ? "#6B6361" : "#9A9290";
const border = dark ? "#2A2825" : "#E2E0DF";
const inputBg = dark ? "#26231F" : "#FFFFFF";
const accent = "#4866B2";
// Placeholder pill (the "Any" clear-state) is smaller / more muted
if (placeholder) {
return (
);
}
return (
);
}
function SelectInput({ filter, value, onChange, lang, dark, t }) {
const filled = value != null && value !== "";
const border = dark ? "#2A2825" : "#E2E0DF";
const text = dark ? "#FAF7F3" : "#393433";
const faint = dark ? "#6B6361" : "#9A9290";
const inputBg = dark ? "#26231F" : "#FFFFFF";
return (
);
}
function ReurbanoMark({ dark, symbol }) {
const c = dark ? "#FAF7F3" : "#393433";
// symbol: only the drawn mark, without the REURBANO wordmark and rule under it (the story header)
return (
);
}
window.Sidebar = Sidebar;
window.ReurbanoMark = ReurbanoMark;