// strikeX — Call ladder diagram (light). Inlined from guidelines/wheel-call-light.card.html
// so the BCSR call-rung ladder renders inside the Strategy section's Covered Call card.
// Modeled on WheelGraph: a fading comet beam runs every edge (6 layered #cl-beamPaths
// dashes), and each block is hover-shiny in its product-palette color, swapping its label
// to the product token (e.g. CALL_N) on hover. Glow id namespaced (cl-glow) so it never
// collides with the other inline SVGs. Exposes window.CallLadder.
// Block (keyed by its rect's x) → { palette p, token t shown on hover }. CALL legs run warm.
const CL_NODES = {
"240": { p: "clay", t: "call_np" }, "976": { p: "clay", t: "call_np" }, // CALL−CALL spreads
"289": { p: "sun", t: "call_n" }, "551": { p: "sun", t: "call_n" }, // +CALL legs
"1048": { p: "sun", t: "call_n" },
};
const CALL_LADDER_SVG = `
`;
function CallLadder({ style }) {
const ref = React.useRef(null);
// Tag each block with its palette class (CSS :hover shine) and, on hover, crossfade its
// label to the product token — reverting on mouse-leave. Mirrors WheelGraph.
React.useLayoutEffect(() => {
const root = ref.current && ref.current.querySelector("svg");
if (!root) return;
const texts = Array.from(root.querySelectorAll("text"));
const labelInside = (r) => {
const x = +r.getAttribute("x"), y = +r.getAttribute("y");
const w = +r.getAttribute("width"), h = +r.getAttribute("height");
return texts.find((t) => {
const tx = +t.getAttribute("x"), ty = +t.getAttribute("y");
return tx >= x && tx <= x + w && ty >= y && ty <= y + h;
});
};
const cleanups = [];
root.querySelectorAll("rect").forEach((r) => {
const node = CL_NODES[r.getAttribute("x")];
if (!node) return;
r.classList.add("hv-node", "hv-" + node.p);
const label = labelInside(r);
if (!label) return;
const original = label.innerHTML;
label.style.transition = "opacity .14s ease";
let timer;
const swap = (apply) => {
clearTimeout(timer);
label.style.opacity = "0";
timer = setTimeout(() => { apply(); label.style.opacity = "1"; }, 140);
};
const enter = () => swap(() => { label.textContent = node.t.toUpperCase(); });
const leave = () => swap(() => { label.innerHTML = original; });
r.addEventListener("mouseenter", enter);
r.addEventListener("mouseleave", leave);
cleanups.push(() => { clearTimeout(timer); r.removeEventListener("mouseenter", enter); r.removeEventListener("mouseleave", leave); });
});
return () => cleanups.forEach((fn) => fn());
}, []);
return (
);
}
window.CallLadder = CallLadder;