/* global React */
const { useState: useStateP, useEffect: useEffectP } = React;
// All content lives in elementa-content.jsx and is read via the t prop
// passed down from .
// ───────────────────────────────────────────────────────────────────
function ElementaPanels({ openId, onClose, onOpenPresupuesto, t }) {
const s = t.soluciones, pr = t.proceso, b = t.beneficios, f = t.faq, pl = t.planes, bg = t.blog;
return (
<>
);
}
// ───────────────────────────────────────────────────────────────────
// Generic panel shell
function Panel({ open, onClose, title, subtitle, id, children }) {
// `mounted` = the panel exists in the DOM. `visible` = it's animated in.
// Splitting them lets the browser paint the panel at opacity 0 / blur 0
// before we flip to the final state on the next frame — avoids the flash.
const [mounted, setMounted] = useStateP(false);
const [visible, setVisible] = useStateP(false);
useEffectP(() => {
if (open) {
setMounted(true);
// Two RAFs: one to ensure initial styles paint, one to trigger transition.
const r1 = requestAnimationFrame(() => {
const r2 = requestAnimationFrame(() => setVisible(true));
Panel._raf = r2;
});
return () => {
cancelAnimationFrame(r1);
if (Panel._raf) cancelAnimationFrame(Panel._raf);
};
} else {
setVisible(false);
// Wait for the exit transition before unmounting.
const t = setTimeout(() => setMounted(false), 380);
return () => clearTimeout(t);
}
}, [open]);
if (!open && !mounted) return null;
const shown = open && visible;
return (
{/* Backdrop — blur animates in with opacity so it doesn't pop */}
{/* Panel container */}
{/* Header */}
●Elementa·{title}
{title}
{subtitle}
{/* Body */}
{children}
);
}
// ───────────────────────────────────────────────────────────────────
// SOLUCIONES
function SolucionesContent({ onCta, t }) {
const sec = t.soluciones;
return (
{sec.lead}
{sec.items.map((p) => )}
{/* ¿No es lo que buscás? → Contactanos */}
{sec.askNote}
{/* Probá Elementa, 15 días gratis */}
{sec.trialTitle}
{sec.trialBody}
);
}
function SolutionCard({ p, sec }) {
const [hover, setHover] = useStateP(false);
const featured = p.featured;
return (