function MainComponent() { const [selectedCategory, setSelectedCategory] = useState(null); const [selectedSubcategory, setSelectedSubcategory] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [generatedCards, setGeneratedCards] = useState({ card1: null, card2: null, currentCard: 1 }); const [cardText, setCardText] = useState({ to: "", message: "", from: "" }); const [showCardForm, setShowCardForm] = useState(true); const categoryGroups = [ [ "Birthday", "Thank You", "Congrats", "Holiday", "Sympathy" ], [ "Religious", "Everyday", "Love", "Wedding", "Anniversary" ], [ "Graduation", "Get Well", "Baby Shower", "Retirement", "Good Luck" ], [ "Friendship", "Business", "Seasonal", "Parents Day", "Milestones" ] ]; const subcategories = { Birthday: [ "18th Birthday", "21st Birthday", "50th Birthday", "Sweet 16", "Kid's Birthday", "General Birthday" ], Religious: [ "Eid Mubarak", "Happy Diwali", "Merry Christmas", "Happy Hanukkah", "Happy Easter", "Ramadan Kareem" ], "Thank You": [ "Thank You Teacher", "Thank You Healthcare Worker", "Thank You Friend", "Wedding Thank You", "Business Thank You", "Graduation Thank You" ], Congrats: [ "New Job", "New Home", "New Baby", "Engagement", "Achievement", "General Congratulations" ], Holiday: [ "New Year", "Valentine's Day", "Halloween", "Thanksgiving", "Christmas", "Season's Greetings" ], Sympathy: [ "Loss of Loved One", "Pet Loss", "Get Well Soon", "Thinking of You", "Condolences", "Support" ], Everyday: [ "Just Because", "Miss You", "Friendship", "Good Luck", "Thinking of You", "Stay Strong" ], Love: [ "Anniversary", "Valentine's Day", "Romance", "First Love", "Forever Love", "Sweet Love" ], Wedding: [ "Save the Date", "Wedding Invitation", "Wedding Congratulations", "Bridal Shower", "Engagement", "Wedding Thank You" ], Anniversary: [ "1st Anniversary", "25th Anniversary", "50th Anniversary", "Dating Anniversary", "Work Anniversary", "Special Milestone" ], Graduation: [ "High School", "College", "Master's Degree", "PhD", "Medical School", "Professional Certification" ], "Get Well": [ "Hospital Stay", "Recovery", "Surgery", "Mental Health", "Quick Recovery", "Healing Wishes" ], "Baby Shower": [ "Girl Baby Shower", "Boy Baby Shower", "Gender Neutral", "Twins Celebration", "Rainbow Baby", "Welcome Baby" ], Retirement: [ "Happy Retirement", "Career Achievement", "New Chapter", "Teacher Retirement", "Military Retirement", "Medical Retirement" ], "Good Luck": [ "New Job", "Exam Success", "Moving Away", "New Adventure", "Competition", "Fresh Start" ], Friendship: [ "Best Friends", "Long Distance", "Friend Anniversary", "Support & Care", "Appreciation", "Just Because" ], Business: [ "Professional Achievement", "Work Anniversary", "Business Partnership", "Client Appreciation", "Company Milestone", "Leadership Recognition" ], Seasonal: [ "Spring Celebration", "Summer Fun", "Autumn Greetings", "Winter Wishes", "First Day of School", "Back to School" ], "Parents Day": [ "Mother's Day", "Father's Day", "New Parents", "Grandparents Day", "Step-Parent Thanks", "Parents Anniversary" ], Milestones: [ "First Steps", "First Day of School", "Sweet Sixteen", "College Acceptance", "First Job", "First Home" ] }; const generatePrompt = (category, subcategory, text)=>{ const message = []; if (text.to) message.push(`To: ${text.to}`); if (text.message) message.push(text.message); if (text.from) message.push(`From: ${text.from}`); const cardText = message.length > 0 ? `, with elegant text overlay in a premium font: "${message.join("\n")}"` : ""; let categoryStyle = ""; switch(category){ case "Birthday": categoryStyle = "with luxury 3D metallic gold numbers, pearl accents, metallic spheres, and elegant golden roses"; break; case "Thank You": categoryStyle = "with premium 3D metallic gold lettering, pearl embellishments, and elegant floral accents in gold and cream"; break; case "Congrats": categoryStyle = "with luxury 3D gold text, metallic champagne accents, pearl details, and elegant golden decorative elements"; break; case "Holiday": categoryStyle = "with premium metallic ornaments, pearl snowflakes, golden ribbons, and elegant seasonal motifs"; break; case "Sympathy": categoryStyle = "with delicate pearl flowers, soft metallic accents, and elegant golden dove motifs"; break; case "Religious": categoryStyle = "with sacred symbols in metallic gold, pearl inlays, and elegant architectural elements"; break; case "Everyday": categoryStyle = "with metallic gold accents, pearl embellishments, and elegant decorative frames"; break; case "Love": categoryStyle = "with metallic rose gold hearts, pearl details, and elegant romantic flourishes"; break; case "Wedding": categoryStyle = "with premium metallic gold rings, pearl decorations, and elegant white floral elements"; break; case "Anniversary": categoryStyle = "with luxury gold numbers, pearl accents, and elegant celebratory elements"; break; case "Graduation": categoryStyle = "with metallic gold diplomas, pearl tassels, and elegant academic symbols"; break; case "Get Well": categoryStyle = "with gentle metallic sun rays, pearl flower details, and elegant healing symbols"; break; case "Baby Shower": categoryStyle = "with delicate metallic stars, pearl clouds, and elegant nursery motifs"; break; case "Retirement": categoryStyle = "with golden clock elements, pearl accents, and elegant celebratory details"; break; case "Good Luck": categoryStyle = "with metallic gold clovers, pearl horseshoes, and elegant lucky symbols"; break; case "Friendship": categoryStyle = "with intertwined gold hearts, pearl details, and elegant friendship symbols"; break; case "Business": categoryStyle = "with premium metallic corporate elements, pearl accents, and elegant professional symbols"; break; case "Seasonal": categoryStyle = "with seasonal metallic motifs, pearl details, and elegant nature elements"; break; case "Parents Day": categoryStyle = "with metallic family symbols, pearl hearts, and elegant parental motifs"; break; case "Milestones": categoryStyle = "with celebratory metallic elements, pearl details, and elegant achievement symbols"; break; default: categoryStyle = "with luxury 3D metallic gold elements and premium pearl accents"; } const basePrompt = `Create an ultra-premium greeting card design for ${subcategory}, ${categoryStyle}. Style: clean white textured background with dramatic studio lighting, photorealistic 3D rendering, metallic gold and pearl color scheme, embossed details, professional photography angle showing card depth${cardText}. The design should look like a high-end luxury greeting card with exceptional attention to detail and premium finishing effects.`; return { style1: `${basePrompt}, classic luxury composition with golden accents and pearl embellishments`, style2: `${basePrompt}, modern premium design with metallic elements and sophisticated details` }; }; const handleGenerateCard = async ()=>{ setShowCardForm(false); setLoading(true); setError(null); try { const prompts = generatePrompt(selectedCategory, selectedSubcategory, cardText); // Generate first card const card1Response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompts.style1)}`, { method: "GET" }); if (!card1Response.ok) { throw new Error(`Failed to generate first card: ${await card1Response.text()}`); } const card1Data = await card1Response.json(); if (!card1Data.data || !card1Data.data[0]) { throw new Error("No image data received for first card"); } setGeneratedCards((prev)=>({ ...prev, card1: card1Data.data[0] })); // Generate second card const card2Response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompts.style2)}`, { method: "GET" }); if (!card2Response.ok) { throw new Error(`Failed to generate second card: ${await card2Response.text()}`); } const card2Data = await card2Response.json(); if (!card2Data.data || !card2Data.data[0]) { throw new Error("No image data received for second card"); } setGeneratedCards((prev)=>({ ...prev, card2: card2Data.data[0] })); } catch (err) { console.error("Error generating cards:", err); setError("Failed to generate card designs. Please try again."); setShowCardForm(true); } finally{ setLoading(false); } }; const handleCategorySelect = (category)=>{ setSelectedCategory(category); setSelectedSubcategory(null); setShowCardForm(true); setCardText({ to: "", message: "", from: "" }); }; const handleSubcategorySelect = (subcategory)=>{ setSelectedSubcategory(subcategory); setShowCardForm(true); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-blue-50 to-white p-4 md:p-8", __source: { fileName: "", lineNumber: 377, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto text-center", __source: { fileName: "", lineNumber: 378, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 379, columnNumber: 9 }, __self: this }, "AI E-Card Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-2", __source: { fileName: "", lineNumber: 382, columnNumber: 9 }, __self: this }, "Choose a category to create your card"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500 hover:text-blue-600 text-sm mb-8 inline-block", __source: { fileName: "", lineNumber: 385, columnNumber: 9 }, __self: this }, "App created by MAZ"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-12", __source: { fileName: "", lineNumber: 391, columnNumber: 9 }, __self: this }, categoryGroups.map((group, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 393, columnNumber: 13 }, __self: this }, group.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, onClick: ()=>handleCategorySelect(category), className: `px-6 py-2 rounded-full text-sm font-medium transition-all ${selectedCategory === category ? "bg-blue-500 text-white shadow-lg scale-105" : "bg-white text-gray-700 shadow hover:shadow-md hover:scale-102"}`, __source: { fileName: "", lineNumber: 395, columnNumber: 17 }, __self: this }, category)))), selectedCategory && !selectedSubcategory && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 412, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-gray-700 mb-4", __source: { fileName: "", lineNumber: 413, columnNumber: 15 }, __self: this }, "Select ", selectedCategory, " Type"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 416, columnNumber: 15 }, __self: this }, subcategories[selectedCategory].map((subcat)=>/*#__PURE__*/ React.createElement("button", { key: subcat, onClick: ()=>handleSubcategorySelect(subcat), className: "px-6 py-2 rounded-full text-sm font-medium transition-all bg-white text-gray-700 shadow hover:shadow-md hover:scale-102", __source: { fileName: "", lineNumber: 418, columnNumber: 19 }, __self: this }, subcat))))), selectedCategory && selectedSubcategory && /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 432, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 433, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-1 gap-8", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 436, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 437, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent", __source: { fileName: "", lineNumber: 438, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-600", __source: { fileName: "", lineNumber: 439, columnNumber: 23 }, __self: this }, "Generating your card..."))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 445, columnNumber: 19 }, __self: this }, showCardForm ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6 p-8 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 447, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: cardText.to, onChange: (e)=>setCardText((prev)=>({ ...prev, to: e.target.value })), placeholder: "To (name)", className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 448, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { value: cardText.message, onChange: (e)=>setCardText((prev)=>({ ...prev, message: e.target.value })), placeholder: "Your message", rows: 4, className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 460, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: cardText.from, onChange: (e)=>setCardText((prev)=>({ ...prev, from: e.target.value })), placeholder: "From (your name)", className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 472, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateCard, className: "w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 484, columnNumber: 25 }, __self: this }, "Generate Card")) : /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 492, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 transform -rotate-3 translate-y-4", style: { background: "linear-gradient(45deg, #e2e8f0, #f8fafc)", borderRadius: "8px", boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)", zIndex: 0 }, __source: { fileName: "", lineNumber: 493, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative transform transition-all duration-300 hover:scale-102 hover:rotate-1", style: { perspective: "1000px", transformStyle: "preserve-3d", zIndex: 1 }, __source: { fileName: "", lineNumber: 503, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative rounded-lg overflow-hidden shadow-2xl", style: { transform: "rotateX(5deg)", boxShadow: "0 20px 25px -5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.2)" }, __source: { fileName: "", lineNumber: 511, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedCards[`card${generatedCards.currentCard}`], alt: "Generated card", className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 519, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-x-4 text-center", __source: { fileName: "", lineNumber: 530, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGeneratedCards((prev)=>({ ...prev, currentCard: prev.currentCard === 1 ? 2 : 1 })), className: "bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 531, columnNumber: 27 }, __self: this }, "View Alternative Design"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCardForm(true), className: "bg-gray-500 text-white px-6 py-2 rounded-full hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 542, columnNumber: 27 }, __self: this }, "Create New Card"))))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 rounded-lg", __source: { fileName: "", lineNumber: 555, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 text-center", __source: { fileName: "", lineNumber: 556, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setError(null), className: "mt-2 text-sm text-red-500 hover:text-red-600", __source: { fileName: "", lineNumber: 557, columnNumber: 19 }, __self: this }, "Dismiss"))))), /*#__PURE__*/ React.createElement("canvas", { id: "cardCanvas", style: { display: "none" }, __source: { fileName: "", lineNumber: 569, columnNumber: 7 }, __self: this })); }