/* sections.jsx — All EcoID page sections */
const { useState, useEffect, useMemo, useRef } = React;

// ============================================================
// SECTION 1: HERO / LANDING
// ============================================================
function HeroSection({ mode, openAnnot }) {
  const { hero } = ECOID;
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 1500);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="page" id="hero" style={{ paddingTop: 32, paddingBottom: 64 }}>
      <div className="shell">
        {/* Status ticker */}
        <div style={{
          borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
          padding: '8px 0', margin: '0 0 32px', overflow: 'hidden',
          background: 'var(--eco-paper-2)'
        }}>
          <div className="ticker-track" style={{ fontSize: 12, fontFamily: 'var(--font-mono)' }}>
            {[1,2].map(rep => (
              <div key={rep} style={{ display: 'inline-flex', gap: 40 }}>
                <span><span className="red-text">●</span> LIVE · {ECOID.meta.updated}</span>
                <span>USD/IDR <strong className="red-text">17.645</strong> <span className="red-text">−5,99%</span></span>
                <span>IHSG <strong className="red-text">6.470,3</strong> <span className="red-text">−22,25% YTD</span></span>
                <span>ICP <strong className="red-text">$117,31</strong> vs APBN $70</span>
                <span>Cadev <strong>$146,2M</strong> · 5,8 bln impor</span>
                <span>BI-Rate <strong>4,75%</strong> · hold 7×</span>
                <span>Defisit Q1 <strong className="red-text">Rp240,1T</strong> (+140,5% YoY)</span>
                <span>PMI <strong className="red-text">49,1</strong> kontraksi</span>
                <span style={{ color: 'var(--eco-amber)' }}>⚑ 23 data ditandai · 6 menunggu verifikasi</span>
              </div>
            ))}
          </div>
        </div>

        {/* Hero headline */}
        <div style={{ marginBottom: 40 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid var(--border)', paddingBottom: 12, marginBottom: 28 }}>
            <div className="kicker">Mei 2026 · Edisi Krisis</div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
              Vol. 01 · Edisi #001 · {ECOID.meta.date} · Created by INDIE Labs
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 1fr)', gap: 48, alignItems: 'end' }}>
            <h1 className="display" style={{ fontSize: 'clamp(44px, 5.4vw, 80px)', lineHeight: 1.0, letterSpacing: '-0.025em', margin: 0 }}>
              Ekonomi <span className="display-italic" style={{ color: 'var(--eco-red)', fontWeight: 700 }}>terjepit</span> di antara minyak, dolar, dan defisit.
            </h1>

            {/* Video embed — companion to headline */}
            <figure style={{ margin: 0 }}>
              <div className="caps-sm" style={{ color: 'var(--fg-3)', marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>Video Pengantar · 23:18</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.04em' }}>YouTube · Mei 2026</span>
              </div>
              <div style={{
                position: 'relative',
                width: '100%',
                aspectRatio: '16 / 9',
                background: 'var(--eco-ink)',
                border: '1px solid var(--eco-ink)',
                boxShadow: 'var(--shadow-ink, 4px 4px 0 var(--eco-ink))',
                overflow: 'hidden',
              }}>
                <iframe
                  src="https://www.youtube-nocookie.com/embed/xrRU-XXCLpo?rel=0&modestbranding=1"
                  title="Pengantar riset — Analisis Ekonomi Indonesia 2026"
                  loading="lazy"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                />
              </div>
              <figcaption style={{ marginTop: 10, fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.5 }}>
                Pengantar singkat: konteks krisis, metodologi, dan ringkasan tiga temuan utama.
              </figcaption>
            </figure>
          </div>

          {/* Disclaimer band */}
          <aside style={{
            marginTop: 28,
            display: 'grid',
            gridTemplateColumns: 'auto 1fr',
            gap: 18,
            alignItems: 'start',
            padding: '16px 20px',
            border: '1px solid var(--eco-ink)',
            borderLeft: '4px solid var(--eco-ink)',
            background: 'var(--bg-elev, #fff)',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 10,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              fontWeight: 700,
              color: 'var(--eco-ink)',
              padding: '4px 8px',
              border: '1.5px solid var(--eco-ink)',
              alignSelf: 'start',
              whiteSpace: 'nowrap',
            }}>
              Catatan · Disclaimer
            </div>
            <p style={{
              margin: 0,
              fontFamily: 'var(--font-display)',
              fontSize: 16,
              lineHeight: 1.5,
              color: 'var(--fg-1)',
              fontStyle: 'italic',
              fontWeight: 500,
              maxWidth: '70ch',
            }}>
              Data dan analisis yang disampaikan di sini <strong style={{ fontStyle: 'normal' }}>tidak dimaksudkan untuk menyindir atau menyerang pihak manapun</strong>.
              Ini adalah kontribusi nyata dari warga sipil untuk ikut memberikan edukasi dan
              menawarkan solusi atas persoalan ekonomi yang kita hadapi bersama —
              terbuka untuk dikritik, didiskusikan, dan disempurnakan.
            </p>
          </aside>

          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1.1fr', gap: 56, alignItems: 'start', marginTop: 36 }}>
            <div>
              <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--fg-2)', maxWidth: 620, fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic' }}>
                Rupiah menembus rekor terlemah <strong className="ink">Rp17.645/USD</strong>. IHSG anjlok <strong className="ink">22,25%</strong> year-to-date.
                Headline pertumbuhan 5,61% bersifat menyesatkan — didorong front-loading belanja pemerintah.
                Underlying growth hanya <strong className="ink">4,89%</strong>.
              </p>

              <figure style={{ margin: '24px 0 0', padding: '14px 18px', borderLeft: '3px solid var(--eco-ink)', background: 'transparent' }}>
                <blockquote style={{ margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.4, color: 'var(--fg-1)', fontWeight: 500 }}>
                  "Problem utamanya bukan ekonomi tidak tumbuh, melainkan pertumbuhannya makin mahal untuk dipertahankan."
                </blockquote>
                <figcaption style={{ marginTop: 8, fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
                  Ferry Irwandi · pengantar riset
                </figcaption>
              </figure>

              <div style={{ marginTop: 28, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <button className="btn red" onClick={() => document.getElementById('overview')?.scrollIntoView({ behavior: 'smooth' })}>
                  Mulai analisis ↓
                </button>
                <button className="btn outline" onClick={openAnnot}>
                  Tanggapan pakar (6)
                </button>
                <button className="btn outline" onClick={() => window.open('https://drive.google.com/drive/folders/1NxhojI1tfKbZAlhULZd4MRIZay6dU-3M', '_blank', 'noopener,noreferrer')}>
                  Unduh dokumen riset ↗
                </button>
              </div>
            </div>

            {/* Right: featured big number panel */}
            <aside style={{ borderTop: '3px solid var(--eco-red)', paddingTop: 14 }}>
              <div className="eyebrow">Rupiah / USD · all-time low</div>
              <div className="big-num" style={{ fontSize: 'clamp(80px, 10vw, 152px)', color: 'var(--eco-red)', lineHeight: 0.92 }}>
                17.645
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
                <div>
                  <div style={{ color: 'var(--fg-3)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>Sejak Okt '24</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--eco-red)', marginTop: 2 }}>−14,6%</div>
                </div>
                <div>
                  <div style={{ color: 'var(--fg-3)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>YTD 2026</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--eco-red)', marginTop: 2 }}>−5,99%</div>
                </div>
                <div>
                  <div style={{ color: 'var(--fg-3)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>Intraday low</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, marginTop: 2 }}>17.668</div>
                </div>
              </div>
              <div style={{ marginTop: 14, fontSize: 10, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
                Bank Indonesia (JISDOR) · 18 Mei 2026 · ditembak Rp17.668 intraday
              </div>
            </aside>
          </div>
        </div>

        {/* Headline mini-chart row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
          {[
            { lbl: "IHSG", val: "6.470", delta: "−22,25%", spark: [8324, 8210, 7980, 7650, 7320, 7050, 6890, 6720, 6580, 6470], color: "var(--eco-red)" },
            { lbl: "ICP $/bbl", val: "117,31", delta: "+82% vs APBN", spark: [64, 68, 102, 117, 117], color: "var(--eco-red)" },
            { lbl: "Cadev $M", val: "146,2", delta: "−$9,9M YTD", spark: [156.1, 154.6, 151.9, 148.2, 146.2], color: "var(--eco-red)" },
            { lbl: "PMI Manuf.", val: "49,1", delta: "kontraksi", spark: [51.2, 50.8, 50.4, 50.1, 49.1], color: "var(--eco-red)" },
          ].map((m, i) => (
            <div key={i} style={{
              padding: '20px 24px',
              borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12
            }}>
              <div>
                <div className="caps-sm" style={{ color: 'var(--fg-3)' }}>{m.lbl}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, marginTop: 2 }}>{m.val}</div>
                <div style={{ fontSize: 11, color: 'var(--eco-red)', marginTop: 2, fontWeight: 600 }}>{m.delta}</div>
              </div>
              <Sparkline data={m.spark} color={m.color}/>
            </div>
          ))}
        </div>

        <Pullquote attr="Ferry Irwandi · pengantar riset · Mei 2026">
          Ekonomi kita tidak lebih baik dari Amerika, Korea, Singapura, bahkan tidak lebih baik dari Vietnam.
          Tapi tidak dalam keadaan sehancur atau separah krisis '66 ataupun '98. Kita belum dalam situasi krisis — sedang menghadapi
          masalah dalam kualitas dan cost dari pertumbuhan yang kita alami.
        </Pullquote>

        <BayiHero
          illus="wallet"
          headline="Bayangin dompetmu bocor di banyak tempat."
          sub="Setahun lalu, beli 1 dollar cukup pakai Rp15.400. Sekarang Rp17.645 — naik 14,6%. Artinya, semua barang impor jadi lebih mahal: HP, laptop, gandum buat roti, bahkan bahan baku obat-obatan. Itu kenapa harga-harga ikut naik, padahal gaji nggak naik."
        />
      </div>
    </section>
  );
}

// ============================================================
// SECTION 2: OVERVIEW
// ============================================================
function OverviewSection({ mode, openAnnot }) {
  const { kpi, riskChain, comparison } = ECOID;
  return (
    <section className="page" id="overview">
      <div className="shell">
        <header>
          <div className="kicker">Bagian 02 · Overview</div>
          <h2 className="sec-title" style={{ marginTop: 14 }}>Delapan angka yang menjelaskan Mei 2026.</h2>
          <p className="sec-sub" style={{ marginTop: 12 }}>
            Konvergensi empat shock — geopolitik minyak, kebijakan moneter ketat global, defisit fiskal yang melonjak,
            dan kerapuhan struktural domestik — bertemu di satu titik.
          </p>
        </header>

        <BayiHero
          illus="kompor"
          headline="Bayangin masak di kompor yang harganya tiba-tiba naik 67%."
          sub="Kita biasa belanja minyak dunia di harga $70/barel — udah dianggarkan. Tapi karena perang Iran–Israel, harga lompat ke $117. Ibarat warteg yang dari awal udah masang harga nasi telor Rp10.000, tapi telornya tiba-tiba mahal — selisihnya harus dibayar dari mana? Dari hutang."
        />

        <div className="gloss publik-only">
          <span className="gloss-label">Pengantar · 8 istilah yang perlu kamu kenal</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '6px 24px', marginTop: 6 }}>
            <div><strong>ICP</strong> · Indonesian Crude Price — harga rata-rata minyak mentah Indonesia, dipakai sebagai asumsi APBN.</div>
            <div><strong>Cadev</strong> · Cadangan devisa, "tabungan dolar" negara untuk impor & bayar utang luar negeri.</div>
            <div><strong>IHSG</strong> · Indeks Harga Saham Gabungan — barometer pasar modal Indonesia.</div>
            <div><strong>BI-Rate</strong> · Suku bunga acuan Bank Indonesia, kontrol harga uang & inflasi.</div>
            <div><strong>PMI</strong> · Purchasing Managers Index — di atas 50 = ekspansi, di bawah = kontraksi manufaktur.</div>
            <div><strong>Defisit Q1</strong> · Selisih belanja > penerimaan negara kuartal pertama.</div>
            <div><strong>HP-filter</strong> · Metode statistik memisahkan tren jangka panjang dari fluktuasi siklis PDB.</div>
            <div><strong>Front-loading</strong> · Belanja besar di awal tahun (THR, MBG, K/L) — menarik pertumbuhan ke depan.</div>
          </div>
        </div>

        {/* KPI grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--border)', border: '1px solid var(--border)' }}>
          {kpi.map((k, i) => (
            <KPI key={i} label={k.label} value={k.value} delta={k.delta} deltaType={k.type} sub={k.sub} src={k.src} onAnnotate={openAnnot}/>
          ))}
        </div>

        {/* Risk chain */}
        <div style={{ marginTop: 64 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 16 }}>
            <div>
              <div className="eyebrow">Rantai Risiko</div>
              <h3 className="display" style={{ fontSize: 32, marginTop: 8 }}>Bagaimana shock minyak jadi krisis valuta.</h3>
            </div>
            <div className="tag red">Probabilitas kombinasi: 45% (Adverse + Tail)</div>
          </div>

          <BayiCard illus="neraca" title="Domino effect: satu jatuh, sembilan ikut.">
            Minyak naik → APBN butuh duit lebih → pemerintah belanja lebih banyak → defisit melebar → investor asing kabur →
            rupiah jatuh → barang impor lebih mahal → harga-harga naik → daya beli turun → <strong>PHK</strong>.
            Yang awalnya cuma masalah <em>geopolitik di Selat Hormuz</em> akhirnya kerasa di gaji kamu.
          </BayiCard>

          <RiskChain nodes={riskChain}/>
        </div>

        {/* 1998 vs 2026 comparison */}
        <div style={{ marginTop: 80 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 24 }}>
            <div>
              <div className="eyebrow">Bukan Krisis 1998</div>
              <h3 className="display" style={{ fontSize: 32, marginTop: 8 }}>
                Lebih kuat di lapangan eksternal,<br/><span className="display-italic" style={{ color: 'var(--eco-red)' }}>rapuh</span> di lapangan struktural.
              </h3>
            </div>
            <FlagButton id="comparison-1998-2026" onFlag={openAnnot}/>
          </div>

          <div className="chart-card" style={{ padding: 0 }}>
            <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
            <table className="table" style={{ minWidth: 520, width: '100%' }}>
              <thead>
                <tr>
                  <th style={{ width: '22%' }}>Metrik</th>
                  <th style={{ width: '30%' }}>Krisis 1998</th>
                  <th style={{ width: '30%' }}>Mei 2026</th>
                  <th style={{ width: '18%' }}>Verdict</th>
                </tr>
              </thead>
              <tbody>
                {comparison.map((c, i) => {
                  const isPositive = ["Far less severe", "10× lebih kuat", "Terkendali", "Lebih disciplined"].includes(c.verdict);
                  return (
                    <tr key={i}>
                      <td style={{ fontWeight: 600 }}>{c.metric}</td>
                      <td style={{ color: 'var(--fg-3)' }}>{c.v1998}</td>
                      <td>{c.v2026}</td>
                      <td>
                        <span className={`tag ${isPositive ? 'teal' : 'red'}`}>{c.verdict}</span>
                      </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>Sumber: BPS · BI · IMF · Pierre van der Eng (ANU 2009) · Basri (Harvard Ash 2018)</span>
              <span>Tabel 02.A</span>
            </div>
          </div>

          <div className="policy-only" style={{ marginTop: 16 }}>
            <div className="formula">
              <div className="label">Solow Growth Accounting · TFP collapse</div>
              g_Y = α · g_K + (1 − α) · g_L + g_TFP<br/>
              Indonesia 2000–2007: g_TFP = 1,7% · 2019: g_TFP = 0,4%<br/>
              ICOR 2025 = 6,33 (vs Vietnam 4,6, Malaysia 4,5, Thailand 4,4, Filipina 3,7)
            </div>
          </div>

          <div style={{ marginTop: 48 }}>
            <Pullquote attr="Ferry Irwandi · transkrip video Mei 2026">
              Risiko utama Indonesia bukan default — tapi risiko utamanya adalah stagnasi struktural.
              Kita bisa saja terus tumbuh 4–5% atau bahkan 6%, tapi gagal keluar dari middle income trap.
              Negara ini bisa saja terlihat stabil tapi makin sulit mencapai standar negara maju.
            </Pullquote>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SECTION 3: FISKAL & APBN
// ============================================================
function FiskalSection({ mode, openAnnot }) {
  const { apbn2026, scenarios, hero } = ECOID;
  // Defisit progress: Q1 used = 240.1; full year ceiling at 2.68% PDB ~ 470T
  const ceilingFullYear = 651.5; // Approx 2.68% of 24,3T... using research figure of Q1 36.8% used
  const usedPct = 36.8; // Q1 of full-year ceiling per brief

  return (
    <section className="page" id="fiskal" style={{ background: 'var(--bg-sunken)' }}>
      <div className="shell">
        <header>
          <div className="kicker">Bagian 03 · Fiskal & APBN</div>
          <h2 className="sec-title" style={{ marginTop: 14 }}>APBN sedang dibakar di tengah jalan.</h2>
          <p className="sec-sub" style={{ marginTop: 12 }}>
            Belanja Q1-2026 melonjak 31,4% YoY ke Rp815T — penyerapan 21,2% pagu, anomali vs rata-rata historis 17%.
            36,8% dari ceiling defisit setahun sudah terpakai dalam satu kuartal.
          </p>
        </header>

        <BayiHero
          illus="kalkulator"
          headline="APBN itu kayak uang dapur keluarga negara."
          sub="Penghasilan keluarga setahun: penerimaan pajak + ekspor. Pengeluaran: gaji PNS, subsidi, infrastruktur, MBG, perlinsos. Kalau pengeluaran > penghasilan, harus ngutang. Masalahnya: Q1-2026 baru 3 bulan, tapi udah hampir 37% jatah utang setahun terpakai. Kayak gaji baru turun seminggu, udah habis 40%."
        />

        <div className="gloss publik-only">
          <span className="gloss-label">Membaca anatomi APBN 2026</span>
          <strong>APBN</strong> (Anggaran Pendapatan & Belanja Negara) total <strong>Rp3.842,7T</strong>. <em>Subsidi energi</em> = pemerintah bayarin selisih harga BBM/listrik/LPG. <em>Kompensasi energi</em> = utang pemerintah ke Pertamina/PLN karena harga jual diatur murah. <em>Perlinsos</em> = bantuan sosial (PKH, BPNT, PBI-JKN, PIP). <em>MBG</em> = Makan Bergizi Gratis, dipisah dari perlinsos karena strukturnya unik. <em>Defisit ceiling</em> = batas hukum maksimal selisih belanja-penerimaan (UU 17/2003: maks 3% PDB).
        </div>

        <Pullquote attr="Ferry Irwandi · transkrip video Mei 2026">
          APBN adalah bantalan utama dalam menghadapi krisis. Kalau ruang fiskalnya sudah terkuras sejak awal tahun, kemampuan negara untuk merespons krisis jadi lebih sedikit dan lebih terbatas.
        </Pullquote>

        {/* APBN anatomy + Deficit progress */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, marginBottom: 32 }}>
          <div className="chart-card">
            <div className="chart-header">
              <div>
                <div className="chart-title">Anatomi APBN 2026 · Rp3.842,7 Triliun</div>
                <div className="chart-desc">Transfer ke rumah tangga (subsidi+kompensasi+perlinsos) mencapai 5,77% PDB —
                  outlier di antara peer Asia. Vietnam 0,9%. Thailand 1,3%. India 2,1%.</div>
              </div>
              <FlagButton id="apbn-anatomy" onFlag={openAnnot}/>
            </div>
            <BarChart
              data={apbn2026.map(d => ({...d, src: 'Buku II Nota Keuangan RAPBN 2026'}))}
              valueFormat={(v) => fmtT(v, v >= 1000 ? 0 : 1)}
              max={Math.max(...apbn2026.map(d => d.value)) * 1.15}
            />
            <div className="src-line">
              <span>Buku II Nota Keuangan RAPBN 2026 · DJPb Kemenkeu · APBN-KiTa Mei 2026</span>
              <span className="src">Grafik 03.A</span>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="chart-card">
              <div className="chart-header" style={{ marginBottom: 0 }}>
                <div>
                  <div className="chart-title" style={{ fontSize: 18 }}>Defisit Q1-2026</div>
                  <div className="chart-desc" style={{ fontSize: 12 }}>36,8% ceiling setahun terpakai · YoY +140,5%</div>
                </div>
              </div>
              <div style={{ marginTop: 20 }}>
                <ProgressBar
                  value={usedPct} max={100}
                  label="% defisit ceiling setahun"
                  used={`${usedPct.toFixed(1).replace('.',',')}%`}
                  color="var(--eco-red)"
                />
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 11, color: 'var(--fg-3)' }}>
                  <span>Q1: Rp240,1T terpakai</span>
                  <span>Ceiling 2,68% PDB</span>
                </div>
              </div>
              <hr className="rule" style={{ margin: '16px 0' }}/>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <div className="caps-sm" style={{ color: 'var(--fg-3)' }}>Belanja YoY</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: 'var(--eco-red)' }}>+31,4%</div>
                </div>
                <div>
                  <div className="caps-sm" style={{ color: 'var(--fg-3)' }}>Penerimaan YoY</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700 }}>+10,5%</div>
                </div>
              </div>
            </div>

            <div className="chart-card">
              <div className="chart-header" style={{ marginBottom: 0 }}>
                <div>
                  <div className="chart-title" style={{ fontSize: 18 }}>ICP vs Asumsi APBN</div>
                </div>
              </div>
              <div style={{ marginTop: 16, position: 'relative', height: 80 }}>
                <div style={{ position: 'absolute', left: '38%', top: 0, bottom: 0, borderLeft: '2px dashed var(--eco-ink)' }}/>
                <div style={{ position: 'absolute', left: '38%', top: -2, fontSize: 10, color: 'var(--fg-3)', fontWeight: 600, marginLeft: 4 }}>
                  ASUMSI<br/>$70
                </div>
                <div style={{ position: 'absolute', top: 32, left: 0, right: 0, height: 18, background: 'var(--bg-sunken)' }}/>
                <div style={{
                  position: 'absolute', top: 32, left: 0, height: 18,
                  width: '63.3%', background: 'var(--eco-red)',
                }}/>
                <div style={{ position: 'absolute', left: '63%', top: 32, height: 18, width: 2, background: 'var(--eco-ink)' }}/>
                <div style={{ position: 'absolute', right: 6, top: 14, fontSize: 13, fontWeight: 700, fontFamily: 'var(--font-display)', color: 'var(--eco-red)' }}>
                  $117,31
                </div>
                <div style={{ position: 'absolute', bottom: 0, left: 0, fontSize: 10, color: 'var(--fg-3)' }}>$0</div>
                <div style={{ position: 'absolute', bottom: 0, right: 0, fontSize: 10, color: 'var(--fg-3)' }}>$185 (high)</div>
              </div>
              <div style={{ marginTop: 12, padding: '10px 12px', background: 'var(--eco-red-tint)', borderLeft: '3px solid var(--eco-red)', fontSize: 12 }}>
                Gap <strong>US$47,31</strong>/bbl × Rp6,7T per $1 = <strong>+Rp317T potensi defisit tambahan</strong> jika tetap setahun.
              </div>
            </div>
          </div>
        </div>

        {/* 4 scenarios */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 16 }}>
            <div>
              <div className="eyebrow">Empat Skenario 2026</div>
              <h3 className="display" style={{ fontSize: 32, marginTop: 8 }}>Baseline masih realistis — jika Selat Hormuz dibuka Q3.</h3>
            </div>
          </div>

          <BayiCard illus="tabungan" title="Empat kemungkinan masa depan — versi ramalan cuaca.">
            Ekonom nggak tahu pasti masa depan, jadi mereka kasih <strong>probabilitas</strong>. Kayak BMKG bilang "70% hujan sore ini" —
            artinya bawa payung. Di sini: <em>50% besar</em> kita masih aman (Baseline), <strong>30%</strong> agak susah (Adverse),
            <strong> 15%</strong> kritis (Tail Risk), dan cuma <em>5%</em> tiba-tiba bagus (Bull).
            Pemerintah harus siapin rencana untuk semua skenario.
          </BayiCard>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--border)', border: '1px solid var(--border)' }}>
            {scenarios.map((s, i) => (
              <div key={i} style={{ background: 'var(--bg-elev)', padding: 24, position: 'relative' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div>
                    <div className="caps-sm" style={{ color: s.color, fontWeight: 700 }}>{s.name}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 800, color: s.color, lineHeight: 1, marginTop: 8, letterSpacing: '-0.04em' }}>
                      {s.prob}<span style={{ fontSize: 24, fontWeight: 600 }}>%</span>
                    </div>
                    <div style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 4 }}>Probabilitas</div>
                  </div>
                  <FlagButton id={`scenario-${s.name}`} onFlag={openAnnot}/>
                </div>
                <hr className="rule" style={{ margin: '16px 0' }}/>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 12px', fontSize: 12 }}>
                  <div style={{ color: 'var(--fg-3)' }}>Rupiah</div><div style={{ fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{s.kpi.rupiah}</div>
                  <div style={{ color: 'var(--fg-3)' }}>BI-Rate</div><div style={{ fontWeight: 600 }}>{s.kpi.biRate}</div>
                  <div style={{ color: 'var(--fg-3)' }}>Defisit</div><div style={{ fontWeight: 600 }}>{s.kpi.deficit}</div>
                  <div style={{ color: 'var(--fg-3)' }}>Growth</div><div style={{ fontWeight: 600 }}>{s.kpi.growth}</div>
                  <div style={{ color: 'var(--fg-3)' }}>Inflasi</div><div style={{ fontWeight: 600 }}>{s.kpi.inflasi}</div>
                </div>
                <p style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 14, lineHeight: 1.5 }}>{s.desc}</p>
              </div>
            ))}
          </div>
          <div className="policy-only" style={{ marginTop: 16 }}>
            <div className="formula">
              <div className="label">FX-augmented Taylor Rule · IMF Country Report 12/278</div>
              i_t = ρ·i_(t−1) + (1−ρ)·[r* + π* + α(π_t − π*) + β(y_t − y*) + γ(e_t − e*)]<br/>
              Kalibrasi α = 0,13 (response output gap), γ = 0,15 (FX deviation) · IMF Article IV 2025/26<br/>
              Implied BI-Rate baseline: 4,50–4,75% (domestik murni) → 5,00–5,25% (with FX stabilization mandate)
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.HeroSection = HeroSection;
window.OverviewSection = OverviewSection;
window.FiskalSection = FiskalSection;