How could I improve my coomponent import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';

// --- Constants and Types ---

// TypeScript interface for a single balloon's properties
interface Balloon {
  id: number;
  x: number;
  y: number;
  size: number;
  color: string;
  speed: number;
  popped: boolean;
}

// TypeScript interface for the cursor's position
interface CursorPosition {
  x: number;
  y: number;
}

const BALLOON_COUNT = 15;
const BALLOON_COLORS = ['#F76D6D', '#62AEEB', '#F78C6B'];
const NUM_TRAIL_CIRCLES = 15;

// --- Helper Functions ---

/**
 * Creates a single balloon with random properties.
 */
const createBalloon = (id: number): Balloon => {
  const size = Math.random() * 100 + 120; // 120px to 220px
  return {
    id,
    x: Math.random() * (window.innerWidth - size),
    y: window.innerHeight + Math.random() * window.innerHeight,
    size,
    color: BALLOON_COLORS[Math.floor(Math.random() * BALLOON_COLORS.length)],
    speed: Math.random() * 1.5 + 1, // 1 to 2.5
    popped: false,
  };
};


// --- Sub-Components ---

/**
 * InteractiveBalloons Component
 * Renders the interactive balloon-popping animation.
 */
export const InteractiveBalloons: React.FC = () => {
  const [balloons, setBalloons] = useState<Balloon[]>([]);
  const [cursorPosition, setCursorPosition] = useState<CursorPosition>({ x: -100, y: -100 });
  const [isPopping, setIsPopping] = useState<boolean>(false);
  const containerRef = useRef<HTMLDivElement | null>(null);

  // Initialize balloons on component mount
  useEffect(() => {
    const initialBalloons = Array.from({ length: BALLOON_COUNT }).map((_, i) => createBalloon(i));
    setBalloons(initialBalloons);
  }, []);

  // Animation loop for floating balloons
  useEffect(() => {
    let animationFrameId: number;
    const animate = () => {
      setBalloons(prevBalloons =>
        prevBalloons.map(b => {
          if (b.popped) return b;
          const newY = b.y - b.speed;
          // Reset balloon when it goes off-screen
          if (newY < -(b.size * 1.5)) {
            return { ...createBalloon(b.id), y: window.innerHeight + b.size };
          }
          return { ...b, y: newY };
        })
      );
      animationFrameId = requestAnimationFrame(animate);
    };
    animationFrameId = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationFrameId);
  }, []);

  // Handle mouse move for custom cursor
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => setCursorPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  // Handle click to pop balloons
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      setIsPopping(true);
      setTimeout(() => setIsPopping(false), 150);

      const clickX = e.clientX;
      const clickY = e.clientY;

      setBalloons(prevBalloons =>
        prevBalloons.map(b => {
          if (b.popped) return b;
          const distance = Math.sqrt(Math.pow(clickX - (b.x + b.size / 2), 2) + Math.pow(clickY - (b.y + b.size * 0.5), 2));
          if (distance < b.size / 2) {
            const poppedBalloon = { ...b, popped: true };
            // After pop animation, reset the balloon
            setTimeout(() => {
              setBalloons(prev => prev.map(pb => (pb.id === poppedBalloon.id ? createBalloon(poppedBalloon.id) : pb)));
            }, 500);
            return poppedBalloon;
          }
          return b;
        })
      );
    };
    window.addEventListener('click', handleClick);
    return () => window.removeEventListener('click', handleClick);
  }, []);

  return (
    <div ref={containerRef} className="relative w-full h-full bg-black overflow-hidden cursor-none flex items-center justify-center">
      <h1 className="text-white text-5xl md:text-7xl font-bold z-20 text-center select-none pointer-events-none">
        I love making <br /> things interactive
      </h1>

      {balloons.map((balloon) => (
        <div
          key={balloon.id}
          className="absolute"
          style={{
            left: balloon.x,
            top: balloon.y,
            width: balloon.size,
            height: balloon.size * 1.5,
            transform: balloon.popped ? 'scale(1.5)' : 'scale(1)',
            opacity: balloon.popped ? 0 : 1,
            transition: 'transform 0.2s ease-out, opacity 0.2s ease-out',
          }}
        >
          <svg viewBox="0 0 100 150" className="w-full h-full drop-shadow-lg">
            <defs>
              <radialGradient id={`grad-${balloon.id}`} cx="35%" cy="35%" r="65%">
                <stop offset="0%" style={{ stopColor: 'rgba(255,255,255,0.7)' }} />
                <stop offset="100%" style={{ stopColor: balloon.color }} />
              </radialGradient>
            </defs>
            <path d="M50,105 C40,120 60,135 50,150" stroke={balloon.color} strokeWidth="1.5" fill="none" strokeLinecap="round" />
            <path d="M45,95 C45,100 55,100 55,95 L50,105 Z" fill={balloon.color} />
            <path d="M50,0 C22.38,0 0,22.38 0,50 C0,77.62 22.38,100 50,100 C77.62,100 100,77.62 100,50 C100,22.38 77.62,0 50,0 Z" fill={`url(#grad-${balloon.id})`} />
          </svg>
        </div>
      ))}
      
      {/* Custom Cursor */}
      <div
        className="fixed pointer-events-none z-50 transition-transform duration-100"
        style={{
          left: cursorPosition.x,
          top: cursorPosition.y,
          transform: `translate(-50%, -50%) scale(${isPopping ? 1.2 : 1})`,
        }}
      >
        <div className="relative w-10 h-10 flex items-center justify-center">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <circle cx="16" cy="16" r="15" stroke="#62AEEB" strokeWidth="1.5"></circle>
            <line x1="11" y1="11" x2="21" y2="21" stroke="white" strokeWidth="1.5" strokeLinecap="round"></line>
            <line x1="21" y1="11" x2="11" y2="21" stroke="white" strokeWidth="1.5" strokeLinecap="round"></line>
          </svg>
        </div>
      </div>

      {/* Blur gradient at the bottom for smooth transition */}
    </div>
  );
};