);
}
// ============================================================
// VIS 2 — Invoice mockup filling the full stage with a slow,
// barely-perceptible Ken Burns drift so the panel stays alive.
// ============================================================
function VisInvoice() {
return (
);
}
// ============================================================
// VIS — Real product screenshot, filling the stage with a slow
// Ken Burns drift so the panel stays alive. Shared by the
// "Pagos locales", "Cuentas empresariales" y "Tesorería" rows.
// ============================================================
function VisShot({ src, alt }) {
return (
);
}
function VisPagosLocales() {
// Faithful HTML/CSS recreation of the real "Pago local" wizard with
// native interaction states. Defined in components/LocalesFlow.jsx.
return ;
}
function VisPagosMasivos() {
// Placeholder dispersión-masiva flow in the same visual language as
// LocalesFlow. Defined in components/MasivosFlow.jsx (swap when the
// real choreography is defined).
return ;
}
function VisCuentasEmpresariales() {
// Faithful HTML/CSS recreation of the real Meefi web app navigation
// (Dashboard → Cuentas → Detalle). Defined in components/CuentasFlow.jsx.
return ;
}
function VisTesoreria() {
// Faithful HTML/CSS recreation of the Tesorería accounts table with a
// focus spotlight that walks account-by-account. See TesoreriaFlow.jsx.
return ;
}
function VisMultidivisa() {
// Carousel of the real "Balance en Meefi" dashboard card, rotating the
// same window across MXN · USD · EUR · GBP · CNY. See MultidivisaFlow.jsx.
return ;
}
function VisGlobeEarth() {
// Realistic orthographic Earth (SPEI-style), zoomed to bleed past the
// window and spinning faster. See FeatureGlobe.jsx.
return ;
}
// ============================================================
// VIS 3 — Growing bar chart / cobranza
// ============================================================
function VisCobranza() {
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick((t) => t + 1), 1700);
return () => clearInterval(id);
}, []);
const seed = [42, 68, 55, 82, 71, 95];
const heights = seed.map((s, i) => 30 + ((s + tick * 4) % 70));
return (
);
}
// ============================================================
// Features section — Mercury-style accordion list (left) +
// big live visualisation (right). Auto-rotates every ~6s; user
// can click any row to take over (auto-resumes after 12s idle).
// ============================================================
const FEATURES = [
{ Vis: VisGlobeEarth, title: "Pagos globales",
description: <>Envía a +70 países con liquidación el mismo día. Sin spread oculto.,
badge: "Internacional" },
{ Vis: VisPagosLocales, title: "Pagos locales", dur: 12000,
description: "Envía un SPEI a cualquier banco de México con confirmación en segundos. Sin filas, sin sucursales, sin horarios.",
badge: "SPEI" },
{ Vis: VisPagosMasivos, title: "Dispersión masiva", dur: 12000,
description: "Dispersión masiva: paga a decenas de proveedores o tu nómina completa en un solo movimiento, sin cargar uno por uno.",
badge: "Dispersión" },
{ Vis: VisCuentasEmpresariales, title: "Cuentas empresariales", dur: 11000,
description: "Cuenta CLABE en MXN para tu PyME, sin sucursales ni trámites presenciales.",
badge: "CLABE" },
{ Vis: VisTesoreria, title: "Tesorería", dur: 6200,
description: "Visibilidad de saldos, flujos y posiciones en tiempo real. Toma decisiones con información, no con suposiciones.",
badge: "Tesorería" },
{ Vis: VisMultidivisa, title: "Multidivisa", dur: 9600,
description: "Opera en USD, MXN, EUR, GBP y CNY desde la misma plataforma.",
badge: "FX" },
];
const ROTATE_MS = 5500; // default auto-rotate (per-feature `dur` overrides)
const featDur = (i) => FEATURES[i].dur || ROTATE_MS;
function FeaturesAccordion() {
const gridRef = useRef(null);
const [active, setActive] = useState(0);
const [inView, setInView] = useState(false);
// versions[i] increments each time feature i becomes active —
// bumping the key on its remounts the component, resetting
// its internal animation timer from zero.
const [versions, setVersions] = useState(() => FEATURES.map(() => 0));
// Bump version of whichever feature just became active
useEffect(() => {
if (active < 0) return;
setVersions((v) => {
const next = v.slice();
next[active] = next[active] + 1;
return next;
});
}, [active]);
// Always (re)start from the FIRST option whenever the section
// enters the viewport.
useEffect(() => {
const el = gridRef.current;
if (!el) return;
const io = new IntersectionObserver(
([e]) => {
if (e.isIntersecting) {
setActive(0);
setVersions((v) => { const n = v.slice(); n[0] = n[0] + 1; return n; });
setInView(true);
} else {
setInView(false);
}
},
{ threshold: 0.25 }
);
io.observe(el);
return () => io.disconnect();
}, []);
// Auto-advance — the timer resets on every `active` change, so
// picking a row just continues the flow starting from that option.
useEffect(() => {
if (!inView || active < 0) return;
const id = setTimeout(() => {
setActive((i) => (i + 1) % FEATURES.length);
}, featDur(active));
return () => clearTimeout(id);
}, [active, inView]);
// Clicking a row selects it and keeps the auto-flow running from there.
const pick = (i) => {
setActive(i);
};
return (
{/* LEFT — FAQ-style accordion list (centered within the full blue band) */}
