// TARA — Halaman 4: Koperasi Tani
const OFFTAKERS = [
  { rank: 1, name: "PT Pakan Nusantara", type: "Pabrik pakan ternak", price: 5050, vol: "≤ 5.000 ton", verified: true },
  { rank: 2, name: "PT Agri Feed Jatim", type: "Pabrik pakan ternak", price: 5000, vol: "≤ 3.500 ton", verified: true },
  { rank: 3, name: "Koperasi Ternak Mandiri", type: "Agregator pakan", price: 4950, vol: "≤ 2.000 ton", verified: true },
];

function KoperasiView({ onNav }) {
  return (
    <>
      <div className="page-head">
        <div>
          <div className="title">Koperasi Tani</div>
          <div className="desc">Keputusan jual kolektif &amp; matching offtaker untuk keuntungan anggota.</div>
        </div>
      </div>

      <ContextHeader vintage="Februari 2026" items={[
        { icon: "map-pin", label: "Wilayah", value: "Kab. Ngawi, Jawa Timur" },
        { icon: "wheat", label: "Komoditas", value: "Jagung" },
        { icon: "calendar", label: "Periode", value: "Panen MT2 2026" },
      ]} />

      <Recommendation
        tone="green"
        headline="Jual kolektif ke offtaker — margin +Rp450/kg vs tengkulak"
        badge={{ tone: "green", icon: "handshake", label: "Aksi: Jual Kolektif" }}
        sub="Tiga offtaker pakan ternak terverifikasi siap menyerap. Volume panen anggota cukup untuk memenuhi kontrak kolektif, sehingga koperasi memperoleh harga di atas tengkulak."
        confidence={79}
        confLabel="Permintaan offtaker terverifikasi"
        confNote="Lebih rendah dari halaman lain karena proyeksi harga jagung lebih fluktuatif dan serapan offtaker bergantung kontrak musiman."
        vintage="Feb 2026"
        facts={[
          { icon: "package", label: "Volume panen", value: "8.400 ton" },
          { icon: "users", label: "Anggota aktif", value: "234" },
          { icon: "badge-check", label: "Offtaker terverifikasi", value: "3" },
          { icon: "trending-up", label: "Selisih margin", value: "+Rp450/kg" },
        ]}
      />

      <div className="section-gap">
        <div className="two-col">
          <div>
            <SecEyebrow icon="badge-check">Offtaker Terverifikasi &amp; Harga Tawaran</SecEyebrow>
            <div style={{ display: "grid", gap: 10 }}>
              {OFFTAKERS.map((o) => (
                <div key={o.rank} className="list-row" style={{ gridTemplateColumns: "auto 1fr auto" }}>
                  <span className="lr-rank">{o.rank}</span>
                  <div>
                    <div className="lr-name">{o.name} {o.verified && <Icon name="badge-check" size={14} color="var(--success-solid)" style={{ display: "inline", verticalAlign: "-2px", marginLeft: 2 }} />}</div>
                    <div className="lr-meta">{o.type} · serapan {o.vol}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ font: "700 16px/20px var(--font-sans)", color: "var(--fg1)" }}>Rp{fmtID(o.price)}</div>
                    <div style={{ font: "var(--t-tiny)", color: "var(--fg4)" }}>per kg</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="section-gap">
            <Panel icon="git-compare" title="Perbandingan Margin Jual" sub="Per kg jagung pipil kering">
              <div style={{ display: "grid", gap: 14 }}>
                <div className="bar-item">
                  <div className="bi-top"><span style={{ color: "var(--success-fg)" }}>Jual kolektif (offtaker)</span><span className="v"><b style={{ color: "var(--success-fg)" }}>Rp5.050</b>/kg</span></div>
                  <div className="bar-track"><span style={{ width: "100%", background: "var(--success-solid)" }} /></div>
                </div>
                <div className="bar-item">
                  <div className="bi-top"><span style={{ color: "var(--fg3)" }}>Jual ke tengkulak</span><span className="v"><b>Rp4.600</b>/kg</span></div>
                  <div className="bar-track"><span style={{ width: "91%", background: "var(--fg5)" }} /></div>
                </div>
              </div>
              <div style={{ marginTop: 16, padding: "12px 14px", borderRadius: 12, background: "var(--success-bg)", border: "1px solid var(--success-border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ font: "var(--t-body)", color: "var(--success-fg)" }}>Potensi tambahan pendapatan kolektif</div>
                <div style={{ font: "700 18px/24px var(--font-sans)", color: "var(--success-fg)" }}>+Rp 3,78 miliar</div>
              </div>
            </Panel>
          </div>
        </div>

        <div>
          <SecEyebrow icon="line-chart">Proyeksi Harga &amp; Permintaan Wilayah</SecEyebrow>
          <div className="cards-3">
            <div className="stat-card">
              <div className="sc-top"><span className="ic"><Icon name="banknote" size={14} /></span>Proyeksi Harga Jagung</div>
              <div className="sc-val">Rp5.100<span className="u">/kg</span></div>
              <div className="sc-sub"><span className="trend-pill up"><Icon name="trending-up" size={12} color="var(--success-fg)" />Naik 3% (90 hari)</span></div>
            </div>
            <div className="stat-card">
              <div className="sc-top"><span className="ic"><Icon name="factory" size={14} /></span>Permintaan Pakan Regional</div>
              <div className="sc-val">Tinggi</div>
              <div className="sc-sub"><span className="trend-pill up"><Icon name="trending-up" size={12} color="var(--success-fg)" />Serapan industri meningkat</span></div>
            </div>
            <div className="stat-card">
              <div className="sc-top"><span className="ic"><Icon name="calendar-clock" size={14} /></span>Rekomendasi Waktu Jual</div>
              <div className="sc-val" style={{ fontSize: 18, lineHeight: "24px" }}>Segera pasca-panen</div>
              <div className="sc-sub">Selagi harga & permintaan tinggi</div>
            </div>
          </div>
        </div>

        <div>
          <SecEyebrow icon="bell-ring">Peringatan Dini Wilayah</SecEyebrow>
          <EarlyWarningCard mode="calm" region="Kab. Ngawi" />
        </div>

        <Note icon="info">
          Rekomendasi aksi <b>jual kolektif</b> didasarkan pada harga &amp; permintaan terverifikasi saat ini. Bila tren harga berbalik turun, TARA akan menyarankan opsi <b>tunda</b> atau <b>matching</b> offtaker alternatif.
        </Note>

        <Sources list={[
          { name: "SIAP TANAM", fresh: "Feb 2026" },
          { name: "Bapanas", fresh: "Mar 2026" },
          { name: "Offtaker terverifikasi", fresh: "Feb 2026" },
          { name: "BPS Harga", fresh: "Jan 2026" },
        ]} />
      </div>
    </>
  );
}

Object.assign(window, { KoperasiView });