// ADM-PROC-19 · Empty state — no requirements (AMOMS Module 1)
// Admin Web · Procurement Manager · P1 · 1440×900
// Components: C-105 Empty state block · C-001 Button
// Registered as window.Pages.firstRun

const Ic17 = window.Icons;

const STEPS_17 = [
  { t: "Create a requirement", d: "Set the variety, quantity, rate and delivery window you need." },
  { t: "Broadcast to farmers", d: "Pick groups and channels — App, SMS or WhatsApp — and send." },
  { t: "Compare & confirm", d: "Review offers side by side, shortlist, and confirm the order." },
];

const FirstRun = () => {
  const toast = useToast();
  const go = window.makeGo(toast);

  return (
    <div className="page">
      <div className="es-wrap">
        <div className="es-hero">
          <div className="es-art">
            <span className="disc"><Ic17.Procurement size={44} /></span>
            <span className="badge-ic"><Ic17.Leaf size={20} /></span>
          </div>
          <h1 className="es-h">No requirements yet</h1>
          <p className="es-sub">Start by creating your first procurement requirement. You can broadcast it to your farmer network in two clicks and start receiving offers within hours.</p>
          <div className="es-cta">
            <Button variant="primary" icon={Ic17.Plus} onClick={() => go("ADM-PROC-03.html")}>Create requirement</Button>
            <Button variant="outline" icon={Ic17.Eye} onClick={() => { toast({ title: "Opening sample requirement", desc: "Read-only — for reference only." }); go("ADM-PROC-05.html"); }}>View sample requirement</Button>
          </div>

          <div className="es-steps">
            {STEPS_17.map((s, i) => (
              <div key={i} className="es-step">
                <span className="es-step-n">{i + 1}</span>
                <div className="es-step-t">{s.t}</div>
                <div className="es-step-d">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { firstRun: FirstRun });