Fix guest demo UX and enforce guest limits

resources/js/guest/components/DemoReadOnlyNotice.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { motion, type HTMLMotionProps } from 'framer-motion';
+import { ZapOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export type DemoReadOnlyNoticeProps = {
+  title: string;
+  copy: string;
+  hint?: string;
+  ctaLabel?: string;
+  onCta?: () => void;
+  radius?: number;
+  bodyFont?: string;
+  motionProps?: HTMLMotionProps<'div'>;
+};
+
+export default function DemoReadOnlyNotice({
+  title,
+  copy,
+  hint,
+  ctaLabel,
+  onCta,
+  radius,
+  bodyFont,
+  motionProps,
+}: DemoReadOnlyNoticeProps) {
+  return (
+    <motion.div
+      className="rounded-[28px] border border-white/15 bg-black/70 p-5 text-white shadow-2xl backdrop-blur"
+      style={{ borderRadius: radius, fontFamily: bodyFont }}
+      {...motionProps}
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
+          <ZapOff className="h-5 w-5 text-amber-200" />
+        </div>
+        <div className="space-y-1">
+          <p className="text-sm font-semibold">{title}</p>
+          <p className="text-xs text-white/80">{copy}</p>
+          {hint ? <p className="text-[11px] text-white/60">{hint}</p> : null}
+        </div>
+      </div>
+      {ctaLabel && onCta ? (
+        <div className="mt-4 flex flex-wrap gap-3">
+          <Button
+            size="sm"
+            variant="secondary"
+            className="rounded-full bg-white/90 text-slate-900 hover:bg-white"
+            onClick={onCta}
+          >
+            {ctaLabel}
+          </Button>
+        </div>
+      ) : null}
+    </motion.div>
+  );
+}