// ── BiviaSystemMockup — Replaces bivia-pillars in the bivia-grid right column function BiviaSystemMockup() { const wrapperRef = useRef(null); const bgRef = useRef(null); const fgRef = useRef(null); const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' && window.innerWidth <= 768 ); useEffect(() => { const check = () => setIsMobile(window.innerWidth <= 768); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); useEffect(() => { const bg = bgRef.current; const fg = fgRef.current; const wrapper = wrapperRef.current; if (!bg || !fg || !wrapper) return; // Fade in on scroll into view gsap.fromTo(wrapper, { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 0.9, ease: 'power3.out', scrollTrigger: { trigger: wrapper, start: 'top 88%', toggleActions: 'play none none none' } } ); // Parallax: background slides up, foreground slides down gsap.to(bg, { y: -30, ease: 'none', scrollTrigger: { trigger: wrapper, start: 'top bottom', end: 'bottom top', scrub: 1.2 } }); gsap.to(fg, { y: 26, ease: 'none', scrollTrigger: { trigger: wrapper, start: 'top bottom', end: 'bottom top', scrub: 1.2 } }); }, []); const h = isMobile ? 360 : 490; return (

{/* ── Background card — dark, system-flow diagram ──────────────── */}

Ecosistema digital

{/* ── Foreground card — glassy dashboard ───────────────────────── */}

{/* Header */}

Sistema activo ● En línea

{/* Integration rows */} {['CRM integrado', 'Pipelines de datos', 'Flujos automáticos', 'Dashboard BI'].map((item, i, arr) => (

{item} ● activo

))} {/* Uptime bar */}

Uptime 99.8%

); }