/* bayi.jsx — Bahasa Bayi mode: everyday analogies + illustrations */
// =====================================================
// Hand-drawn SVG illustrations (friendly, sketch-style)
// =====================================================
function Illus({ kind, size = 120 }) {
const s = size;
const stroke = "var(--eco-ink)";
const accent = "var(--eco-red)";
const teal = "var(--eco-teal)";
const wrap = (children) => (
);
switch (kind) {
case "wallet": // rupiah depreciation - dompet bocor
return wrap(<>
{/* coins falling */}
Rp
Rp
{/* leak crack */}
{/* arrow down */}
);
case "warteg": // food / inflation - piring nasi
return wrap(<>
{/* nasi mound */}
{/* ayam */}
{/* sayur */}
{/* steam */}
);
case "tabungan": // celengan / piggy bank
return wrap(<>
{/* coin going in */}
$
);
case "motor": // motor di SPBU
return wrap(<>
{/* pump */}
$117
{/* motor */}
);
case "tabung-gas": // tabung LPG 3kg melon
return wrap(<>
LPG
3kg
SUBSIDI
{/* checkmark/x suggesting wrong target */}
);
case "neraca": // scale / inequality
return wrap(<>
{/* left pan - heavy (top-20%) */}
{/* coins stacked */}
{/* right pan - light (bottom-40%) */}
);
case "rem-motor": // BI Rate as brake
return wrap(<>
{/* speedo arc */}
{/* ticks */}
{[30,45,60,75,90].map((a, i) => {
const rad = (a - 90) * Math.PI / 180;
const x1 = 60 + 28 * Math.cos(rad);
const y1 = 60 + 28 * Math.sin(rad);
const x2 = 60 + 34 * Math.cos(rad);
const y2 = 60 + 34 * Math.sin(rad);
return ;
})}
{/* needle */}
BI-Rate
4,75%
);
case "kids": // kids in class - MBG
return wrap(<>
{/* sun/sky */}
{/* kid 1 */}
{/* plate */}
{/* kid 2 */}
{/* kid 3 */}
{/* faces */}
{/* ground */}
);
case "kompor": // oil price - kompor
return wrap(<>
{/* flame */}
{/* knob */}
{/* price tag */}
$117
);
case "permen": // permen / subsidy distribution
return wrap(<>
{/* candy jar */}
{/* candies inside */}
{/* hand grabbing */}
);
case "kalkulator": // APBN as calculator
return wrap(<>
3.842T
{/* keys */}
{[0,1,2].map(row => [0,1,2,3].map(col => (
)))}
+
−
×
=
);
default:
return wrap();
}
}
// =====================================================
// BayiCard — illustrated everyday-analogy explainer
// =====================================================
function BayiCard({ illus, title, children, big }) {
return (
{title &&
{title}
}
{children}
);
}
// Stronger headline variant — used at section top
function BayiHero({ illus, headline, sub }) {
return (
{headline}
{sub &&
{sub}
}
);
}
window.Illus = Illus;
window.BayiCard = BayiCard;
window.BayiHero = BayiHero;