/* Laive AI flagship — pinned horizontal product reel + live agent demos. */ const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React; const DSP = window.LaiveAIDesignSystem_fa5676; const Icon = window.FsIcon; const DEMO_HEADS = { engage: 'LAIVE ENGAGE — SDR AGENT', assist: 'LAIVE ASSIST — SUPPORT QUEUE', auto: 'AUTOMATION SUITE — WORKFLOW', }; /* ---------- Engage: live chat ---------- */ const ENGAGE_SCRIPT = [ { t: 'in', text: 'This looks interesting. Can you show me how it works?' }, { t: 'typing' }, { t: 'out', text: 'Of course. A couple quick questions so I can tailor the demo\u2014which CRM are you using, and does Tuesday at 10:00 work?' }, { t: 'in', text: 'We\u2019re on HubSpot. Tuesday is perfect.' }, { t: 'typing' }, { t: 'out', text: 'Done! I\u2019ve booked your demo and qualified your inquiry for the sales team.' }, { t: 'chip', text: 'MEETING BOOKED — TUE 10:00' }, { t: 'chip', text: 'CRM UPDATED — LEAD QUALIFIED' }, ]; const ENGAGE_DURS = [600, 1500, 950, 2000, 1400, 950, 2100, 1300, 900, 3600]; function EngageDemo({ active }) { const [count, setCount] = useStateP(0); useEffectP(() => { if (!active) return; if ((window.__fsMo ?? 1) === 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setCount(ENGAGE_SCRIPT.length); return; } const t = setTimeout(() => { setCount((c) => (c >= ENGAGE_SCRIPT.length ? 0 : c + 1)); }, ENGAGE_DURS[Math.min(count, ENGAGE_DURS.length - 1)]); return () => clearTimeout(t); }, [active, count]); const shown = ENGAGE_SCRIPT.slice(0, count); return (
{shown.map((m, i) => { if (m.t === 'typing') { if (i !== shown.length - 1) return null; return ; } if (m.t === 'chip') { return {m.text}; } return {m.text}; })}
); } /* ---------- Assist: ticket queue ---------- */ const ASSIST_TKTS = [ { id: 'TKT-4821', text: 'Where is my order?', seq: { 1: 'working', 2: 'resolved' } }, { id: 'TKT-4822', text: 'Duplicate charge — refund request', seq: { 2: 'working', 4: 'resolved' } }, { id: 'TKT-4823', text: 'Complex contract question', seq: { 3: 'working', 5: 'escalated' } }, ]; const STATUS_LABEL = { queued: 'QUEUED', working: 'RESOLVING', resolved: 'RESOLVED', escalated: 'TO HUMAN' }; function AssistDemo({ active }) { const [tick, setTick] = useStateP(0); useEffectP(() => { if (!active) return; if ((window.__fsMo ?? 1) === 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setTick(6); return; } const t = setTimeout(() => setTick((c) => (c >= 8 ? 0 : c + 1)), tick === 8 ? 3000 : 1150); return () => clearTimeout(t); }, [active, tick]); const statusOf = (tkt) => { let s = 'queued'; Object.keys(tkt.seq).forEach((k) => { if (tick >= Number(k)) s = tkt.seq[k]; }); return s; }; return (
{ASSIST_TKTS.map((tkt) => { const s = statusOf(tkt); return (
{tkt.text} {tkt.id}
{STATUS_LABEL[s]}
); })}

ESCALATIONS ARRIVE WITH FULL CONTEXT ATTACHED

); } /* ---------- Automation: BPMN before → during → after ---------- Three very distinct sub-slides on one card. Desktop: driven by the pinned reel's scroll (phase prop). Stacked/mobile: self-cycles; tabs jump. */ const AUTO_NODES = [ ['zap', 'TRIGGER'], ['database', 'EXTRACT'], ['plug', 'SYNC'], ['trending-up', 'REPORT'], ]; const AUTO_LOG = [ 'invoice_2381.pdf received', 'fields parsed — 0 errors', 'pushed to ERP + CRM', 'summary sent to finance', ]; /* Mini swimlane BPMN (viewBox 560×252, 3 lanes). mode 'before' = dim manual mess · mode 'during' = same flow + gold AI-opportunity scan overlays. */ const BP_W = 72, BP_H = 26; const BP_TASKS = [ { id: 'n1', x: 52, y: 37, label: 'DOWNLOAD PDF', hot: true }, { id: 'n2', x: 140, y: 37, label: 'RE-TYPE DATA', hot: true }, { id: 'n3', x: 272, y: 37, label: 'EMAIL TO OPS', hot: false }, { id: 'n4', x: 272, y: 117, label: 'MATCH TO PO', hot: true }, { id: 'n5', x: 408, y: 117, label: 'APPROVE & FWD', hot: false }, { id: 'n6', x: 356, y: 197, label: 'KEY INTO ERP', hot: true }, { id: 'n7', x: 452, y: 197, label: 'SEND SUMMARY', hot: true }, ]; const BP_EDGES = [ 'M37 50 H49', 'M124 50 H137', 'M212 50 H224', 'M253 50 H269', 'M308 63 V114', 'M344 130 H360', 'M389 130 H405', 'M444 143 V184 H392 V194', 'M428 210 H449', 'M524 210 H534', ]; const BP_LOOPS = [ { d: 'M240 37 V20 H176 V34', tag: ['MISSING INFO', 208, 15] }, { d: 'M376 117 V96 H176 V66', tag: ['REWORK', 292, 92] }, ]; const BP_DIAMONDS = [ { cx: 240, cy: 50, label: 'COMPLETE?' }, { cx: 376, cy: 130, label: 'PO MATCH?' }, ]; const BP_LANES = [['SALES', 20], ['OPERATIONS', 100], ['FINANCE', 180]]; function BpmnMap({ mode, uid }) { const during = mode === 'during'; const ink = (a) => `rgba(243,238,228,${a})`; const red = (a) => `rgba(229,83,61,${a})`; return ( ); } const BP_PHASES = ['BEFORE', 'DURING', 'AFTER']; function AutoDemo({ active, phase, onJump }) { const controlled = typeof phase === 'number'; const [ph, setPh] = useStateP(0); const [step, setStep] = useStateP(0); const manual = useRefP(false); const cur = controlled ? phase : ph; const still = () => (window.__fsMo ?? 1) === 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* Self-running phase loop — stacked/mobile only (desktop is scroll-driven). */ useEffectP(() => { if (controlled || !active) return; if (manual.current) return; /* manual jump wins — must precede the reduced-motion park */ if (still()) { setPh(2); return; } const t = setTimeout(() => setPh((v) => (v + 1) % 3), cur === 2 ? 5600 : 3600); return () => clearTimeout(t); }, [controlled, active, cur]); /* AFTER: workflow pulse + log reveal (the kept invoice_2381 example). */ useEffectP(() => { if (!active || cur !== 2) return; if (still()) { setStep(3); return; } const t = setTimeout(() => setStep((s) => (s + 1) % 4), step === 3 ? 2600 : 1350); return () => clearTimeout(t); }, [active, cur, step]); const jump = (i) => { manual.current = true; if (controlled) { if (onJump) onJump(i); } else { setPh(i); } }; const cls = (i) => 'bp-layer' + (i === cur ? ' on' : i < cur ? ' past' : ''); return (
{BP_PHASES.map((t, i) => ( {i > 0 && } ))}
TODAY — MANUAL PROCESS ≈ 3 DAYS / INVOICE
11 STEPS 3 TEAMS 2 REWORK LOOPS
AI OPPORTUNITY SCAN LAIVE PROCESS AUDIT
5 AUTOMATION OPPORTUNITIES SAME FLOW — SCANNED BY AI
REDESIGNED — LAIVE AUTOMATION ≈ 4 MIN / INVOICE
{AUTO_NODES.map(([ic, name], i) => (
{name}
))}
{AUTO_LOG.map((l, i) => ( → {l} ))}
4 STEPS — 0 TOUCHES 3 DAYS → 4 MINUTES
); } const FS_DEMOS = { engage: EngageDemo, assist: AssistDemo, auto: AutoDemo }; /* ---------- Product panel ---------- */ function FsProductPanel({ p, i, active, onBook, phase, onJump }) { const { Button } = DSP; const Demo = FS_DEMOS[p.key]; return (
{p.i} / 03 — {p.tag}

{p.name}

{p.lead}

{p.caps.map((c) => (
{c}
))}
OUTCOME{p.outcome}
{p.key !== 'engage' && DEMO_HEADS[p.key]}
); } /* ---------- Pinned horizontal reel (desktop) ---------- Scroll map: first half of the span slides the 3 panels across; the second half stays pinned on Automation Suite and steps its BPMN phases BEFORE → DURING → AFTER. */ const BP_SHIFT_END = 0.5; function FsProductsPinned({ onBook }) { const { SectionLabel } = DSP; const wrapRef = useRefP(null); const trackRef = useRefP(null); const fillRef = useRefP(null); const m = useMeasure(wrapRef); const [active, setActive] = useStateP(0); const [phase, setPhase] = useStateP(0); const [vis, setVis] = useStateP(false); const aRef = useRefP(0); const phRef = useRefP(0); useEffectP(() => { const el = wrapRef.current; if (!el) return; const io = new IntersectionObserver(([e]) => setVis(e.isIntersecting), { threshold: 0 }); io.observe(el); return () => io.disconnect(); }, []); useScrollFrame((y) => { const track = trackRef.current; if (!track) return; const vh = window.innerHeight; const span = Math.max(1, m.current.h - vh); const p = clamp01((y - m.current.top) / span); const q = Math.min(1, p / BP_SHIFT_END); const shift = Math.max(0, track.scrollWidth - window.innerWidth); track.style.transform = `translate3d(${(-q * shift).toFixed(1)}px, 0, 0)`; track.style.setProperty('--p', q.toFixed(4)); if (fillRef.current) fillRef.current.style.transform = `scaleX(${q.toFixed(4)})`; const idx = Math.min(2, Math.floor(q * 3)); if (idx !== aRef.current) { aRef.current = idx; setActive(idx); } const ph = p <= BP_SHIFT_END ? 0 : Math.min(2, Math.floor(((p - BP_SHIFT_END) / (1 - BP_SHIFT_END)) * 3)); if (ph !== phRef.current) { phRef.current = ph; setPhase(ph); } }); /* Tab click → scroll the page into that phase's band. */ const jumpPhase = (i) => { const vh = window.innerHeight; const span = Math.max(1, m.current.h - vh); const target = m.current.top + span * (BP_SHIFT_END + (1 - BP_SHIFT_END) * ((i + 0.35) / 3)); window.scrollTo({ top: Math.round(target), behavior: 'smooth' }); }; return (
Our AI Products KEEP SCROLLING
{FS_COPY.products.map((p, i) => ( ))}
); } /* ---------- Stacked fallback (mobile) ---------- */ function FsProductStackItem({ p, i, onBook }) { const [ref, inView] = useInViewFs(0.35); return (
); } function FsProductPanelStatic(props) { /* same panel content without 100vw sizing */ return (
); } function FsProductsStack({ onBook }) { const { SectionLabel } = DSP; return (
Our AI Products
{FS_COPY.products.map((p, i) => )}
); } function FsProducts({ onBook }) { const narrow = useMediaFs('(max-width: 940px)'); return narrow ? : ; } Object.assign(window, { FsProducts, AutoDemo, BpmnMap });