const { useState, useMemo, useEffect, useRef, Fragment } = React;
// ═══════════════════════════════════════════════════════════════
// MATRIX HEADER — stats + language toggle
// ═══════════════════════════════════════════════════════════════
function MatrixHeader({ columns, allColumnsCount, profile, products, t, lang, dark, setLang, onOpenSidebar }) {
const text = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
const border = dark ? "#2A2825" : "#E2E0DF";
const eligibleCount = useMemo(() => {
let n = 0;
for (const p of products) {
if (window.checkEligibility(p, profile).eligible) n++;
}
return n;
}, [products, profile]);
const profileFilled = window.countProfile ? window.countProfile(profile) : 0;
const returnBounds = useMemo(() => {
let lo = Infinity, hi = -Infinity;
for (const p of products) {
const r = window.formatRange(p);
if (!r || r.kind === "multiple") continue;
lo = Math.min(lo, r.lo); hi = Math.max(hi, r.hi);
}
return { lo, hi };
}, [products]);
return (
{onOpenSidebar && (
)}
{lang === "en" ? "Reurbano · Investor Products" : "Reurbano · Productos de Inversión"}
{t.matrixTitle}
);
}
function SortControl({ value, setValue, t, dark }) {
const text = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
const border = dark ? "#2A2825" : "#E2E0DF";
const surface = dark ? "#1A1817" : "#FFFFFF";
const accent = "#4866B2";
const [open, setOpen] = useState(false);
const rootRef = useRef(null);
useEffect(() => {
const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", onDown);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); };
}, []);
const options = [
["match", t.sortMatch],
["status", t.sortStatus],
["stack", t.sortStack],
];
const active = options.find(([v]) => v === value) || options[0];
return (
{t.sortBy}
{open && (
{options.map(([v, lbl]) => (
))}
)}
);
}
function LangToggle({ lang, setLang, dark }) {
const text = dark ? "#FAF7F3" : "#393433";
const border = dark ? "#2A2825" : "#E2E0DF";
const surface = dark ? "#1A1817" : "#FFFFFF";
const options = [["EN","en"],["ES","es"]];
return (
{options.map(([label, val], i) => {
const active = val === lang;
return (
);
})}
);
}
function Stat({ num, den, text, label, dark }) {
const textColor = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
return (
{label}
{text || <>{num}{den && / {den}}}
);
}
window.MatrixHeader = MatrixHeader;
window.SortControl = SortControl;
// ═══════════════════════════════════════════════════════════════
// STATUS RIBBON — tiny band between header and matrix
// ═══════════════════════════════════════════════════════════════
function StatusRibbon({ counts, total, active, setActive, t, dark, sortMode, setSortMode }) {
const text = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
const border = dark ? "#2A2825" : "#E2E0DF";
const accent = "#4866B2";
const surface = dark ? "#0D0D0D" : "#FAF7F3";
const chips = [
{ key: "all", label: t.all, count: total, dot: null },
{ key: "open", label: t.openDeals, count: counts.open || 0, dot: window.STATUS_DOT["open"] },
{ key: "coming-soon", label: t.comingSoon, count: counts["coming-soon"] || 0, dot: window.STATUS_DOT["coming-soon"] },
{ key: "closed", label: t.closed, count: counts.closed || 0, dot: window.STATUS_DOT["closed"] },
];
return (
{t.filterBy}
{chips.map((c, i) => {
const isActive = active === c.key;
const disabled = c.key !== "all" && c.count === 0;
return (
);
})}
{setSortMode && (
{t.sortBy}
)}
);
}
function InlineSort({ value, setValue, t, dark }) {
const text = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
const border = dark ? "#2A2825" : "#E2E0DF";
const surface = dark ? "#1A1817" : "#FFFFFF";
const accent = "#4866B2";
const [open, setOpen] = useState(false);
const rootRef = useRef(null);
useEffect(() => {
const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", onDown);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); };
}, []);
const options = [
["match", t.sortMatch],
["status", t.sortStatus],
["stack", t.sortStack],
];
const active = options.find(([v]) => v === value) || options[0];
return (
{open && (
{options.map(([v, lbl]) => (
))}
)}
);
}
window.StatusRibbon = StatusRibbon;