// FlowThumbnail.jsx — abstract left-to-right flow diagrams using ReelFlow
// brand colors. Variant 0–5 covers flows with 1, 2, 3, 4, 5, or 6 videos.
// Each variant draws a left→right reel of video nodes with branching button
// rows beneath that point to the next video or an external URL.
//
// Visual language:
// - Yellow rounded rect = video node
// - Smaller pastel rect = button (color cycles teal/peach/cream)
// - Thin purple lines = connection (button → next video, or video → next)
const VIDEO_FILL = "#fcd456";
const VIDEO_FILL_ALT = "#fde590";
const BTN_TEAL = "#9ff7e4";
const BTN_PEACH = "#fdcfb1";
const BTN_CREAM = "#fff5cb";
const BTN_SKY = "#aef1fa";
const LINE = "#1f0a38";
const LINE_OPACITY = 0.18;
// Single-video flow with a few terminal buttons (URL destinations).
const Flow1 = () => (
);
// Two-video flow: V1 → button → V2 → terminal buttons.
const Flow2 = () => (
);
// Three-video flow: V1 branches to V2 and V3, each with one terminal button.
const Flow3 = () => (
);
// Four-video flow: V1 fans out into V2/V3/V4, each leading to terminal buttons.
const Flow4 = () => (
);
// Five-video flow: 3-column flow with denser branching.
const Flow5 = () => (
);
// Six-video flow: full-bleed multi-layer flow with the most branching.
const Flow6 = () => (
);
const flowVariants = { 0: Flow1, 1: Flow2, 2: Flow3, 3: Flow4, 4: Flow5, 5: Flow6 };
// `variant` is now expected to be (videoCount - 1), clamped to 0..5.
// Falls back gracefully if a raw index sneaks in.
function FlowThumbnail({ variant = 0 }) {
const safe = Math.max(0, Math.min(5, variant | 0));
const V = flowVariants[safe];
return ;
}
window.FlowThumbnail = FlowThumbnail;