/* sections-2.jsx — MBG, Subsidi Reform, Simulator */
const { useState: useState2, useEffect: useEffect2, useMemo: useMemo2 } = React;

// ============================================================
// SECTION 4: MBG PROGRAM
// ============================================================
function MBGSection({ mode, openAnnot }) {
  const { mbgWaterfall, mbgKpi, realokasi } = ECOID;
  return (
    <section className="page" id="mbg">
      <div className="shell">
        <header>
          <div className="kicker">Bagian 04 · Program MBG</div>
          <h2 className="sec-title" style={{ marginTop: 14 }}>Rp268 triliun bisa jadi Rp89 triliun — tanpa anak yang kelaparan.</h2>
          <p className="sec-sub" style={{ marginTop: 12 }}>
            Empat lever optimasi (targeting reform, leakage reduction via digital monitoring, local SME procurement, hybrid delivery)
            membuka <strong>Rp179 triliun</strong> realokasi ke intervensi dengan Heckman ROI 13%/tahun.
          </p>
        </header>

        <BayiHero
          illus="kids"
          headline="Bayangin jajan keluarga Rp268 ribu — tapi 50% buat tetangga yang udah kaya."
          sub="MBG sekarang dikasih ke 82 juta anak — termasuk anak orang mampu. Kalau fokus ke 42 juta anak yang BENAR-BENAR butuh (desil 1-5), kita hemat Rp132T. Plus pakai digital biar nggak dicolong (Rp35T), beli dari UMKM lokal biar untung dobel (Rp15T). Total hemat Rp179T — bisa dipake buat bangun klinik stunting, sekolah, dan air bersih."
        />

        <div className="gloss publik-only">
          <span className="gloss-label">Membaca istilah CEA · Cost-Effectiveness Analysis</span>
          <strong>Desil</strong> = pembagian populasi jadi 10 kelompok pendapatan (Desil 1 = 10% termiskin, Desil 10 = 10% terkaya).
          <strong> Targeting Reform</strong> = ubah dari universal (semua dapat) ke targeted (yang berhak saja). <strong> Multiplier lokal</strong> = berapa output ekonomi dihasilkan per Rp1 belanja kalau dibelanjakan di UMKM lokal (1,4–1,6× vs central kitchen 0,8×).
          <strong> Heckman ROI 13%</strong> = setiap Rp1 investasi di intervensi gizi 1.000 HPK (Hari Pertama Kehidupan) menghasilkan return 13% per tahun sepanjang hidup anak (García-Heckman 2018, NBER WP 23479).
          <strong> Output vs Outcome</strong> = "porsi terdistribusi" (output) vs "stunting turun" (outcome). Yang kedua jauh lebih berarti.
        </div>

        <Pullquote attr="Ferry Irwandi · transkrip video Mei 2026">
          Kalau saya presiden, program ini tidak akan saya buat. Tapi realistis saja — mustahil pemerintah menghilangkan MBG. Yang bisa kita lakukan: bagaimana program ini lebih optimal, bebannya tidak lebih besar, dan jadi lebih baik. Masalahnya bukan ide programnya — tapi efektivitas dan efisiensinya.
        </Pullquote>

        {/* Waterfall */}
        <div className="chart-card">
          <div className="chart-header">
            <div>
              <div className="chart-title">Waterfall · Dari Rp268T ke Rp88,5T</div>
              <div className="chart-desc">Net saving setelah investasi infrastruktur digital Rp2,5T (one-time). Payback period 26 hari.</div>
            </div>
            <div className="row">
              <span className="tag teal">Saving: Rp179T</span>
              <FlagButton id="mbg-waterfall" onFlag={openAnnot}/>
            </div>
          </div>
          <Waterfall
            steps={mbgWaterfall.map(s => ({...s, src: 'Ferry Irwandi · CEA MBG · Mei 2026'}))}
            valueFmt={(v) => `${v.toFixed(1).replace('.', ',')}T`}
          />
          <div className="src-line">
            <span>Banerjee & Duflo (2011), World Bank Indonesia Bisa 2023, KPK Kajian 2025, ICW estimates</span>
            <span className="src">Grafik 04.A</span>
          </div>
        </div>

        {/* 4 levers explainer */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, marginTop: 32, background: 'var(--border)', border: '1px solid var(--border)' }}>
          {[
            { num: "01", title: "Targeting Reform", val: "Rp132T", desc: "Universal 82,9jt → Desil 1-5 (42jt). Stunting Desil 1-5: 26% vs nasional 19,8%. Marginal benefit 1,55–1,80×." },
            { num: "02", title: "Leakage Reduction", val: "Rp35T", desc: "Digital tracking Hyperledger + biometric attendance. 20% → 7% leakage. ROI 5 tahun: 69,6×." },
            { num: "03", title: "Local SME Procurement", val: "Rp15T", desc: "60% sourcing radius ≤50km dari SPPG. Multiplier lokal 1,4–1,6 (vs 0,8). 1,2jt lapangan kerja rural." },
            { num: "04", title: "Hybrid Delivery", val: "+82,5% coverage", desc: "E-wallet voucher weekend/libur (165 hari) + meal sekolah (200 hari) = 365 hari coverage." },
          ].map((l, i) => (
            <div key={i} style={{ background: 'var(--bg-elev)', padding: 20 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.12em' }}>{l.num}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700, marginTop: 6 }}>{l.title}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: 'var(--eco-teal)', marginTop: 6 }}>{l.val}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 10, lineHeight: 1.5 }}>{l.desc}</div>
            </div>
          ))}
        </div>

        <div className="policy-only" style={{ marginTop: 16 }}>
          <div className="formula">
            <div className="label">CEA Formula · Cost Effectiveness Analysis</div>
            CER = Cost / Effect (Rp per stunting case averted)<br/>
            Efficiency Gain = MB_targeted / (0,5 × MB_universal) ≈ 1,55 to 1,80<br/>
            Local Multiplier = 1 / (1 − MPC_local · (1 − tax_leakage − import_leakage))<br/>
            ROI Digital = (Annual Leakage Reduction × Years) / Investment = (34,8 × 5) / 2,5 = <strong>69,6×</strong>
          </div>
        </div>

        {/* KPI outcome table */}
        <div style={{ marginTop: 64 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 16 }}>
            <div>
              <div className="eyebrow">KPI Outcome 2025–2030</div>
              <h3 className="display" style={{ fontSize: 32, marginTop: 8 }}>
                Bukan porsi terdistribusi — <span className="display-italic" style={{ color: 'var(--eco-red)' }}>outcomes</span>.
              </h3>
              <p style={{ fontSize: 14, color: 'var(--fg-3)', marginTop: 6, maxWidth: 640 }}>
                Output metrics seperti porsi/anggaran terserap mudah diklaim. Outcome metrics seperti stunting rate, anemia, dan PISA jauh lebih meaningful.
              </p>
            </div>
            <FlagButton id="mbg-kpi-table" onFlag={openAnnot}/>
          </div>

          <BayiCard illus="warteg" title="Output vs Outcome — bedanya apa, sih?">
            <strong>Output</strong> = "udah berapa porsi nasi yang dibagikan?" — gampang dihitung, gampang diklaim, tapi nggak tahu apakah anak jadi lebih sehat.
            <em> Outcome</em> = "berapa anak yang nggak stunting lagi setelah 5 tahun MBG?" — itu yang sebenarnya kita mau capai.
            Sama kayak guru yang ngitung "berapa halaman buku dibaca" (output) vs "berapa siswa yang paham materi" (outcome). Yang kedua jauh lebih berarti.
          </BayiCard>
          <div className="chart-card" style={{ padding: 0 }}>
            <div style={{
              overflowX: 'auto',
              WebkitOverflowScrolling: 'touch',
              borderRadius: '8px',
              marginBottom: '12px'
            }}>
            <table className="table" style={{ minWidth: 520, width: '100%' }}>
              <thead>
                <tr>
                  <th>Indikator</th>
                  <th>Tipe</th>
                  <th className="num">Baseline 2025</th>
                  <th className="num">Target 2026</th>
                  <th className="num">Target 2027</th>
                  <th className="num">Target 2030</th>
                  <th style={{ width: 80 }}></th>
                </tr>
              </thead>
              <tbody>
                {mbgKpi.map((k, i) => (
                  <tr key={i}>
                    <td style={{ fontWeight: 600 }}>{k.indicator}</td>
                    <td><span className={`tag ${k.type === 'outcome' ? 'teal' : k.type === 'output' ? '' : 'amber'}`}>{k.type}</span></td>
                    <td className="num">{k.baseline}</td>
                    <td className="num">{k.t2026}</td>
                    <td className="num">{k.t2027}</td>
                    <td className="num" style={{ fontWeight: 700, color: 'var(--eco-teal)' }}>{k.t2030}</td>
                    <td style={{ position: 'relative' }}>
                      <Sparkline
                        data={[
                          parseFloat((k.baseline || "0").replace(/[^0-9.,]/g, '').replace(',', '.')) || 0,
                          parseFloat((k.t2026 || "0").replace(/[^0-9.,]/g, '').replace(',', '.')) || 0,
                          parseFloat((k.t2027 || "0").replace(/[^0-9.,]/g, '').replace(',', '.')) || 0,
                          parseFloat((k.t2030 || "0").replace(/[^0-9.,]/g, '').replace(',', '.')) || 0,
                        ]}
                        color={k.type === 'outcome' ? 'var(--eco-teal)' : k.type === 'output' ? 'var(--eco-ink-3)' : 'var(--eco-amber)'}
                        width={64} height={24}
                      />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            </div>
            <div style={{ padding: '16px 24px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--fg-3)' }}>
              <span>SSGI 2024 BKPK Kemenkes · OECD PISA 2022 · Estimasi CER optimal trajectory</span>
              <span>Tabel 04.B</span>
            </div>
          </div>
        </div>

        {/* Realokasi Rp179T */}
        <div style={{ marginTop: 64 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 16 }}>
            <div>
              <div className="eyebrow">Realokasi Rp179 Triliun</div>
              <h3 className="display" style={{ fontSize: 32, marginTop: 8 }}>Ke mana 179 triliun itu pergi?</h3>
            </div>
            <FlagButton id="realokasi" onFlag={openAnnot}/>
          </div>
          <div className="chart-card">
            <BarChart
              data={realokasi.map(d => ({...d, src: 'Heckman lifecycle ROI 13% · García-Heckman-Leaf-Prados 2018 NBER WP 23479'}))}
              valueFormat={(v) => `Rp${v}T`}
              max={50}
            />
            <div className="src-line">
              <span>Sumber: NBER WP 23479 · Heckman-Moon-Pinto-Savelyev-Yavitz 2010 J. Public Econ · estimasi penulis</span>
              <span className="src">Grafik 04.C · Total: Rp179T</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SECTION 5: SUBSIDI REFORM
// ============================================================
function SubsidiSection({ mode, openAnnot }) {
  const { deadweight, subsidiDistribusi, multipliers } = ECOID;

  return (
    <section className="page" id="subsidi" style={{ background: 'var(--bg-sunken)' }}>
      <div className="shell">
        <header>
          <div className="kicker">Bagian 05 · Reformasi Subsidi</div>
          <h2 className="sec-title" style={{ marginTop: 14 }}>46,2% subsidi BBM dinikmati 20% terkaya.</h2>
          <p className="sec-sub" style={{ marginTop: 12 }}>
            Subsidi+kompensasi 2026 mencapai Rp501,4T (2,87% PDB), <em>plus</em> perlinsos Rp508,2T. Deadweight loss agregat <strong>Rp174T/tahun</strong> —
            ruang fiskal recoverable tanpa kenaikan tarif pajak.
          </p>
        </header>

        <BayiHero
          illus="permen"
          headline="Bayangin toples permen di kelas — tapi anak kaya yang nyambar duluan."
          sub="Subsidi BBM seharusnya bantu yang nggak mampu. Tapi siapa yang punya mobil & motor lebih banyak? Orang kaya. Jadi 46% subsidi BBM (Rp95T setahun!) dinikmati 20% orang terkaya. Subsidi LPG 3kg? 70% diambil orang menengah-atas yang sebenarnya bisa beli LPG 12kg. Setiap tahun Rp174T 'tumpah' ke tujuan yang salah — cukup buat bangun 870 rumah sakit besar."
        />

        <div className="gloss publik-only">
          <span className="gloss-label">Memahami "deadweight loss" subsidi</span>
          <strong>Deadweight loss</strong> = pemborosan fiskal karena subsidi yang seharusnya tepat sasaran malah bocor ke yang tidak berhak. Rumusnya: <em>L = Outlay × α</em>, di mana α = <em>inclusion-error coefficient</em> (proporsi yang bocor). Misal: subsidi LPG 3kg outlay Rp80,3T, α = 0,68 → DWL Rp54,6T.
          <strong> Multiplier</strong> = berapa Rp output ekonomi per Rp1 belanja pemerintah. Blanket subsidi BBM = 0,4–0,6 (orang kaya nabung). DBT cash ke desil 1–4 = 1,4–1,7 (langsung belanja, putar ekonomi). 
          <strong> DBT</strong> = Direct Benefit Transfer, transfer tunai langsung ke rekening penerima (vs subsidi harga komoditas).
          <strong> DTSEN</strong> = Data Tunggal Sosial Ekonomi Nasional, basis data NIK terintegrasi (Inpres 4/2025) — pondasi targeting.
        </div>

        <Pullquote attr="Ferry Irwandi · transkrip video Mei 2026">
          Negara sedang memberikan subsidi kepada orang yang tidak berhak menerima subsidi dan mampu membeli dengan harga normal. Daripada negara subsidi harga LPG untuk seluruh populasi, lebih baik negara langsung transfer ke masyarakat miskin.
        </Pullquote>

        {/* Deadweight loss stacked bar */}
        <div className="chart-card">
          <div className="chart-header">
            <div>
              <div className="chart-title">Deadweight Loss per Jenis Subsidi 2026</div>
              <div className="chart-desc">L_i = S_i × α_i — outlay × inclusion-error coefficient (Coady et al. 2004 IMF WP)</div>
            </div>
            <div className="row">
              <span className="tag red">Total DWL: Rp174,4T (1,0% PDB)</span>
              <FlagButton id="deadweight" onFlag={openAnnot}/>
            </div>
          </div>
          <div style={{ marginTop: 16 }}>
            {deadweight.map((d, i) => {
              const remaining = d.outlay - d.dwl;
              return (
                <div key={i} style={{ marginBottom: 14 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{d.label}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>
                      outlay Rp{d.outlay.toFixed(1).replace('.', ',')}T · α={d.alpha}
                    </div>
                  </div>
                  <StackedBar
                    height={22}
                    segments={[
                      { label: "Tepat sasaran", value: remaining, color: 'var(--eco-teal)', valueLabel: `Rp${remaining.toFixed(1).replace('.', ',')}T`, src: 'World Bank 2024 CEQ analysis' },
                      { label: "Deadweight loss", value: d.dwl, color: 'var(--eco-red)', valueLabel: `Rp${d.dwl.toFixed(1).replace('.', ',')}T (${(d.alpha*100).toFixed(0)}%)`, src: 'Coady et al. 2004 IMF WP' },
                    ]}
                    showLabels={true}
                  />
                </div>
              );
            })}
          </div>
          <div className="src-line">
            <span>World Bank CEQ Indonesia 2024 (Susenas 2019 baseline) · IISD 2021 (Kusumawardhani et al. 2017) · BPK 2020–2024</span>
            <span className="src">Grafik 05.A</span>
          </div>
        </div>

        {/* Distribution per decile + multiplier comparison */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, marginTop: 32 }}>
          <div className="chart-card">
            <div className="chart-header">
              <div>
                <div className="chart-title">Distribusi Subsidi per Desil</div>
                <div className="chart-desc">% share subsidi yang diterima setiap desil pendapatan. D1 = 10% termiskin · D10 = 10% terkaya.</div>
              </div>
              <FlagButton id="distribution-decile" onFlag={openAnnot}/>
            </div>
            <DecileDistChart data={subsidiDistribusi}/>
            <div className="src-line">
              <span>Susenas 2019 CEQ (World Bank 2024) · IISD 2021 · TNP2K</span>
              <span className="src">Grafik 05.B</span>
            </div>
          </div>

          <div className="chart-card">
            <div className="chart-header">
              <div>
                <div className="chart-title">Multiplier · Blanket vs Targeted</div>
                <div className="chart-desc">Setiap Rp1T belanja pemerintah, berapa output yang dihasilkan?</div>
              </div>
              <FlagButton id="multiplier" onFlag={openAnnot}/>
            </div>
            <BarChart
              data={multipliers.map(d => ({...d, src: 'LPEM FEB UI 2023, BI WP, World Bank 2024'}))}
              valueFormat={(v) => `${v.toFixed(2).replace('.', ',')}×`}
              max={2}
            />
            <div style={{ marginTop: 12, padding: '10px 12px', background: 'var(--eco-teal-tint)', borderLeft: '3px solid var(--eco-teal)', fontSize: 12 }}>
              DBT cash ke desil 1–4 <strong>3,1×</strong> lebih besar dari subsidi BBM blanket. Direct transfers <strong>5,3× lebih efektif</strong> menurunkan kemiskinan (World Bank 2024).
            </div>
            <div className="src-line">
              <span>LPEM FEB UI 2023 · Bank Indonesia WP · World Bank Indonesia 2024</span>
              <span className="src">Grafik 05.C</span>
            </div>
          </div>
        </div>

        <BayiCard illus="motor" title="Kenapa kasih uang tunai > kasih subsidi BBM?">
          Setiap <strong>Rp1 triliun</strong> subsidi BBM cuma menghasilkan output ekonomi sekitar <strong>Rp500 miliar</strong> — karena dinikmati orang kaya yang udah punya banyak, mereka <em>nabung</em> selisihnya.
          Tapi kalau Rp1 triliun itu dikasih <em>tunai</em> ke 40 juta keluarga miskin? Mereka langsung belanja: beli sembako di warung, bayar SPP, beli baju anak. Outputnya jadi <strong>Rp1,55 triliun</strong> — 3× lebih besar.
          Plus jadi modal usaha buat UMKM lokal.
        </BayiCard>

        {/* Estimate saving scenario */}
        <div style={{ marginTop: 32 }}>
          <div className="chart-card inverse" style={{ background: 'var(--eco-ink)', color: 'var(--eco-paper)', borderColor: 'var(--eco-ink)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 32, alignItems: 'center' }}>
              <div>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>Total Net Saving 2028–29 (Base)</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 80, fontWeight: 800, lineHeight: 1, marginTop: 8, color: '#fff', letterSpacing: '-0.04em' }}>
                  +Rp50,5<span style={{ fontSize: 36, fontWeight: 600 }}>T</span>
                </div>
                <div style={{ fontSize: 12, marginTop: 8, color: 'rgba(255,255,255,0.7)' }}>
                  Net Present Value 10-tahun: <strong>+Rp720T (4,1% PDB 2026)</strong> · IRR ekonomi ~21%
                </div>
              </div>
              {[
                { lbl: "Worst", val: "+Rp1T", color: "var(--eco-amber)" },
                { lbl: "Base", val: "+Rp50,5T", color: "var(--eco-teal-soft)" },
                { lbl: "Best", val: "+Rp120T", color: "#fff" },
              ].map((s, i) => (
                <div key={i} style={{ borderLeft: '1px solid rgba(255,255,255,0.15)', paddingLeft: 24 }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700 }}>Skenario {s.lbl}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 800, color: s.color, marginTop: 6, letterSpacing: '-0.03em' }}>{s.val}</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>steady-state per tahun</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.12)', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)' }}>
              <span>Setelah DBT compensation Rp95T (40jt KPM) + cost teknologi+sosialisasi Rp7T/thn amortisasi</span>
              <span>Tabel 05.D · Base case (probabilitas eksekusi 50%)</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Decile distribution chart helper
function DecileDistChart({ data }) {
  const tooltip = useTooltip();
  const subsidies = [
    { key: "bbm", label: "BBM Pertalite", color: "var(--eco-red)" },
    { key: "lpg", label: "LPG 3 kg", color: "var(--eco-amber)" },
    { key: "listrik", label: "Listrik 450/900VA", color: "#8B7AB8" },
    { key: "pkh", label: "PKH (progresif)", color: "var(--eco-teal)" },
  ];
  const [active, setActive] = useState2("bbm");
  const max = Math.max(...data.map(d => d[active]));
  return (
    <div>
      {tooltip.node}
      <div style={{ display: 'flex', gap: 4, marginBottom: 16 }}>
        {subsidies.map(s => (
          <button key={s.key} onClick={() => setActive(s.key)} style={{
            padding: '6px 12px', fontSize: 11, fontWeight: 600,
            background: active === s.key ? s.color : 'var(--bg-elev)',
            color: active === s.key ? '#fff' : 'var(--fg-2)',
            border: '1px solid ' + (active === s.key ? s.color : 'var(--border)'),
            letterSpacing: '0.04em',
          }}>{s.label}</button>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 4, alignItems: 'end', height: 180 }}>
        {data.map((d, i) => {
          const v = d[active];
          const h = (v / max) * 100;
          const color = subsidies.find(s => s.key === active).color;
          const isBottom40 = i < 4;
          const isTop20 = i >= 8;
          return (
            <div key={i} style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'end', gap: 4 }}>
              <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--fg-2)' }}>{v.toFixed(1)}%</div>
              <div
                className="svg-bar"
                style={{ width: '100%', height: `${h}%`, background: color, transition: 'height 600ms cubic-bezier(.22,.61,.36,1)' }}
                onMouseMove={(e) => tooltip.show(e, `${d.decile}: ${v}% share`, `${isBottom40 ? 'Bottom-40' : isTop20 ? 'Top-20' : 'Middle-40'}`)}
                onMouseLeave={tooltip.hide}
              />
              <div style={{ fontSize: 10, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{d.decile}</div>
            </div>
          );
        })}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10, color: 'var(--fg-3)' }}>
        <span style={{ flex: 4, textAlign: 'center', borderTop: '2px solid var(--eco-red)', paddingTop: 6 }}>Bottom-40% target</span>
        <span style={{ flex: 4, textAlign: 'center', paddingTop: 6, color: 'var(--fg-4)' }}>Middle-40%</span>
        <span style={{ flex: 2, textAlign: 'center', borderTop: '2px solid var(--eco-ink)', paddingTop: 6 }}>Top-20%</span>
      </div>
    </div>
  );
}

// ============================================================
// SECTION 6: SIMULATOR / ROADMAP
// ============================================================
function SimulatorSection({ mode, openAnnot }) {
  // Taylor Rule calculator state
  const [piT, setPiT] = useState2(2.42); // headline inflation
  const [piStar] = useState2(2.5);
  const [yGap, setYGap] = useState2(-0.5);
  const [eGap, setEGap] = useState2(8.2); // FX deviation in %
  const [rho] = useState2(0.7);
  const [iLag] = useState2(4.75);
  const rStar = 1.5, piT2 = piStar;
  const alpha = 1.5, beta = 0.5, gamma = 0.15;
  const iStar = rho * iLag + (1 - rho) * (rStar + piT2 + alpha * (piT - piStar) + beta * yGap + gamma * eGap);

  // Oil price impact
  const [icp, setIcp] = useState2(117.31);
  const baseIcp = 70;
  const gap = icp - baseIcp;
  const deficitImpact = gap * 6.7;
  const spendImpact = gap * 10.3;

  return (
    <section className="page" id="simulator">
      <div className="shell">
        <header>
          <div className="kicker">Bagian 06 · Simulator & Roadmap</div>
          <h2 className="sec-title" style={{ marginTop: 14 }}>Hitung sendiri kebijakan optimal.</h2>
          <p className="sec-sub" style={{ marginTop: 12 }}>
            Geser slider — saksikan bagaimana inflasi, output gap, dan FX deviation menggerakkan rekomendasi BI-Rate via FX-augmented Taylor Rule.
            Setiap perubahan US$1/bbl ICP menambah Rp6,7T defisit.
          </p>
        </header>

        <BayiHero
          illus="rem-motor"
          headline="BI-Rate itu kayak rem motor — kalau ngebut kebablasan, harus ditarik."
          sub="Ketika ekonomi terlalu panas (harga-harga naik, rupiah jatuh), Bank Indonesia naikkan suku bunga = tarik rem. Akibatnya: pinjaman lebih mahal, orang tahan belanja, harga ikut tenang. Tapi rem yang terlalu kuat bisa bikin mogok (resesi). Geser slider di bawah — kamu jadi gubernur BI satu menit."
        />

        <div className="gloss publik-only">
          <span className="gloss-label">Membaca Taylor Rule</span>
          <strong>Taylor Rule</strong> = formula baku ekonom untuk menentukan suku bunga acuan optimal. Inputnya 5: <em>inflasi</em> (π), <em>target inflasi</em> (π*), <em>output gap</em> (selisih PDB aktual vs potensial), <em>FX deviation</em> (selisih kurs vs equilibrium), dan <em>BI-Rate periode lalu</em>. Formula: <span className="mono">i = ρ·i₋₁ + (1−ρ)·[r* + π* + α(π−π*) + β(y−y*) + γ(e−e*)]</span>.
          <strong> Smoothing (ρ=0,7)</strong> = mencegah perubahan rate yang terlalu drastis — 72% tetap di rate lama, 28% menyesuaikan kondisi baru.
          <strong> Output gap negatif</strong> = ekonomi tumbuh di bawah potensinya (sekarang ≈ −0,5pp menurut HP-filter LPEM).
        </div>

        <Pullquote attr="Ferry Irwandi · transkrip video Mei 2026">
          Menaikkan suku bunga bukan best option, ini tidak ideal. Tapi dari beberapa bulan intervensi yang dilakukan Bank Indonesia belakangan ini, tidak ada yang efektif untuk menahan laju pelemahan rupiah. BI praktis hampir kehilangan semua peluru. Mau tidak mau, basis poin tadi harus dinaikkan.
        </Pullquote>
        {/* Taylor Rule Calculator */}
        <div className="chart-card">
          <div className="chart-header">
            <div>
              <div className="chart-title">Taylor Rule Calculator · Interaktif</div>
              <div className="chart-desc">FX-augmented · IMF Country Report 12/278 + Article IV 26/010 calibration</div>
            </div>
            <div className="tag">Live</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, marginTop: 8 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <SliderControl
                label="Headline Inflation (π_t)"
                value={piT} setValue={setPiT}
                min={0} max={8} step={0.1}
                fmt={v => `${v.toFixed(2)}%`}
                anchor={`Target π* = ${piStar}%`}
              />
              <SliderControl
                label="Output Gap (y_t − y*)"
                value={yGap} setValue={setYGap}
                min={-3} max={2} step={0.1}
                fmt={v => `${v > 0 ? '+' : ''}${v.toFixed(2)} pp`}
                anchor={`Saat ini: HP-filter Q1-2026 ≈ −0,5 pp (true 4,89% vs trend 5,30%)`}
              />
              <SliderControl
                label="FX Deviation (e_t − e*)"
                value={eGap} setValue={setEGap}
                min={0} max={20} step={0.5}
                fmt={v => `+${v.toFixed(1)}% di atas equilibrium`}
                anchor={`Estimasi BI fair value ≈ Rp16.300 · spot Rp17.645 (+8,2%)`}
              />
            </div>
            <div style={{ background: 'var(--eco-ink)', color: 'var(--eco-paper)', padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div className="caps-sm" style={{ color: 'rgba(255,255,255,0.6)' }}>Implied BI-Rate</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 84, fontWeight: 800, lineHeight: 1, marginTop: 8, color: iStar > 5 ? 'var(--eco-red)' : '#fff', letterSpacing: '-0.04em' }}>
                  {iStar.toFixed(2).replace('.', ',')}<span style={{ fontSize: 32 }}>%</span>
                </div>
                <div style={{ fontSize: 12, marginTop: 8, color: 'rgba(255,255,255,0.7)' }}>
                  Current BI-Rate: <strong>4,75%</strong> · Implied delta: <strong style={{ color: iStar > iLag ? 'var(--eco-amber)' : 'var(--eco-teal-soft)' }}>
                  {((iStar - iLag) * 100).toFixed(0)} bps
                  </strong>
                </div>
              </div>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.15)', fontSize: 11, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--font-mono)', lineHeight: 1.5 }}>
                i_t = ρ·i_{`{t-1}`} + (1−ρ)·[r* + π* + α(π−π*) + β(y−y*) + γ(e−e*)]<br/>
                ρ=0,7 · α=1,5 · β=0,5 · γ=0,15
              </div>
            </div>
          </div>
          <div className="src-line">
            <span>Estimasi Bayesian dari IMF Country Report 12/278 (Sept 2012) dan IMF Article IV 26/010 (Jan 2026)</span>
            <span className="src">Calculator 06.A</span>
          </div>
        </div>

        {/* Oil price slider */}
        <div style={{ marginTop: 32 }}>
          <div className="chart-card">
            <div className="chart-header">
              <div>
                <div className="chart-title">Dampak Harga Minyak ke APBN</div>
                <div className="chart-desc">Setiap US$1/bbl di atas asumsi APBN ($70) = +Rp10,3T belanja, +Rp3,6T penerimaan, net <strong>+Rp6,7T defisit</strong></div>
              </div>
              <FlagButton id="oil-simulator" onFlag={openAnnot}/>
            </div>
            <div className="bayi-only" style={{ marginBottom: 20 }}>
              <BayiCard illus="kompor" title="Setiap $1 minyak naik = +Rp6,7T utang baru.">
                Indonesia masih impor banyak BBM. Kalau harga minyak dunia naik $1/barel di atas asumsi APBN ($70),
                pemerintah harus tambah bayar subsidi <strong>Rp10,3T</strong>. Tapi penerimaan dari pajak migas cuma naik <strong>Rp3,6T</strong>.
                Selisihnya <strong>Rp6,7T</strong> jadi utang baru. Sekarang harga $117 — selisih $47.
                Coba geser slider: lihat angka di bawah berubah. Itu uang riil dari pajak kita.
              </BayiCard>
            </div>
            <div style={{ marginTop: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                <span className="caps-sm" style={{ color: 'var(--fg-3)' }}>ICP (US$/bbl)</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 800, color: icp > 100 ? 'var(--eco-red)' : 'var(--fg-1)' }}>
                  ${icp.toFixed(2)}
                </span>
              </div>
              <input type="range" className="eco-slider" min={50} max={185} step={0.5} value={icp} onChange={(e) => setIcp(parseFloat(e.target.value))}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>
                <span>$50</span>
                <span style={{ position: 'relative' }}>
                  $70 <span style={{ position: 'absolute', top: -16, left: '50%', transform: 'translateX(-50%)', color: 'var(--eco-ink)', fontWeight: 700, whiteSpace: 'nowrap' }}>↓ APBN</span>
                </span>
                <span>$117 ← saat ini</span>
                <span>$185 (peak '08)</span>
              </div>
            </div>
            <hr className="rule" style={{ margin: '24px 0' }}/>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
              <ImpactCell label="Gap vs asumsi" value={`${gap > 0 ? '+' : ''}$${gap.toFixed(1)}/bbl`} color={gap > 0 ? 'var(--eco-red)' : 'var(--eco-teal)'}/>
              <ImpactCell label="Tambahan belanja" value={`+Rp${spendImpact.toFixed(0)}T`} color="var(--eco-red)" sub="subsidi & kompensasi"/>
              <ImpactCell label="Tambahan penerimaan" value={`+Rp${(gap * 3.6).toFixed(0)}T`} color="var(--eco-teal)" sub="PNBP migas & DMO"/>
              <ImpactCell label="Net dampak defisit" value={`${deficitImpact > 0 ? '+' : ''}Rp${deficitImpact.toFixed(0)}T`} color={deficitImpact > 0 ? 'var(--eco-red)' : 'var(--eco-teal)'} sub="annualized"/>
            </div>
            <div className="src-line">
              <span>Susiwijono Moegiarso · Sesmenko Perekonomian · estimasi sensitivity APBN 2026</span>
              <span className="src">Calculator 06.B</span>
            </div>
          </div>
        </div>

        {/* Roadmap 2026-2030 */}
        <div style={{ marginTop: 48 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 16 }}>
            <div>
              <div className="eyebrow">Roadmap KPI 2026–2030</div>
              <h3 className="display" style={{ fontSize: 32, marginTop: 8 }}>Trajektori kalau semua reform jalan.</h3>
            </div>
          </div>
          <RoadmapChart/>
        </div>

        {/* Manifesto footer */}
        <div style={{ marginTop: 80, paddingTop: 48, borderTop: '3px solid var(--eco-ink)' }}>
          <Pullquote attr="Ferry Irwandi · transkrip penutup riset Mei 2026">
            Belanja pemerintah bisa beli waktu, tapi tidak bisa menggantikan produktivitas.
            Intervensi BI bisa menahan rupiah, tapi tidak bisa menggantikan ekspor bernilai tambah.
            Subsidi bisa meredam rasa sakit, tapi tidak bisa menggantikan reformasi energi yang kita butuhkan.
            Pertumbuhan ekonomi bisa terlihat bagus — tapi tanpa kelas menengah yang kuat, kemajuan sosial kita tidak akan pernah kokoh.
          </Pullquote>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, marginTop: 56 }}>
            <div>
              <div className="brand-mark" style={{ width: 56, height: 56, fontSize: 32 }}>E</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 800, marginTop: 16, letterSpacing: '-0.02em' }}>EcoID</div>
              <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 4 }}>Analisis Jujur Ekonomi Indonesia 2026</div>
              <div style={{ fontSize: 11, color: 'var(--fg-4)', marginTop: 16, fontFamily: 'var(--font-mono)' }}>Created by INDIE Labs · Mei 2026</div>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1.4, fontStyle: 'italic', fontWeight: 500, color: 'var(--fg-2)' }}>
              "Silakan dokumennya di-download. Silakan kalian bahas, kalian bantah, kalian kritik, kalian buktikan, atau apapun.
              Pokoknya buat ruang publik kita itu jadi sesuatu yang menarik untuk didiskusikan. Ini terbuka untuk publik dan tentu mungkin ada banyak salahnya, mungkin ada banyak kekeliruannya — yang pasti ini akan menambah khasanah kita semua."
              <div style={{ marginTop: 16, fontSize: 13, color: 'var(--fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase', fontStyle: 'normal', fontWeight: 600, fontFamily: 'var(--font-sans)' }}>
                — Ferry Irwandi · transkrip penutup video
              </div>
            </div>
          </div>
          <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-3)' }}>
            <span>Sumber data primer: BPS · Bank Indonesia · Kemenkeu · IMF · World Bank · S&P Global</span>
            <span>License: CC BY-SA 4.0 · Dataset versi 2026.05.18</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function SliderControl({ label, value, setValue, min, max, step, fmt, anchor }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
        <span style={{ fontSize: 13, fontWeight: 600 }}>{label}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--eco-red)' }}>{fmt(value)}</span>
      </div>
      <input type="range" className="eco-slider" min={min} max={max} step={step} value={value} onChange={(e) => setValue(parseFloat(e.target.value))}/>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontSize: 10, color: 'var(--fg-4)', fontFamily: 'var(--font-mono)' }}>
        <span>{fmt(min)}</span>
        <span>{anchor}</span>
        <span>{fmt(max)}</span>
      </div>
    </div>
  );
}

function ImpactCell({ label, value, color, sub }) {
  return (
    <div>
      <div className="caps-sm" style={{ color: 'var(--fg-3)' }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, color, marginTop: 4, letterSpacing: '-0.02em' }}>{value}</div>
      {sub && <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function RoadmapChart() {
  const xLabels = ["2026 Q2", "2027 H1", "2027 H2", "2028", "2029", "2030"];
  return (
    <div className="chart-card">
      <LineChart
        height={280}
        yMax={100} yMin={0}
        yFmt={(v) => `${v.toFixed(0)}%`}
        xLabels={xLabels}
        series={[
          { name: "Targeting accuracy desil 1-4", data: [26, 35, 50, 65, 78, 80], color: "var(--eco-teal)", area: true, src: "DTSEN-Coretax pipeline" },
          { name: "Inclusion error (DWL)", data: [42, 35, 28, 22, 15, 12], color: "var(--eco-red)", src: "World Bank PMT 2024" },
          { name: "Coverage PLN subsidi tepat", data: [36, 45, 60, 75, 90, 92], color: "var(--eco-amber)", dash: "4 3", src: "PLN-DTSEN integration" },
        ]}
      />
      <div className="src-line">
        <span>Roadmap 4-Fase: Foundation Q2-Q3 2026 → Pilot 5 prov → Expansion 17 prov → National 38 prov 2028 → Review 2029</span>
        <span className="src">Grafik 06.C</span>
      </div>
    </div>
  );
}

window.MBGSection = MBGSection;
window.SubsidiSection = SubsidiSection;
window.SimulatorSection = SimulatorSection;