// FRM-PROC-15 · Home empty state — no requirements yet
const HomeEmptyScreen = ({ nav, t }) => {
  const Ic = window.Icons, FD = window.FD;
  const firstrun = t.homeEmptyState === "firstrun";
  return (
    <>
      <div className="fm-greet">
        <span className="fm-avatar-lg" style={{ width: 44, height: 44, fontSize: 17 }}>{FD.ME.initials}</span>
        <div className="fm-greet-text">
          <div className="fm-greet-hi">Karibu back,</div>
          <div className="fm-greet-name">Hello, {FD.ME.first}</div>
        </div>
        <button className="fm-iconbtn" aria-label="Notifications" onClick={() => nav.go("notifications")}>
          <Ic.Bell size={22}/>
        </button>
      </div>

      <div className="fm-chips">
        {["All", "Hass", "Fuerte", "Pinkerton", "Urgent"].map(c => (
          <button key={c} className={`fm-chip ${c === "All" ? "on" : ""}`}>{c === "Urgent" && <Ic.Bolt size={13}/>}{c}</button>
        ))}
      </div>

      <div className="fm-body">
        <div className="fm-empty">
          <div className="fm-empty-art"><Ic.Sprout size={46}/></div>
          <div className="fm-empty-title">{firstrun ? "Welcome to AMOMS!" : "No active requirements right now"}</div>
          <div className="fm-empty-desc">
            {firstrun
              ? "When buyers post requirements for your products, you'll see them here. We'll also send you a notification."
              : "We'll send you a notification when new opportunities match your products."}
          </div>
          <button className="fm-btn fm-btn-outline fm-btn-sm fm-btn-pill" style={{ marginTop: 20 }} onClick={() => nav.go("profile")}>
            <Ic.Sprout size={16}/> Update products you grow
          </button>
          {firstrun && (
            <div style={{ marginTop: 14, fontSize: 12.5 }} className="muted">
              Auto-refreshing every 60s while you wait.
            </div>
          )}
        </div>
      </div>
    </>
  );
};

window.FarmerPages = Object.assign(window.FarmerPages || {}, {
  homeEmpty: { brandStatus: false, render: (ctx) => <HomeEmptyScreen {...ctx}/> },
});