interface SectionFallbackProps {
  layout: string;
  reason?: string;
}

/**
 * Renders nothing in production. In development surfaces a banner so unknown
 * layouts or schema-validation failures are visible during the migration.
 */
export function SectionFallback({ layout, reason }: SectionFallbackProps) {
  if (process.env.NODE_ENV === "production") {
    return null;
  }
  return (
    <section
      style={{
        margin: "24px auto",
        maxWidth: 1100,
        padding: "16px 20px",
        border: "1px dashed #b970d0",
        borderRadius: 12,
        background: "#fff8fb",
        color: "#151515",
        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
      }}
    >
      <strong>[SectionFallback]</strong> Unknown or invalid layout: <code>{layout}</code>
      {reason ? <div style={{ marginTop: 6, opacity: 0.7 }}>{reason}</div> : null}
    </section>
  );
}