rebreak-monorepo/apps/rebreak-native/components/BrandSplash.tsx

import { useEffect } from 'react';
import { Dimensions, Image, View } from 'react-native';
import Animated, {
  Easing,
  runOnJS,
  useAnimatedStyle,
  useReducedMotion,
  useSharedValue,
  withDelay,
  withSequence,
  withTiming,
} from 'react-native-reanimated';
import Svg, { Defs, RadialGradient, Rect, Stop } from 'react-native-svg';
import { useTranslation } from 'react-i18next';

const { height: SH } = Dimensions.get('window');

const EASE_OUT = Easing.out(Easing.cubic);
const EASE_IN = Easing.in(Easing.cubic);

type Props = {
  onDone?: () => void;
};

export function BrandSplash({ onDone }: Props) {
  const { t } = useTranslation();
  const reducedMotion = useReducedMotion();

  const containerOpacity = useSharedValue(1);
  const logoOpacity = useSharedValue(0);
  const logoScale = useSharedValue(reducedMotion ? 1 : 0.88);
  const nameOpacity = useSharedValue(0);
  const nameTranslateY = useSharedValue(reducedMotion ? 0 : 10);
  const taglineOpacity = useSharedValue(0);
  const taglineTranslateY = useSharedValue(reducedMotion ? 0 : 8);
  const glowOpacity = useSharedValue(0);
  const footerOpacity = useSharedValue(0);

  useEffect(() => {
    if (reducedMotion) {
      const dur = 500;
      const cfg = { duration: dur, easing: EASE_OUT };
      logoOpacity.value = withTiming(1, cfg);
      nameOpacity.value = withTiming(1, cfg);
      taglineOpacity.value = withTiming(1, cfg);
      footerOpacity.value = withTiming(1, cfg);

      containerOpacity.value = withDelay(
        2700,
        withTiming(0, { duration: 400, easing: EASE_IN }, (finished) => {
          if (finished && onDone) runOnJS(onDone)();
        }),
      );
      return;
    }

    const revealCfg = (duration: number) => ({ duration, easing: EASE_OUT });

    glowOpacity.value = withTiming(1, revealCfg(1000));

    logoOpacity.value = withDelay(100, withTiming(1, revealCfg(700)));
    logoScale.value = withDelay(100, withTiming(1, revealCfg(750)));

    nameOpacity.value = withDelay(250, withTiming(1, revealCfg(600)));
    nameTranslateY.value = withDelay(250, withTiming(0, revealCfg(600)));

    taglineOpacity.value = withDelay(500, withTiming(1, revealCfg(550)));
    taglineTranslateY.value = withDelay(500, withTiming(0, revealCfg(550)));

    footerOpacity.value = withDelay(700, withTiming(1, revealCfg(500)));

    containerOpacity.value = withDelay(
      3300,
      withTiming(0, { duration: 450, easing: EASE_IN }, (finished) => {
        if (finished && onDone) runOnJS(onDone)();
      }),
    );
  }, []);

  const containerStyle = useAnimatedStyle(() => ({
    opacity: containerOpacity.value,
  }));

  const glowStyle = useAnimatedStyle(() => ({
    opacity: glowOpacity.value,
  }));

  const logoStyle = useAnimatedStyle(() => ({
    opacity: logoOpacity.value,
    transform: [{ scale: logoScale.value }],
  }));

  const nameStyle = useAnimatedStyle(() => ({
    opacity: nameOpacity.value,
    transform: [{ translateY: nameTranslateY.value }],
  }));

  const taglineStyle = useAnimatedStyle(() => ({
    opacity: taglineOpacity.value,
    transform: [{ translateY: taglineTranslateY.value }],
  }));

  const footerStyle = useAnimatedStyle(() => ({
    opacity: footerOpacity.value,
  }));

  return (
    <Animated.View style={[{ flex: 1, backgroundColor: '#0f172a', overflow: 'hidden' }, containerStyle]}>
      <Animated.View
        pointerEvents="none"
        style={[{ position: 'absolute', top: 0, left: 0, right: 0, height: SH * 0.55 }, glowStyle]}
      >
        <Svg width="100%" height="100%">
          <Defs>
            <RadialGradient id="splashTopGlow" cx="50%" cy="0%" rx="70%" ry="100%" fx="50%" fy="0%">
              <Stop offset="0%" stopColor="#1e3a8a" stopOpacity="0.9" />
              <Stop offset="100%" stopColor="#1e3a8a" stopOpacity="0" />
            </RadialGradient>
          </Defs>
          <Rect width="100%" height="100%" fill="url(#splashTopGlow)" />
        </Svg>
      </Animated.View>

      <Animated.View
        pointerEvents="none"
        style={[{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, glowStyle]}
      >
        <Svg width="100%" height="100%">
          <Defs>
            <RadialGradient id="splashAccentHalo" cx="50%" cy="50%" rx="45%" ry="45%">
              <Stop offset="0%" stopColor="#2E7FD4" stopOpacity="0.14" />
              <Stop offset="100%" stopColor="#2E7FD4" stopOpacity="0" />
            </RadialGradient>
          </Defs>
          <Rect width="100%" height="100%" fill="url(#splashAccentHalo)" />
        </Svg>
      </Animated.View>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 20, paddingHorizontal: 16 }}>
        <Animated.Text
          style={[
            {
              fontFamily: 'Nunito_800ExtraBold',
              fontSize: 48,
              letterSpacing: -1,
              color: '#ffffff',
              textAlign: 'center',
              marginBottom: 4,
            },
            nameStyle,
          ]}
        >
          {t('appHeader.appName')}
        </Animated.Text>

        <Animated.View style={logoStyle}>
          <Image
            source={require('../assets/icon.png')}
            style={{ width: 152, height: 152, borderRadius: 26 }}
            resizeMode="contain"
          />
        </Animated.View>

        <Animated.Text
          style={[
            {
              fontFamily: 'Nunito_600SemiBold',
              fontSize: 19,
              letterSpacing: 0.1,
              color: 'rgba(255,255,255,0.88)',
              textAlign: 'center',
              marginTop: 4,
            },
            taglineStyle,
          ]}
        >
          {t('splash.tagline')}
        </Animated.Text>
      </View>

      <Animated.Text
        style={[
          {
            position: 'absolute',
            bottom: 32,
            left: 0,
            right: 0,
            fontFamily: 'Nunito_400Regular',
            fontSize: 11,
            letterSpacing: 1.5,
            textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.28)',
            textAlign: 'center',
          },
          footerStyle,
        ]}
      >
        {t('splash.madeInGermany')}
      </Animated.Text>
    </Animated.View>
  );
}