// Animated WhatsApp chat demo showing AI qualifying a lead const ChatDemo = () => { const h = L('hero'); const c = h.chat; const script = React.useMemo(() => ([ { who:'lead', text:c[0], delay: 900 }, { who:'typing', delay: 800 }, { who:'ai', text:c[1], delay: 1400 }, { who:'lead', text:c[2], delay: 1100 }, { who:'typing', delay: 1000 }, { who:'ai', text:c[3], delay: 1500 }, { who:'lead', text:c[4], delay: 1000 }, { who:'system', text:c[5], delay: 900 }, ]), []); const [step, setStep] = React.useState(0); const scrollRef = React.useRef(null); React.useEffect(() => { if (step >= script.length) { const r = setTimeout(() => setStep(0), 4500); return () => clearTimeout(r); } const t = setTimeout(() => setStep(s => s + 1), script[step].delay); return () => clearTimeout(t); }, [step, script]); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [step]); const visible = script.slice(0, step); return (
{/* Phone status bar */}
9:41 5G
{/* Header */}
LU
{h.chatHeaderName}
{h.chatOnline} {h.chatReplying}
{/* Messages */}
{visible.map((m, i) => { if (m.who === 'typing') return ; if (m.who === 'system') return (
✓ {m.text}
); const isAI = m.who === 'ai'; return (
{m.text}
{isAI ? '9:42 ✓✓' : '9:42'}
); })}
{/* footer dock */}
{h.chatInput}
); }; const TypingBubble = () => (
{[0,1,2].map(i => ( ))}
); // Renders text with |...| segments as italic serif accents in green const RichLine = ({ parts }) => ( <> {parts.map((p, i) => { if (typeof p === 'string' && p.startsWith('|') && p.endsWith('|')) { const inner = p.slice(1, -1); if (inner === '—') return — ; return {inner}; } return {p}; })} ); const parseInline = (s) => { // splits "abc |X| def |Y|" into ['abc ','|X|',' def ','|Y|'] const out = []; let buf = '', i = 0; while (i < s.length) { if (s[i] === '|') { if (buf) { out.push(buf); buf = ''; } const end = s.indexOf('|', i + 1); if (end === -1) { buf += s[i]; i++; continue; } out.push(s.slice(i, end + 1)); i = end + 1; } else { buf += s[i]; i++; } } if (buf) out.push(buf); return out; }; const Hero = () => { const h = L('hero'); const v = { h1: h.h1, sub: h.sub }; return (
{/* glow blob */}

{v.h1.map((line, i) => ( {i < v.h1.length - 1 &&
} ))}

{parseInline(v.sub).map((p, i) => { if (typeof p === 'string' && p.startsWith('|') && p.endsWith('|')) { return {p.slice(1,-1)}; } return {p}; })}

{['#0ea3ff','#ff7a3d','#b56dff','#00e47a','#ffb547'].map((c,i) => (
))}
{[1,2,3,4,5].map(i => )}
4.9/5 {h.rating}
); }; window.Hero = Hero;