function MainComponent() { const [loading, setLoading] = useState(false); const [mealType, setMealType] = useState("breakfast"); const [category, setCategory] = useState("soul-food"); const [isGlutenFree, setIsGlutenFree] = useState(false); const [availableIngredients, setAvailableIngredients] = useState([]); const [ingredientInput, setIngredientInput] = useState(""); const [isLowCalorie, setIsLowCalorie] = useState(false); const [calories, setCalories] = useState(500); const [servings, setServings] = useState(4); const [generatedRecipe, setGeneratedRecipe] = useState(null); const [generatedImage, setGeneratedImage] = useState(null); const [audioUtterance, setAudioUtterance] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const [error, setError] = useState(null); const { data: user, loading: userLoading } = useUser(); const { signOut } = useAuth(); const addIngredient = ()=>{ if (ingredientInput.trim()) { setAvailableIngredients([ ...availableIngredients, ingredientInput.trim() ]); setIngredientInput(""); } }; const removeIngredient = (index)=>{ setAvailableIngredients(availableIngredients.filter((_, i)=>i !== index)); }; const generateRecipe = async ()=>{ setLoading(true); setError(null); try { console.log("Starting recipe generation..."); const recipeResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Create an authentic Southern ${category} ${mealType} recipe that serves ${servings} people${isGlutenFree ? ", is gluten-free" : ""}${isLowCalorie ? ", is low calorie" : ""} and is approximately ${calories} calories per serving. ${availableIngredients.length > 0 ? `Prioritize using these available ingredients: ${availableIngredients.join(", ")}. You can suggest additional ingredients if needed.` : ""} The recipe should feature traditional Southern cooking techniques and ingredients. Include a title that reflects its Southern heritage, detailed nutrition information, cooking time estimates (prep and cook time), difficulty level, and equipment needed. Provide a list of authentic Southern ingredients and step-by-step instructions that capture the essence of Southern cooking.` } ], json_schema: { name: "recipe", schema: { type: "object", properties: { title: { type: "string" }, description: { type: "string" }, prepTime: { type: "string" }, cookTime: { type: "string" }, difficulty: { type: "string" }, equipment: { type: "array", items: { type: "string" } }, nutrition: { type: "object", properties: { calories: { type: "number" }, protein: { type: "string" }, carbs: { type: "string" }, fat: { type: "string" }, fiber: { type: "string" } }, required: [ "calories", "protein", "carbs", "fat", "fiber" ], additionalProperties: false }, ingredients: { type: "array", items: { type: "string" } }, instructions: { type: "array", items: { type: "string" } } }, required: [ "title", "description", "prepTime", "cookTime", "difficulty", "equipment", "nutrition", "ingredients", "instructions" ], additionalProperties: false } } }) }); if (!recipeResponse.ok) { throw new Error("Failed to connect to recipe generation service"); } const recipeData = await recipeResponse.json(); let recipe; try { recipe = JSON.parse(recipeData.choices[0].message.content); } catch (parseError) { console.error("Parse error:", parseError); throw new Error("Unable to understand recipe format"); } console.log("Generating recipe image..."); const imageResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(`A professional Southern food photography style image of ${recipe.title}, served in traditional Southern style with rustic elements, garnished and plated beautifully on vintage dinnerware`)}`); if (!imageResponse.ok) { throw new Error("Failed to generate recipe image"); } const imageData = await imageResponse.json(); console.log("Setting up audio narration..."); const audioText = `Let me share with you how to make ${recipe.title}. ${recipe.description} For this recipe, you'll need: ${recipe.ingredients.join(", ")}. Now, let's cook! ${recipe.instructions.join(". ")}`; let utterance = null; if (typeof window !== "undefined" && window.SpeechSynthesisUtterance) { utterance = new SpeechSynthesisUtterance(audioText); if (window.speechSynthesis) { let voices = window.speechSynthesis.getVoices(); if (voices.length === 0) { window.speechSynthesis.onvoiceschanged = ()=>{ voices = window.speechSynthesis.getVoices(); const femaleVoice = voices.find((voice)=>voice.name.toLowerCase().includes("female") || voice.name.toLowerCase().includes("woman")); if (femaleVoice) { utterance.voice = femaleVoice; } }; } else { const femaleVoice = voices.find((voice)=>voice.name.toLowerCase().includes("female") || voice.name.toLowerCase().includes("woman")); if (femaleVoice) { utterance.voice = femaleVoice; } } utterance.rate = 0.9; utterance.pitch = 1.1; utterance.volume = 1.0; utterance.onend = ()=>setIsPlaying(false); } } setAudioUtterance(utterance); setGeneratedRecipe(recipe); setGeneratedImage(imageData.data[0]); } catch (err) { console.error("Error details:", err); setError(`Recipe generation failed: ${err.message}`); } finally{ setLoading(false); } }; const handleAudioControl = useCallback(()=>{ if (!audioUtterance || typeof window === "undefined" || !window.speechSynthesis) return; if (isPlaying) { window.speechSynthesis.pause(); } else { if (window.speechSynthesis.paused) { window.speechSynthesis.resume(); } else { window.speechSynthesis.speak(audioUtterance); } } setIsPlaying(!isPlaying); }, [ audioUtterance, isPlaying ]); const handlePrint = ()=>{ if (typeof window !== "undefined") { window.print(); } }; const saveRecipe = async ()=>{ if (!generatedRecipe) return; try { setError("To save recipes, please sign in or create an account."); } catch (err) { setError("Failed to save recipe. Please try again."); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1A1A2E] text-white", __source: { fileName: "", lineNumber: 216, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "fixed w-full top-0 z-50 bg-[#1A1A2E]", __source: { fileName: "", lineNumber: 217, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "bg-[#FFA500] p-2 rounded-lg", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/5d043730-19c1-4403-8e98-fa3fe0a051c9/-/format/auto/", alt: "Southern Grace Kitchen Logo", className: "h-12 w-12 object-contain", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 228, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "bg-[#FFA500] text-white px-4 py-2 rounded-lg hover:bg-[#FF8C00] transition-colors", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, "Home"), user ? /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ try { await signOut({ callbackUrl: "/", redirect: true }); } catch (error) { console.error("Sign out failed:", error); await fetch("/api/log-error", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ error_type: "sign_out_error", error_message: error.message, severity: "medium" }) }); } }, className: "bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors", __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, "Sign Out") : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "bg-[#FFA500] text-white px-4 py-2 rounded-lg hover:bg-[#FF8C00] transition-colors", __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, "Sign In")))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 pt-24 pb-12", __source: { fileName: "", lineNumber: 272, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 273, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/50 p-6 rounded-lg border border-[#FFA500]/20 mb-8", __source: { fileName: "", lineNumber: 274, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this }, "Recipe Generator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 278, columnNumber: 17 }, __self: this }, "Style of Southern Cooking"), /*#__PURE__*/ React.createElement("select", { value: category, onChange: (e)=>setCategory(e.target.value), className: "w-full bg-[#1A1A2E] border border-[#FFA500]/20 rounded-lg p-3", __source: { fileName: "", lineNumber: 281, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "soul-food", __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }, "Soul Food"), /*#__PURE__*/ React.createElement("option", { value: "low-country", __source: { fileName: "", lineNumber: 287, columnNumber: 19 }, __self: this }, "Low Country"), /*#__PURE__*/ React.createElement("option", { value: "cajun", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, "Cajun"), /*#__PURE__*/ React.createElement("option", { value: "creole", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, "Creole"), /*#__PURE__*/ React.createElement("option", { value: "bbq", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }, "Southern BBQ"), /*#__PURE__*/ React.createElement("option", { value: "country", __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, "Country Cooking"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, "Available Ingredients"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-2", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: ingredientInput, onChange: (e)=>setIngredientInput(e.target.value), onKeyPress: (e)=>e.key === "Enter" && addIngredient(), placeholder: "Enter an ingredient you have", className: "flex-1 bg-[#1A1A2E] border border-[#FFA500]/20 rounded-lg p-3", __source: { fileName: "", lineNumber: 300, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addIngredient, className: "bg-[#FFA500] text-white px-4 py-2 rounded-lg hover:bg-[#FF8C00] transition-colors", __source: { fileName: "", lineNumber: 308, columnNumber: 19 }, __self: this }, "Add")), availableIngredients.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-2", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }, availableIngredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-[#1A1A2E]/30 px-3 py-1 rounded-full text-sm flex items-center gap-2", __source: { fileName: "", lineNumber: 319, columnNumber: 23 }, __self: this }, ingredient, /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeIngredient(index), className: "text-red-400 hover:text-red-300", __source: { fileName: "", lineNumber: 324, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 328, columnNumber: 27 }, __self: this }))))), availableIngredients.length > 0 && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 mt-2", __source: { fileName: "", lineNumber: 336, columnNumber: 19 }, __self: this }, "Your recipe will prioritize using:", " ", availableIngredients.join(", "))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 343, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 344, columnNumber: 17 }, __self: this }, "Meal Type"), /*#__PURE__*/ React.createElement("select", { value: mealType, onChange: (e)=>setMealType(e.target.value), className: "w-full bg-[#1A1A2E] border border-[#FFA500]/20 rounded-lg p-3", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "breakfast", __source: { fileName: "", lineNumber: 352, columnNumber: 19 }, __self: this }, "Breakfast"), /*#__PURE__*/ React.createElement("option", { value: "lunch", __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, "Lunch"), /*#__PURE__*/ React.createElement("option", { value: "dinner", __source: { fileName: "", lineNumber: 354, columnNumber: 19 }, __self: this }, "Dinner"), /*#__PURE__*/ React.createElement("option", { value: "snacks", __source: { fileName: "", lineNumber: 355, columnNumber: 19 }, __self: this }, "Snacks"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: isGlutenFree, onChange: (e)=>setIsGlutenFree(e.target.checked), className: "mr-2", __source: { fileName: "", lineNumber: 361, columnNumber: 19 }, __self: this }), "Gluten Free"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 369, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: isLowCalorie, onChange: (e)=>setIsLowCalorie(e.target.checked), className: "mr-2", __source: { fileName: "", lineNumber: 370, columnNumber: 19 }, __self: this }), "Low Calorie")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 381, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 382, columnNumber: 19 }, __self: this }, "Calories per Serving"), /*#__PURE__*/ React.createElement("input", { type: "number", value: calories, onChange: (e)=>setCalories(parseInt(e.target.value)), className: "w-full bg-[#1A1A2E] border border-[#FFA500]/20 rounded-lg p-3", __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 392, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this }, "Number of Servings"), /*#__PURE__*/ React.createElement("input", { type: "number", value: servings, onChange: (e)=>setServings(parseInt(e.target.value)), className: "w-full bg-[#1A1A2E] border border-[#FFA500]/20 rounded-lg p-3", __source: { fileName: "", lineNumber: 396, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: generateRecipe, disabled: loading, className: "w-full bg-[#FFA500] text-white px-6 py-3 rounded-lg hover:bg-[#FF8C00] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 405, columnNumber: 15 }, __self: this }, loading ? "Generating..." : "Generate Recipe"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500/10 border border-red-500 text-red-500 p-4 rounded-lg mb-8", __source: { fileName: "", lineNumber: 416, columnNumber: 13 }, __self: this }, error), generatedRecipe && /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/50 p-6 rounded-lg border border-[#FFA500]/20", __source: { fileName: "", lineNumber: 422, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 423, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 424, columnNumber: 17 }, __self: this }, generatedRecipe.title), /*#__PURE__*/ React.createElement("button", { onClick: handlePrint, className: "bg-[#FFA500] text-white px-4 py-2 rounded-lg hover:bg-[#FF8C00] transition-colors", __source: { fileName: "", lineNumber: 425, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-print mr-2", __source: { fileName: "", lineNumber: 429, columnNumber: 19 }, __self: this }), "Print Recipe")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 italic mb-6", __source: { fileName: "", lineNumber: 433, columnNumber: 15 }, __self: this }, generatedRecipe.description), generatedImage && /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: generatedRecipe.title, className: "w-full h-64 object-cover rounded-lg mb-6", __source: { fileName: "", lineNumber: 438, columnNumber: 17 }, __self: this }), audioUtterance && /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex items-center gap-4 bg-[#1A1A2E]/30 p-4 rounded-lg", __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleAudioControl, className: "bg-[#FFA500] text-white p-3 rounded-full hover:bg-[#FF8C00] transition-colors", __source: { fileName: "", lineNumber: 447, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? "fa-pause" : "fa-play"}`, __source: { fileName: "", lineNumber: 451, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 455, columnNumber: 19 }, __self: this }, "Listen to Recipe Instructions")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-6", __source: { fileName: "", lineNumber: 459, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg", __source: { fileName: "", lineNumber: 460, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 461, columnNumber: 19 }, __self: this }, "Prep Time"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 462, columnNumber: 19 }, __self: this }, generatedRecipe.prepTime)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg", __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 465, columnNumber: 19 }, __self: this }, "Cook Time"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 466, columnNumber: 19 }, __self: this }, generatedRecipe.cookTime)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg", __source: { fileName: "", lineNumber: 468, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 469, columnNumber: 19 }, __self: this }, "Difficulty"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 470, columnNumber: 19 }, __self: this }, generatedRecipe.difficulty)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg", __source: { fileName: "", lineNumber: 472, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 473, columnNumber: 19 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 474, columnNumber: 19 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 478, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 479, columnNumber: 17 }, __self: this }, "Nutrition Information"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", __source: { fileName: "", lineNumber: 482, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg text-center", __source: { fileName: "", lineNumber: 483, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 484, columnNumber: 21 }, __self: this }, "Calories"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 485, columnNumber: 21 }, __self: this }, generatedRecipe.nutrition.calories)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg text-center", __source: { fileName: "", lineNumber: 487, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 488, columnNumber: 21 }, __self: this }, "Protein"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 489, columnNumber: 21 }, __self: this }, generatedRecipe.nutrition.protein)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg text-center", __source: { fileName: "", lineNumber: 491, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 492, columnNumber: 21 }, __self: this }, "Carbs"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 493, columnNumber: 21 }, __self: this }, generatedRecipe.nutrition.carbs)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg text-center", __source: { fileName: "", lineNumber: 495, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 496, columnNumber: 21 }, __self: this }, "Fat"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 497, columnNumber: 21 }, __self: this }, generatedRecipe.nutrition.fat)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A1A2E]/30 p-4 rounded-lg text-center", __source: { fileName: "", lineNumber: 499, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 500, columnNumber: 21 }, __self: this }, "Fiber"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 501, columnNumber: 21 }, __self: this }, generatedRecipe.nutrition.fiber)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 506, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 507, columnNumber: 17 }, __self: this }, "Equipment Needed"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 508, columnNumber: 17 }, __self: this }, generatedRecipe.equipment.map((item, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-[#1A1A2E]/30 px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 510, columnNumber: 21 }, __self: this }, item)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 520, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 521, columnNumber: 17 }, __self: this }, "Ingredients"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-2", __source: { fileName: "", lineNumber: 522, columnNumber: 17 }, __self: this }, generatedRecipe.ingredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 524, columnNumber: 21 }, __self: this }, ingredient)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 529, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 530, columnNumber: 17 }, __self: this }, "Instructions"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal list-inside space-y-2", __source: { fileName: "", lineNumber: 531, columnNumber: 17 }, __self: this }, generatedRecipe.instructions.map((step, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 533, columnNumber: 21 }, __self: this }, step)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 538, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: saveRecipe, className: "w-full bg-[#FFA500] text-white px-6 py-3 rounded-lg hover:bg-[#FF8C00] transition-colors", __source: { fileName: "", lineNumber: 539, columnNumber: 17 }, __self: this }, "Save Recipe"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-400 text-sm", __source: { fileName: "", lineNumber: 545, columnNumber: 17 }, __self: this }, "Sign in to save your recipes and access them anytime")))))); }