function MobileNavigation({ isOpen, onClose, links = [ { href: "/", label: "Home" }, { href: "/menu", label: "Menu" }, { href: "/about", label: "About" }, { href: "/new-contact", label: "Contact" } ], logoUrl = "https://ucarecdn.com/efae441c-1607-43e9-9590-ff4da262e155/-/format/auto/", logoAlt = "BigFish African Cuisine Logo" }) { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .mobile-menu { animation: ${isOpen ? "slideIn" : "slideOut"} 0.3s ease-in-out forwards; } .mobile-overlay { animation: ${isOpen ? "fadeIn" : "fadeOut"} 0.3s ease-in-out forwards; } `), isOpen && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mobile-overlay fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden", onClick: onClose, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mobile-menu fixed inset-y-0 right-0 w-[80%] max-w-sm bg-black z-50 md:hidden flex flex-col", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center group", onClick: onClose, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoUrl, alt: logoAlt, className: "h-16 w-auto transform transition-all duration-300 group-hover:scale-110 group-hover:rotate-3", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-white p-2 hover:text-gray-300 transition-colors", "aria-label": "Close menu", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-2xl", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("nav", { className: "flex-grow flex flex-col items-center justify-center space-y-8 p-8", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, links.map((link)=>/*#__PURE__*/ React.createElement("a", { key: link.href, href: link.href, className: "text-2xl text-white font-inter hover:text-gray-300 transition-all duration-300", onClick: onClose, __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, link.label)))))); } function MobileNavigationStory() { const [isOpen, setIsOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "Mobile Navigation Demo"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "bg-black text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Open Mobile Menu"), /*#__PURE__*/ React.createElement(MobileNavigation, { isOpen: isOpen, onClose: ()=>setIsOpen(false), __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Mobile Navigation with Custom Links"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "bg-black text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Open Custom Menu"), /*#__PURE__*/ React.createElement(MobileNavigation, { isOpen: isOpen, onClose: ()=>setIsOpen(false), links: [ { href: "/", label: "Home" }, { href: "/menu", label: "Menu" }, { href: "/about", label: "About" }, { href: "/contact", label: "Contact" }, { href: "/account/messages", label: "Messages" } ], __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this })))); } function MenuPage() { const menuSections = { popular: [ { id: 1, name: "Jollof Rice w/ Choice of Protein", price: 23.0, description: "A flavorful West African rice dish cooked in a rich tomato sauce with aromatic spices, served with your choice of perfectly seasoned fried fish or tender chicken!", image: "https://ucarecdn.com/85efbbc3-064a-488c-b33f-d8395b9ed641/-/format/auto/", spiceLevel: 2 }, { id: 2, name: "Attieke/Acheke with Choice of Snapper", price: 27.0, description: "Light, fluffy cassava couscous served with your choice of perfectly fried or grilled red snapper, fresh veggies, and a side of spicy pepper sauce for an authentic West African delight!", image: "https://ucarecdn.com/e94df80b-6fda-4294-9336-4a53c58655ad/-/format/auto/", spiceLevel: 2 }, { id: 3, name: "Goat Pepper Soup", price: 27.0, description: "A bold and spicy West African broth slow-cooked with tender goat meat, aromatic herbs, and a rich blend of peppers for deep, comforting heat!", image: "https://ucarecdn.com/0a48de46-47a8-46fe-8ea1-9000b5ef8dd7/-/format/auto/", spiceLevel: 3 } ], "served w/ Fufu": [ { id: 4, name: "Palava Sauce", price: 23.0, description: "A rich savory stew made with tender meat or fish, simmered in a flavorful spinach and palm oil sauce, served with rice or fufu for a true taste of West Africa!", image: "https://ucarecdn.com/f1ffe057-ae24-4195-b520-6d4780363d42/", spiceLevel: 1 }, { id: 5, name: "Palm Butter", price: 24.0, description: "A creamy, flavorful Liberian stew made from rich palm nut sauce, slow-cooked with your choice of tender meat or fish, and served with rice for a hearty, authentic taste!", image: "https://ucarecdn.com/1fc1f2f9-e0b0-4d0b-a236-81926f0be09c/", spiceLevel: 1 }, { id: 6, name: "Seafood Pepper Soup", price: 30.0, description: "A spicy, aromatic broth filled with fresh seafood, simmered with bold West African spices and herbs for a comforting and flavorful kick!", image: "https://ucarecdn.com/4a823e39-6df5-4def-b03a-8c30feabd2b6/", spiceLevel: 3 }, { id: 7, name: "Okra Sauce", price: 24.0, description: "A rich and flavorful West African stew made with tender meat or seafood, simmered in a savory, seasoned okra sauce, served with rice or fufu!", image: "https://ucarecdn.com/81e37a36-3a4a-4c0d-ac37-f6efcff4c34d/", spiceLevel: 1 }, { id: 21, name: "Peanut Soup", price: 22.0, description: "A rich and comforting West African classic, this creamy peanut soup is made with fresh ground peanuts, slow-cooked with tender meat, aromatic spices, and a touch of heat!", image: "https://ucarecdn.com/dd257275-1fd4-440f-90cc-5133fbaed32f/-/format/auto/", spiceLevel: 2 }, { id: 23, name: "Liberian GB Soup", price: 25.0, description: 'A bold and spicy delicacy, GB (pronounced "gee-bee") is a thick, stretchy cassava dough served with rich, peppery soup, slippery stew made from dried okra and seasoned meats. This traditional dish is favorite for those who crave deep Liberian flavor and texture!', image: "https://ucarecdn.com/d082f139-6375-4b1d-a9b7-b971336f6273/-/format/auto/", spiceLevel: 2 } ], "served w/rice": [ { id: 8, name: "Chuck Rice & Gravy", price: 20.0, description: "Fluffy rice infused with vibrant spinach & herbs, absorbing the rich flavors of fresh greens, savory gravy and flavorful seasonings for a truly Liberian experience!", image: "https://ucarecdn.com/bbe11fc8-c0f5-42ce-ad8a-04362386394f/-/format/auto/", spiceLevel: 1 }, { id: 9, name: "Cassava Leaf Soup", price: 23.0, description: "A hearty and flavorful stew made with tender meat, simmered in a rich, earthy cassava leaf sauce, and served with rice for a true taste of Liberian comfort food!", image: "https://ucarecdn.com/379cfce2-80cd-4912-be03-5b22cebf05f5/", spiceLevel: 2 }, { id: 10, name: "Fried Big Fish w/Dry Rice", price: 25.0, description: "Crispy fried fish served with perfectly cooked dry rice and a side of spicy, tangy pepper sauce for a bold, authentic Liberian flavor experience!", image: "https://ucarecdn.com/2616dc2c-54b2-414b-9544-1506225e2de9/-/format/auto/", spiceLevel: 2 }, { id: 11, name: "Vegetarian Jollof Rice", price: 15.0, description: "Simple but flavorful Jollof rice, cooked with rich West African spices, tomatoes, and classic seasonings, stirred with mixed veggies for a vibrant, satisfying meal!", image: "https://ucarecdn.com/d6449f60-a1f5-4698-92fc-7c834c76e37c/-/format/auto/", spiceLevel: 2 }, { id: 20, name: "Liberian Fried Spinach", price: 18.0, description: "Tender spinach leaves sautéed to perfection with aromatic spices, mixed with succulent pieces of meat and served with fluffy white rice for an authentic Liberian dining experience!", image: "https://ucarecdn.com/c8c0f01f-d32c-4d86-a143-23dc716ad1f3/-/format/auto/", spiceLevel: 1 }, { id: 22, name: "Liberian Kidney Beans Stew", price: 18.0, description: "A hearty and flavorful West African Classic, our Liberian Kidney beans Stew is slow-cooked in a rich sauce, with onions, peppers, and traditional seasonings. Served with rice, this comforting dish brings bold flavor and taste of home in every bite!", image: "https://ucarecdn.com/d1a39bc5-c85e-44f1-b94a-40a4473e645c/-/format/auto/", spiceLevel: 1 } ], appetizers: [ { id: 12, name: "Roasted Meat", price: 14.0, description: "Succulent, perfectly seasoned meat, marinated and roasted on a stick to a golden crisp, delivering authentic Liberian flavor in every bite!", image: "https://ucarecdn.com/86ed4411-1794-42f5-ae22-7001a4f9341c/-/format/auto/" }, { id: 13, name: "Kala (Puff Puff) w/ Pepper Sauce", price: 10.0, description: "Soft, airy puff puff fried to a golden crisp and paired with a zesty pepper sauce that delivers a vibrant burst of Liberian flavor!", image: "https://ucarecdn.com/4023d283-6275-4c08-a4e5-a772a1a9db1e/-/format/auto/" }, { id: 14, name: "Fried Plantains w/ Pepper Sauce", price: 8.0, description: "Golden, crispy plantains paired with a zesty pepper sauce, offering a vibrant taste of Liberia!", image: "https://ucarecdn.com/e99e8aa1-9125-45a2-a0fd-970837386734/" } ], beverages: [ { id: 15, name: "Coca-Cola", price: 2.5, description: "Classic refreshing cola beverage!", icon: "fa-glass-water-droplet", iconColor: "from-red-600 to-red-700" }, { id: 16, name: "Sprite", price: 2.5, description: "Crisp, refreshing lemon-lime soda!", icon: "fa-lemon", iconColor: "from-green-400 to-lime-500" }, { id: 17, name: "Fanta Orange", price: 2.5, description: "Sweet and fizzy orange-flavored soda!", icon: "fa-citrus", iconColor: "from-orange-400 to-orange-500" }, { id: 18, name: "Jarritos", price: 2.5, description: "Mexican soda available in various authentic flavors!", icon: "fa-bottle-water", iconColor: "from-emerald-400 to-teal-500" }, { id: 19, name: "Water", price: 1.5, description: "Pure, refreshing bottled water!", icon: "fa-droplet", iconColor: "from-blue-400 to-cyan-500" } ] }; const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [chatMessages, setChatMessages] = useState([]); const [chatLoading, setChatLoading] = useState(false); const [chatError, setChatError] = useState(null); const [shareTooltip, setShareTooltip] = useState(""); const [showConfetti, setShowConfetti] = useState(false); const handleShare = async (item)=>{ try { if (navigator.share) { await navigator.share({ title: `Check out ${item.name} at BigFish African Cuisine!`, text: `${item.description}\nPrice: ${item.price}`, url: window.location.href }); } else { const text = `${item.name} at BigFish African Cuisine\n${item.description}\nPrice: ${item.price}\n${window.location.href}`; await navigator.clipboard.writeText(text); setShareTooltip("Link copied!"); setTimeout(()=>setShareTooltip(""), 2000); } setShowConfetti(true); setTimeout(()=>setShowConfetti(false), 2000); } catch (error) { console.error("Error sharing:", error); } }; const renderSpiceLevel = (level)=>{ return /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 256, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 3 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("i", { key: index, className: `fas fa-pepper-hot text-sm ${index < level ? "text-red-500" : "text-gray-300"}`, __source: { fileName: "", lineNumber: 258, columnNumber: 11 }, __self: this }))); }; const dishOfTheDay = useMemo(()=>{ const popularDishes = menuSections.popular; return popularDishes[Math.floor(Math.random() * popularDishes.length)]; }, []); const Confetti = ()=>{ if (!showConfetti) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 pointer-events-none z-[1000]", __source: { fileName: "", lineNumber: 278, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 50 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute animate-confetti", style: { left: `${Math.random() * 100}%`, top: "-10px", backgroundColor: [ "#FFD700", "#FF6B6B", "#4CAF50", "#2196F3" ][Math.floor(Math.random() * 4)], width: "8px", height: "8px", borderRadius: "50%", animationDelay: `${Math.random() * 2}s`, animationDuration: `${1 + Math.random() * 2}s` }, __source: { fileName: "", lineNumber: 280, columnNumber: 11 }, __self: this }))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900", __source: { fileName: "", lineNumber: 302, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Confetti, { __source: { fileName: "", lineNumber: 303, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { className: "fixed w-full z-[100] bg-black border-b border-gray-700 shadow-lg", __source: { fileName: "", lineNumber: 304, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 305, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-16 md:h-24", __source: { fileName: "", lineNumber: 306, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center group", __source: { fileName: "", lineNumber: 308, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/efae441c-1607-43e9-9590-ff4da262e155/-/format/auto/", alt: "BigFish African Cuisine Logo", className: "h-12 md:h-20 w-auto transform transition-all duration-300 group-hover:scale-110 group-hover:rotate-3", __source: { fileName: "", lineNumber: 309, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMobileMenuOpen(!mobileMenuOpen), className: "text-white p-2 z-50 relative", "aria-label": "Toggle menu", __source: { fileName: "", lineNumber: 318, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${mobileMenuOpen ? "fa-times" : "fa-bars"} text-2xl`, __source: { fileName: "", lineNumber: 323, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-12", __source: { fileName: "", lineNumber: 329, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, "Home", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 335, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/menu", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, "Menu", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 342, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 344, columnNumber: 15 }, __self: this }, "About", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/new-contact", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this }, "Contact", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 356, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "pt-16 md:pt-24 px-2 sm:px-6 lg:px-8 bg-gray-900", __source: { fileName: "", lineNumber: 365, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto pb-4", __source: { fileName: "", lineNumber: 366, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6 md:mb-8 px-2 sm:px-0 gap-4 sm:gap-0", __source: { fileName: "", lineNumber: 367, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl sm:text-3xl md:text-4xl font-bold text-white", __source: { fileName: "", lineNumber: 368, columnNumber: 13 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("a", { href: "/print-flyer", className: "inline-flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors w-full sm:w-auto justify-center sm:justify-start", __source: { fileName: "", lineNumber: 371, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-print", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this }), "Printable Menu")), /*#__PURE__*/ React.createElement("div", { className: "mb-8 sm:mb-12 px-2 sm:px-0", __source: { fileName: "", lineNumber: 380, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden rounded-lg border-2 border-yellow-400 bg-gray-800 shadow-xl", __source: { fileName: "", lineNumber: 381, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-10", __source: { fileName: "", lineNumber: 382, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-shine-rotate bg-gradient-to-r from-yellow-300 via-yellow-500 to-yellow-300 text-black font-bold px-2 py-1 sm:px-4 sm:py-2 rounded-full transform rotate-12 text-xs sm:text-base", __source: { fileName: "", lineNumber: 383, columnNumber: 17 }, __self: this }, "Dish of the Day")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 387, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 h-48 sm:h-56 md:h-[300px] relative", __source: { fileName: "", lineNumber: 388, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: dishOfTheDay.image, alt: dishOfTheDay.name, className: "absolute inset-0 w-full h-full object-cover", __source: { fileName: "", lineNumber: 389, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4 sm:p-6 flex flex-col justify-center", __source: { fileName: "", lineNumber: 395, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-2xl font-bold text-white mb-2 sm:mb-4", __source: { fileName: "", lineNumber: 396, columnNumber: 19 }, __self: this }, dishOfTheDay.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base text-gray-300 mb-3 sm:mb-4", __source: { fileName: "", lineNumber: 399, columnNumber: 19 }, __self: this }, dishOfTheDay.description), dishOfTheDay.spiceLevel && renderSpiceLevel(dishOfTheDay.spiceLevel), /*#__PURE__*/ React.createElement("p", { className: "text-xl sm:text-2xl font-bold text-white mt-2", __source: { fileName: "", lineNumber: 404, columnNumber: 19 }, __self: this }, "$", dishOfTheDay.price.toFixed(2)))))), Object.entries(menuSections).map(([section, items])=>section !== "beverages" ? /*#__PURE__*/ React.createElement("div", { key: section, className: "mb-6 sm:mb-8 md:mb-12", __source: { fileName: "", lineNumber: 414, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-xl md:text-2xl font-bold text-white mb-3 sm:mb-4 px-2 sm:px-0 capitalize", __source: { fileName: "", lineNumber: 415, columnNumber: 17 }, __self: this }, section), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "border border-gray-700 rounded-lg overflow-hidden bg-gray-800 shadow-md relative mx-2 sm:mx-0 flex flex-col h-full", style: { animation: `fade-in 0.6s ease-out forwards ${index * 150}ms`, opacity: 1 }, __source: { fileName: "", lineNumber: 420, columnNumber: 21 }, __self: this }, section === "popular" && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-10 flex items-center gap-2", __source: { fileName: "", lineNumber: 429, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-gray-700/80 via-gray-600/80 to-gray-700/80 backdrop-blur-sm text-white text-xs sm:text-sm px-2 py-1 rounded-full font-medium animate-shine", __source: { fileName: "", lineNumber: 430, columnNumber: 27 }, __self: this }, "Popular Choice"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire text-base sm:text-xl text-orange-500 animate-flicker", __source: { fileName: "", lineNumber: 433, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden", __source: { fileName: "", lineNumber: 436, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: item.name, className: "w-full h-32 sm:h-40 md:h-48 object-cover", loading: "lazy", __source: { fileName: "", lineNumber: 437, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShare(item), className: "absolute bottom-2 right-2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-all duration-300 backdrop-blur-sm", "aria-label": "Share", __source: { fileName: "", lineNumber: 443, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt text-sm", __source: { fileName: "", lineNumber: 448, columnNumber: 27 }, __self: this }), shareTooltip && /*#__PURE__*/ React.createElement("span", { className: "absolute bottom-full right-0 mb-2 bg-black text-white text-xs px-2 py-1 rounded whitespace-nowrap", __source: { fileName: "", lineNumber: 450, columnNumber: 29 }, __self: this }, shareTooltip))), /*#__PURE__*/ React.createElement("div", { className: "p-3 sm:p-4 flex flex-col flex-grow", __source: { fileName: "", lineNumber: 456, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-white mb-2 text-sm sm:text-base", __source: { fileName: "", lineNumber: 457, columnNumber: 25 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-xs sm:text-sm mb-2", __source: { fileName: "", lineNumber: 460, columnNumber: 25 }, __self: this }, item.description), item.spiceLevel && /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1 mb-2", __source: { fileName: "", lineNumber: 464, columnNumber: 27 }, __self: this }, renderSpiceLevel(item.spiceLevel)), /*#__PURE__*/ React.createElement("p", { className: "text-white font-bold mt-auto text-sm sm:text-base", __source: { fileName: "", lineNumber: 468, columnNumber: 25 }, __self: this }, "$", item.price.toFixed(2))))))) : /*#__PURE__*/ React.createElement("div", { key: "beverages", className: "mb-6 sm:mb-8 md:mb-12", __source: { fileName: "", lineNumber: 477, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-xl md:text-2xl font-bold text-white mb-3 sm:mb-4 px-2 sm:px-0", __source: { fileName: "", lineNumber: 478, columnNumber: 17 }, __self: this }, "Beverages"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 481, columnNumber: 17 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-700 rounded-lg p-3 sm:p-4 bg-gray-800 mx-2 sm:mx-0 hover:shadow-lg transition-all duration-300 group", style: { animation: `fade-in 0.6s ease-out forwards ${index * 150}ms`, opacity: 1 }, __source: { fileName: "", lineNumber: 483, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2", __source: { fileName: "", lineNumber: 491, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 492, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-gradient-to-br ${item.iconColor} flex items-center justify-center shadow-lg transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-300`, __source: { fileName: "", lineNumber: 493, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} text-white text-xs sm:text-sm animate-float`, __source: { fileName: "", lineNumber: 496, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-white text-xs sm:text-sm group-hover:translate-x-1 transition-transform duration-300", __source: { fileName: "", lineNumber: 500, columnNumber: 27 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("p", { className: "text-white font-bold text-xs sm:text-sm", __source: { fileName: "", lineNumber: 504, columnNumber: 25 }, __self: this }, "$", item.price.toFixed(2)))))))))), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 519, columnNumber: 7 }, __self: this }, ` @keyframes shine-rotate { 0% { transform: rotate(12deg) translateX(-100%); } 100% { transform: rotate(12deg) translateX(100%); } } .animate-shine-rotate { position: relative; overflow: hidden; } .animate-shine-rotate::after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); animation: shine-rotate 3s infinite; } @keyframes fade-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.6s ease-out forwards; will-change: transform; } @media (prefers-reduced-motion: reduce) { .animate-fade-in { animation: none; opacity: 1; transform: none; } } @keyframes flicker { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } } .animate-flicker { animation: flicker 2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .animate-float { animation: float 4s ease-in-out infinite; } @keyframes gentle-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .spice-icon { animation: gentle-pulse 2s ease-in-out infinite; } @keyframes confetti { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(100vh) rotate(720deg); } } .animate-confetti { animation: confetti 2s ease-in-out forwards; } @media (max-width: 640px) { .animate-shine-rotate::after { animation-duration: 2s; } .animate-fade-in { animation-duration: 0.4s; } .spice-icon { animation-duration: 1.5s; } } `)); } function PersistentMusicPlayer({ videoId = "aNB3q9OuaPY", onError }) { const [isVisible, setIsVisible] = useState(false); const [isLoading, setIsLoading] = useState(true); const [hasError, setHasError] = useState(false); useEffect(()=>{ if (!videoId) { setHasError(true); onError?.("No video ID provided"); return; } const timer = setTimeout(()=>{ setIsLoading(false); }, 1500); return ()=>clearTimeout(timer); }, [ videoId, onError ]); useEffect(()=>{ const savedState = localStorage.getItem("musicPlayerVisible"); if (savedState !== null) { setIsVisible(JSON.parse(savedState)); } }, []); useEffect(()=>{ localStorage.setItem("musicPlayerVisible", JSON.stringify(isVisible)); }, [ isVisible ]); if (hasError) { return null; } return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .player-container { animation: ${isVisible ? "slideIn" : "slideOut"} 0.3s ease-in-out forwards; } .toggle-button { transition: all 0.3s ease; } .toggle-button:hover { transform: scale(1.1); } .icon-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; } .play-icon { font-size: 0.7em; margin-top: -4px; } `), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-8 right-8 z-50 flex flex-col items-end space-y-4", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, isVisible && /*#__PURE__*/ React.createElement("div", { className: "player-container bg-black/90 p-2 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[280px] aspect-video bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 border-4 border-gray-200 dark:border-gray-700 border-t-gray-900 dark:border-t-gray-100 rounded-full animate-spin", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("iframe", { className: "absolute inset-0 w-full h-full", src: `https://www.youtube.com/embed/${videoId}?controls=1&autoplay=1&mute=0`, title: "YouTube music player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsVisible(!isVisible), className: "toggle-button p-3 rounded-full bg-red-800/90 text-white hover:bg-red-900/90 transition-all shadow-lg", "aria-label": "Toggle African music player", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, isVisible ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "icon-stack", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-drum text-xl", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-play play-icon", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }))))); } function PersistentMusicPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "Default Music Player"), /*#__PURE__*/ React.createElement(PersistentMusicPlayer, { videoId: "aNB3q9OuaPY", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "Custom Video Player"), /*#__PURE__*/ React.createElement(PersistentMusicPlayer, { videoId: "dQw4w9WgXcQ", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, "Error State"), /*#__PURE__*/ React.createElement(PersistentMusicPlayer, { videoId: "", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }))); } function MainComponent() { const menuSections = { popular: [ { id: 1, name: "Jollof Rice w/ Choice of Protein", price: 23.0, description: "A flavorful West African rice dish cooked in a rich tomato sauce with aromatic spices, served with your choice of perfectly seasoned fried fish or tender chicken!", image: "https://ucarecdn.com/85efbbc3-064a-488c-b33f-d8395b9ed641/-/format/auto/", spiceLevel: 2 }, { id: 2, name: "Attieke/Acheke with Choice of Snapper", price: 27.0, description: "Light, fluffy cassava couscous served with your choice of perfectly fried or grilled red snapper, fresh veggies, and a side of spicy pepper sauce for an authentic West African delight!", image: "https://ucarecdn.com/e94df80b-6fda-4294-9336-4a53c58655ad/-/format/auto/", spiceLevel: 2 }, { id: 3, name: "Goat Pepper Soup", price: 27.0, description: "A bold and spicy West African broth slow-cooked with tender goat meat, aromatic herbs, and a rich blend of peppers for deep, comforting heat!", image: "https://ucarecdn.com/0a48de46-47a8-46fe-8ea1-9000b5ef8dd7/-/format/auto/", spiceLevel: 3 } ], "street bites": [ { id: 12, name: "Roasted Meat", price: 14.0, description: "Succulent, perfectly seasoned meat, marinated and roasted on a stick to a golden crisp, delivering authentic Liberian flavor in every bite!", image: "https://ucarecdn.com/86ed4411-1794-42f5-ae22-7001a4f9341c/-/format/auto/", spiceLevel: 2 }, { id: 25, name: "Monrovia Blaze Ribs (4 count)", price: 16.0, description: "Smoky, flame-grilled ribs marinated in our signature West African spice blend, delivering bold Liberian flavors with every tender bite. Served with your choice of side!", image: "https://ucarecdn.com/f2a7f8e4-65b5-48fc-8371-c586ae5ebd25/-/format/auto/", spiceLevel: 2 } ], "served w/ Fufu": [ { id: 4, name: "Palava Sauce", price: 23.0, description: "A rich savory stew made with tender meat or fish, simmered in a flavorful spinach and palm oil sauce, served with rice or fufu for a true taste of West Africa!", image: "https://ucarecdn.com/f1ffe057-ae24-4195-b520-6d4780363d42/", spiceLevel: 1 }, { id: 5, name: "Palm Butter", price: 24.0, description: "A creamy, flavorful Liberian stew made from rich palm nut sauce, slow-cooked with your choice of tender meat or fish, and served with rice for a hearty, authentic taste!", image: "https://ucarecdn.com/1fc1f2f9-e0b0-4d0b-a236-81926f0be09c/", spiceLevel: 1 }, { id: 6, name: "Seafood Pepper Soup", price: 30.0, description: "A spicy, aromatic broth filled with fresh seafood, simmered with bold West African spices and herbs for a comforting and flavorful kick!", image: "https://ucarecdn.com/4a823e39-6df5-4def-b03a-8c30feabd2b6/", spiceLevel: 3 }, { id: 7, name: "Okra Sauce", price: 24.0, description: "A rich and flavorful West African stew made with tender meat or seafood, simmered in a savory, seasoned okra sauce, served with rice or fufu!", image: "https://ucarecdn.com/81e37a36-3a4a-4c0d-ac37-f6efcff4c34d/", spiceLevel: 1 }, { id: 21, name: "Peanut Soup", price: 22.0, description: "A rich and comforting West African classic, this creamy peanut soup is made with fresh ground peanuts, slow-cooked with tender meat, aromatic spices, and a touch of heat!", image: "https://ucarecdn.com/dd257275-1fd4-440f-90cc-5133fbaed32f/-/format/auto/", spiceLevel: 2 }, { id: 23, name: "Liberian GB Soup", price: 25.0, description: 'A bold and spicy delicacy, GB (pronounced "gee-bee") is a thick, stretchy cassava dough served with rich, peppery soup, slippery stew made from dried okra and seasoned meats. This traditional dish is favorite for those who crave deep Liberian flavor and texture!', image: "https://ucarecdn.com/d082f139-6375-4b1d-a9b7-b971336f6273/-/format/auto/", spiceLevel: 2 } ], "served w/rice": [ { id: 8, name: "Chuck Rice & Gravy", price: 20.0, description: "Fluffy rice infused with vibrant spinach & herbs, absorbing the rich flavors of fresh greens, savory gravy and flavorful seasonings for a truly Liberian experience!", image: "https://ucarecdn.com/bbe11fc8-c0f5-42ce-ad8a-04362386394f/-/format/auto/", spiceLevel: 1 }, { id: 9, name: "Cassava Leaf Soup", price: 23.0, description: "A hearty and flavorful stew made with tender meat, simmered in a rich, earthy cassava leaf sauce, and served with rice for a true taste of Liberian comfort food!", image: "https://ucarecdn.com/379cfce2-80cd-4912-be03-5b22cebf05f5/", spiceLevel: 2 }, { id: 10, name: "Fried Big Fish w/Dry Rice", price: 25.0, description: "Crispy fried fish served with perfectly cooked dry rice and a side of spicy, tangy pepper sauce for a bold, authentic Liberian flavor experience!", image: "https://ucarecdn.com/2616dc2c-54b2-414b-9544-1506225e2de9/-/format/auto/", spiceLevel: 2 }, { id: 11, name: "Vegetarian Jollof Rice", price: 15.0, description: "Simple but flavorful Jollof rice, cooked with rich West African spices, tomatoes, and classic seasonings, stirred with mixed veggies for a vibrant, satisfying meal!", image: "https://ucarecdn.com/d6449f60-a1f5-4698-92fc-7c834c76e37c/-/format/auto/", spiceLevel: 2 }, { id: 20, name: "Liberian Fried Spinach", price: 18.0, description: "Tender spinach leaves sautéed to perfection with aromatic spices, mixed with succulent pieces of meat and served with fluffy white rice for an authentic Liberian dining experience!", image: "https://ucarecdn.com/c8c0f01f-d32c-4d86-a143-23dc716ad1f3/-/format/auto/", spiceLevel: 1 }, { id: 22, name: "Liberian Kidney Beans Stew", price: 18.0, description: "A hearty and flavorful West African Classic, our Liberian Kidney beans Stew is slow-cooked in a rich sauce, with onions, peppers, and traditional seasonings. Served with rice, this comforting dish brings bold flavor and taste of home in every bite!", image: "https://ucarecdn.com/d1a39bc5-c85e-44f1-b94a-40a4473e645c/-/format/auto/", spiceLevel: 1 } ], appetizers: [ { id: 13, name: "Kala (Puff Puff) w/ Pepper Sauce", price: 10.0, description: "Soft, airy puff puff fried to a golden crisp and paired with a zesty pepper sauce that delivers a vibrant burst of Liberian flavor!", image: "https://ucarecdn.com/4023d283-6275-4c08-a4e5-a772a1a9db1e/-/format/auto/" }, { id: 14, name: "Fried Plantains w/ Pepper Sauce", price: 8.0, description: "Golden, crispy plantains paired with a zesty pepper sauce, offering a vibrant taste of Liberia!", image: "https://ucarecdn.com/e99e8aa1-9125-45a2-a0fd-970837386734/" }, { id: 26, name: "Fire Roasted Corn", price: 6.0, description: "Sweet corn grilled to perfection with charred kernels, brushed with our special seasoning blend for an irresistible West African street food experience!", image: "https://ucarecdn.com/859ce8a5-e9cb-450e-bcef-2708ebb1ba51/" } ], beverages: [ { id: 15, name: "Coca-Cola", price: 2.5, description: "Classic refreshing cola beverage!", icon: "fa-glass-water-droplet", iconColor: "from-red-600 to-red-700" }, { id: 16, name: "Sprite", price: 2.5, description: "Crisp, refreshing lemon-lime soda!", icon: "fa-lemon", iconColor: "from-green-400 to-lime-500" }, { id: 17, name: "Fanta Orange", price: 2.5, description: "Sweet and fizzy orange-flavored soda!", icon: "fa-citrus", iconColor: "from-orange-400 to-orange-500" }, { id: 18, name: "Jarritos", price: 2.5, description: "Mexican soda available in various authentic flavors!", icon: "fa-bottle-water", iconColor: "from-emerald-400 to-teal-500" }, { id: 19, name: "Water", price: 1.5, description: "Pure, refreshing bottled water!", icon: "fa-droplet", iconColor: "from-blue-400 to-cyan-500" } ], "coming soon": [ { id: 24, name: "Kool-Way Frozen Slushed Drinks", price: "Coming Soon", description: "A refreshing homemade frozen slush drink made with a special Kool-aide blend. Stay tuned for this exciting new addition to our beverage menu!", icon: "fa-icicles", iconColor: "from-blue-400 to-purple-500" } ] }; const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [chatMessages, setChatMessages] = useState([]); const [chatLoading, setChatLoading] = useState(false); const [chatError, setChatError] = useState(null); const [shareTooltip, setShareTooltip] = useState(""); const [showConfetti, setShowConfetti] = useState(false); const handleShare = async (item)=>{ try { if (navigator.share) { await navigator.share({ title: `Check out ${item.name} at BigFish African Cuisine!`, text: `${item.description}\nPrice: ${item.price}`, url: window.location.href }); } else { const text = `${item.name} at BigFish African Cuisine\n${item.description}\nPrice: ${item.price}\n${window.location.href}`; await navigator.clipboard.writeText(text); setShareTooltip("Link copied!"); setTimeout(()=>setShareTooltip(""), 2000); } setShowConfetti(true); setTimeout(()=>setShowConfetti(false), 2000); } catch (error) { console.error("Error sharing:", error); } }; const renderSpiceLevel = (level)=>{ return /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 288, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 3 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("i", { key: index, className: `fas fa-pepper-hot text-sm ${index < level ? "text-red-500" : "text-gray-300"}`, __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }))); }; const dishOfTheDay = useMemo(()=>{ const popularDishes = menuSections.popular; return popularDishes[Math.floor(Math.random() * popularDishes.length)]; }, []); const Confetti = ()=>{ if (!showConfetti) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 pointer-events-none z-[1000]", __source: { fileName: "", lineNumber: 310, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 50 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute animate-confetti", style: { left: `${Math.random() * 100}%`, top: "-10px", backgroundColor: [ "#FFD700", "#FF6B6B", "#4CAF50", "#2196F3" ][Math.floor(Math.random() * 4)], width: "8px", height: "8px", borderRadius: "50%", animationDelay: `${Math.random() * 2}s`, animationDuration: `${1 + Math.random() * 2}s` }, __source: { fileName: "", lineNumber: 312, columnNumber: 11 }, __self: this }))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900", __source: { fileName: "", lineNumber: 334, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(Confetti, { __source: { fileName: "", lineNumber: 337, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { className: "fixed w-full z-[100] bg-black border-b border-gray-700 shadow-lg", __source: { fileName: "", lineNumber: 338, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 339, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-14 md:h-24", __source: { fileName: "", lineNumber: 340, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center group", __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/efae441c-1607-43e9-9590-ff4da262e155/-/format/auto/", alt: "BigFish African Cuisine Logo", className: "h-10 md:h-20 w-auto transform transition-all duration-300 group-hover:scale-110 group-hover:rotate-3", __source: { fileName: "", lineNumber: 343, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden", __source: { fileName: "", lineNumber: 351, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMobileMenuOpen(!mobileMenuOpen), className: "text-white p-2 z-50 relative", "aria-label": "Toggle menu", __source: { fileName: "", lineNumber: 352, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${mobileMenuOpen ? "fa-times" : "fa-bars"} text-2xl`, __source: { fileName: "", lineNumber: 357, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-black bg-opacity-90 transform transition-transform duration-300 ease-in-out ${mobileMenuOpen ? "translate-x-0" : "translate-x-full"} md:hidden`, style: { top: "64px" }, __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-8 pt-8", __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-xl text-white font-inter hover:text-gray-300 transition-colors duration-200", onClick: ()=>setMobileMenuOpen(false), __source: { fileName: "", lineNumber: 368, columnNumber: 17 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/menu", className: "text-xl text-white font-inter hover:text-gray-300 transition-colors duration-200", onClick: ()=>setMobileMenuOpen(false), __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-xl text-white font-inter hover:text-gray-300 transition-colors duration-200", onClick: ()=>setMobileMenuOpen(false), __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/new-contact", className: "text-xl text-white font-inter hover:text-gray-300 transition-colors duration-200", onClick: ()=>setMobileMenuOpen(false), __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-12", __source: { fileName: "", lineNumber: 399, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 400, columnNumber: 15 }, __self: this }, "Home", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 405, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/menu", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 407, columnNumber: 15 }, __self: this }, "Menu", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 412, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 414, columnNumber: 15 }, __self: this }, "About", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/new-contact", className: "relative text-lg text-white font-inter transition-all duration-200 hover:text-gray-300 group", __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, "Contact", /*#__PURE__*/ React.createElement("span", { className: "absolute -bottom-1 left-0 w-0 h-0.5 bg-white transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 426, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "pt-16 md:pt-24 px-2 sm:px-6 lg:px-8 bg-gray-900", __source: { fileName: "", lineNumber: 433, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto pb-4", __source: { fileName: "", lineNumber: 434, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 sm:mb-6 md:mb-8 px-2 sm:px-0 gap-4 sm:gap-0", __source: { fileName: "", lineNumber: 436, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl sm:text-3xl md:text-4xl font-bold text-white", __source: { fileName: "", lineNumber: 437, columnNumber: 13 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("a", { href: "/print-flyer", className: "inline-flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors w-full sm:w-auto justify-center sm:justify-start", __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-print", __source: { fileName: "", lineNumber: 444, columnNumber: 15 }, __self: this }), "Printable Menu")), /*#__PURE__*/ React.createElement("div", { className: "mb-8 sm:mb-12 px-2 sm:px-0", __source: { fileName: "", lineNumber: 450, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden rounded-lg border-2 border-yellow-400 bg-gray-800 shadow-xl", __source: { fileName: "", lineNumber: 451, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-10", __source: { fileName: "", lineNumber: 452, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-shine-rotate bg-gradient-to-r from-yellow-300 via-yellow-500 to-yellow-300 text-black font-bold px-2 py-1 sm:px-4 sm:py-2 rounded-full transform rotate-12 text-xs sm:text-base", __source: { fileName: "", lineNumber: 453, columnNumber: 17 }, __self: this }, "Dish of the Day")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 457, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 h-48 sm:h-56 md:h-[300px] relative", __source: { fileName: "", lineNumber: 458, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: dishOfTheDay.image, alt: dishOfTheDay.name, className: "absolute inset-0 w-full h-full object-cover", __source: { fileName: "", lineNumber: 459, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-4 sm:p-6 flex flex-col justify-center", __source: { fileName: "", lineNumber: 465, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-2xl font-bold text-white mb-2 sm:mb-4", __source: { fileName: "", lineNumber: 466, columnNumber: 19 }, __self: this }, dishOfTheDay.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base text-gray-300 mb-3 sm:mb-4", __source: { fileName: "", lineNumber: 469, columnNumber: 19 }, __self: this }, dishOfTheDay.description), dishOfTheDay.spiceLevel && /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 473, columnNumber: 21 }, __self: this }, renderSpiceLevel(dishOfTheDay.spiceLevel)), /*#__PURE__*/ React.createElement("p", { className: "text-xl sm:text-2xl font-bold text-white mt-2", __source: { fileName: "", lineNumber: 477, columnNumber: 19 }, __self: this }, "$", dishOfTheDay.price.toFixed(2)))))), Object.entries(menuSections).map(([section, items])=>section !== "beverages" && section !== "coming soon" ? /*#__PURE__*/ React.createElement("div", { key: section, className: "mb-6 sm:mb-8 md:mb-12", __source: { fileName: "", lineNumber: 488, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-xl md:text-2xl font-bold text-white mb-3 sm:mb-4 px-2 sm:px-0 capitalize", __source: { fileName: "", lineNumber: 489, columnNumber: 17 }, __self: this }, section), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6", __source: { fileName: "", lineNumber: 492, columnNumber: 17 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "border border-gray-700 rounded-lg overflow-hidden bg-gray-800 shadow-md relative mx-2 sm:mx-0 flex flex-col h-full transform transition-all duration-300 hover:scale-105 hover:shadow-xl", style: { animation: `fade-in 0.6s ease-out forwards ${index * 150}ms`, opacity: 1 }, __source: { fileName: "", lineNumber: 494, columnNumber: 21 }, __self: this }, section === "popular" && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-10 flex items-center gap-2", __source: { fileName: "", lineNumber: 503, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-gray-700/80 via-gray-600/80 to-gray-700/80 backdrop-blur-sm text-white text-xs sm:text-sm px-2 py-1 rounded-full font-medium animate-shine", __source: { fileName: "", lineNumber: 504, columnNumber: 27 }, __self: this }, "Popular Choice"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire text-base sm:text-xl text-orange-500 animate-flicker", __source: { fileName: "", lineNumber: 507, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden", __source: { fileName: "", lineNumber: 510, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: item.name, className: "w-full h-32 sm:h-40 md:h-48 object-cover transform transition-all duration-300 hover:scale-110", loading: "lazy", __source: { fileName: "", lineNumber: 511, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleShare(item), className: "absolute bottom-2 right-2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-all duration-300 backdrop-blur-sm", "aria-label": "Share", __source: { fileName: "", lineNumber: 517, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt text-sm", __source: { fileName: "", lineNumber: 522, columnNumber: 27 }, __self: this }), shareTooltip && /*#__PURE__*/ React.createElement("span", { className: "absolute bottom-full right-0 mb-2 bg-black text-white text-xs px-2 py-1 rounded whitespace-nowrap", __source: { fileName: "", lineNumber: 524, columnNumber: 29 }, __self: this }, shareTooltip))), /*#__PURE__*/ React.createElement("div", { className: "p-3 sm:p-4 flex flex-col flex-grow", __source: { fileName: "", lineNumber: 530, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-white mb-2 text-sm sm:text-base", __source: { fileName: "", lineNumber: 531, columnNumber: 25 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-xs sm:text-sm mb-2 line-clamp-3", __source: { fileName: "", lineNumber: 534, columnNumber: 25 }, __self: this }, item.description), item.spiceLevel && /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1 mb-2", __source: { fileName: "", lineNumber: 538, columnNumber: 27 }, __self: this }, renderSpiceLevel(item.spiceLevel)), /*#__PURE__*/ React.createElement("p", { className: "text-white font-bold mt-auto text-sm sm:text-base", __source: { fileName: "", lineNumber: 542, columnNumber: 25 }, __self: this }, "$", item.price.toFixed(2))))))) : section === "beverages" ? /*#__PURE__*/ React.createElement("div", { key: "beverages", className: "mb-6 sm:mb-8 md:mb-12", __source: { fileName: "", lineNumber: 551, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-xl md:text-2xl font-bold text-white mb-3 sm:mb-4 px-2 sm:px-0", __source: { fileName: "", lineNumber: 552, columnNumber: 17 }, __self: this }, "Beverages"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 555, columnNumber: 17 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-700 rounded-lg p-3 sm:p-4 bg-gray-800 mx-2 sm:mx-0 hover:shadow-lg transition-all duration-300 group transform hover:scale-105", style: { animation: `fade-in 0.6s ease-out forwards ${index * 150}ms`, opacity: 1 }, __source: { fileName: "", lineNumber: 557, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2", __source: { fileName: "", lineNumber: 565, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 566, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-gradient-to-br ${item.iconColor} flex items-center justify-center shadow-lg transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-300`, __source: { fileName: "", lineNumber: 567, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} text-white text-xs sm:text-sm animate-float`, __source: { fileName: "", lineNumber: 570, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-white text-xs sm:text-sm group-hover:translate-x-1 transition-transform duration-300", __source: { fileName: "", lineNumber: 574, columnNumber: 27 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("p", { className: "text-white font-bold text-xs sm:text-sm", __source: { fileName: "", lineNumber: 578, columnNumber: 25 }, __self: this }, "$", item.price.toFixed(2))))))) : /*#__PURE__*/ React.createElement("div", { key: "coming-soon", className: "mb-6 sm:mb-8 md:mb-12", __source: { fileName: "", lineNumber: 587, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg sm:text-xl md:text-2xl font-bold text-white mb-3 sm:mb-4 px-2 sm:px-0", __source: { fileName: "", lineNumber: 588, columnNumber: 17 }, __self: this }, "Coming Soon"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4", __source: { fileName: "", lineNumber: 591, columnNumber: 17 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-700 rounded-lg p-3 sm:p-4 bg-gray-800 mx-2 sm:mx-0 hover:shadow-lg transition-all duration-300 group transform hover:scale-105", style: { animation: `fade-in 0.6s ease-out forwards ${index * 150}ms`, opacity: 1 }, __source: { fileName: "", lineNumber: 593, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2", __source: { fileName: "", lineNumber: 601, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 602, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-gradient-to-br ${item.iconColor} flex items-center justify-center shadow-lg transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-300`, __source: { fileName: "", lineNumber: 603, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} text-white text-xs sm:text-sm animate-float`, __source: { fileName: "", lineNumber: 606, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-white text-xs sm:text-sm group-hover:translate-x-1 transition-transform duration-300", __source: { fileName: "", lineNumber: 610, columnNumber: 27 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("p", { className: "text-white font-bold text-xs sm:text-sm", __source: { fileName: "", lineNumber: 614, columnNumber: 25 }, __self: this }, item.price))))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 627, columnNumber: 7 }, __self: this }, ` @keyframes shine-rotate { 0% { transform: rotate(12deg) translateX(-100%); } 100% { transform: rotate(12deg) translateX(100%); } } .animate-shine-rotate { position: relative; overflow: hidden; } .animate-shine-rotate::after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); animation: shine-rotate 3s infinite; } @keyframes fade-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.6s ease-out forwards; will-change: transform; } @media (prefers-reduced-motion: reduce) { .animate-fade-in { animation: none; opacity: 1; transform: none; } } @keyframes flicker { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } } .animate-flicker { animation: flicker 2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .animate-float { animation: float 4s ease-in-out infinite; } @keyframes gentle-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .spice-icon { animation: gentle-pulse 2s ease-in-out infinite; } @keyframes confetti { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(100vh) rotate(720deg); } } .animate-confetti { animation: confetti 2s ease-in-out forwards; } @media (max-width: 640px) { .animate-shine-rotate::after { animation-duration: 2s; } .animate-fade-in { animation-duration: 0.4s; } .spice-icon { animation-duration: 1.5s; } } `)); }