/* eslint-disable */
const { Icon, Tool, WhinkLogo, Reveal } = window.Whink;
const { useState, useEffect, useRef } = React;
/* ============== PROCESS ============== */
function ProcessSection() {
const steps = [
['01', 'Reunión inicial', 'Entendemos tu negocio en profundidad, identificamos los procesos a automatizar y definimos exactamente qué resolverá tu agente.'],
['02', 'Diseño y configuración', 'Diseñamos y configuramos tu agente IA junto con todo el sistema, integrándolo a tus canales, herramientas y bases de conocimiento.'],
['03', 'Iteración y ajustes', 'Probamos la primera versión, corregimos errores, refinamos respuestas y ponemos todo a punto antes del despliegue final.'],
['04', 'Implementación y seguimiento', 'Cuando todo funciona perfectamente, implementamos el agente de forma definitiva y hacemos seguimiento continuo de su rendimiento.'],
];
return (
Cómo trabajamos
De la idea al agente funcionando, en simples pasos
Nos encargamos de todo el proceso y trabajo técnico. Solo necesitamos tu conocimiento del negocio y tu validación en cada etapa.
{steps.map(([n, t, d], i) => (
{n}
{t}
{d}
))}
);
}
/* ============== IN ACTION — phone with animated chat ============== */
function PhoneChat() {
const SCRIPT = [
{ who: 'user', text: 'Hola, quería saber si tienen turno disponible para esta semana' },
{ who: 'bot', text: '¡Hola! Sí, tengo disponibilidad. ¿Preferís un día específico?' },
{ who: 'user', text: 'El jueves por la tarde estaría bien' },
{ who: 'bot', text: 'Perfecto. Para el jueves tengo 15:30 hs o 17:00 hs. ¿Cuál te queda mejor?' },
{ who: 'user', text: '17 hs esta bien' },
{ who: 'bot', text: 'Listo, te agendé el turno el jueves a las 17:00 hs. Te envío un recordatorio el día anterior.' },
];
const [shown, setShown] = useState([]);
const [typing, setTyping] = useState(false);
const [started, setStarted] = useState(false);
const phoneRef = useRef(null);
const indexRef = useRef(0);
const mountedRef = useRef(true);
useEffect(() => {
const el = phoneRef.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setStarted(true); observer.disconnect(); } },
{ threshold: 0.3 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
useEffect(() => {
if (!started) return;
mountedRef.current = true;
let timers = [];
const next = () => {
if (!mountedRef.current) return;
const i = indexRef.current;
if (i >= SCRIPT.length) return;
const msg = SCRIPT[i];
const showDelay = msg.who === 'user' ? 600 : 0;
timers.push(setTimeout(() => {
if (msg.who === 'bot') setTyping(true);
timers.push(setTimeout(() => {
if (!mountedRef.current) return;
setTyping(false);
setShown(s => [...s, msg]);
indexRef.current = i + 1;
timers.push(setTimeout(next, msg.who === 'bot' ? 1100 : 800));
}, msg.who === 'bot' ? 1300 : 0));
}, showDelay));
};
timers.push(setTimeout(next, 800));
return () => { mountedRef.current = false; timers.forEach(clearTimeout); };
}, [started]);
return (
9:41
Martín Díaz
{shown.map((m, i) => (
{m.text}
))}
{typing && (
)}
Escribir mensaje…
);
}
function InActionSection() {
const bullets = [
['Comprende la intención', 'Detecta que el cliente quiere reservar un turno, no solo consultar.'],
['Consulta tu agenda en vivo', 'Lee disponibilidad real desde Google Calendar o la agenda que utilices.'],
['Confirma y agenda', 'Reserva el turno y programa el recordatorio sin intervención humana.'],
];
return (
En acción
Mirá cómo trabaja un Agente IA en una conversación real
Razona, decide y ejecuta
El agente no solo responde: conversa e interpreta, entiende la intención, consulta tu agenda y reserva el turno, todo en un mismo flujo natural.