// TARA — Halaman 0: Hero / National Command View
function HeroView({ onSelectRole }) {
  const roles = [
    { key: "bank", icon: "landmark", name: "Bank & Pembiayaan", primary: true, badge: "Unggulan",
      desc: "Credit scoring wilayah yang explainable untuk penyaluran KUR." },
    { key: "pemda", icon: "building-2", name: "Pemerintah Daerah",
      desc: "Pertajam subsidi & intervensi berbasis neraca pangan wilayah." },
    { key: "distributor", icon: "truck", name: "Distributor",
      desc: "Optimasi koridor distribusi surplus menuju wilayah defisit." },
    { key: "koperasi", icon: "users", name: "Koperasi Tani",
      desc: "Keputusan jual kolektif & matching offtaker untuk anggota." },
  ];

  return (
    <div className="hero-wrap">
      <header className="hero-top">
        <div className="brand">
          <TaraMark size={32} />
          <div>
            <div className="name">TARA</div>
            <div className="brand-sub">Territorial Analytics for Regional Agriculture</div>
          </div>
        </div>
        <div className="ver"><span className="dot" />Mesin keputusan aktif · vintage Feb 2026<VintageNote align="right" dir="down" /></div>
      </header>

      <div className="hero-body">
        <div className="hero-eyebrow">National Command View</div>

        {/* dominant decision strip */}
        <div className="nat-strip" style={{ marginBottom: 20 }}>
          <div>
            <div className="ns-eyebrow"><span className="ic"><Icon name="sparkles" size={14} color="#fff" /></span>Rekomendasi Nasional</div>
            <h1>
              Defisit pangan di <span className="mark mark-red">23 kabupaten</span> — alihkan <span className="mark mark-green">surplus Jawa Timur</span> ke koridor Indonesia Timur secara terprioritas.
            </h1>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 16 }}>
              {[
                { ic: "map-pin", label: "Defisit", value: "23 kabupaten" },
                { ic: "wheat", label: "Surplus inti", value: "Jatim · Sulsel · NTB" },
                { ic: "warehouse", label: "Stok nasional", value: "4,3 juta ton" },
              ].map((f, i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: 999, background: "rgba(255,255,255,.10)", border: "1px solid rgba(255,255,255,.16)", font: "600 12px/16px var(--font-sans)", color: "#fff" }}>
                  <Icon name={f.ic} size={13} /><span style={{ color: "#94A3B8" }}>{f.label}</span> {f.value}
                </span>
              ))}
            </div>
          </div>
          <div className="ns-conf">
            <div className="ring" style={{ width: 84, height: 84 }}>
              <svg width="84" height="84">
                <circle cx="42" cy="42" r="37" fill="none" stroke="rgba(255,255,255,.22)" strokeWidth="7" />
                <circle cx="42" cy="42" r="37" fill="none" stroke="#86EFAC" strokeWidth="7" strokeLinecap="round"
                  strokeDasharray={2 * Math.PI * 37} strokeDashoffset={2 * Math.PI * 37 * (1 - 0.88)} />
              </svg>
              <span className="pct">88%</span>
            </div>
            <span className="lbl">Confidence</span>
          </div>
        </div>

        {/* map + key numbers */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 300px", gap: 16, marginBottom: 20, alignItems: "stretch" }}>
          <div className="map-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8, flexWrap: "wrap", gap: 12 }}>
              <div>
                <div className="panel-title"><span className="ic"><Icon name="map" size={16} /></span>Peta Neraca Pangan Nasional</div>
                <div className="panel-sub">Heatmap surplus–defisit beras · merah = <b style={{ fontWeight: 600, color: "var(--fg2)" }}>prioritas penyaluran</b>, bukan wilayah yang dihindari</div>
              </div>
              <div className="map-legend">
                <span className="lg"><span className="sw" style={{ background: "#22C55E" }} />Surplus · sumber</span>
                <span className="lg"><span className="sw" style={{ background: "#CBD5E1" }} />Seimbang</span>
                <span className="lg"><span className="sw" style={{ background: "#DC2626" }} />Prioritas penyaluran</span>
                <span className="lg"><span className="sw" style={{ background: "#0857C3", height: 3, width: 16, borderRadius: 2 }} />Koridor</span>
              </div>
            </div>
            <IndonesiaMap />
          </div>

          <div style={{ display: "grid", gridTemplateRows: "repeat(3, 1fr)", gap: 12 }}>
            <button className="stat-card clickable" style={{ justifyContent: "center" }} onClick={() => onSelectRole("pemda")}>
              <div className="sc-top"><span className="ic"><Icon name="circle-alert" size={14} /></span>Kabupaten Defisit</div>
              <div className="sc-val" style={{ color: "var(--danger-fg)" }}>23</div>
              <div className="sc-sub">Mayoritas di Indonesia Timur</div>
              <span className="sc-link">Buka Pemerintah Daerah <span className="ic"><Icon name="arrow-right" size={13} color="var(--primary-mid)" /></span></span>
            </button>
            <button className="stat-card clickable" style={{ justifyContent: "center" }} onClick={() => onSelectRole("distributor")}>
              <div className="sc-top"><span className="ic"><Icon name="trending-up" size={14} /></span>Surplus Terkonsentrasi</div>
              <div className="sc-val" style={{ fontSize: 18, lineHeight: "24px", color: "var(--success-fg)" }}>Jatim · Sulsel · NTB</div>
              <div className="sc-sub">Sumber penyaluran prioritas</div>
              <span className="sc-link">Buka Distributor <span className="ic"><Icon name="arrow-right" size={13} color="var(--primary-mid)" /></span></span>
            </button>
            <button className="stat-card clickable" style={{ justifyContent: "center" }} onClick={() => onSelectRole("pemda")}>
              <div className="sc-top"><span className="ic"><Icon name="warehouse" size={14} /></span>Stok Beras Nasional</div>
              <div className="sc-val">4,3<span className="u">juta ton</span></div>
              <div className="sc-sub">Referensi Maret 2026</div>
              <span className="sc-link">Lihat neraca pangan <span className="ic"><Icon name="arrow-right" size={13} color="var(--primary-mid)" /></span></span>
            </button>
          </div>
        </div>

        {/* role selector */}
        <div className="hero-eyebrow" style={{ marginBottom: 12 }}>Pilih Ruang Keputusan</div>
        <div className="role-grid" style={{ marginBottom: 18 }}>
          {roles.map((r) => (
            <button key={r.key} className={"role-card" + (r.primary ? " primary" : "")} onClick={() => onSelectRole(r.key)}>
              {r.badge && <span className="rc-badge">{r.badge}</span>}
              <span className="rc-icon"><span className="ic"><Icon name={r.icon} size={21} color="var(--primary-deep)" /></span></span>
              <div className="rc-name">{r.name}</div>
              <div className="rc-desc">{r.desc}</div>
              <span className="rc-go">Buka dashboard <span className="ic"><Icon name="arrow-right" size={14} color="var(--primary-mid)" /></span></span>
            </button>
          ))}
        </div>

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

Object.assign(window, { HeroView });