function MainComponent() { const [theme, setTheme] = useState({ mode: "light", calculated: "light" }); const [cart, setCart] = useState([]); const [isCartOpen, setIsCartOpen] = useState(false); const [addedToCart, setAddedToCart] = useState(null); useEffect(()=>{ document.title = "SONNON Shop"; const link = document.createElement("link"); link.rel = "icon"; link.type = "image/svg+xml"; link.href = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0id2hpdGUiLz48dGV4dCB4PSI1MCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjayIgZm9udC1zaXplPSI4MCIgZm9udC13ZWlnaHQ9IjkwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iYmxhY2siPj88L3RleHQ+PC9zdmc+"; const existingFavicon = document.querySelector("link[rel='icon']"); if (existingFavicon) { document.head.removeChild(existingFavicon); } document.head.appendChild(link); // Initialize Ko-fi widget after the component mounts if (window.kofiWidgetOverlay) { window.kofiWidgetOverlay.draw("sonnon", { type: "floating-chat", "floating-chat.donateButton.text": "Tip Us", "floating-chat.donateButton.background-color": "#323842", "floating-chat.donateButton.text-color": "#fff" }); } return ()=>{ if (document.head.contains(link)) { document.head.removeChild(link); } }; }, []); useEffect(()=>{ const fetchTheme = async ()=>{ try { const hours = new Date().getHours(); const isDaytime = hours >= 6 && hours < 18; const response = await fetch("/api/get-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ calculated: isDaytime ? "light" : "dark" }) }); if (!response.ok) { throw new Error(`Failed to fetch theme: ${response.status}`); } const data = await response.json(); if (data?.mode) { setTheme({ mode: data.mode, calculated: data.mode === "auto" ? isDaytime ? "light" : "dark" : data.mode }); } } catch (err) { console.error(err); } }; fetchTheme(); const intervalId = setInterval(()=>{ if (theme.mode === "auto") { fetchTheme(); } }, 60 * 1000); return ()=>clearInterval(intervalId); }, []); const handleThemeChange = async (newMode)=>{ try { const hours = new Date().getHours(); const isDaytime = hours >= 6 && hours < 18; setTheme((prev)=>({ mode: newMode, calculated: newMode === "auto" ? isDaytime ? "light" : "dark" : newMode })); await fetch("/api/update-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mode: newMode }) }); } catch (err) { console.error(err); } }; const products = [ { id: 1, name: "SONNON WHITE TEE", price: 42, currency: "USDC", image: "https://ucarecdn.com/0ee3ce2a-cea7-4db8-9b9e-63de0de44ae0/-/format/auto/", description: "ORGANIC", paymentLink: "https://pay.boomfi.xyz/2vvOUKmbhYNTRChjD0e0bZKcHwx" } ]; const addToCart = (product)=>{ setCart((prevCart)=>{ const existingItem = prevCart.find((item)=>item.id === product.id); if (existingItem) { return prevCart.map((item)=>item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item); } else { return [ ...prevCart, { ...product, quantity: 1 } ]; } }); setAddedToCart(product.id); setTimeout(()=>setAddedToCart(null), 2000); }; const removeFromCart = (productId)=>{ setCart((prevCart)=>prevCart.filter((item)=>item.id !== productId)); }; const updateQuantity = (productId, newQuantity)=>{ if (newQuantity < 1) return; setCart((prevCart)=>prevCart.map((item)=>item.id === productId ? { ...item, quantity: newQuantity } : item)); }; const cartTotal = cart.reduce((total, item)=>total + item.price * item.quantity, 0); const isDark = theme?.calculated === "dark"; const bgColor = isDark ? "bg-[#000000]" : "bg-[#FFFFFF]"; const textColor = isDark ? "text-[#FFFFFF]" : "text-[#000000]"; const borderColor = isDark ? "border-[#FFFFFF]" : "border-[#000000]"; const hoverTextColor = isDark ? "group-hover:text-[#000000]" : "group-hover:text-[#FFFFFF]"; const hoverBgColor = isDark ? "bg-[#FFFFFF]" : "bg-[#000000]"; const cardBgColor = isDark ? "bg-[#111111]" : "bg-[#F5F5F5]"; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${bgColor} transition-colors duration-300`, __source: { fileName: "", lineNumber: 161, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-4 sm:py-8", __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center mb-6 sticky top-0 z-50 py-2 sm:py-4 bg-opacity-95 backdrop-blur-sm border-b border-opacity-10 border-current", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-4 sm:mb-0", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: `${textColor} hover:opacity-70 transition-opacity flex items-center gap-2`, __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M19 12H5M12 19l-7-7 7-7", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, "Back to Home")), /*#__PURE__*/ React.createElement("div", { className: "hidden sm:flex items-center gap-4 ml-4", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: `${textColor} hover:opacity-70 transition-opacity text-sm`, __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: `${textColor} hover:opacity-70 transition-opacity text-sm`, __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, "Contact Us"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 200, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsCartOpen(true), className: `relative p-2 ${textColor} hover:opacity-70 transition-opacity`, __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M3 6h18", __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M16 10a4 4 0 01-8 0", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this })), cart.length > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-white text-xs", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, cart.reduce((total, item)=>total + item.quantity, 0))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 scale-90 sm:scale-100", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleThemeChange("light"), className: `p-2 rounded-l-lg ${theme.mode === "light" ? "bg-black text-white dark:bg-white dark:text-black" : "bg-transparent"} border-2 border-r-0 ${borderColor} transition-colors duration-300`, "aria-label": "Light Mode", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", className: "transition-transform duration-300", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "12", cy: "12", r: "5", __source: { fileName: "", lineNumber: 243, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42", __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleThemeChange("dark"), className: `p-2 border-2 ${theme.mode === "dark" ? "bg-black text-white dark:bg-white dark:text-black" : "bg-transparent"} ${borderColor} transition-colors duration-300`, "aria-label": "Dark Mode", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", className: "transition-transform duration-300", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z", __source: { fileName: "", lineNumber: 264, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleThemeChange("auto"), className: `p-2 rounded-r-lg ${theme.mode === "auto" ? "bg-black text-white dark:bg-white dark:text-black" : "bg-transparent"} border-2 border-l-0 ${borderColor} transition-colors duration-300`, "aria-label": "Auto Mode", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", className: "transition-transform duration-300", __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "12", cy: "12", r: "3", __source: { fileName: "", lineNumber: 284, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M12 5v1M12 18v1M7 7l1 1M16 16l1 1M5 12h1M18 12h1M7 17l1-1M16 8l1-1", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "sm:hidden flex justify-center mb-4", __source: { fileName: "", lineNumber: 292, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-6", __source: { fileName: "", lineNumber: 293, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: `${textColor} hover:opacity-70 transition-opacity text-sm`, __source: { fileName: "", lineNumber: 294, columnNumber: 13 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: `${textColor} hover:opacity-70 transition-opacity text-sm`, __source: { fileName: "", lineNumber: 300, columnNumber: 13 }, __self: this }, "Contact Us"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 309, columnNumber: 9 }, __self: this }, isDark ? /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/db4dce30-b7a4-45c2-9d9f-9eb3dfdafd3a/-/format/auto/", alt: "SONNON Logo", className: "w-[8rem] h-[8rem] sm:w-[10rem] sm:h-[10rem] transition-opacity duration-300", __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/87560226-6f26-4664-84ae-3bdeb142fb1a/-/format/auto/", alt: "SONNON Logo", className: "w-[8rem] h-[8rem] sm:w-[10rem] sm:h-[10rem] transition-opacity duration-300", __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 325, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-4xl sm:text-5xl font-bold mb-4 ${textColor}`, __source: { fileName: "", lineNumber: 326, columnNumber: 11 }, __self: this }, "SONNON SHOP"), /*#__PURE__*/ React.createElement("p", { className: `text-lg opacity-80 max-w-2xl mx-auto ${textColor}`, __source: { fileName: "", lineNumber: 329, columnNumber: 11 }, __self: this }, "Official merchandise from SONNON. Support our mission for privacy and transparency while representing the movement.")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 gap-8 mb-16 max-w-xl mx-auto", __source: { fileName: "", lineNumber: 335, columnNumber: 9 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: ` rounded-xl overflow-hidden border-2 ${borderColor} transition-all duration-300 hover:shadow-lg group relative `, __source: { fileName: "", lineNumber: 337, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-square overflow-hidden", __source: { fileName: "", lineNumber: 350, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: product.name, className: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `p-6 ${cardBgColor}`, __source: { fileName: "", lineNumber: 357, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-xl font-bold mb-2 ${textColor}`, __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: `text-sm mb-4 opacity-70 ${textColor}`, __source: { fileName: "", lineNumber: 361, columnNumber: 17 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 364, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-lg font-bold ${textColor}`, __source: { fileName: "", lineNumber: 365, columnNumber: 19 }, __self: this }, product.price, " ", product.currency), /*#__PURE__*/ React.createElement("a", { href: product.paymentLink, target: "_blank", rel: "noopener noreferrer", className: ` group relative px-4 py-2 text-sm font-medium border-2 ${borderColor} rounded-full transition-all duration-300 hover:scale-105 overflow-hidden `, __source: { fileName: "", lineNumber: 368, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: ` relative z-10 flex items-center gap-2 ${textColor} transition-colors duration-300 ${hoverTextColor} `, __source: { fileName: "", lineNumber: 386, columnNumber: 21 }, __self: this }, "Buy Now", /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", className: "transition-transform duration-300", __source: { fileName: "", lineNumber: 400, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M5 12h14M12 5l7 7-7 7", __source: { fileName: "", lineNumber: 407, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: ` absolute inset-0 transform transition-transform duration-300 ${hoverBgColor} translate-x-[-100%] group-hover:translate-x-0 `, __source: { fileName: "", lineNumber: 410, columnNumber: 21 }, __self: this }))))))), /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-xl border-2 ${borderColor} mt-8 mb-12 text-center`, __source: { fileName: "", lineNumber: 429, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-2xl font-bold mb-4 ${textColor}`, __source: { fileName: "", lineNumber: 432, columnNumber: 11 }, __self: this }, "Coming Soon"), /*#__PURE__*/ React.createElement("p", { className: `text-lg mb-6 ${textColor}`, __source: { fileName: "", lineNumber: 435, columnNumber: 11 }, __self: this }, "More SONNON merchandise will be available soon. Join our community to stay updated."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4", __source: { fileName: "", lineNumber: 439, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/sonnontech", target: "_blank", rel: "noopener noreferrer", className: ` group relative px-6 py-3 text-base font-medium border-2 ${borderColor} rounded-full transition-all duration-300 hover:scale-105 overflow-hidden inline-flex items-center gap-2 `, __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: ` relative z-10 flex items-center gap-2 ${textColor} transition-colors duration-300 ${hoverTextColor} `, __source: { fileName: "", lineNumber: 461, columnNumber: 15 }, __self: this }, "Follow Us", /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", __source: { fileName: "", lineNumber: 475, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M4 4l11.733 16h4.267l-11.733-16z", __source: { fileName: "", lineNumber: 481, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M4 20l6.768-6.768m2.45-2.45l7.782-7.782", __source: { fileName: "", lineNumber: 482, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: ` absolute inset-0 transform transition-transform duration-300 ${hoverBgColor} translate-x-[-100%] group-hover:translate-x-0 `, __source: { fileName: "", lineNumber: 485, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: `w-full py-6 mb-8 text-center`, __source: { fileName: "", lineNumber: 501, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-sm ${textColor} opacity-70`, __source: { fileName: "", lineNumber: 502, columnNumber: 11 }, __self: this }, "© SONNON TECH 2025"))), isCartOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-end", __source: { fileName: "", lineNumber: 509, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-full max-w-md ${bgColor} h-full overflow-auto p-6 shadow-xl`, __source: { fileName: "", lineNumber: 510, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 513, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `text-2xl font-bold ${textColor}`, __source: { fileName: "", lineNumber: 514, columnNumber: 15 }, __self: this }, "Your Cart"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsCartOpen(false), className: `${textColor} hover:opacity-70 transition-opacity`, __source: { fileName: "", lineNumber: 515, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 519, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 6L6 18M6 6l12 12", __source: { fileName: "", lineNumber: 529, columnNumber: 19 }, __self: this })))), cart.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: `text-center py-12 ${textColor} opacity-70`, __source: { fileName: "", lineNumber: 535, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "mx-auto mb-4", __source: { fileName: "", lineNumber: 536, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z", __source: { fileName: "", lineNumber: 547, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M3 6h18", __source: { fileName: "", lineNumber: 548, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: "M16 10a4 4 0 01-8 0", __source: { fileName: "", lineNumber: 549, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 551, columnNumber: 17 }, __self: this }, "Your cart is empty")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 554, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 555, columnNumber: 17 }, __self: this }, cart.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: `flex gap-4 p-4 rounded-lg border ${borderColor} border-opacity-20`, __source: { fileName: "", lineNumber: 557, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: item.name, className: "w-20 h-20 object-cover rounded-md", __source: { fileName: "", lineNumber: 561, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 566, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `font-medium ${textColor}`, __source: { fileName: "", lineNumber: 567, columnNumber: 25 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: `text-sm opacity-70 ${textColor}`, __source: { fileName: "", lineNumber: 570, columnNumber: 25 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mt-2", __source: { fileName: "", lineNumber: 573, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateQuantity(item.id, item.quantity - 1), className: `w-6 h-6 flex items-center justify-center border ${borderColor} rounded-full ${textColor}`, __source: { fileName: "", lineNumber: 574, columnNumber: 27 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("span", { className: `${textColor}`, __source: { fileName: "", lineNumber: 582, columnNumber: 27 }, __self: this }, item.quantity), /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateQuantity(item.id, item.quantity + 1), className: `w-6 h-6 flex items-center justify-center border ${borderColor} rounded-full ${textColor}`, __source: { fileName: "", lineNumber: 585, columnNumber: 27 }, __self: this }, "+"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-between items-end", __source: { fileName: "", lineNumber: 595, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeFromCart(item.id), className: `${textColor} opacity-50 hover:opacity-100 transition-opacity`, __source: { fileName: "", lineNumber: 596, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 600, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 6L6 18M6 6l12 12", __source: { fileName: "", lineNumber: 610, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: `font-bold ${textColor}`, __source: { fileName: "", lineNumber: 613, columnNumber: 25 }, __self: this }, (item.price * item.quantity).toFixed(2), " ", item.currency))))), /*#__PURE__*/ React.createElement("div", { className: `p-4 border-t ${borderColor} border-opacity-20`, __source: { fileName: "", lineNumber: 622, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 625, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `${textColor}`, __source: { fileName: "", lineNumber: 626, columnNumber: 21 }, __self: this }, "Subtotal"), /*#__PURE__*/ React.createElement("span", { className: `font-bold ${textColor}`, __source: { fileName: "", lineNumber: 627, columnNumber: 21 }, __self: this }, cartTotal.toFixed(2), " USDC")), /*#__PURE__*/ React.createElement("button", { className: ` w-full group relative py-3 text-base font-medium border-2 ${borderColor} rounded-full transition-all duration-300 hover:scale-105 overflow-hidden flex items-center justify-center gap-2 `, __source: { fileName: "", lineNumber: 631, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: ` relative z-10 flex items-center gap-2 ${textColor} transition-colors duration-300 ${hoverTextColor} `, __source: { fileName: "", lineNumber: 651, columnNumber: 21 }, __self: this }, "Checkout", /*#__PURE__*/ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", className: "transition-transform duration-300", __source: { fileName: "", lineNumber: 665, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M5 12h14M12 5l7 7-7 7", __source: { fileName: "", lineNumber: 672, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: ` absolute inset-0 transform transition-transform duration-300 ${hoverBgColor} translate-x-[-100%] group-hover:translate-x-0 `, __source: { fileName: "", lineNumber: 675, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("script", { src: "https://storage.ko-fi.com/cdn/scripts/overlay-widget.js", __source: { fileName: "", lineNumber: 695, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 696, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; } `)); }