function MainComponent() { const hugDayMessage = "Happy Hug Day ❤️"; const [messageClicked, setMessageClicked] = React.useState(false); const [imageClicked, setImageClicked] = React.useState(false); const handleMessageClick = ()=>{ setMessageClicked(!messageClicked); }; const handleImageClick = ()=>{ setImageClicked(true); setTimeout(()=>setImageClicked(false), 2000); }; let messageDisplay; let rainingHearts = null; let loveMessageDisplay = null; if (messageClicked) { messageDisplay = /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold text-[#FF69B4] mb-4", onClick: handleMessageClick, __source: { fileName: "", lineNumber: 22, columnNumber: 17 }, __self: this }, hugDayMessage)); } else { messageDisplay = /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold text-[#FF69B4] mb-4", onClick: handleMessageClick, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, hugDayMessage); } if (imageClicked) { rainingHearts = /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full flex flex-wrap items-start justify-between", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, Array.from({ length: 500 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `animate-rainHeartHorizontal animation-delay-${index % 10 * 100}`, __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this }, "❤️"))); loveMessageDisplay = /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold text-[#FF1493] mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "I love you 😘"); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-pink-200 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, messageDisplay, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center relative", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "miyamura-and-hori.png", alt: "Miyamura and Hori in an embrace", className: "w-[300px] h-[400px] md:w-[400px] md:h-[500px]", onClick: handleImageClick, __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }), rainingHearts), loveMessageDisplay, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, ` .animate-rainHeartHorizontal { position: absolute; top: -5%; animation: rainHeartHorizontal 2s linear infinite; } ${Array.from({ length: 10 }).map((_, index)=>` .animation-delay-${index * 100 + 1000} { animation-delay: ${index * 0.2}s; } `).join('')} @keyframes rainHeartHorizontal { 0% { left: 100%; opacity: 1; } 100% { left: -5%; opacity: 0; } } `)); }