portal/src/components/ShellEmpty.tsx

// Empty state for surfaces whose real backend hasn't shipped yet.
// `milestone` names the milestone that unblocks the surface; `cta` is an
// optional in-portal action (link or button) the user can take in the
// meantime (e.g., "Browse the catalog" while real billing waits on M8.3).

import type { ReactNode } from "react";

export function ShellEmpty({
  title,
  description,
  milestone,
  details,
  cta,
}: {
  title: string;
  description: string;
  milestone: string;
  details?: string;
  cta?: ReactNode;
}) {
  return (
    <section style={{ maxWidth: 720 }}>
      <h1 style={{ fontSize: 28, marginBottom: 8 }}>{title}</h1>
      <p style={{ color: "#444", marginBottom: 24 }}>{description}</p>
      <div
        style={{
          padding: 16,
          border: "1px dashed #ddd",
          borderRadius: 8,
          background: "#fafafa",
          color: "#666",
          fontSize: 14,
        }}
      >
        <div style={{ marginBottom: details ? 8 : 0 }}>
          Lands in <code>{milestone}</code>. See{" "}
          <a
            href="https://gitea.meghsakha.com/platform/docs/src/branch/main/PLATFORM_ARCHITECTURE.md"
            style={{ color: "#0070f3" }}
          >
            PLATFORM_ARCHITECTURE.md §5a
          </a>
          .
        </div>
        {details && <p style={{ marginTop: 8, marginBottom: 0 }}>{details}</p>}
        {cta && <div style={{ marginTop: 12 }}>{cta}</div>}
      </div>
    </section>
  );
}

export function NotAuthorized() {
  return (
    <section style={{ maxWidth: 720 }}>
      <h1 style={{ fontSize: 28, marginBottom: 8 }}>403 — Not authorized</h1>
      <p style={{ color: "#444" }}>
        This surface requires a role your account doesn&apos;t have. If you think
        that&apos;s a mistake, ask an IT_ADMIN on your tenant to invite you with
        the right role.
      </p>
    </section>
  );
}