Wrapped experience

export function WrappedContainer({ stats, onComplete }: WrappedContainerProps) {
  const userClass = classifyUser(stats.transactions, stats.totalVolumeUSD);
  
  // Build slides array based on available data
  const availableSlides: SlideType[] = ['intro', 'totalBridges'];

  if (stats.mostUsedSourceChain) availableSlides.push('topSource');
  if (stats.mostUsedDestinationChain) availableSlides.push('topDestination');
  if (stats.totalVolumeUSD > 0) availableSlides.push('volume');
  if (stats.mostBridgedToken) availableSlides.push('topToken');
  if (stats.busiestDay) availableSlides.push('busiestDay');
  
  availableSlides.push('userClass', 'availNexus', 'summary');

  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
  const currentSlide = availableSlides[currentSlideIndex];

  // Navigation handlers
  const goToNextSlide = useCallback(() => {
    if (currentSlideIndex < availableSlides.length - 1) {
      setCurrentSlideIndex((prev) => prev + 1);
    } else if (onComplete) {
      onComplete();
    }
  }, [currentSlideIndex, availableSlides.length, onComplete]);

  return (
    <div className="relative w-full h-screen overflow-hidden cursor-pointer">
      <AnimatePresence mode="wait">{renderSlide()}</AnimatePresence>
      {/* Progress indicators and navigation */}
    </div>
  );
}

export function SlideContainer({ children, gradient }: SlideContainerProps) {
  return (
    <motion.div
      className={`min-h-screen w-full flex flex-col items-center justify-center bg-gradient-to-br ${gradient}`}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div className="max-w-4xl w-full text-center">{children}</div>
    </motion.div>
  );
}

export function IntroSlide({ year }: IntroSlideProps) {
  return (
    <SlideContainer gradient="from-neutral-950 via-neutral-900 to-neutral-950">
      <motion.div
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ delay: 0.2, duration: 0.8, ease: 'easeOut' }}
      >
        <motion.h1
          className="text-5xl md:text-7xl lg:text-[10rem] font-bold"
          initial={{ y: 50 }}
          animate={{ y: 0 }}
          transition={{ delay: 0.4, duration: 0.6 }}
        >
          Bridge
          <span className="inline-block mt-3">Wrapped</span>
        </motion.h1>
        <motion.p
          className="text-xl md:text-2xl lg:text-6xl"
          initial={{ y: 30, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ delay: 0.7, duration: 0.6 }}
        >
          {year}
        </motion.p>
      </motion.div>
    </SlideContainer>
  );
}

export function AnimatedCounter({ value, formatFn }: AnimatedCounterProps) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let startTime: number;
    const duration = 1500;

    const animate = (currentTime: number) => {
      if (!startTime) startTime = currentTime;
      const progress = Math.min((currentTime - startTime) / duration, 1);
      
      const easeOut = 1 - Math.pow(1 - progress, 3);
      setCount(Math.floor(value * easeOut));

      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        setCount(value);
      }
    };

    requestAnimationFrame(animate);
  }, [value]);

  return <span>{formatFn ? formatFn(count) : count}</span>;
}