/* HeroDemoV7 — subset reducido del prototipo V7 para vivir DENTRO del hero post-loader de newgalaxia.com (Opción B). Porta SOLO el flujo Inmobiliaria > Audio · 2 propiedades: - audio del cliente con transcripción inline - 2 chips de capacidad bajo el primer mensaje del bot - Centro Operativo del Agente (5 slots) iluminando en vivo - email compacto final (5 campos · CTA) Sin selectores, sin scrubber, sin hitos, sin paneles A/B alternativos. Tamaño total: 1 archivo JSX ≤ 600 líneas. Comparte fonts/colors/tokens con la landing (Geist, Geist Mono, Instrument Serif, cyan, violet, ink, bg). */ const { useEffect: useEffectV7, useRef: useRefV7, useState: useStateV7, useMemo: useMemoV7 } = React; /* ─── Timeline del flujo audio_principal (extraído de V7) ─────────────── */ const HERO_V7_DURATION = 18800; const HERO_V7_TIMELINE = [ { at: 400, row:'r1', k:'user_audio', dur:'0:14', tm:'10:23', transcript:'Hola, vi algunas propiedades en su página web que podrían interesarme. Me interesa la de Ramallo y Av. Italia y la de 8 de Octubre y Comercio.' }, { at: 1500, row:'r1', k:'capability', slot:'entendio', label:'Entendió audio · CRM', text:'Entendió el audio y se conectó al CRM para verificar disponibilidad' }, { at: 3600, row:'r3', k:'bot_typing' }, { at: 4800, row:'r3', k:'bot_msg', tm:'10:23', text:'¡Hola! La de 8 de Octubre y Comercio ya no está disponible, pero la de Ramallo y Av. Italia sigue disponible. ¿Querés coordinar una visita?' }, { at: 5500, row:'r3', k:'capability', slot:'consulto', label:'Consultó CRM', text:'Se conectó al CRM y respondió ambas preguntas de disponibilidad' }, { at: 6200, row:'r3', k:'capability', slot:'detecto', label:'Detectó no disponible', text:'Detectó una propiedad no disponible y ofreció la alternativa disponible' }, { at: 7000, row:'r4', k:'user_msg', tm:'10:24', text:'Sí, me interesa verla.' }, { at: 7900, row:'r4', k:'capability', slot:'detecto', label:'Detectó intención de visita', text:'Detectó intención de visita' }, { at: 9000, row:'r5', k:'bot_typing' }, { at: 10000, row:'r5', k:'bot_msg', tm:'10:24', text:'Perfecto. ¿Qué día y franja horaria te quedaría cómoda para visitarla?' }, { at: 10800, row:'r5', k:'capability', slot:'pidio', label:'Pidió datos clave', text:'Pidió datos para aumentar las posibilidades de contacto exitoso' }, { at: 12100, row:'r6', k:'user_msg', tm:'10:25', text:'Podría ser mañana de tarde.' }, { at: 12900, row:'r6', k:'capability', slot:'pidio', label:'Extrajo preferencia', text:'Extrajo preferencia de día y franja horaria' }, { at: 14100, row:'r7', k:'bot_msg', tm:'10:25', text:'Genial. Te contactamos para coordinar la visita por Ramallo y Av. Italia.' }, { at: 14900, row:'r7', k:'capability', slot:'aviso', tone:'violet', label:'Generó aviso al equipo', text:'Cerró con expectativa clara y generó aviso interno para una persona del equipo' }, { at: 15800, k:'email_notice', label:'Nuevo aviso interno · coordinar visita' }, { at: 17600, k:'email' }, ]; const HERO_V7_EMAIL = { from: 'Agente · newGalaxIA', to: 'Equipo · inmobiliaria', subject: 'Lead solicita visita · Ramallo y Av. Italia', meta: 'hace 1 segundo · para el equipo', body: 'Cliente consultó por audio por dos propiedades…', labels: [{ k:'LEAD CON VISITA', tone:'ok' }], fields: [ ['Disponible', 'Ramallo y Av. Italia'], ['No disponible', '8 de Octubre y Comercio'], ['Preferencia', 'Mañana de tarde'], ['Próximo paso', 'Coordinar visita'], ['Más info', 'Abrir conversación en WhatsApp'], ], cta: 'Abrir conversación en WhatsApp', }; /* ─── Centro Operativo · 5 slots fijos ─────────────────────────────────── */ const HERO_V7_SLOTS = [ { k:'entendio', label:'Entendió', ic:'👁' }, { k:'consulto', label:'Consultó', ic:'🔎' }, { k:'detecto', label:'Detectó / Decidió', ic:'⚡' }, { k:'pidio', label:'Pidió / Coordinó', ic:'📅' }, { k:'aviso', label:'Generó / Avisó', ic:'✉' }, ]; /* ─── Subcomponentes WhatsApp-style ────────────────────────────────────── */ function HV7Bubble({ side, text, tm }) { const isUser = side === 'in'; return (
{text}
{tm}{isUser ? '' : ' ✓✓'}
); } function HV7Audio({ dur, tm, transcript }) { const bars = [4,8,6,10,12,8,5,11,9,6,7,12,8,4,9,11,6,5,8,4,7,9,5]; return (
▶
{bars.map((h, i) => )}
{dur} {tm}
{transcript &&
{transcript}
} ); } function HV7Typing() { return (
); } function HV7Chip({ c }) { return ( {c.label} ); } /* ─── Centro Operativo (panel derecho) ──────────────────────────────────── */ function HV7OpsPanel({ slotsValues, activeSlot, showEmailNotice, showEmail }) { const headerMeta = showEmail ? 'resultado listo' : showEmailNotice ? 'preparando aviso' : 'en proceso'; return (
Centro operativo del agente {headerMeta}
{HERO_V7_SLOTS.map(slot => { const cap = slotsValues[slot.k]; const state = !cap ? 'idle' : (slot.k === activeSlot ? 'active' : 'done'); return (
{slot.label} {state === 'active' && activo }
{cap ? cap.text : 'pendiente'}
); })}
); } /* ─── Email compacto (aparece al final del flujo) ──────────────────────── */ function HV7Email({ email }) { return (
NG
{email.from}
{email.meta}
{email.labels.map((l, i) => {l.k} )}
{email.subject}
Para: {email.to}
{email.body}
{email.fields.map(([k, v], i) =>
{k} {v}
)}
); } /* ─── Email pre-card (notice mientras se genera el correo) ─────────────── */ function HV7EmailNotice({ label }) { return (
✉
Correo nuevo
{label || 'Generando aviso interno…'}
); } /* ─── Componente principal ─────────────────────────────────────────────── */ function HeroDemoV7() { const reduced = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const [t, setT] = useStateV7(reduced ? HERO_V7_DURATION : 0); const rafRef = useRefV7(0); const startRef = useRefV7(0); const wrapRef = useRefV7(null); const [paused, setPaused] = useStateV7(false); // RAF loop con auto-loop (pausa breve al final y reinicia). useEffectV7(() => { if (reduced) return; let cancelled = false; function loop(ts) { if (cancelled) return; if (!startRef.current) startRef.current = ts; const elapsed = ts - startRef.current; const LOOP_TAIL = 3500; const total = HERO_V7_DURATION + LOOP_TAIL; const local = elapsed % total; if (!paused) setT(Math.min(local, HERO_V7_DURATION)); rafRef.current = requestAnimationFrame(loop); } rafRef.current = requestAnimationFrame(loop); return () => { cancelled = true; cancelAnimationFrame(rafRef.current); startRef.current = 0; }; }, [reduced, paused]); // Pausar cuando sale del viewport para no comer CPU. useEffectV7(() => { if (!wrapRef.current || typeof IntersectionObserver === 'undefined') return; const io = new IntersectionObserver( (entries) => setPaused(!entries[0].isIntersecting), { threshold: 0.05 } ); io.observe(wrapRef.current); return () => io.disconnect(); }, []); // Derivados a partir de t. const visible = useMemoV7(() => HERO_V7_TIMELINE.filter(e => t >= e.at), [t]); const visibleCaps = visible.filter(e => e.k === 'capability'); const activeCap = visibleCaps[visibleCaps.length - 1]; const slotsValues = {}; for (const c of visibleCaps) slotsValues[c.slot] = c; const emailNoticeEv = HERO_V7_TIMELINE.find(e => e.k === 'email_notice'); const emailEv = HERO_V7_TIMELINE.find(e => e.k === 'email'); const showEmailNotice = emailNoticeEv && t >= emailNoticeEv.at && (!emailEv || t < emailEv.at); const showEmail = emailEv && t >= emailEv.at; // Filas de chat (excluyo capabilities — esos son chips bajo cada fila). const rows = useMemoV7(() => { const byRow = new Map(); const order = []; for (const ev of HERO_V7_TIMELINE) { if (!ev.row) continue; if (!byRow.has(ev.row)) { byRow.set(ev.row, { rowId: ev.row, events: [] }); order.push(ev.row); } byRow.get(ev.row).events.push(ev); } return order.map(id => byRow.get(id)); }, []); return (
{/* ─── Columna izquierda: WhatsApp chat + email final ─── */}
{/* Mini header tipo contact */}
GP
Galaxia Propiedades
en línea · demo en vivo
online
{/* Cuerpo del chat o email final */}
{showEmail ? (
) : showEmailNotice ? (
) : (
{rows.map((row) => { const rowEvents = row.events.filter(e => t >= e.at); if (rowEvents.length === 0) return null; const rowCaps = row.events.filter(e => e.k === 'capability' && t >= e.at); return ( {rowEvents.map((ev, i) => { if (ev.k === 'user_msg') return ; if (ev.k === 'bot_msg') return ; if (ev.k === 'user_audio')return ; if (ev.k === 'bot_typing'){ const botMsg = row.events.find(e => e.k === 'bot_msg'); if (botMsg && t >= botMsg.at) return null; return ; } return null; })} {rowCaps.length > 0 &&
{rowCaps.slice(0, 2).map((c, i) => )}
} ); })}
)}
{/* ─── Columna derecha: Centro Operativo ─── */}
{/* Lo que resolvió / Por qué importa — versión compacta */}
Lo que resolvió

Entendió un audio del cliente, consultó el CRM, detectó una propiedad no disponible y dejó la visita lista para coordinar — sin que el equipo tipee.

Por qué importa

Tu equipo recibe consultas filtradas, con contexto y próximo paso claro — y solo aparece cuando hace falta una persona.

{/* Header narrativo + CTA arriba del demo (debajo del typewriter del hero) */}

Esto es lo que pasa detrás de un solo audio: el agente entiende, consulta tu CRM, decide, coordina y avisa al equipo — todo en menos de 20 segundos.

Reservar diagnóstico
); } /* Exponer en window (Babel-standalone deja los top-level como globales, pero hacemos explícito el contrato para que sections.jsx pueda invocar sin depender del orden de transpilación). */ Object.assign(window, { HeroDemoV7 });