// 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;
// ═══════════════════════════════════════════════════════════════
// Matrix — Towers (vertical capital stack as buildings)
// ═══════════════════════════════════════════════════════════════
function StackDiagram({ dark, lang, columns }) {
const text = dark ? "#FAF7F3" : "#393433";
const lime = "#EDFE38";
const muted = dark ? "#8A827F" : "#6B6361";
// Collect per-tier aggregate stats from currently visible columns
const tierStats = useMemo(() => {
const stats = {}; // { [tier]: {count, rLo, rHi} }
if (!columns) return stats;
for (const col of columns) {
for (const [tier, cell] of col.cells.entries()) {
if (!cell || !cell.product) continue;
const rng = window.formatRange(cell.product);
if (!rng || rng.kind === "multiple") {
stats[tier] = stats[tier] || { count: 0, rLo: Infinity, rHi: -Infinity };
stats[tier].count++;
continue;
}
stats[tier] = stats[tier] || { count: 0, rLo: Infinity, rHi: -Infinity };
stats[tier].count++;
stats[tier].rLo = Math.min(stats[tier].rLo, rng.lo);
stats[tier].rHi = Math.max(stats[tier].rHi, rng.hi);
}
}
return stats;
}, [columns]);
const bands = window.SETTINGS?.capitalStackBands ?? [
{ label: "SR", color: "#4866B2", tier: "senior-debt" },
{ label: "MEZZ", color: "#6D85C3", tier: "mezzanine" },
{ label: "PREF", color: "#A1B0D4", tier: "pref-equity" },
{ label: "COMM", color: "#D4B24A", tier: "common-equity" },
{ label: "LP", color: lime, tier: "syndicate-lp" },
];
return (
);
}
function MatrixC({ columns, profile, t, lang, dark, selectedId, onSelectProduct, density, highlight, hideIneligible, onSetHideIneligible, statusFilter, onClearStatus }) {
const text = dark ? "#FAF7F3" : "#393433";
const muted = dark ? "#8A827F" : "#6B6361";
const faint = dark ? "#5A5654" : "#C1C1C1";
const border = dark ? "#2A2825" : "#E2E0DF";
const accent = "#4866B2";
const visibleCols = hideIneligible ? columns.filter(c => Array.from(c.cells.values()).some(v => v.eligible)) : columns;
const mutedTiers = window.mutedTypeTiers ? window.mutedTypeTiers(profile) : null;
// Width-axis "compact" is derived from the shared useBreakpoint hook so there
// is one source of truth for responsive width-bucketing (used by CSS via
// [data-bp-and-below~="…"] and by JS here). Height-axis vh is still tracked
// independently because the floor-budget math needs the live viewport
// height — no CSS equivalent for "fit 4 rows into available vh".
const bp = window.useBreakpoint();
// The offerings frame sits under the fixed site header (story-page.jsx, 48px), so the matrix gets
// the window's height less that.
const [vh, setVh] = useState(typeof window !== "undefined" ? window.innerHeight - 48 : 900);
useEffect(() => {
const onResize = () => { setVh(window.innerHeight - 48); };
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
// Measure the natural content height of every tower-head (via the inner
// wrapper, which isn't affected by the head's own min-height). Publish the
// max as the --tower-head-h CSS var on the grid so every head locks to the
// tallest head's content. The legend top spacer reads the same var (see
// .r-legend-head-spacer in index.html), so legend tier rows always align
// with tower floors with zero JS-CSS sync lag.
const matrixGridRef = useRef(null);
useEffect(() => {
const measure = () => {
const grid = matrixGridRef.current;
if (!grid) return;
const inners = grid.querySelectorAll(".r-tower-head-inner");
if (!inners.length) return;
let maxInner = 0;
inners.forEach(el => { if (el.offsetHeight > maxInner) maxInner = el.offsetHeight; });
const head = grid.querySelector(".r-tower-head");
if (!head) return;
const cs = window.getComputedStyle(head);
const pb = parseFloat(cs.paddingBottom || "0");
const pt = parseFloat(cs.paddingTop || "0");
grid.style.setProperty("--tower-head-h", (maxInner + pt + pb) + "px");
};
measure();
const ro = new ResizeObserver(measure);
const grid = matrixGridRef.current;
if (grid) {
ro.observe(grid);
grid.querySelectorAll(".r-tower-head-inner").forEach(el => ro.observe(el));
}
return () => ro.disconnect();
});
const baseFloor = density === "compact" ? 54 : 64;
// Compact density: bucket "mobile" / "narrow" via the shared breakpoint hook
// (single source of truth for width). Short-landscape (vh<640) keeps its
// own fallback because height-axis bucketing isn't expressed in data-bp.
const compact = bp === "mobile" || bp === "narrow" || vh < 640;
// The offerings' own header bar (68) shows only where the filters are a drawer (header.jsx).
const mainHead = bp === "drawer" || bp === "mobile" || bp === "narrow" ? 68 : 0;
// Non-floor vertical budget: main header + matrix body padding + tower header + bottom spacer.
// Compact: header(68) + body pt(10) + tower-head real(~277 incl mb) + plinth(43) + grid pb(8) + scroll pb(12) + 15px viewport-bottom gap = 433.
const nonFloorBudget = compact ? 433 - 68 + mainHead : (mainHead + 48 + 155 + 64);
// One row per tier in TIER_ORDER. Non-compact head is dynamic, so its budget
// leaves one floor's worth of slack (see nTiers below).
// Budget divisor follows the tier count: compact packs n floors into the
// budget, non-compact leaves one floor's worth of slack. Was hardcoded 4 / 5.
const nTiers = TIER_ORDER.length;
const maxFloor = compact ? Math.floor((vh - nonFloorBudget) / nTiers) : Math.floor((vh - nonFloorBudget) / (nTiers + 1));
// Floor cells need ~58px min; let them grow to fill the viewport up to a generous cap.
// Desktop cap raised so floors absorb whitespace below them instead of leaving a gap below the plinth.
const floorCap = compact ? 160 : (density === "compact" ? 92 : 150);
const floorH = Math.max(58, Math.min(floorCap, maxFloor));
// Tower-head height absorbs whatever vertical space the matrix tiers didn't
// claim, so the page fills the viewport. One floor cell per tier in TIER_ORDER
// + a ~43px plinth bar + ~30px tower top/bottom margins, sitting under the
// 68px main header. This used to hardcode 4 floors; retiring a tier then left
// one floor's worth of dead space below the towers.
const headMin = compact ? 280 : 260;
const headMax = compact ? 620 : 560;
const towerHeadH = Math.max(
headMin,
Math.min(headMax, vh - mainHead - 45 - 43 - nTiers * floorH)
);
const cellMode = vh >= 720 ? "roomy" : vh >= 600 ? "dense" : "tight";
const bodyRef = useRef(null);
const scrollWrapperRef = useRef(null);
// Arrow-key navigation between focused floors
const onMatrixKeyDown = (e) => {
const tgt = e.target.closest("[data-floor]");
if (!tgt) return;
const [c, r] = tgt.getAttribute("data-floor").split(":").map(Number);
let nc = c, nr = r;
if (e.key === "ArrowUp") nr = r - 1;
else if (e.key === "ArrowDown") nr = r + 1;
else if (e.key === "ArrowLeft") nc = c - 1;
else if (e.key === "ArrowRight") nc = c + 1;
else if (e.key === "Home") { nc = 0; nr = 0; }
else if (e.key === "End") { nc = visibleCols.length - 1; nr = TIER_ORDER.length - 1; }
else return;
e.preventDefault();
// Find nearest existing floor (skip gaps)
const findCell = (col, row) => bodyRef.current?.querySelector(`[data-floor="${col}:${row}"]`);
let next = findCell(nc, nr);
// If target missing (gap cell), step further in same direction up to grid edge
if (!next && e.key === "ArrowUp") { while (nr > 0 && !next) { nr--; next = findCell(nc, nr); } }
if (!next && e.key === "ArrowDown") { while (nr < TIER_ORDER.length - 1 && !next) { nr++; next = findCell(nc, nr); } }
if (!next && e.key === "ArrowLeft") { while (nc > 0 && !next) { nc--; next = findCell(nc, nr); } }
if (!next && e.key === "ArrowRight") { while (nc < visibleCols.length - 1 && !next) { nc++; next = findCell(nc, nr); } }
next?.focus();
};
return (
{/* Legend column on the left — tier rows only; flush to page edge with inner padding.
Sticky-left so it pins to the viewport whenever the matrix-scroll wrapper
overflows horizontally (small desktop and mobile). */}
{/* Spacer structurally mirrors .r-tower-head (same min-height and
margin-bottom via --tower-head-h / --tower-head-mb CSS vars),
so legend tier rows always sit at the same Y as tower floors. */}