Add upgrade CTAs for branding and watermarks

resources/js/admin/mobile/BrandingPage.tsx

@@ -339,10 +339,11 @@ export default function MobileBrandingPage() {
         </MobileCard>
 
         {disabled ? (
-          <InfoBadge
-            icon={<Lock size={16} color={danger} />}
-            text={t('events.watermark.lockedDisabled', 'Kein Wasserzeichen in diesem Paket.')}
-            tone="danger"
+          <UpgradeCard
+            title={t('events.watermark.lockedTitle', 'Unlock watermarks')}
+            body={t('events.watermark.lockedBody', 'Custom watermarks are available with the Premium package.')}
+            actionLabel={t('events.watermark.upgradeAction', 'Upgrade to Premium')}
+            onPress={() => navigate(adminPath('/mobile/billing/shop?feature=watermark_allowed'))}
           />
         ) : null}
 
@@ -605,10 +606,11 @@ export default function MobileBrandingPage() {
           </MobileCard>
 
           {!brandingAllowed ? (
-            <InfoBadge
-              icon={<Lock size={16} color={danger} />}
-              text={t('events.branding.lockedBranding', 'Branding ist in diesem Paket gesperrt.')}
-              tone="danger"
+            <UpgradeCard
+              title={t('events.branding.lockedTitle', 'Unlock branding')}
+              body={t('events.branding.lockedBody', 'Upgrade to Standard or Premium to unlock event branding.')}
+              actionLabel={t('events.branding.upgradeAction', 'Upgrade package')}
+              onPress={() => navigate(adminPath('/mobile/billing/shop?feature=custom_branding'))}
             />
           ) : null}
 
@@ -1468,6 +1470,52 @@ function InfoBadge({ icon, text, tone = 'info' }: { icon?: React.ReactNode; text
   );
 }
 
+function UpgradeCard({
+  title,
+  body,
+  actionLabel,
+  onPress,
+}: {
+  title: string;
+  body: string;
+  actionLabel: string;
+  onPress: () => void;
+}) {
+  const { textStrong, muted, border, surface, primary, accentSoft } = useAdminTheme();
+
+  return (
+    <MobileCard
+      space="$4"
+      padding="$6"
+      alignItems="center"
+      justifyContent="center"
+      borderColor={border}
+      backgroundColor={surface}
+    >
+      <YStack
+        width={64}
+        height={64}
+        borderRadius={32}
+        backgroundColor={accentSoft}
+        alignItems="center"
+        justifyContent="center"
+        marginBottom="$2"
+      >
+        <Lock size={32} color={primary} />
+      </YStack>
+      <YStack space="$2" alignItems="center">
+        <Text fontSize="$xl" fontWeight="900" color={textStrong} textAlign="center">
+          {title}
+        </Text>
+        <Text fontSize="$sm" color={muted} textAlign="center">
+          {body}
+        </Text>
+      </YStack>
+      <CTAButton label={actionLabel} onPress={onPress} />
+    </MobileCard>
+  );
+}
+
 function TabButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
   const { backdrop, surfaceMuted, border, surface } = useAdminTheme();
   return (