// WhatsApp primitives + hand-drawn SVG illustrations for "How it works".
const { useEffect, useRef, useState } = React;
const Icon = {
Phone: (p) => ,
Video: (p) => ,
More: (p) => ,
Back: (p) => ,
Emoji: (p) => ,
Paperclip: (p) => ,
Camera: (p) => ,
Mic: (p) => ,
Play: (p) => ,
Pause: (p) => ,
Arrow: (p) => ,
Check: (p) => ,
Reply: (p) => ,
Target: (p) => ,
Calendar: (p) => ,
Paper: (p) => ,
Loop: (p) => ,
Waveform: (p) => ,
WAGlyph: (p) => ,
};
function Tick({ read }) {
return (
);
}
function TextBubble({ dir, children, time, read, delay = 0 }) {
return (
{children}
{time}{dir === "out" && }
);
}
function VoiceBubble({ dir, dur = "0:12", time, read, playing, delay = 0 }) {
const bars = 26;
return (
{Array.from({ length: bars }).map((_, i) => {
const h = 4 + Math.abs(Math.sin(i * 0.85)) * 16;
return ;
})}
{dur}
{time}{dir === "out" && }
);
}
function PhotoBubble({ dir, label, caption, time, read, delay = 0 }) {
return (
{caption &&
{caption}
}
{time}{dir === "out" && }
);
}
function PhotoCardBubble({ dir, src, alt, title, sub, time, read, delay = 0 }) {
const [err, setErr] = useState(false);
const fallback = `https://picsum.photos/seed/${encodeURIComponent(alt || title || "card")}/600/400`;
return (
setErr(true)} loading="lazy"/>
{time}{dir === "out" && }
);
}
function CardBubble({ dir, thumb, title, sub, time, read, delay = 0 }) {
return (
{time}{dir === "out" && }
);
}
function TypingBubble() { return
; }
function Phone({ name, initials, avatar = "a", presence = "online", children, size = "default", showInput = true }) {
const cls = size === "lg" ? "phone lg" : size === "compact" ? "phone compact" : "phone";
return (
);
}
// ========== HAND-DRAWN HOW-IT-WORKS ILLUSTRATIONS ==========
function HowIllu1() {
return (
);
}
function HowIllu2() {
const nodes = [
{x:30, y:40}, {x:30, y:90}, {x:30, y:140},
{x:100, y:30}, {x:100, y:90}, {x:100, y:150},
{x:170, y:50}, {x:170, y:110}, {x:170, y:150},
];
const edges = [[0,3],[0,4],[1,3],[1,4],[1,5],[2,4],[2,5],[3,6],[4,6],[4,7],[4,8],[5,7],[5,8]];
return (
);
}
function HowIllu3() {
// "Every message answered" — three incoming text bubbles, three outgoing replies
// with green double-ticks animating in. Same hand-drawn WA-green aesthetic.
return (
);
}
function WobblyArrow() {
return (
);
}
window.WA = { Icon, Tick, TextBubble, VoiceBubble, PhotoBubble, PhotoCardBubble, CardBubble, TypingBubble, Phone, HowIllu1, HowIllu2, HowIllu3, WobblyArrow };