// hero-demo.jsx — 3-surface agent demo (Otis · Ren · Dax) const { useState, useEffect, useRef, useCallback } = React; const ROTATION_MS = 11000; const SURFACES = [ { id: 'teams', num: '01', agent: 'Otis', role: 'Documents · AR', label: 'Otis · Teams', platform: 'Microsoft Teams', platformColor: '#5B5FC7', glowColor: 'rgba(91, 95, 199, 0.20)', type: 'desktop', highlight: true, timeline: [ { delay: 500, type: 'agent', name: 'Otis', msg: 'New POD in.\nPRO# 4421 · Summit Industrial\nSigned: J. Martinez · 11:42 AM\nApprove to post to TruckMate?' }, { delay: 3200, type: 'user', name: 'D. Patel', msg: 'Approve' }, { delay: 4400, type: 'typing' }, { delay: 5800, type: 'agent', name: 'Otis', msg: 'Posted to AR. PRO# 4421 closed.\nInvoice ready.' }, ], }, { id: 'email', num: '02', agent: 'Dax', role: 'Customer Service · Intake', label: 'Dax · Email', platform: 'Email', platformColor: '#4A8FF5', glowColor: 'rgba(74, 143, 245, 0.18)', type: 'desktop', timeline: [ { delay: 400, type: 'email-in', from: 'shipping@apexlogistics.com', name: 'Apex Logistics', subject: 'LTL quote request — Chicago, IL → Atlanta, GA' }, { delay: 2000, type: 'typing' }, { delay: 3600, type: 'quote-card', data: { total: '$1,847.00', lane: 'Chicago, IL 60607 → Atlanta, GA 30318', weight: '8 skids · 2,400 lbs', cls: 'Class 85 · NMFC 156600', transit: '2 business days · pickup Tue May 6', validity: 'Valid 7 days', ref: 'Q-0502-4421', breakdown: [ ['Linehaul', '$1,412.00'], ['Fuel surcharge (28.4%)', '$401.00'], ['Liftgate at delivery', '$95.00'], ['Discount (Apex tier)', '−$61.00'], ], } }, { delay: 7200, type: 'user-email', name: 'Apex Logistics', msg: 'Looks good — please tender. PO# 88421. BOL to follow.' }, { delay: 8600, type: 'typing' }, { delay: 10000, type: 'agent-email', name: 'Dax', msg: 'Tendered in TruckMate. PRO# 4421-CHI · Pickup Tue 5/6 · 8a–12p window. BOL acknowledged on receipt.' }, ], }, { id: 'slack', num: '03', agent: 'Mira', role: 'AR · Accessorial Ops', label: 'Mira · Slack', platform: 'Slack', platformColor: '#611F69', glowColor: 'rgba(97, 31, 105, 0.18)', type: 'desktop', timeline: [ { delay: 500, type: 'agent', name: 'Mira', msg: 'Detention filed.\nPRO# 4408 · 3h 34m on dock\nGate-in 09:14 → Gate-out 12:48\nPackage sent to ar@northgatedist.com.' }, { delay: 4000, type: 'user', name: 'D. Nguyen', msg: 'Response window?' }, { delay: 5200, type: 'typing' }, { delay: 6600, type: 'agent', name: 'Mira', msg: '14 days. I’ll chase if no reply by May 15.' }, ], }, { id: 'sms', num: '04', agent: 'Ren', role: 'Scheduling · Dock Ops', label: 'Ren · SMS', platform: 'SMS', platformColor: '#30C15A', glowColor: 'rgba(48, 193, 90, 0.18)', type: 'phone', timeline: [ { delay: 500, type: 'user-sms', msg: 'Need door 7, Heartland Freight, Thu 2pm' }, { delay: 1700, type: 'typing' }, { delay: 3000, type: 'agent-sms', msg: 'Booked.\nDoor 7 · Thu 2:00–3:30 PM\nPRO# HF-88421\nOpenDock updated.' }, { delay: 5800, type: 'user-sms', msg: 'Send dispatch the confirmation' }, { delay: 6800, type: 'typing' }, { delay: 8000, type: 'agent-sms', msg: 'Sent to dispatch@heartlandfreight.com ✓' }, ], }, ]; // ── Typing Indicator ────────────────────────────────────────────── function TypingBubble({ color = '#999', dark = false }) { const bg = dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.07)'; const dotStyle = { width: 6, height: 6, borderRadius: '50%', background: color, display: 'inline-block', }; return (
); } // ── SMS Mockup ──────────────────────────────────────────────────── function SMSMockup({ messages, showTyping, agent = 'Ren' }) { const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, showTyping]); return (
{/* iOS Header */}
{agent[0]}
{agent}
Echo agent · SMS
{/* Messages */}
Today 11:38 AM
{messages.map((m, i) => { const isUser = m.type === 'user-sms'; return (
{m.msg}
); })} {showTyping && (
)}
{/* Input */}
iMessage
); } // ── Teams Mockup ────────────────────────────────────────────────── // Authentic Microsoft Teams chrome: light theme, left rail, channel list, posts. function TeamsMockup({ messages, showTyping, agent = 'Otis', channelName = 'ar-team', userName = 'D. Patel', userInitials = 'DP' }) { const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, showTyping]); const TEAMS_PURPLE = '#5B5FC7'; const TEAMS_PURPLE_LIGHT = '#E8EBFA'; const railIcons = [ { label: 'Activity', icon: }, { label: 'Chat', icon: }, { label: 'Teams', icon: , active: true }, { label: 'Calendar', icon: }, ]; return (
{/* Left app rail (Teams icons) */}
{railIcons.map(r => (
{r.active &&
} {r.icon}
))}
{/* Channel sidebar */}
Teams
EC
Echo Carrier Ops
{[ { name: 'general' }, { name: 'dispatch' }, { name: channelName, active: true, badge: 1 }, { name: 'safety' }, ].map((c) => (
{c.name} {c.badge && {c.badge}}
))}
{/* Main channel pane */}
{channelName} · Posts
Otis · online
{messages.map((m, i) => { const isAgent = m.type === 'agent'; const initials = isAgent ? agent[0] : userInitials; return (
{initials}
{m.name} {isAgent && BOT} 11:{42 + i} AM
{isAgent ? (
{m.msg}
) : (
{m.msg}
)}
); })} {showTyping && (
{agent[0]}
)}
Type a new message
); } // ── Email Mockup (Microsoft Outlook) ───────────────────────────── function EmailMockup({ messages, showTyping }) { const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, showTyping]); const emailIn = messages.find(m => m.type === 'email-in'); const thread = messages.filter(m => m.type !== 'email-in'); const OUTLOOK_BLUE = '#0078D4'; const OUTLOOK_BLUE_DARK = '#106EBE'; const OUTLOOK_BG = '#FAF9F8'; const OUTLOOK_BORDER = '#EDEBE9'; const TEXT_PRIMARY = '#201F1E'; const TEXT_SECONDARY = '#605E5C'; // Folders w/ icons (Outlook nav rail) const folders = [ { name: 'Inbox', count: 3, active: true, icon: }, { name: 'Sent Items', icon: }, { name: 'Drafts', icon: }, { name: 'Archive', icon: }, ]; const inboxList = [ { from: 'Apex Logistics', subject: emailIn?.subject || 'Rate quote — CHI to ATL', preview: 'Hi — can you provide a rate quote?', time: '11:42 AM', unread: true, active: true }, { from: 'Northgate Distribution', subject: 'PRO# 4408 — detention notice', preview: 'Driver was held 3h 34m at the dock…', time: '10:18 AM' }, { from: 'Heartland Freight', subject: 'Confirming Thursday dock booking', preview: 'Dispatch confirms Door 7, 2:00 PM…', time: '9:04 AM' }, ]; return (
{/* Outlook header bar */}
{/* Outlook waffle + logo */}
Outlook
{/* Search */}
Search
JC
{/* 3-pane body */}
{/* Left: folder rail */}
{/* New mail button */}
New mail
{/* Folders */}
Favorites
{folders.map(f => (
{f.icon} {f.name} {f.count && {f.count}}
))}
{/* Bottom: Dax agent presence */}
D
Dax · Agent
● Online
{/* Middle: message list */}
Inbox By date ▾
{inboxList.map((it, i) => (
{it.from} {it.time}
{it.subject}
{it.preview}
))}
{/* Right: reading pane */}
{/* Subject + actions */}
{emailIn?.subject || 'Rate quote — CHI to ATL'}
{['Reply', 'Reply all', 'Forward', 'Archive', 'Delete'].map(a => ( {a} ))}
{/* Thread */}
{emailIn && (
A
Apex Logistics <{emailIn.from}>
11:42 AM
Hi team,

Need a rate on the below. Pickup ready Tue 5/6.

Origin: Chicago, IL 60607
Dest: Atlanta, GA 30318
8 skids · ~2,400 lbs · Class 85
Liftgate at delivery (residential receiver)

Thanks,
Sarah · Apex Shipping
)} {thread.map((m, i) => { if (m.type === 'quote-card') return (
LTL RATE QUOTE DAX · auto · TruckMate
{/* Lane summary */}
{[['Lane', m.data.lane], ['Load', m.data.weight], ['Class', m.data.cls], ['Transit', m.data.transit]].map(([k, v]) => ( {k} {v} ))}
{/* Charge breakdown */}
{m.data.breakdown.map(([label, amt]) => (
{label} {amt}
))}
{/* Total */}
Total {m.data.total}
{/* Footer chips */}
{m.data.validity} Ref {m.data.ref}
); const isAgent = m.type === 'agent-email'; return (
{isAgent ? 'D' : 'A'}
{m.name} {isAgent && AGENT}
11:{45 + i} AM
{m.msg}
); })} {showTyping && (
D
)}
{/* Reply box */}
Reply or forward Send ▸
); } // ── Slack Mockup ────────────────────────────────────────────────── function SlackMockup({ messages, showTyping }) { const scrollRef = useRef(null); useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, showTyping]); return (
{/* Workspace sidebar */}
Maritime Ontario
J. Carter
Channels
{[ { name: 'general' }, { name: 'dispatch' }, { name: 'ar-ops', active: true }, { name: 'driver-pool' }, ].map((c) => (
#{c.name}
))}
Mira — Agent
Active
{/* Channel */}
#ar-ops
Detention & accessorial — Mira’s channel
{messages.map((m, i) => { const isAgent = m.type === 'agent'; return (
{isAgent ? 'M' : (m.name?.[0] || '?')}
{m.name} {isAgent && APP} 10:{14 + i * 4} AM
{m.msg}
); })} {showTyping && (
M
)}
Message #ar-ops
); } // ── Device Frames ───────────────────────────────────────────────── function PhoneFrame({ children }) { return (
{/* Dynamic island */}
{/* Status bar */}
9:41
{children}
{/* Home indicator */}
); } function DesktopWindow({ platformColor, children }) { return (
{['#FF5F57','#FFBD2E','#28C840'].map((c, i) => (
))}
Echo · Agents
{children}
); } // ── Main HeroDemo ───────────────────────────────────────────────── function HeroDemo({ activeIdx: controlledIdx, onSelect, hideTabs = false } = {}) { const [internalIdx, setInternalIdx] = useState(0); const isControlled = typeof controlledIdx === 'number'; const activeIdx = isControlled ? controlledIdx : internalIdx; const setActiveIdx = (i) => { if (isControlled) onSelect?.(i); else setInternalIdx(i); }; const [displayedMessages, setDisplayedMessages] = useState([]); const [showTyping, setShowTyping] = useState(false); const [progress, setProgress] = useState(0); const [fading, setFading] = useState(false); const timeoutsRef = useRef([]); const rafRef = useRef(null); const startRef = useRef(null); const autoRef = useRef(null); const surface = SURFACES[activeIdx]; const clearAll = useCallback(() => { timeoutsRef.current.forEach(clearTimeout); timeoutsRef.current = []; if (rafRef.current) cancelAnimationFrame(rafRef.current); if (autoRef.current) clearTimeout(autoRef.current); }, []); const startProgress = useCallback(() => { startRef.current = performance.now(); const tick = () => { const pct = Math.min(((performance.now() - startRef.current) / ROTATION_MS) * 100, 100); setProgress(pct); if (pct < 100) rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); }, []); const playTimeline = useCallback((surf) => { surf.timeline.forEach((item) => { const t = setTimeout(() => { if (item.type === 'typing') { setShowTyping(true); } else { setShowTyping(false); setDisplayedMessages(prev => [...prev, item]); } }, item.delay); timeoutsRef.current.push(t); }); }, []); const goTo = useCallback((idx) => { clearAll(); setFading(true); setTimeout(() => { setActiveIdx(idx); setDisplayedMessages([]); setShowTyping(false); setProgress(0); setFading(false); playTimeline(SURFACES[idx]); startProgress(); // Only auto-advance when the demo is uncontrolled (standalone usage) if (!isControlled) { autoRef.current = setTimeout(() => goTo((idx + 1) % SURFACES.length), ROTATION_MS); } }, 300); }, [clearAll, playTimeline, startProgress, isControlled]); // First-mount initialization useEffect(() => { playTimeline(SURFACES[activeIdx]); startProgress(); if (!isControlled) { autoRef.current = setTimeout(() => goTo((activeIdx + 1) % SURFACES.length), ROTATION_MS); } return clearAll; }, []); // React to external selection changes (controlled mode) useEffect(() => { if (!isControlled) return; // Skip the very first render (handled by the init effect above) clearAll(); setFading(true); const t = setTimeout(() => { setDisplayedMessages([]); setShowTyping(false); setProgress(0); setFading(false); playTimeline(SURFACES[controlledIdx]); startProgress(); }, 300); return () => clearTimeout(t); }, [controlledIdx]); const renderContent = () => { const props = { messages: displayedMessages, showTyping }; switch (surface.id) { case 'sms': return ; case 'teams': return ; case 'email': return ; case 'slack': return ; default: return null; } }; const isPhone = surface.type === 'phone'; return (
{/* Surface tabs (hidden in controlled mode — agent cards replace them) */} {!hideTabs && (
{SURFACES.map((s, i) => { const active = i === activeIdx; return ( ); })}
)} {/* Device */}
{/* Glow behind device */}
{isPhone ? {renderContent()} : {renderContent()} }
{/* Progress dots */}
{SURFACES.map((s, i) => { const active = i === activeIdx; return ( ); })}
); } Object.assign(window, { HeroDemo, ECHO_SURFACES: SURFACES });