/* components/whatsapp.jsx — fake WhatsApp conversation with char-by-char typing */ function MarkIcon() { return ( ); } /* TypeWriter: animates text character by character once visible */ function TypeWriter({ text, active, delay = 0, speed = 28 }) { const [displayed, setDisplayed] = React.useState(""); const [started, setStarted] = React.useState(false); React.useEffect(() => { if (!active) return; const startTimer = setTimeout(() => setStarted(true), delay); return () => clearTimeout(startTimer); }, [active, delay]); React.useEffect(() => { if (!started) return; if (displayed.length >= text.length) return; const t = setTimeout(() => { setDisplayed(text.slice(0, displayed.length + 1)); }, speed); return () => clearTimeout(t); }, [started, displayed, text, speed]); // Reset when text or active changes React.useEffect(() => { setDisplayed(""); setStarted(false); }, [text]); return {displayed}; } function WhatsAppMock() { // margin "0px" → triggers as soon as element enters viewport (fix Windows black screen) const [ref, inView] = useInView({ margin: "0px" }); const [forceStart, setForceStart] = React.useState(false); const { t, lang } = useI18n(); // Timing chain (speed = 8ms/char): // msg1 ~145 chars → done at ~300 + 1160 = 1460ms // typing1 shows 2000ms, lasts 2300ms → hides 4300ms → msg3 at 4300ms // msg3 ~110 chars → done at 4300 + 880 = 5180ms // typing2 shows 5800ms, lasts 2200ms → hides 8000ms → msg5 at 8000ms const items = [ { kind: "msg", from: "bot", textKey: "wa.mock.1", time: "20:14", typeDelay: 300 }, { kind: "msg", from: "me", textKey: "wa.mock.2", time: "20:15", showDelay: 2100 }, { kind: "typing", from: "bot", showDelay: 2500, hideAfter: 2300 }, { kind: "msg", from: "bot", textKey: "wa.mock.3", time: "20:15", typeDelay: 4800 }, { kind: "msg", from: "me", textKey: "wa.mock.4", time: "20:16", showDelay: 6100 }, { kind: "typing", from: "bot", showDelay: 6500, hideAfter: 2100 }, { kind: "msg", from: "bot", textKey: "wa.mock.5", time: "20:16", typeDelay: 8600 }, ]; // Fallback: start even if IntersectionObserver never fires (Windows quirk) React.useEffect(() => { const t = setTimeout(() => setForceStart(true), 1800); return () => clearTimeout(t); }, []); const active = inView || forceStart; // Track which items are visible and which typing bubbles are hidden const [visibleCount, setVisibleCount] = React.useState(0); const [hiddenTyping, setHiddenTyping] = React.useState(new Set()); // Restart animation whenever active state or inView changes (or lang changes). // Adding inView to deps ensures: when user scrolls to section (inView→true), // animation restarts even if forceStart already fired while section was off-screen. React.useEffect(() => { if (!active) return; // Reset first setVisibleCount(0); setHiddenTyping(new Set()); let timers = []; items.forEach((item, i) => { const showAt = item.showDelay ?? item.typeDelay ?? 0; timers.push(setTimeout(() => setVisibleCount(c => Math.max(c, i + 1)), showAt)); if (item.kind === "typing" && item.hideAfter) { timers.push(setTimeout(() => { setHiddenTyping(s => { const n = new Set(s); n.add(i); return n; }); }, showAt + item.hideAfter)); } }); return () => timers.forEach(clearTimeout); }, [active, lang, inView]); return (
{t("wa.mock.name")}
{t("wa.mock.status")}
{t("wa.mock.day")}
{items.map((item, i) => { const visible = visibleCount > i; const hidden = hiddenTyping.has(i); if (!visible) return null; if (item.kind === "typing") { if (hidden) return null; return (
); } const text = t(item.textKey); const isBot = item.from === "bot"; return (
{isBot ? ( ) : ( {text} )}
{item.time} {item.from === "me" && ( )}
); })}
{t("wa.mock.composer")}