// TARA — Halaman 1: Bank & Pembiayaan (utama)
// Paradigma: output TARA adalah RESEP AKSI, bukan bendera risiko.
// Dua wilayah berdampingan — keduanya "salurkan", yang berbeda hanya resepnya.

// Urutan faktor identik di kedua kartu agar mata langsung membandingkan panjang bar.
const NGAWI = {
  key: "ngawi",
  tone: "green",
  name: "Kab. Ngawi",
  sub: "Jawa Timur · Padi (GKG) · MT2 2026",
  composite: 2.3,
  risk: "Rendah",
  confidence: 84,
  decision: "KUR dapat disalurkan — mitigasi standar",
  badge: { tone: "green", icon: "shield-check", label: "Salurkan" },
  factors: [
    { name: "Risiko Iklim / Banjir", score: 3.0, weight: "Bobot 35%" },
    { name: "Risiko Alih Fungsi Lahan", score: 1.5, weight: "Bobot 15%" },
    { name: "Risiko OPT", score: 1.8, weight: "Bobot 25%" },
    { name: "Risiko Volatilitas Harga", score: 2.1, weight: "Bobot 25%" },
  ],
  resep: [
    { kind: "std", icon: "activity", title: "Monitoring rutin tingkat wilayah", desc: "Pemantauan iklim & OPT berkala sepanjang MT2; tanpa syarat tambahan." },
    { kind: "std", icon: "umbrella", title: "AUTP opsional (dianjurkan)", desc: "Cakupan sudah 64% — penetrasi tambahan memperkuat profil, bukan prasyarat." },
  ],
  data: [
    { k: "NPL area", v: "0,7%", icon: "percent" },
    { k: "Cakupan AUTP", v: "64%", icon: "umbrella" },
    { k: "Indeks Pertanaman", v: "2,5", icon: "repeat" },
  ],
};

const DEMAK = {
  key: "demak",
  tone: "amber",
  name: "Kab. Demak",
  sub: "Jawa Tengah · Padi (GKG) · MT2 2026",
  composite: 3.8,
  risk: "Tinggi",
  confidence: 76,
  decision: "KUR tetap disalurkan — DENGAN SYARAT",
  badge: { tone: "amber", icon: "shield-alert", label: "Salurkan dengan Syarat" },
  factors: [
    { name: "Risiko Iklim / Banjir", score: 4.5, weight: "Bobot 35%", note: "Luapan + rob pesisir" },
    { name: "Risiko Alih Fungsi Lahan", score: 3.5, weight: "Bobot 15%", note: "Konversi sawah → tambak" },
    { name: "Risiko OPT", score: 2.5, weight: "Bobot 25%" },
    { name: "Risiko Volatilitas Harga", score: 2.2, weight: "Bobot 25%" },
  ],
  resep: [
    { kind: "req", icon: "umbrella", title: "AUTP wajib", req: true, desc: "Asuransi Usaha Tani Padi menjadi prasyarat pencairan — menutup risiko gagal panen akibat banjir." },
    { kind: "req", icon: "layers", title: "Pencairan bertahap (tranche)", req: true, desc: "Plafon dilepas per tahap mengikuti realisasi tanam, bukan sekaligus di muka." },
    { kind: "req", icon: "calendar-clock", title: "Tenor adaptif mengikuti kalender banjir", req: true, desc: "Jadwal angsuran menghindari puncak rob pesisir & luapan musiman." },
  ],
  data: [
    { k: "NPL area", v: "2,1%", icon: "percent" },
    { k: "Cakupan AUTP", v: "31%", icon: "umbrella" },
    { k: "Indeks Pertanaman", v: "1,8", icon: "repeat" },
  ],
};

function FactorRow({ f }) {
  return (
    <div className="rcf-row">
      <div className="rcf-head">
        <span className="rcf-name">{f.name}{f.note ? <span className="rcf-w"> · {f.note}</span> : null} <span className="rcf-w">· {f.weight}</span></span>
        <span className="rcf-val">{f.score.toFixed(1).replace(".", ",")}<span className="of"> / 5</span></span>
      </div>
      <RiskScale score={f.score} showNum={false} />
    </div>
  );
}

function RegionCard({ d, keyLine }) {
  return (
    <div className={"region-card tone-" + d.tone}>
      <div className="rc-strip" />

      <div className="rc-top">
        <div className="rc-region">
          <div className="rc-name"><span className="ic"><Icon name="map-pin" size={17} /></span>{d.name}</div>
          <div className="rc-sub">{d.sub}</div>
        </div>
        <div className="rc-scorebox">
          <div className="rc-num"><span className="n">{d.composite.toFixed(1).replace(".", ",")}</span><span className="d">/ 5</span></div>
          <span className={"risk-pill " + d.tone}>Risiko {d.risk}</span>
        </div>
      </div>

      <div className="rc-decision">
        <div className="rc-dec-text">
          <div className="rc-dec-flow">Risiko {d.risk}<span className="ic"><Icon name="arrow-right" size={13} /></span>Rekomendasi</div>
          <div className="rc-dec-headline">{d.decision}</div>
          <div style={{ marginTop: 9 }}><StatusBadge tone={d.badge.tone} icon={d.badge.icon}>{d.badge.label}</StatusBadge></div>
        </div>
        <div className="rc-conf">
          <div className="cv">{d.confidence}%</div>
          <div className="cl">Confidence</div>
        </div>
      </div>

      <div className="resep">
        <div className="resep-eyebrow"><span className="ic"><Icon name="clipboard-list" size={14} /></span>Resep Aksi / Mitigasi</div>
        <div className="resep-list">
          {d.resep.map((r, i) => (
            <div key={i} className={"resep-item " + r.kind}>
              <span className="ic"><Icon name={r.icon} size={15} /></span>
              <div className="ri-body">
                <div className="ri-title">{r.title}{r.req && <span className="req-tag">Wajib</span>}</div>
                <div className="ri-desc">{r.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {keyLine && (
        <div className="resep-key"><span className="ic"><Icon name="info" size={15} color="var(--primary-deep)" /></span>{keyLine}</div>
      )}

      <div className="rc-factors">
        <div className="rcf-eyebrow">Explainability — 4 faktor pembentuk skor</div>
        {d.factors.map((f) => <FactorRow key={f.name} f={f} />)}
      </div>

      <div className="rc-data">
        {d.data.map((c, i) => (
          <span key={i} className="rc-chip"><span className="ic"><Icon name={c.icon} size={13} /></span><span className="k">{c.k}</span> {c.v}</span>
        ))}
      </div>
    </div>
  );
}

function BankView({ onNav }) {
  const demakWarn = getWarning("demak-banjir");
  return (
    <>
      <div className="page-head">
        <div>
          <div className="title">Bank &amp; Pembiayaan</div>
          <div className="desc">Penilaian risiko wilayah untuk penyaluran Kredit Usaha Rakyat (KUR) padi — output berupa <b style={{ fontWeight: 600, color: "var(--fg2)" }}>resep aksi</b>, bukan vonis layak/tolak.</div>
        </div>
      </div>

      <ContextHeader vintage="Februari 2026" items={[
        { icon: "map-pin", label: "Wilayah", value: "Ngawi vs Demak" },
        { icon: "wheat", label: "Komoditas", value: "Padi (GKG)" },
        { icon: "calendar", label: "Musim Tanam", value: "MT2 2026" },
      ]} />

      {/* Dominant framing — the 3-second message */}
      <div className="compare-lead">
        <div className="cl-eyebrow"><span className="ic"><Icon name="sparkles" size={14} /></span>Resep Aksi, Bukan Bendera Risiko</div>
        <h2>Kedua wilayah tetap <span className="u-green">dapat menerima KUR</span>. Yang berbeda hanya <span className="u-amber">resep mitigasinya</span> — risiko tinggi mengubah syarat, bukan menghasilkan penolakan.</h2>
        <div className="cl-sub"><span className="ic"><Icon name="shield-check" size={15} /></span><div>TARA mengerahkan opsi perlindungan lebih dulu sebelum mengecualikan — <b>melihat yang rentan untuk melindunginya, bukan untuk membuangnya.</b> Penolakan adalah pilihan terakhir, bukan default.</div></div>
      </div>

      <div className="section-gap">
        <div>
          <SecEyebrow icon="columns-2">Dua Wilayah, Dua Resep — Dibaca Berdampingan</SecEyebrow>
          <div className="region-compare">
            <RegionCard d={NGAWI} />
            <RegionCard d={DEMAK} keyLine="Mitigasi inilah yang membuat wilayah berisiko tetap bankable — bukan ditolak buta. Risiko banjir & alih fungsi lahan tinggi, namun terkelola lewat syarat di atas." />
          </div>
        </div>

        <div>
          <SecEyebrow icon="bell-ring">Pemicu Resep Demak — Peringatan Dini Lintas-Peran</SecEyebrow>
          <EarlyWarningCard mode="acute" warning={demakWarn} role="bank" onNav={onNav}
            note="Sinyal yang mendasari syarat di kartu Demak — resep di atas adalah terjemahan untuk peran Bank" />
        </div>

        <Note icon="scale">
          Skor ini adalah <b>bahan pertimbangan tingkat wilayah</b>, bukan keputusan kelayakan individu. Penetapan kelayakan dan pencairan kredit tiap debitur tetap berada pada pejabat pemutus bank sesuai ketentuan yang berlaku.
        </Note>

        <Sources list={[
          { name: "SIAP TANAM", fresh: "Feb 2026" },
          { name: "BMKG", fresh: "Feb 2026" },
          { name: "OJK", fresh: "Q4 2025" },
          { name: "Bapanas", fresh: "Mar 2026" },
        ]} />
      </div>
    </>
  );
}

Object.assign(window, { BankView });