const PlaceholderPage = ({ id, label }) => {
  const I = window.Icons;
  return (
    <div className="page" data-screen-label={id}>
      <div className="page-h">
        <div>
          <div className="ts">Module · stub view</div>
          <h1>{label}</h1>
        </div>
      </div>
      <div className="panel" style={{padding:"60px 40px"}}>
        <div style={{maxWidth:520}}>
          <div className="lbl-mini" style={{fontFamily:"var(--font-mono)", fontSize:10, color:"var(--ink-3)", letterSpacing:"0.06em", textTransform:"uppercase", marginBottom:12}}>
            Coming up
          </div>
          <h2 style={{margin:0, fontSize:22, fontWeight:550, letterSpacing:"-0.01em"}}>{label} workspace</h2>
          <p className="muted" style={{maxWidth:480, marginTop:10, lineHeight:1.55, fontSize:13}}>
            Hi-fi screen for this section is queued in the design plan. Switch to{" "}
            <span className="chip accent dot">Overview</span>,{" "}
            <span className="chip accent dot">Dispatch</span>,{" "}
            <span className="chip accent dot">Orders</span> or{" "}
            <span className="chip accent dot">Stores</span> to see the full design system applied.
          </p>
          <div style={{marginTop:18, display:"flex", gap:8}}>
            <button className="btn primary"><I.zap size={12}/>Request priority design</button>
            <button className="btn"><I.list size={12}/>View module spec</button>
          </div>
        </div>
      </div>
    </div>
  );
};
window.PlaceholderPage = PlaceholderPage;