function MainComponent() { const [step, setStep] = React.useState('input'); const [chosenGirl, setChosenGirl] = React.useState(''); const handleSendMessage = ()=>{ setStep('select'); }; const handleSelectGirl = (girl)=>{ setChosenGirl(girl); setStep('finalize'); }; const renderInputFantasy = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Imagine Your Fantasy"), /*#__PURE__*/ React.createElement("textarea", { name: "userFantasy", placeholder: "Describe your fantasy...", className: "w-full max-w-md p-2 mb-4 border-2 border-gray-200 rounded-md font-roboto resize-none h-48", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "inline-block px-6 py-2 mb-8 text-white bg-blue-500 rounded-full font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Continue")); const renderSelectGirl = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, "Choose Your Virtual Companion"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, [ 'Emma', 'Ava', 'Olivia' ].map((girl)=>/*#__PURE__*/ React.createElement("div", { key: girl, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${girl.toLowerCase()}.png`, alt: `${girl} the AI companion`, className: "w-32 h-32 object-cover rounded-full", onClick: ()=>handleSelectGirl(girl), __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelectGirl(girl), className: "mt-2 px-4 py-1 text-white bg-purple-500 rounded-md font-roboto hover:bg-purple-600", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, girl))))); const renderFinalize = ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-2xl text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Your fantasy is about to come true!"), /*#__PURE__*/ React.createElement("div", { className: "animate-emerge", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${chosenGirl.toLowerCase()}.png`, alt: `${chosenGirl} making your fantasy come true`, className: "w-[200px] h-[200px] object-cover rounded-full mx-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }))); const renderStep = ()=>{ switch(step){ case 'select': return renderSelectGirl(); case 'finalize': return renderFinalize(); default: return renderInputFantasy(); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f8ff] p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, renderStep()), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, ` @keyframes emerge { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .animate-emerge { animation: emerge 1s ease-in-out forwards; } `)); }