// Two preview card components for the hero stack. // SESPreview: light card with WhatsApp conversation (teal corner glow). // VoicePreview: dark card with LIVE caller, waveform (accent-teal), intent/status row. const { useEffect, useState, useRef } = React; // ---------- shared waveform ---------- function Waveform({ bars = 28, color = "var(--accent-teal)", height = 36 }) { // deterministic but varied heights const heights = React.useMemo(() => { const arr = []; for (let i = 0; i < bars; i++) { // bell-ish curve, jittered const t = i / (bars - 1); const bell = Math.sin(t * Math.PI); const noise = ((Math.sin(i * 7.3) + 1) / 2) * 0.5 + 0.3; arr.push(0.25 + bell * noise * 0.85); } return arr; }, [bars]); return (
{heights.map((h, i) => (
))}
); } // ---------- SES (WhatsApp) preview ---------- function SESPreview({ t }) { const p = t.preview.ses; return (
{/* header */}
{p.chip}
Dr.ssa Bianchi · Studio
{p.ago}
{/* conversation */}
{/* incoming */}
{p.bot[0].text}
{p.replyConfirm} {p.replyReschedule}
{/* outgoing reply */}
{p.userReply.text}
{p.userReply.time} ✓✓
{/* divider with follow-up label */}
{p.followUpTitle}
{/* follow-up */}
{p.followUp.text}
{/* result strip */}
{p.result.headline}
{p.result.revenue} {p.result.time}
); } // ---------- Voice Agent preview ---------- function VoicePreview({ t }) { const p = t.preview.voice; const [tick, setTick] = useState(42); useEffect(() => { const id = setInterval(() => setTick(v => v + 1), 1000); return () => clearInterval(id); }, []); const mm = String(Math.floor(tick / 60)).padStart(2, "0"); const ss = String(tick % 60).padStart(2, "0"); return (
{/* header: LIVE + timer */}
{p.live}
{mm}:{ss}
{/* caller card */}
{p.caller}
{p.callerNote}
{/* waveform */}
{/* transcript */}
TRANSCRIPT · LIVE
{p.transcript.map((line, i) => (
{line.who === "sonaro" ? "S" : "P"} {line.text}
))}
S
{/* footer: intent / status */}
{p.intentLabel}
{p.intent}
{p.statusLabel}
{p.status}
); } window.SESPreview = SESPreview; window.VoicePreview = VoicePreview; window.Waveform = Waveform;