/* 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) => (
    <svg viewBox="0 0 120 120" width={s} height={s} style={{ display: 'block' }}>
      {children}
    </svg>
  );

  switch (kind) {
    case "wallet": // rupiah depreciation - dompet bocor
      return wrap(<>
        <rect x="20" y="40" width="80" height="50" rx="4" fill="var(--bg)" stroke={stroke} strokeWidth="2.5"/>
        <path d="M20 52 L100 52" stroke={stroke} strokeWidth="2"/>
        <circle cx="85" cy="65" r="4" fill={accent}/>
        {/* coins falling */}
        <circle cx="38" cy="100" r="6" fill={accent} stroke={stroke} strokeWidth="1.5"/>
        <text x="38" y="103" fontSize="6" textAnchor="middle" fontWeight="700" fill="white">Rp</text>
        <circle cx="56" cy="108" r="5" fill={accent} stroke={stroke} strokeWidth="1.5"/>
        <text x="56" y="111" fontSize="5" textAnchor="middle" fontWeight="700" fill="white">Rp</text>
        <circle cx="72" cy="103" r="4" fill={accent} stroke={stroke} strokeWidth="1.5"/>
        {/* leak crack */}
        <path d="M45 88 L48 95 M55 88 L58 96" stroke={accent} strokeWidth="2" strokeLinecap="round"/>
        {/* arrow down */}
        <path d="M105 30 L105 45 L101 41 M105 45 L109 41" stroke={accent} strokeWidth="2.5" strokeLinecap="round" fill="none"/>
      </>);

    case "warteg": // food / inflation - piring nasi
      return wrap(<>
        <ellipse cx="60" cy="80" rx="38" ry="8" fill="var(--bg-sunken)" stroke={stroke} strokeWidth="2"/>
        <path d="M22 78 Q60 92 98 78 L94 70 Q60 80 26 70 Z" fill="white" stroke={stroke} strokeWidth="2"/>
        {/* nasi mound */}
        <path d="M40 68 Q50 50 60 52 Q72 50 80 68 Z" fill="white" stroke={stroke} strokeWidth="1.8"/>
        <circle cx="50" cy="58" r="1.2" fill={stroke}/>
        <circle cx="58" cy="55" r="1.2" fill={stroke}/>
        <circle cx="66" cy="58" r="1.2" fill={stroke}/>
        {/* ayam */}
        <path d="M30 64 Q35 55 42 58 Q44 64 38 67 Z" fill={accent} stroke={stroke} strokeWidth="1.5"/>
        {/* sayur */}
        <circle cx="86" cy="64" r="5" fill={teal} stroke={stroke} strokeWidth="1.5"/>
        {/* steam */}
        <path d="M52 42 Q50 36 54 32 Q57 28 54 22" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" fill="none" opacity="0.5"/>
        <path d="M64 42 Q66 36 62 32 Q60 28 64 22" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" fill="none" opacity="0.5"/>
      </>);

    case "tabungan": // celengan / piggy bank
      return wrap(<>
        <ellipse cx="60" cy="70" rx="38" ry="28" fill="var(--bg)" stroke={stroke} strokeWidth="2.5"/>
        <circle cx="48" cy="62" r="2" fill={stroke}/>
        <ellipse cx="32" cy="72" rx="5" ry="3" fill="var(--bg-sunken)" stroke={stroke} strokeWidth="1.5"/>
        <path d="M55 50 L65 50 L62 45 L58 45 Z" fill={stroke}/>
        <path d="M40 92 L40 100 M50 95 L50 102 M70 95 L70 102 M80 92 L80 100" stroke={stroke} strokeWidth="2"/>
        {/* coin going in */}
        <circle cx="60" cy="30" r="6" fill={accent} stroke={stroke} strokeWidth="1.5"/>
        <text x="60" y="33" fontSize="6" textAnchor="middle" fontWeight="700" fill="white">$</text>
        <path d="M60 40 L60 47" stroke={stroke} strokeWidth="1.5" strokeDasharray="2 2"/>
      </>);

    case "motor": // motor di SPBU
      return wrap(<>
        {/* pump */}
        <rect x="78" y="48" width="20" height="34" fill="var(--bg-sunken)" stroke={stroke} strokeWidth="2"/>
        <rect x="80" y="52" width="16" height="8" fill="white" stroke={stroke} strokeWidth="1.2"/>
        <text x="88" y="58" fontSize="6" textAnchor="middle" fontWeight="700" fill={accent}>$117</text>
        <path d="M78 60 L70 58 L70 70 L78 72" fill="none" stroke={stroke} strokeWidth="2"/>
        {/* motor */}
        <circle cx="34" cy="82" r="10" fill="white" stroke={stroke} strokeWidth="2.5"/>
        <circle cx="58" cy="82" r="10" fill="white" stroke={stroke} strokeWidth="2.5"/>
        <circle cx="34" cy="82" r="3" fill={stroke}/>
        <circle cx="58" cy="82" r="3" fill={stroke}/>
        <path d="M30 70 L46 64 L58 68 L62 76 L34 78 Z" fill={accent} stroke={stroke} strokeWidth="2"/>
        <path d="M48 64 L52 50 L60 50" stroke={stroke} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d="M26 70 L20 62" stroke={stroke} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      </>);

    case "tabung-gas": // tabung LPG 3kg melon
      return wrap(<>
        <rect x="40" y="35" width="40" height="60" rx="6" fill={teal} stroke={stroke} strokeWidth="2.5"/>
        <rect x="50" y="22" width="20" height="16" fill="var(--bg-sunken)" stroke={stroke} strokeWidth="2"/>
        <rect x="55" y="16" width="10" height="8" fill={stroke}/>
        <text x="60" y="60" fontSize="8" textAnchor="middle" fontWeight="700" fill="white">LPG</text>
        <text x="60" y="72" fontSize="14" textAnchor="middle" fontWeight="900" fill="white" fontFamily="var(--font-display)">3kg</text>
        <text x="60" y="86" fontSize="6" textAnchor="middle" fontWeight="600" fill="white">SUBSIDI</text>
        {/* checkmark/x suggesting wrong target */}
        <circle cx="95" cy="35" r="10" fill={accent}/>
        <path d="M91 31 L99 39 M99 31 L91 39" stroke="white" strokeWidth="2.5" strokeLinecap="round"/>
      </>);

    case "neraca": // scale / inequality
      return wrap(<>
        <line x1="60" y1="15" x2="60" y2="55" stroke={stroke} strokeWidth="3"/>
        <line x1="20" y1="40" x2="100" y2="55" stroke={stroke} strokeWidth="2.5" strokeLinecap="round"/>
        {/* left pan - heavy (top-20%) */}
        <path d="M5 40 L35 40 L30 65 L10 65 Z" fill="white" stroke={stroke} strokeWidth="2"/>
        <line x1="20" y1="32" x2="20" y2="40" stroke={stroke} strokeWidth="1.5"/>
        {/* coins stacked */}
        <ellipse cx="20" cy="56" rx="10" ry="2" fill={accent}/>
        <ellipse cx="20" cy="52" rx="10" ry="2" fill={accent}/>
        <ellipse cx="20" cy="48" rx="10" ry="2" fill={accent}/>
        <ellipse cx="20" cy="44" rx="10" ry="2" fill={accent}/>

        {/* right pan - light (bottom-40%) */}
        <path d="M85 55 L115 55 L110 75 L90 75 Z" fill="white" stroke={stroke} strokeWidth="2"/>
        <line x1="100" y1="47" x2="100" y2="55" stroke={stroke} strokeWidth="1.5"/>
        <ellipse cx="100" cy="68" rx="6" ry="1.5" fill={teal}/>

        <rect x="50" y="100" width="20" height="10" fill={stroke}/>
        <path d="M45 110 L75 110" stroke={stroke} strokeWidth="2"/>
      </>);

    case "rem-motor": // BI Rate as brake
      return wrap(<>
        <circle cx="60" cy="60" r="42" fill="var(--bg)" stroke={stroke} strokeWidth="2.5"/>
        <circle cx="60" cy="60" r="34" fill="white" stroke={stroke} strokeWidth="1.5"/>
        {/* speedo arc */}
        <path d="M30 70 Q60 30 90 70" fill="none" stroke={stroke} strokeWidth="1.5"/>
        {/* 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 <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={stroke} strokeWidth="1.5"/>;
        })}
        {/* needle */}
        <line x1="60" y1="60" x2="78" y2="42" stroke={accent} strokeWidth="3" strokeLinecap="round"/>
        <circle cx="60" cy="60" r="4" fill={stroke}/>
        <text x="60" y="84" fontSize="8" textAnchor="middle" fontWeight="700" fill={stroke}>BI-Rate</text>
        <text x="60" y="93" fontSize="10" textAnchor="middle" fontWeight="800" fill={accent} fontFamily="var(--font-display)">4,75%</text>
      </>);

    case "kids": // kids in class - MBG
      return wrap(<>
        {/* sun/sky */}
        <circle cx="100" cy="22" r="8" fill={accent} opacity="0.7"/>
        {/* kid 1 */}
        <circle cx="25" cy="55" r="8" fill="var(--bg)" stroke={stroke} strokeWidth="2"/>
        <path d="M17 80 L17 70 Q17 65 25 65 Q33 65 33 70 L33 80 Z" fill={teal} stroke={stroke} strokeWidth="2"/>
        <line x1="25" y1="80" x2="22" y2="92" stroke={stroke} strokeWidth="2.5" strokeLinecap="round"/>
        <line x1="25" y1="80" x2="28" y2="92" stroke={stroke} strokeWidth="2.5" strokeLinecap="round"/>
        {/* plate */}
        <ellipse cx="25" cy="65" rx="4" ry="1.5" fill="white" stroke={stroke} strokeWidth="1"/>
        {/* kid 2 */}
        <circle cx="55" cy="50" r="9" fill="var(--bg)" stroke={stroke} strokeWidth="2"/>
        <path d="M45 80 L45 68 Q45 62 55 62 Q65 62 65 68 L65 80 Z" fill={accent} stroke={stroke} strokeWidth="2"/>
        <line x1="55" y1="80" x2="51" y2="95" stroke={stroke} strokeWidth="2.5" strokeLinecap="round"/>
        <line x1="55" y1="80" x2="59" y2="95" stroke={stroke} strokeWidth="2.5" strokeLinecap="round"/>
        {/* kid 3 */}
        <circle cx="85" cy="55" r="8" fill="var(--bg)" stroke={stroke} strokeWidth="2"/>
        <path d="M77 80 L77 70 Q77 65 85 65 Q93 65 93 70 L93 80 Z" fill="var(--eco-amber)" stroke={stroke} strokeWidth="2"/>
        <line x1="85" y1="80" x2="82" y2="92" stroke={stroke} strokeWidth="2.5" strokeLinecap="round"/>
        <line x1="85" y1="80" x2="88" y2="92" stroke={stroke} strokeWidth="2.5" strokeLinecap="round"/>
        {/* faces */}
        <circle cx="22" cy="54" r="1" fill={stroke}/><circle cx="28" cy="54" r="1" fill={stroke}/>
        <circle cx="52" cy="49" r="1" fill={stroke}/><circle cx="58" cy="49" r="1" fill={stroke}/>
        <path d="M52 54 Q55 56 58 54" stroke={stroke} strokeWidth="1.5" fill="none"/>
        <circle cx="82" cy="54" r="1" fill={stroke}/><circle cx="88" cy="54" r="1" fill={stroke}/>
        {/* ground */}
        <line x1="5" y1="98" x2="115" y2="98" stroke={stroke} strokeWidth="2"/>
      </>);

    case "kompor": // oil price - kompor
      return wrap(<>
        <rect x="20" y="55" width="80" height="50" rx="4" fill="var(--bg)" stroke={stroke} strokeWidth="2.5"/>
        <circle cx="40" cy="78" r="10" fill="white" stroke={stroke} strokeWidth="2"/>
        <circle cx="40" cy="78" r="6" fill="var(--bg-sunken)" stroke={stroke} strokeWidth="1.2"/>
        <circle cx="80" cy="78" r="10" fill="white" stroke={stroke} strokeWidth="2"/>
        <circle cx="80" cy="78" r="6" fill="var(--bg-sunken)" stroke={stroke} strokeWidth="1.2"/>
        {/* flame */}
        <path d="M40 65 Q38 55 40 48 Q44 42 42 36 Q40 30 44 26 Q42 32 46 38 Q50 44 46 50 Q44 56 42 65 Z" fill={accent} stroke={stroke} strokeWidth="1.5"/>
        {/* knob */}
        <circle cx="40" cy="98" r="3" fill={stroke}/>
        <circle cx="80" cy="98" r="3" fill={stroke}/>
        {/* price tag */}
        <rect x="86" y="20" width="30" height="20" fill={accent} transform="rotate(8 100 30)"/>
        <text x="100" y="33" fontSize="9" textAnchor="middle" fontWeight="800" fill="white" fontFamily="var(--font-display)" transform="rotate(8 100 30)">$117</text>
      </>);

    case "permen": // permen / subsidy distribution
      return wrap(<>
        {/* candy jar */}
        <rect x="35" y="35" width="50" height="55" rx="3" fill="white" stroke={stroke} strokeWidth="2.5"/>
        <rect x="32" y="28" width="56" height="10" rx="2" fill="var(--bg-sunken)" stroke={stroke} strokeWidth="2"/>
        {/* candies inside */}
        <circle cx="48" cy="52" r="5" fill={accent} stroke={stroke} strokeWidth="1.2"/>
        <circle cx="62" cy="48" r="5" fill={teal} stroke={stroke} strokeWidth="1.2"/>
        <circle cx="74" cy="55" r="5" fill="var(--eco-amber)" stroke={stroke} strokeWidth="1.2"/>
        <circle cx="50" cy="68" r="5" fill={teal} stroke={stroke} strokeWidth="1.2"/>
        <circle cx="65" cy="65" r="5" fill={accent} stroke={stroke} strokeWidth="1.2"/>
        <circle cx="78" cy="72" r="5" fill={accent} stroke={stroke} strokeWidth="1.2"/>
        <circle cx="48" cy="82" r="5" fill="var(--eco-amber)" stroke={stroke} strokeWidth="1.2"/>
        <circle cx="62" cy="80" r="5" fill={accent} stroke={stroke} strokeWidth="1.2"/>
        {/* hand grabbing */}
        <path d="M88 38 Q98 42 100 50 L96 52 Q94 46 86 44" fill="var(--eco-amber)" stroke={stroke} strokeWidth="1.8"/>
        <path d="M96 52 L102 58" stroke={stroke} strokeWidth="2" strokeLinecap="round"/>
      </>);

    case "kalkulator": // APBN as calculator
      return wrap(<>
        <rect x="25" y="20" width="70" height="85" rx="6" fill="var(--bg)" stroke={stroke} strokeWidth="2.5"/>
        <rect x="32" y="28" width="56" height="20" fill={stroke}/>
        <text x="83" y="42" fontSize="10" textAnchor="end" fontWeight="700" fill={teal} fontFamily="var(--font-mono)">3.842T</text>
        {/* keys */}
        {[0,1,2].map(row => [0,1,2,3].map(col => (
          <rect key={`${row}${col}`} x={34 + col*14} y={56 + row*16} width="11" height="12" rx="1.5" fill="white" stroke={stroke} strokeWidth="1.2"/>
        )))}
        <text x="39.5" y="65" fontSize="6" textAnchor="middle" fill={stroke}>+</text>
        <text x="53.5" y="65" fontSize="6" textAnchor="middle" fill={stroke}>−</text>
        <text x="67.5" y="65" fontSize="6" textAnchor="middle" fill={stroke}>×</text>
        <text x="81.5" y="65" fontSize="6" textAnchor="middle" fill={accent} fontWeight="700">=</text>
      </>);

    default:
      return wrap(<circle cx="60" cy="60" r="40" fill={teal}/>);
  }
}

// =====================================================
// BayiCard — illustrated everyday-analogy explainer
// =====================================================
function BayiCard({ illus, title, children, big }) {
  return (
    <div className="bayi-only bayi-card">
      <div className="bayi-illus">
        <Illus kind={illus} size={120}/>
      </div>
      <div className="bayi-body">
        {title && <div className="bayi-title">{title}</div>}
        <div className={`bayi-text ${big ? 'big' : ''}`}>{children}</div>
      </div>
    </div>
  );
}

// Stronger headline variant — used at section top
function BayiHero({ illus, headline, sub }) {
  return (
    <div className="bayi-only bayi-hero">
      <div className="bayi-hero-illus"><Illus kind={illus} size={160}/></div>
      <div>
        <div className="bayi-hero-headline">{headline}</div>
        {sub && <div className="bayi-hero-sub">{sub}</div>}
      </div>
    </div>
  );
}

window.Illus = Illus;
window.BayiCard = BayiCard;
window.BayiHero = BayiHero;
