function MainComponent() { const [activeFood, setActiveFood] = React.useState(null); const [isAuthenticated, setIsAuthenticated] = React.useState(false); const foods = [ { name: 'Khinkali', recipe: [ 'Mix the dough', 'Prepare the filling', 'Wrap the dough', 'Boil the dumplings' ], image: '/images/khinkali.jpg' }, { name: 'Khachapuri', recipe: [ 'Prepare the dough', 'Mix the cheese filling', 'Shape the dough', 'Bake until golden' ], image: '/images/khachapuri.jpg' }, { name: 'Chaabilgish', recipe: [ 'Prepare the dough', 'Make the pumpkin filling', 'Wrap the dough around filling', 'Cook until done' ], image: '/images/chaabilgish.jpg' }, { name: 'Zhizhig Galnash', recipe: [ 'Prepare the dough', 'Cook the mutton', 'Make the dumpling-noodles', 'Combine and serve' ], image: '/images/zhizhig_galnash.jpg' } ]; const handleFoodClick = (food)=>{ setActiveFood(food); }; const handleAuth = ()=>{ setIsAuthenticated(true); }; if (!isAuthenticated) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-gray-200 to-gray-400 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "GeoKist Food"), /*#__PURE__*/ React.createElement("button", { onClick: handleAuth, className: "bg-blue-900 text-white p-2 rounded-lg shadow-md font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Sign In")); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-gray-200 to-gray-400 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full text-center p-4 bg-blue-900 text-white", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "GeoKist Food")), /*#__PURE__*/ React.createElement("section", { className: "flex flex-col items-center w-full p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Georgian and Kist Traditional Foods"), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-2xl grid grid-cols-1 gap-4 sm:grid-cols-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, foods.map((food, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white rounded-lg p-4 shadow-md cursor-pointer transition-transform transform hover:scale-105 flex flex-col items-center", onClick: ()=>handleFoodClick(food), __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: food.image, alt: `Image of ${food.name}`, className: "w-[100px] h-[100px] rounded-full mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), food.name)))), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-2xl p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Recipe Steps"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-md max-h-[400px] overflow-y-auto", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ol", { className: "list-decimal list-inside space-y-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, (activeFood ? activeFood.recipe : []).map((step, index)=>{ const stepText = `Step ${index + 1}: ${step}`; return /*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto animation-slideIn", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, stepText); })))), /*#__PURE__*/ React.createElement("section", { className: "w-full max-w-2xl p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Voice Recorder & Feedback"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mb-4 bg-blue-900 text-white p-2 rounded-full shadow-md w-[80px] h-[80px]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "🎤"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 rounded-lg border border-gray-300 font-roboto", rows: "4", name: "feedback", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "w-full p-4 bg-blue-900 text-white text-center mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "© 2023 GeoKist Food")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } .animation-slideIn { animation: slideIn 0.5s ease-in-out; } `)); }