Update guest v2 branding and theming

resources/js/guest-v2/screens/SharedPhotoScreen.tsx

@@ -6,9 +6,14 @@ import { Button } from '@tamagui/button';
 import { AlertCircle, Download } from 'lucide-react';
 import StandaloneShell from '../components/StandaloneShell';
 import SurfaceCard from '../components/SurfaceCard';
+import EventLogo from '../components/EventLogo';
 import { fetchPhotoShare } from '@/guest/services/photosApi';
+import type { EventBrandingPayload } from '@/guest/services/eventApi';
 import { useTranslation } from '@/guest/i18n/useTranslation';
-import { useAppearance } from '@/hooks/use-appearance';
+import { EventBrandingProvider } from '@/guest/context/EventBrandingContext';
+import { mapEventBranding } from '../lib/eventBranding';
+import { BrandingTheme } from '../lib/brandingTheme';
+import { useGuestThemeVariant } from '../lib/guestTheme';
 
 interface ShareResponse {
   slug: string;
@@ -22,19 +27,25 @@ interface ShareResponse {
     image_urls: { full: string; thumbnail: string };
   };
   event?: { id: number; name?: string | null } | null;
+  branding?: EventBrandingPayload | null;
 }
 
 export default function SharedPhotoScreen() {
   const { slug } = useParams<{ slug: string }>();
   const { t } = useTranslation();
-  const { resolved } = useAppearance();
-  const isDark = resolved === 'dark';
-  const mutedText = isDark ? 'rgba(248, 250, 252, 0.7)' : 'rgba(15, 23, 42, 0.65)';
   const [state, setState] = React.useState<{ loading: boolean; error: string | null; data: ShareResponse | null }>({
     loading: true,
     error: null,
     data: null,
   });
+  const branding = React.useMemo(() => {
+    if (!state.data?.branding) {
+      return null;
+    }
+    return mapEventBranding(state.data.branding);
+  }, [state.data]);
+  const { isDark } = useGuestThemeVariant(branding);
+  const mutedText = isDark ? 'rgba(248, 250, 252, 0.7)' : 'rgba(15, 23, 42, 0.65)';
 
   React.useEffect(() => {
     let active = true;
@@ -93,15 +104,20 @@ export default function SharedPhotoScreen() {
   const { data } = state;
   const chips = buildChips(data, t);
 
-  return (
+  const content = (
     <StandaloneShell>
       <SurfaceCard glow>
-        <Text fontSize="$2" letterSpacing={2} textTransform="uppercase" color={mutedText}>
-          {t('share.title', 'Geteiltes Foto')}
-        </Text>
-        <Text fontSize="$6" fontWeight="$8" marginTop="$2">
-          {data.event?.name ?? t('share.defaultEvent', 'Ein besonderer Moment')}
-        </Text>
+        <XStack alignItems="center" gap="$3">
+          <EventLogo name={data.event?.name ?? t('share.defaultEvent', 'Ein besonderer Moment')} size="s" />
+          <YStack gap="$1">
+            <Text fontSize="$2" letterSpacing={2} textTransform="uppercase" color={mutedText}>
+              {t('share.title', 'Geteiltes Foto')}
+            </Text>
+            <Text fontSize="$6" fontWeight="$8">
+              {data.event?.name ?? t('share.defaultEvent', 'Ein besonderer Moment')}
+            </Text>
+          </YStack>
+        </XStack>
         {data.photo.title ? (
           <Text fontSize="$3" color={mutedText} marginTop="$1">
             {data.photo.title}
@@ -151,6 +167,18 @@ export default function SharedPhotoScreen() {
       </Button>
     </StandaloneShell>
   );
+
+  if (!branding) {
+    return content;
+  }
+
+  return (
+    <EventBrandingProvider branding={branding}>
+      <BrandingTheme>
+        {content}
+      </BrandingTheme>
+    </EventBrandingProvider>
+  );
 }
 
 function buildChips(