/* ============================================================
   FacilityOS — Placeholder / empty states for unbuilt screens
   ============================================================ */
window.Screens = window.Screens || {};

const PLACEHOLDER = {
  settings:   { icon: "settings", title: "Settings", desc: "Team & roles, facilities, request portal branding, SLAs, notifications and integrations." },
  profile:    { icon: "user", title: "Your profile", desc: "Account details, notification preferences, and assigned facilities for Jordan Avery." },
};

Screens.Placeholder = function Placeholder({ screen, go }) {
  const p = PLACEHOLDER[screen] || { icon: "box", title: screen, desc: "This area is part of the full product scope." };
  return (
    <div className="page fade-up" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: "62vh" }}>
      <div style={{ textAlign: "center", maxWidth: 420 }}>
        <div style={{ width: 72, height: 72, borderRadius: 20, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "center", background: UI.tint("--accent", 13), color: "var(--accent-strong)", boxShadow: "var(--shadow-sm)" }}>
          <Icon name={p.icon} size={32} />
        </div>
        <h2 style={{ margin: "20px 0 0", fontSize: 22, fontWeight: 700, letterSpacing: "-.02em" }}>{p.title}</h2>
        <p style={{ margin: "10px 0 0", fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)", textWrap: "pretty" }}>{p.desc}</p>
        <div style={{ marginTop: 12, display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12, fontWeight: 600, color: "var(--text-faint)", background: "var(--surface-2)", border: "1px solid var(--border)", padding: "5px 12px", borderRadius: 99 }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: "var(--c-medium)" }} /> Designed next · outside the 5 priority screens
        </div>
        <div style={{ marginTop: 22, display: "flex", gap: 10, justifyContent: "center" }}>
          <UI.Button variant="primary" icon="dashboard" onClick={() => go("dashboard")}>Back to dashboard</UI.Button>
        </div>
      </div>
    </div>
  );
};