/* global React */
// ============================================================
// MultidivisaFlow — Multidivisa feature animation.
//
// A horizontal carousel (same vocabulary as the client-logos
// marquee) that rotates a pixel-faithful recreation of the
// real Meefi "Balance en Meefi" dashboard card. The same window
// repeats across the five supported currencies — USD · MXN ·
// EUR · GBP · CNY — each showing the balance in its own symbol
// with a slightly different 7-day trend line.
//
// The balance card markup + styling is copied 1:1 from the real
// `.caf-bal` card in CuentasFlow.jsx, re-prefixed `mdv-` to keep
// the scopes independent.
// ============================================================
const { useMemo: mdvUseMemo, useState: mdvUseState, useRef: mdvUseRef, useEffect: mdvUseEffect } = React;
// --- Icons (copied exactly from the CuentasFlow icon set) ---
const MDV_Shield = (p) => (
);
const MDV_Trend = (p) => (
);
const MDV_Cells = (p) => (
);
const MDV_Chev = (p) => (
);
// Same underlying balance, expressed in each currency. Each gets
// its own gently-rising 7-day trend path so the cards don't look
// like carbon copies.
const MDV_CURRENCIES = [
{ code: "USD", symbol: "$", amount: "2,698.40",
path: "M0,96 L180,96 C260,96 280,138 380,136 C500,134 540,150 640,150 L820,150" },
{ code: "MXN", symbol: "$", amount: "49,898.98",
path: "M0,150 L150,150 C230,150 250,120 340,118 L470,118 C560,118 580,70 690,68 L820,66" },
{ code: "EUR", symbol: "€", amount: "2,481.10",
path: "M0,120 C110,120 150,150 250,150 C360,150 400,60 520,58 C640,56 700,104 820,104" },
{ code: "GBP", symbol: "£", amount: "2,131.55",
path: "M0,150 L120,150 C210,150 240,86 360,86 L470,86 C560,86 600,128 700,126 L820,60" },
{ code: "CNY", symbol: "¥", amount: "19,562.00",
path: "M0,72 L160,72 C250,72 270,118 380,116 C500,114 540,150 660,150 C740,150 770,108 820,96" },
];
const MDV_DATES = ["May 22", "May 23", "May 24", "May 25", "May 26", "May 27"];
function MdvBalanceCard({ symbol, amount, code, width }) {
const cur = MDV_CURRENCIES.find((c) => c.code === code);
const gid = `mdvg-${code}`;
const compact = width != null && width < 360;
return (
Balance en Meefi
{symbol}{amount}{code}
Últimos 7 días
{MDV_DATES.map((d, i) => {d})}
);
}
function MultidivisaFlow() {
const N = MDV_CURRENCIES.length;
// Flank the real set with a clone of the LAST currency at the head and a
// clone of the FIRST at the tail, so when MXN is centered you glimpse CNY
// to its left, and when CNY is centered you glimpse MXN to its right.
const display = mdvUseMemo(
() => [MDV_CURRENCIES[N - 1], ...MDV_CURRENCIES, MDV_CURRENCIES[0]],
[N]
);
const [active, setActive] = mdvUseState(0);
const [tx, setTx] = mdvUseState(0);
// Card width adapts to the stage so it never overflows on narrow
// (mobile) stages — the carousel centering math reads live offsets,
// so shrinking the card keeps the active card perfectly centered.
const [cardW, setCardW] = mdvUseState(420);
const stageRef = mdvUseRef(null);
const cardRefs = mdvUseRef([]);
const computeCardW = () => {
const stage = stageRef.current;
if (!stage) return;
const sw = stage.clientWidth;
setCardW(Math.max(248, Math.min(420, Math.round(sw * 0.84))));
};
// Slide the track so the active card sits in the middle of the stage.
// Real card `i` lives at display position `i + 1` (head clone is at 0).
const center = (i) => {
const stage = stageRef.current, card = cardRefs.current[i + 1];
if (!stage || !card) return;
const cardCenter = card.offsetLeft + card.offsetWidth / 2;
setTx(stage.clientWidth / 2 - cardCenter);
};
mdvUseEffect(() => {
computeCardW();
const onR = () => computeCardW();
window.addEventListener("resize", onR);
return () => window.removeEventListener("resize", onR);
// eslint-disable-next-line
}, []);
// Re-center synchronously whenever the active card OR the card width
// changes — reading offsetLeft forces a layout flush, so the new width
// is already reflected. (rAF here raced the stepper and left tx at 0.)
mdvUseEffect(() => {
center(active);
// eslint-disable-next-line
}, [active, cardW]);
// Step card-by-card with a dwell on each; hold on the last until the
// parent rotates this feature away (then it remounts back at card 0).
mdvUseEffect(() => {
const STEP = 2100; // pop (~0.85s) + pause before advancing
let i = 0;
setActive(0);
const id = setInterval(() => {
i += 1;
if (i >= N) { clearInterval(id); return; }
setActive(i);
}, STEP);
return () => clearInterval(id);
// eslint-disable-next-line
}, []);
return (