import { useEffect, useState } from "react";

export default function Valentine() { const hearts = ["💖", "💘", "💝", "💞", "❤️"]; const colors = ["red", "magenta", "hotpink", "deeppink", "orange", "yellow"];

const [sparkles, setSparkles] = useState([]);

// Function to create floating hearts continuously useEffect(() => { const interval = setInterval(() => { const newHeart = { id: Math.random(), x: Math.random() * window.innerWidth, y: window.innerHeight + 50, size: Math.random() * 30 + 20, color: colors[Math.floor(Math.random() * colors.length)], emoji: hearts[Math.floor(Math.random() * hearts.length)], speed: Math.random() * 2 + 1, }; setSparkles((prev) => [...prev, newHeart]); }, 300);

return () => clearInterval(interval);

}, []);

// Animate hearts floating upward useEffect(() => { const animation = setInterval(() => { setSparkles((prev) => prev .map((s) => ({ ...s, y: s.y - s.speed })) .filter((s) => s.y + s.size > 0) ); }, 50); return () => clearInterval(animation); }, []);

// Handle click for sparkling explosion const handleClick = () => { const newSparkles = []; for (let i = 0; i < 100; i++) { newSparkles.push({ id: Math.random(), x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, size: Math.random() * 35 + 15, color: colors[Math.floor(Math.random() * colors.length)], emoji: hearts[Math.floor(Math.random() * hearts.length)], speed: Math.random() * 5 + 1, }); } setSparkles(newSparkles); alert("🥰 YAY! I’m so happy, Starlette! ❤️"); };

return ( <div style={{ width: "100vw", height: "100vh", backgroundColor: "pink", overflow: "hidden", position: "relative", }} > <h1 style={{ position: "absolute", top: "20%", width: "100%", textAlign: "center", color: "red", fontSize: "2.5rem", }} > Hey Starlette! 🌟 Will you be my Valentine? 💌 <button onClick={handleClick} style={{ position: "absolute", top: "60%", left: "50%", transform: "translateX(-50%)", fontSize: "1.5rem", padding: "10px 25px", backgroundColor: "red", color: "white", border: "none", borderRadius: "12px", cursor: "pointer", }} > Click Here 💖

  {/* Render floating hearts */}
  {sparkles.map((s) => (
    <div
      key={s.id}
      style={{
        position: "absolute",
        left: s.x,
        top: s.y,
        fontSize: s.size,
        color: s.color,
        userSelect: "none",
        pointerEvents: "none",
      }}
    >
      {s.emoji}
    </div>
  ))}
</div>

); }