function HomePageIntro({ onComplete }) {
  const [animations, setAnimations] = useState<Animated.ValueXY[]>([]);
  const [opacityAnimations, setOpacityAnimations] = useState<Animated.Value[]>([]);
  const [fadeInScale, setFadeInScale] = useState(new Animated.Value(0));

  const { width, height } = Dimensions.get('window');
  const centerX = width / 2 - 200;
  const centerY = height / 2 - 420;

  const images = Array.from({ length: 6 }).flatMap(() => [
    'https://i.ibb.co/GVMYqR7/1.png',
    'https://i.ibb.co/1njfvWp/2.png',
    'https://i.ibb.co/YdpVhrf/3.png',
    'https://i.ibb.co/f4f2Cb8/4.png',
    'https://i.ibb.co/Yt7SCwr/5.png',
    'https://i.ibb.co/BVZzDwJ/6.png',
    'https://i.ibb.co/WgsPnh9/7.png',
    'https://i.ibb.co/YWhRb3b/8.png',
    'https://i.ibb.co/g6XRPqw/9.png',
    'https://i.ibb.co/PF7Dqw0/10.png',
  ]);

  const clockPositions = Array.from({ length: 60 }, (_, i) => {
    const angle = (i * (360 / 60)) * (Math.PI / 180);
    const x = centerX + Math.cos(angle) * 400;
    const y = centerY + Math.sin(angle) * 600;
    return { x, y };
  });

  useEffect(() => {
    const shuffledPositions = clockPositions.sort(() => Math.random() - 0.5);
    const initialAnimations = images.map((_, index) => {
      const position = shuffledPositions[index % shuffledPositions.length];
      return new Animated.ValueXY(position);
    });

    const opacityValues = images.map(() => new Animated.Value(1));
    setAnimations(initialAnimations);
    setOpacityAnimations(opacityValues);

    animateImagesSequentially(initialAnimations, opacityValues);

    Animated.timing(fadeInScale, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: true,
    }).start(() => {
      Animated.parallel([
        Animated.timing(fadeInScale, {
          toValue: 10,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.timing(fadeInScale, {
          toValue: 0,
          duration: 1000,
          useNativeDriver: true,
        }),
      ]).start(onComplete);
    });
  }, []);

  const animateImagesSequentially = async (animationValues, opacityValues) => {
    const animationDuration = 850;
    const overlapDuration = 12;

    const promises = animationValues.map((anim, i) => {
      const startDelay = i * overlapDuration;
      return new Promise<void>((resolve) => {
        setTimeout(() => {
          Animated.parallel([
            Animated.timing(anim, {
              toValue: { x: centerX, y: centerY },
              duration: animationDuration,
              useNativeDriver: true,
            }),
            Animated.timing(opacityValues[i], {
              toValue: 0,
              duration: animationDuration,
              useNativeDriver: true,
            }),
          ]).start(() => resolve());
        }, startDelay);
      });
    });

    await Promise.all(promises);
  };

  return (
    <View style={styles.container}>
      {images.map((image, index) => (
        <Animated.Image
          key={index}
          source={{ uri: image }}
          style={[
            styles.image,
            {
              transform: animations[index]
                ? animations[index].getTranslateTransform()
                : [],
              opacity: opacityAnimations[index] || 1,
            },
          ]}
        />
      ))}
      <Animated.Image
        source={{ uri: 'https://i.postimg.cc/gkwzvMYP/1-copy.png' }}
        style={[
          styles.centerImage,
          {
            transform: [{ scale: fadeInScale }],
          },
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#BFDEF8',
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    position: 'absolute',
    width: 200,
    height: 200,
    resizeMode: 'contain',
  },
  centerImage: {
    position: 'absolute',
    width: 350,
    height: 350,
    resizeMode: 'contain',
  },
});