"use client"; function MainComponent() { const [userDrinks, setUserDrinks] = useState({}); const [drinkType, setDrinkType] = useState("all"); const [search, setSearch] = useState(""); const [results, setResults] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [selectedDrink, setSelectedDrink] = useState(null); const [showGenerator, setShowGenerator] = useState(false); const [ingredients, setIngredients] = useState(""); const [style, setStyle] = useState(""); const [servings, setServings] = useState(1); const [difficulty, setDifficulty] = useState("medium"); const [preferences, setPreferences] = useState(""); const [generatedRecipe, setGeneratedRecipe] = useState(null); const [generating, setGenerating] = useState(false); const [popularDrinks, setPopularDrinks] = useState(null); const [loadingPopular, setLoadingPopular] = useState(false); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(true); const [drinkOfTheDay, setDrinkOfTheDay] = useState(null); const [loadingDrinkOfDay, setLoadingDrinkOfDay] = useState(false); const searchDrinks = async (query, type)=>{ if (!query) { setResults(null); return; } setLoading(true); setError(null); try { let url; if (type === "mocktail") { url = `https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic`; } else { url = `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${encodeURIComponent(query)}`; } const response = await fetch(url); if (!response.ok) { throw new Error("Failed to fetch drinks"); } const data = await response.json(); let drinks = data.drinks || []; if (type === "mocktail") { drinks = drinks.filter((drink)=>drink.strDrink.toLowerCase().includes(query.toLowerCase())); } else if (type === "cocktail") { drinks = drinks.filter((drink)=>drink.strAlcoholic === "Alcoholic"); } setResults(drinks); } catch (err) { setError("Failed to fetch drinks"); console.error(err); } finally{ setLoading(false); } }; const getDrinkDetails = async (id)=>{ try { const response = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${id}`); if (!response.ok) { throw new Error("Failed to fetch drink details"); } const data = await response.json(); const drink = data.drinks?.[0]; if (drink) { const ingredients = []; for(let i = 1; i <= 15; i++){ const ingredient = drink[`strIngredient${i}`]; const measure = drink[`strMeasure${i}`]; if (ingredient) { ingredients.push({ ingredient: ingredient.trim(), measure: measure ? measure.trim() : "To taste" }); } } setSelectedDrink({ ...drink, ingredients }); } } catch (err) { setError("Failed to fetch drink details"); console.error(err); } }; const generateRecipe = async ()=>{ setGenerating(true); setError(null); try { const response = await fetch("/api/generate-recipe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ingredients: ingredients.trim(), style: style.trim(), isAlcoholic: drinkType !== "mocktail", servings, difficulty, preferences: preferences.trim() }) }); if (!response.ok) { throw new Error("Failed to generate recipe"); } const data = await response.json(); if (!data.success) { throw new Error(data.error || "Failed to generate recipe"); } setGeneratedRecipe(data.recipe); setShowGenerator(false); } catch (err) { console.error(err); setError(err.message || "Failed to generate recipe. Please try again."); } finally{ setGenerating(false); } }; const loadMoreDrinks = async ()=>{ if (loading || !hasMore) return; setPage((prev)=>prev + 1); setLoading(true); try { let newDrinks = []; if (drinkType === "cocktail") { const cocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail"); if (!cocktailResponse.ok) throw new Error("Failed to fetch cocktails"); const cocktailData = await cocktailResponse.json(); const start = page * 12; newDrinks.push(...cocktailData.drinks.slice(start, start + 12)); } else if (drinkType === "mocktail") { const mocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic"); if (!mocktailResponse.ok) throw new Error("Failed to fetch mocktails"); const mocktailData = await mocktailResponse.json(); const start = page * 18; newDrinks.push(...mocktailData.drinks.slice(start, start + 18)); } else { const cocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail"); const mocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic"); if (!cocktailResponse.ok || !mocktailResponse.ok) { throw new Error("Failed to fetch drinks"); } const cocktailData = await cocktailResponse.json(); const mocktailData = await mocktailResponse.json(); const cocktailStart = page * 12; const mocktailStart = page * 6; newDrinks.push(...cocktailData.drinks.slice(cocktailStart, cocktailStart + 12)); newDrinks.push(...mocktailData.drinks.slice(mocktailStart, mocktailStart + 6)); } if (newDrinks.length === 0) { setHasMore(false); } else { setPopularDrinks((prev)=>[ ...prev, ...newDrinks.sort(()=>Math.random() - 0.5) ]); } } catch (err) { console.error(err); setError("Failed to load more drinks"); } finally{ setLoading(false); } }; const fetchPopularDrinks = async ()=>{ setLoadingPopular(true); setError(null); try { let drinks = []; if (drinkType === "cocktail") { const cocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail"); if (!cocktailResponse.ok) throw new Error("Failed to fetch cocktails"); const cocktailData = await cocktailResponse.json(); drinks.push(...cocktailData.drinks.slice(0, 12)); setHasMore(cocktailData.drinks.length > 12); } else if (drinkType === "mocktail") { const mocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic"); if (!mocktailResponse.ok) throw new Error("Failed to fetch mocktails"); const mocktailData = await mocktailResponse.json(); drinks.push(...mocktailData.drinks.slice(0, 18)); setHasMore(mocktailData.drinks.length > 18); } else { const cocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail"); const mocktailResponse = await fetch("https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic"); if (!cocktailResponse.ok || !mocktailResponse.ok) { throw new Error("Failed to fetch drinks"); } const cocktailData = await cocktailResponse.json(); const mocktailData = await mocktailResponse.json(); drinks.push(...cocktailData.drinks.slice(0, 12)); drinks.push(...mocktailData.drinks.slice(0, 6)); setHasMore(cocktailData.drinks.length > 12 || mocktailData.drinks.length > 6); } setPopularDrinks(drinks.sort(()=>Math.random() - 0.5)); } catch (err) { console.error(err); setError("Failed to fetch example drinks"); } finally{ setLoadingPopular(false); } }; const fetchDrinkOfTheDay = async ()=>{ setLoadingDrinkOfDay(true); setError(null); try { const today = new Date().toISOString().split("T")[0]; const response = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/random.php?seed=${today}`); if (!response.ok) { throw new Error("Failed to fetch drink of the day"); } const data = await response.json(); const drink = data.drinks?.[0]; if (drink) { const ingredients = []; for(let i = 1; i <= 15; i++){ const ingredient = drink[`strIngredient${i}`]; const measure = drink[`strMeasure${i}`]; if (ingredient) { ingredients.push({ ingredient: ingredient.trim(), measure: measure ? measure.trim() : "To taste" }); } } setDrinkOfTheDay({ ...drink, ingredients }); } } catch (err) { console.error(err); setError("Failed to fetch drink of the day"); } finally{ setLoadingDrinkOfDay(false); } }; useEffect(()=>{ const handleScroll = ()=>{ if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) { loadMoreDrinks(); } }; window.addEventListener("scroll", handleScroll); return ()=>window.removeEventListener("scroll", handleScroll); }, [ page, loading, hasMore ]); useEffect(()=>{ if (!search) { fetchPopularDrinks(); } }, [ drinkType ]); useEffect(()=>{ fetchPopularDrinks(); }, []); useEffect(()=>{ setPage(1); setHasMore(true); setPopularDrinks(null); fetchPopularDrinks(); }, [ drinkType ]); useEffect(()=>{ fetchDrinkOfTheDay(); }, []); if (showGenerator) { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 340, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("title", { __source: { fileName: "", lineNumber: 341, columnNumber: 11 }, __self: this }, "Create Custom Drink Recipe - Tonight's Bartender"), /*#__PURE__*/ React.createElement("meta", { name: "description", content: "Create your own custom cocktail or mocktail recipe with Tonight's Bartender's AI-powered recipe generator.", __source: { fileName: "", lineNumber: 342, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "min-h-screen bg-gradient-to-b from-white to-blue-50", __source: { fileName: "", lineNumber: 347, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto p-4 sm:p-6 lg:p-8", __source: { fileName: "", lineNumber: 348, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGenerator(false), className: "mb-6 flex items-center text-blue-500 hover:text-blue-600 transition-colors group", __source: { fileName: "", lineNumber: 349, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-left mr-2 transform group-hover:-translate-x-1 transition-transform", __source: { fileName: "", lineNumber: 353, columnNumber: 15 }, __self: this }), "Back to search"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100", __source: { fileName: "", lineNumber: 357, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 sm:p-8", __source: { fileName: "", lineNumber: 358, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-6 text-gray-800", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, "Create Custom Recipe"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); generateRecipe(); }, className: "space-y-6", __source: { fileName: "", lineNumber: 363, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 370, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 371, columnNumber: 21 }, __self: this }, "Ingredients", /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 font-normal ml-2", __source: { fileName: "", lineNumber: 373, columnNumber: 23 }, __self: this }, "(optional)")), /*#__PURE__*/ React.createElement("textarea", { value: ingredients, onChange: (e)=>setIngredients(e.target.value), placeholder: "List any specific ingredients you'd like to use (e.g., gin, lime, mint)", className: "w-full p-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all min-h-[100px]", __source: { fileName: "", lineNumber: 377, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 386, columnNumber: 21 }, __self: this }, "Style", /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 font-normal ml-2", __source: { fileName: "", lineNumber: 388, columnNumber: 23 }, __self: this }, "(optional)")), /*#__PURE__*/ React.createElement("input", { type: "text", value: style, onChange: (e)=>setStyle(e.target.value), placeholder: "Describe the style (e.g., tropical, spicy, refreshing)", className: "w-full p-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all", __source: { fileName: "", lineNumber: 392, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 402, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 403, columnNumber: 23 }, __self: this }, "Drink Type"), /*#__PURE__*/ React.createElement("select", { value: drinkType, onChange: (e)=>setDrinkType(e.target.value), className: "w-full p-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all bg-white", __source: { fileName: "", lineNumber: 406, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "cocktail", __source: { fileName: "", lineNumber: 411, columnNumber: 25 }, __self: this }, "Cocktail"), /*#__PURE__*/ React.createElement("option", { value: "mocktail", __source: { fileName: "", lineNumber: 412, columnNumber: 25 }, __self: this }, "Mocktail"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 416, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 417, columnNumber: 23 }, __self: this }, "Difficulty Level"), /*#__PURE__*/ React.createElement("select", { value: difficulty, onChange: (e)=>setDifficulty(e.target.value), className: "w-full p-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all bg-white", __source: { fileName: "", lineNumber: 420, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 425, columnNumber: 25 }, __self: this }, "Easy"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 426, columnNumber: 25 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "advanced", __source: { fileName: "", lineNumber: 427, columnNumber: 25 }, __self: this }, "Advanced")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 432, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 433, columnNumber: 21 }, __self: this }, "Number of Servings"), /*#__PURE__*/ React.createElement("input", { type: "number", min: "1", max: "12", value: servings, onChange: (e)=>setServings(parseInt(e.target.value)), className: "w-full p-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all", __source: { fileName: "", lineNumber: 436, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 446, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 447, columnNumber: 21 }, __self: this }, "Additional Preferences", /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 font-normal ml-2", __source: { fileName: "", lineNumber: 449, columnNumber: 23 }, __self: this }, "(optional)")), /*#__PURE__*/ React.createElement("textarea", { value: preferences, onChange: (e)=>setPreferences(e.target.value), placeholder: "Any other preferences? (e.g., low sugar, specific garnish, glassware)", className: "w-full p-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all min-h-[100px]", __source: { fileName: "", lineNumber: 453, columnNumber: 21 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 bg-red-50 p-3 rounded-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 462, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-exclamation-circle", __source: { fileName: "", lineNumber: 463, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 464, columnNumber: 23 }, __self: this }, error)), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: generating, className: "w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white px-8 py-4 rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all transform hover:scale-105 shadow-md flex items-center justify-center gap-3 font-medium disabled:opacity-50 disabled:transform-none disabled:hover:scale-100", __source: { fileName: "", lineNumber: 468, columnNumber: 19 }, __self: this }, generating ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin", __source: { fileName: "", lineNumber: 475, columnNumber: 25 }, __self: this }), "Generating Recipe...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fa fa-magic", __source: { fileName: "", lineNumber: 480, columnNumber: 25 }, __self: this }), "Generate Recipe")))))))); } if (generatedRecipe) { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 497, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("title", { __source: { fileName: "", lineNumber: 498, columnNumber: 11 }, __self: this }, `${generatedRecipe.name} Recipe - Tonight's Bartender`), /*#__PURE__*/ React.createElement("meta", { name: "description", content: `Learn how to make ${generatedRecipe.name}. ${generatedRecipe.description}`, __source: { fileName: "", lineNumber: 499, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "keywords", content: `${generatedRecipe.name.toLowerCase()}, cocktail recipe, drink recipe, mixology, ${drinkType === "mocktail" ? "mocktail" : "cocktail"}`, __source: { fileName: "", lineNumber: 503, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:title", content: `${generatedRecipe.name} Recipe - Tonight's Bartender`, __source: { fileName: "", lineNumber: 508, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:description", content: generatedRecipe.description, __source: { fileName: "", lineNumber: 512, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:type", content: "article", __source: { fileName: "", lineNumber: 516, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:card", content: "summary", __source: { fileName: "", lineNumber: 518, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:title", content: `${generatedRecipe.name} Recipe - Tonight's Bartender`, __source: { fileName: "", lineNumber: 519, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:description", content: generatedRecipe.description, __source: { fileName: "", lineNumber: 523, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("script", { type: "application/ld+json", __source: { fileName: "", lineNumber: 528, columnNumber: 11 }, __self: this }, ` { "@context": "https://schema.org", "@type": "Recipe", "name": "${generatedRecipe.name}", "description": "${generatedRecipe.description}", "recipeCategory": "${drinkType === "mocktail" ? "Mocktail" : "Cocktail"}", "recipeCuisine": "Beverages", "recipeIngredient": ${JSON.stringify(generatedRecipe.ingredients.map((i)=>`${i.amount} ${i.ingredient}`))}, "recipeInstructions": ${JSON.stringify(generatedRecipe.instructions)}, "tool": "${generatedRecipe.glassware}", "recipeYield": "1 serving" } `)), /*#__PURE__*/ React.createElement("main", { className: "min-h-screen bg-gradient-to-b from-white to-blue-50", __source: { fileName: "", lineNumber: 543, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto p-4 sm:p-6 lg:p-8", __source: { fileName: "", lineNumber: 544, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGeneratedRecipe(null), className: "mb-6 flex items-center text-blue-500 hover:text-blue-600 transition-colors group", __source: { fileName: "", lineNumber: 545, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-left mr-2 transform group-hover:-translate-x-1 transition-transform", __source: { fileName: "", lineNumber: 549, columnNumber: 15 }, __self: this }), "Back to search"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100", __source: { fileName: "", lineNumber: 553, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 sm:p-8", __source: { fileName: "", lineNumber: 554, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 555, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 556, columnNumber: 19 }, __self: this }, generatedRecipe.name), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-2 bg-gradient-to-r from-blue-50 to-blue-100 rounded-full text-blue-700 font-medium text-sm", __source: { fileName: "", lineNumber: 559, columnNumber: 19 }, __self: this }, drinkType === "mocktail" ? "Non Alcoholic" : "Alcoholic")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-lg mb-8 leading-relaxed", __source: { fileName: "", lineNumber: 563, columnNumber: 17 }, __self: this }, generatedRecipe.description), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-6 mb-8", __source: { fileName: "", lineNumber: 567, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 568, columnNumber: 19 }, __self: this }, "Details"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 571, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 572, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-glass-martini text-blue-500", __source: { fileName: "", lineNumber: 573, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 574, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 575, columnNumber: 25 }, __self: this }, "Glassware"), /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-800", __source: { fileName: "", lineNumber: 576, columnNumber: 25 }, __self: this }, generatedRecipe.glassware))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 581, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chart-line text-blue-500", __source: { fileName: "", lineNumber: 582, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 583, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 584, columnNumber: 25 }, __self: this }, "Difficulty"), /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-800", __source: { fileName: "", lineNumber: 585, columnNumber: 25 }, __self: this }, generatedRecipe.difficulty))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 590, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-leaf text-blue-500", __source: { fileName: "", lineNumber: 591, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 592, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 593, columnNumber: 25 }, __self: this }, "Garnish"), /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-800", __source: { fileName: "", lineNumber: 594, columnNumber: 25 }, __self: this }, generatedRecipe.garnish))))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 602, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 603, columnNumber: 19 }, __self: this }, "Ingredients"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 606, columnNumber: 19 }, __self: this }, generatedRecipe.ingredients.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center text-gray-700 bg-white p-3 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 608, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-32 flex-shrink-0 font-medium", __source: { fileName: "", lineNumber: 612, columnNumber: 25 }, __self: this }, item.amount), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 615, columnNumber: 25 }, __self: this }, item.ingredient))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 621, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 622, columnNumber: 19 }, __self: this }, "Instructions"), /*#__PURE__*/ React.createElement("ol", { className: "space-y-4", __source: { fileName: "", lineNumber: 625, columnNumber: 19 }, __self: this }, generatedRecipe.instructions.map((step, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex gap-4 text-gray-700", __source: { fileName: "", lineNumber: 627, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex-shrink-0 w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center font-medium", __source: { fileName: "", lineNumber: 628, columnNumber: 25 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("p", { className: "pt-1", __source: { fileName: "", lineNumber: 631, columnNumber: 25 }, __self: this }, step)))))))))); } if (selectedDrink) { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 647, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("title", { __source: { fileName: "", lineNumber: 648, columnNumber: 11 }, __self: this }, `${selectedDrink.strDrink} Recipe - Tonight's Bartender`), /*#__PURE__*/ React.createElement("meta", { name: "description", content: `Learn how to make the perfect ${selectedDrink.strDrink}. A ${selectedDrink.strAlcoholic} drink recipe with detailed instructions and ingredients.`, __source: { fileName: "", lineNumber: 649, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "keywords", content: `${selectedDrink.strDrink.toLowerCase()}, cocktail recipe, drink recipe, mixology, ${selectedDrink.strAlcoholic.toLowerCase()}`, __source: { fileName: "", lineNumber: 653, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:title", content: `${selectedDrink.strDrink} Recipe - Tonight's Bartender`, __source: { fileName: "", lineNumber: 658, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:description", content: `Learn how to make the perfect ${selectedDrink.strDrink}. A ${selectedDrink.strAlcoholic} drink recipe.`, __source: { fileName: "", lineNumber: 662, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:type", content: "article", __source: { fileName: "", lineNumber: 666, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:image", content: selectedDrink.strDrinkThumb, __source: { fileName: "", lineNumber: 667, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:card", content: "summary_large_image", __source: { fileName: "", lineNumber: 669, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:title", content: `${selectedDrink.strDrink} Recipe - Tonight's Bartender`, __source: { fileName: "", lineNumber: 670, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:description", content: `Learn how to make the perfect ${selectedDrink.strDrink}. A ${selectedDrink.strAlcoholic} drink recipe.`, __source: { fileName: "", lineNumber: 674, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:image", content: selectedDrink.strDrinkThumb, __source: { fileName: "", lineNumber: 678, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("script", { type: "application/ld+json", __source: { fileName: "", lineNumber: 680, columnNumber: 11 }, __self: this }, ` { "@context": "https://schema.org", "@type": "Recipe", "name": "${selectedDrink.strDrink}", "description": "Learn how to make the perfect ${selectedDrink.strDrink}", "image": "${selectedDrink.strDrinkThumb}", "recipeCategory": "${selectedDrink.strAlcoholic}", "recipeCuisine": "Beverages", "recipeIngredient": ${JSON.stringify(selectedDrink.ingredients.map((i)=>`${i.measure} ${i.ingredient}`))}, "recipeInstructions": "${selectedDrink.strInstructions}", "recipeYield": "1 serving" } `)), /*#__PURE__*/ React.createElement("main", { className: "min-h-screen bg-gradient-to-b from-white to-blue-50", __source: { fileName: "", lineNumber: 695, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto p-4 sm:p-6 lg:p-8", __source: { fileName: "", lineNumber: 696, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedDrink(null), className: "mb-6 flex items-center text-blue-500 hover:text-blue-600 transition-colors group", __source: { fileName: "", lineNumber: 697, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-left mr-2 transform group-hover:-translate-x-1 transition-transform", __source: { fileName: "", lineNumber: 701, columnNumber: 15 }, __self: this }), "Back to search"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100", __source: { fileName: "", lineNumber: 705, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-80", __source: { fileName: "", lineNumber: 706, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedDrink.strDrinkThumb, alt: selectedDrink.strDrink, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 707, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent", __source: { fileName: "", lineNumber: 712, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "absolute bottom-6 left-6 right-6 text-3xl font-semibold text-white", __source: { fileName: "", lineNumber: 713, columnNumber: 17 }, __self: this }, selectedDrink.strDrink)), /*#__PURE__*/ React.createElement("div", { className: "p-6 sm:p-8", __source: { fileName: "", lineNumber: 717, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 718, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block px-4 py-2 bg-gradient-to-r from-blue-50 to-blue-100 rounded-full text-blue-700 text-sm font-medium mb-3", __source: { fileName: "", lineNumber: 719, columnNumber: 19 }, __self: this }, selectedDrink.strAlcoholic)), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 724, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 725, columnNumber: 19 }, __self: this }, "Ingredients"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 728, columnNumber: 19 }, __self: this }, selectedDrink.ingredients.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center text-gray-700 bg-white p-3 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 730, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-32 flex-shrink-0 font-medium", __source: { fileName: "", lineNumber: 734, columnNumber: 25 }, __self: this }, item.measure), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 737, columnNumber: 25 }, __self: this }, item.ingredient))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 743, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 744, columnNumber: 19 }, __self: this }, "Instructions"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 leading-relaxed", __source: { fileName: "", lineNumber: 747, columnNumber: 19 }, __self: this }, selectedDrink.strInstructions))))))); } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 761, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("title", { __source: { fileName: "", lineNumber: 762, columnNumber: 9 }, __self: this }, "Tonight's Bartender - Your Personal AI Mixologist | Custom Cocktail & Mocktail Recipes"), /*#__PURE__*/ React.createElement("meta", { charSet: "utf-8", __source: { fileName: "", lineNumber: 766, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1", __source: { fileName: "", lineNumber: 767, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "description", content: "Create custom cocktails and mocktails with Tonight's Bartender, your AI-powered mixologist. Get personalized drink recipes, browse popular cocktails, and discover new favorites.", __source: { fileName: "", lineNumber: 768, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "keywords", content: "cocktail recipes, mocktail recipes, drink generator, AI bartender, custom cocktails, mixology, bartending", __source: { fileName: "", lineNumber: 772, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "robots", content: "index, follow", __source: { fileName: "", lineNumber: 776, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:title", content: "Tonight's Bartender - Your Personal AI Mixologist", __source: { fileName: "", lineNumber: 778, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:description", content: "Create custom cocktails and mocktails with Tonight's Bartender, your AI-powered mixologist. Get personalized drink recipes and discover new favorites.", __source: { fileName: "", lineNumber: 782, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:type", content: "website", __source: { fileName: "", lineNumber: 786, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { property: "og:image", content: "https://ucarecdn.com/8e8cd3eb-8390-48de-b3de-19d2ddc02ef2/-/format/auto/", __source: { fileName: "", lineNumber: 787, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:card", content: "summary_large_image", __source: { fileName: "", lineNumber: 792, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:title", content: "Tonight's Bartender - AI Cocktail Recipe Generator", __source: { fileName: "", lineNumber: 793, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:description", content: "Create perfect cocktails and mocktails with our AI bartender. Get personalized drink recipes instantly.", __source: { fileName: "", lineNumber: 797, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "twitter:image", content: "https://ucarecdn.com/8e8cd3eb-8390-48de-b3de-19d2ddc02ef2/-/format/auto/", __source: { fileName: "", lineNumber: 801, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "https://ucarecdn.com/8e8cd3eb-8390-48de-b3de-19d2ddc02ef2/-/format/auto/", __source: { fileName: "", lineNumber: 806, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("script", { async: true, src: "https://www.googletagmanager.com/gtag/js?id=G-S3T0KBBG6L", __source: { fileName: "", lineNumber: 811, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("script", { __source: { fileName: "", lineNumber: 815, columnNumber: 9 }, __self: this }, ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-S3T0KBBG6L'); `), /*#__PURE__*/ React.createElement("script", { type: "application/ld+json", __source: { fileName: "", lineNumber: 822, columnNumber: 9 }, __self: this }, ` { "@context": "https://schema.org", "@type": "WebApplication", "name": "Tonight's Bartender", "description": "AI-powered cocktail and mocktail recipe generator", "applicationCategory": "Food & Drink", "operatingSystem": "Any", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "featureList": [ "Custom cocktail recipe generation", "Mocktail recipes", "Drink search", "AI-powered recommendations", "Difficulty levels for all skill levels" ] } `)), /*#__PURE__*/ React.createElement("main", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 845, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto p-4 sm:p-6 lg:p-8", __source: { fileName: "", lineNumber: 846, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-16", __source: { fileName: "", lineNumber: 847, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 848, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-blue-600 mb-4", __source: { fileName: "", lineNumber: 849, columnNumber: 15 }, __self: this }, "Tonight's Bartender"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-700 mb-4", __source: { fileName: "", lineNumber: 852, columnNumber: 15 }, __self: this }, "Perfect Cocktail and Mocktail Recipes Without Any Guesswork"), /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center gap-2 text-sm text-gray-600 bg-white/50 backdrop-blur-sm px-4 py-1.5 rounded-full shadow-sm border border-gray-100", __source: { fileName: "", lineNumber: 855, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-check-circle text-green-500", __source: { fileName: "", lineNumber: 856, columnNumber: 17 }, __self: this }), "Trusted by 1,000+ people every weekend")), loadingDrinkOfDay ? /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto mt-12 animate-pulse", __source: { fileName: "", lineNumber: 862, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded w-1/4 mx-auto mb-4", __source: { fileName: "", lineNumber: 863, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-blue-50/50 to-yellow-50/50 rounded-xl p-4 flex gap-4 border border-blue-100/50", __source: { fileName: "", lineNumber: 864, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-48 h-48 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 865, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 866, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 rounded w-1/2 mb-3", __source: { fileName: "", lineNumber: 867, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/4 mb-2", __source: { fileName: "", lineNumber: 868, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4", __source: { fileName: "", lineNumber: 869, columnNumber: 21 }, __self: this })))) : drinkOfTheDay && /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto mt-12", __source: { fileName: "", lineNumber: 875, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-blue-600 text-center mb-6", __source: { fileName: "", lineNumber: 876, columnNumber: 19 }, __self: this }, "Drink of the Day"), /*#__PURE__*/ React.createElement("div", { onClick: ()=>setSelectedDrink(drinkOfTheDay), className: "bg-gradient-to-br from-blue-50/80 to-yellow-50/80 backdrop-blur-sm rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer group border border-blue-100/50", __source: { fileName: "", lineNumber: 879, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row", __source: { fileName: "", lineNumber: 883, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full sm:w-48 h-48 flex-shrink-0", __source: { fileName: "", lineNumber: 884, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: drinkOfTheDay.strDrinkThumb, alt: drinkOfTheDay.strDrink, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 885, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6 flex-1", __source: { fileName: "", lineNumber: 891, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4", __source: { fileName: "", lineNumber: 892, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-xl text-gray-800", __source: { fileName: "", lineNumber: 893, columnNumber: 27 }, __self: this }, drinkOfTheDay.strDrink)), /*#__PURE__*/ React.createElement("span", { className: "inline-block px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full text-blue-700 text-sm font-medium mb-4", __source: { fileName: "", lineNumber: 897, columnNumber: 25 }, __self: this }, drinkOfTheDay.strAlcoholic), /*#__PURE__*/ React.createElement("div", { className: "text-gray-700", __source: { fileName: "", lineNumber: 900, columnNumber: 25 }, __self: this }, drinkOfTheDay.ingredients.slice(0, 3).map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-base mb-1.5 flex items-center gap-2", __source: { fileName: "", lineNumber: 904, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-circle-dot text-blue-500 text-xs", __source: { fileName: "", lineNumber: 908, columnNumber: 33 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 909, columnNumber: 33 }, __self: this }, item.measure, " ", item.ingredient))), drinkOfTheDay.ingredients.length > 3 && /*#__PURE__*/ React.createElement("div", { className: "text-base text-blue-600 mt-2 group-hover:text-blue-700 transition-colors", __source: { fileName: "", lineNumber: 915, columnNumber: 29 }, __self: this }, "+ ", drinkOfTheDay.ingredients.length - 3, " more ingredients")))))), /*#__PURE__*/ React.createElement("nav", { className: "max-w-3xl mx-auto flex flex-col items-center mt-12", __source: { fileName: "", lineNumber: 928, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4 mb-8 w-full", __source: { fileName: "", lineNumber: 929, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex-1", __source: { fileName: "", lineNumber: 930, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", value: search, onChange: (e)=>setSearch(e.target.value), placeholder: "Search for drinks...", "aria-label": "Search drinks", className: "w-full p-4 pl-12 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all", __source: { fileName: "", lineNumber: 931, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 939, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: drinkType, onChange: (e)=>setDrinkType(e.target.value), "aria-label": "Filter by drink type", className: "p-4 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all bg-white", __source: { fileName: "", lineNumber: 941, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 947, columnNumber: 19 }, __self: this }, "All Drinks"), /*#__PURE__*/ React.createElement("option", { value: "cocktail", __source: { fileName: "", lineNumber: 948, columnNumber: 19 }, __self: this }, "Cocktails"), /*#__PURE__*/ React.createElement("option", { value: "mocktail", __source: { fileName: "", lineNumber: 949, columnNumber: 19 }, __self: this }, "Mocktails"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGenerator(true), className: "bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-all flex items-center gap-2 font-medium", __source: { fileName: "", lineNumber: 953, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-magic", __source: { fileName: "", lineNumber: 957, columnNumber: 17 }, __self: this }), "Create Custom Recipe"))), loading && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 964, columnNumber: 13 }, __self: this }, [ 1, 2, 3, 4, 5, 6, 7, 8 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse", __source: { fileName: "", lineNumber: 966, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 rounded-xl h-64 mb-4", __source: { fileName: "", lineNumber: 967, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-5 bg-gray-200 rounded w-3/4 mb-3", __source: { fileName: "", lineNumber: 968, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 969, columnNumber: 19 }, __self: this })))), error && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 976, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center gap-2 text-red-500 bg-red-50 px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 977, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-exclamation-circle", __source: { fileName: "", lineNumber: 978, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 979, columnNumber: 17 }, __self: this }, error))), !loading && results && results.length === 0 && search && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 985, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 986, columnNumber: 15 }, __self: this }, 'No drinks found for "', search, '"')), !loading && results && results.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 991, columnNumber: 13 }, __self: this }, results.map((drink)=>/*#__PURE__*/ React.createElement("div", { key: drink.idDrink, onClick: ()=>getDrinkDetails(drink.idDrink), className: "bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer group border border-gray-100", __source: { fileName: "", lineNumber: 993, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 998, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: drink.strDrinkThumb, alt: drink.strDrink, className: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 999, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent", __source: { fileName: "", lineNumber: 1004, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 1006, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-lg mb-2 group-hover:text-blue-600 transition-colors", __source: { fileName: "", lineNumber: 1007, columnNumber: 21 }, __self: this }, drink.strDrink), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 1010, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 1011, columnNumber: 23 }, __self: this }, drink.strAlcoholic || (drinkType === "mocktail" ? "Non Alcoholic" : "Alcoholic"))))))), !loading && !results && !error && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1025, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold mb-8 text-center text-gray-800", __source: { fileName: "", lineNumber: 1026, columnNumber: 15 }, __self: this }, "Popular Drinks"), loadingPopular ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 1030, columnNumber: 17 }, __self: this }, [ 1, 2, 3, 4, 5, 6, 7, 8 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse", __source: { fileName: "", lineNumber: 1032, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 rounded-xl h-64 mb-4", __source: { fileName: "", lineNumber: 1033, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-5 bg-gray-200 rounded w-3/4 mb-3", __source: { fileName: "", lineNumber: 1034, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 1035, columnNumber: 23 }, __self: this })))) : popularDrinks && popularDrinks.length > 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 1041, columnNumber: 19 }, __self: this }, popularDrinks.map((drink)=>/*#__PURE__*/ React.createElement("div", { key: drink.idDrink, onClick: ()=>getDrinkDetails(drink.idDrink), className: "bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer group border border-gray-100", __source: { fileName: "", lineNumber: 1043, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1048, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: drink.strDrinkThumb, alt: drink.strDrink, className: "w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 1049, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity", __source: { fileName: "", lineNumber: 1054, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 1056, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-xl mb-1 group-hover:text-blue-600 transition-colors", __source: { fileName: "", lineNumber: 1057, columnNumber: 27 }, __self: this }, drink.strDrink))))), hasMore && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 1065, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: loadMoreDrinks, disabled: loading, className: "bg-white text-blue-600 px-8 py-4 rounded-xl hover:bg-blue-50 transition-colors border-2 border-blue-200 shadow-sm disabled:opacity-50 font-medium", __source: { fileName: "", lineNumber: 1066, columnNumber: 23 }, __self: this }, loading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 1073, columnNumber: 29 }, __self: this }), "Loading more...") : "Load More Drinks"))) : /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-500", __source: { fileName: "", lineNumber: 1084, columnNumber: 17 }, __self: this }, "No example drinks available")), /*#__PURE__*/ React.createElement("footer", { className: "text-center text-sm text-gray-500 mt-16 pt-8 border-t", __source: { fileName: "", lineNumber: 1091, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 1092, columnNumber: 13 }, __self: this }, "© 2025 Tonight's Bartender. Please drink responsibly."), /*#__PURE__*/ React.createElement("p", { className: "mt-1", __source: { fileName: "", lineNumber: 1093, columnNumber: 13 }, __self: this }, "Must be of legal drinking age in your location to consume alcoholic beverages."))))); }