function Dropdown({ currentPage = "" }) { const [isOpen, setIsOpen] = useState(false); const { data: user } = useUser(); const menuItems = [ { label: "Home", href: "/home", emoji: "🏠" }, { label: "Profile", href: "/profile", emoji: "👤" }, { label: "Leaderboard", href: "/leaderboard", emoji: "🏆" } ]; return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "w-12 h-12 rounded-full text-black font-semibold bg-[#A3E636] border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center hover:bg-[#93d626] transition-colors", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, isOpen ? "✕" : "≡"), isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-full right-0 mt-2 w-48 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] overflow-hidden z-50", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-2", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: item.href, className: `block px-6 py-2 font-sans text-sm hover:bg-[#A3E636] transition-colors flex items-center gap-3 ${currentPage === item.href ? "bg-[#A3E636]/20" : ""}`, __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, item.emoji), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, item.label))), user ? /*#__PURE__*/ React.createElement("a", { href: "/account/logout", className: "block px-6 py-2 font-sans text-sm hover:bg-[#A3E636] transition-colors border-t border-black flex items-center gap-3", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "🚪"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "Sign Out")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "block px-6 py-2 font-sans text-sm hover:bg-[#A3E636] transition-colors border-t border-black flex items-center gap-3", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, "🔑"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, "Sign In")), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "block px-6 py-2 font-sans text-sm hover:bg-[#A3E636] transition-colors flex items-center gap-3", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, "Sign Up")))))); } function DropdownStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-sans font-semibold mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Default Menu:"), /*#__PURE__*/ React.createElement(Dropdown, { currentPage: "/profile", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-sans font-semibold mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Menu with different active page:"), /*#__PURE__*/ React.createElement(Dropdown, { currentPage: "/leaderboard", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-sans font-semibold mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Menu with no active page:"), /*#__PURE__*/ React.createElement(Dropdown, { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }))); } function StylizedButton({ text, onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "px-4 py-2 rounded text-black font-semibold bg-[#A3E636] border border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function StylizedButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylizedButton, { text: "Click me!", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylizedButton, { text: "Submit", onClick: ()=>alert('Submitted!'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylizedButton, { text: "Cancel", onClick: ()=>alert('Cancelled!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const { data: user } = useUser(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#87CEEB] px-4 py-6 md:p-8 lg:p-12", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, user && /*#__PURE__*/ React.createElement("div", { className: "absolute top-6 right-4 md:top-8 md:right-8 lg:top-12 lg:right-12 z-50", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Dropdown, { __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8 md:space-y-12", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 mb-8", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, !user && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StylizedButton, { text: "Sign Up", onClick: ()=>window.location.href = "/account/signup", "aria-label": "Sign up for SustainableMe", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(StylizedButton, { text: "Sign In", onClick: ()=>window.location.href = "/account/signin", "aria-label": "Sign in to your account", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-8 md:space-y-12", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "sr-only", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "SustainableMe - Your Personal Sustainability Guide"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/3b00b6cd-53b9-4418-a2cf-e20665fc4e2e/-/format/auto/", alt: "SustainableMe Logo", className: "h-[100px] md:h-[140px] lg:h-[160px] mx-auto", width: "160", height: "160", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-2xl mx-auto rounded-xl overflow-hidden border-2 border-black", style: { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06)" }, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-w-16 aspect-h-9", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://www.youtube.com/embed/PIY43jljUwU", title: "Introducing SustainableMe - Learn about our mission and features", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, className: "w-full h-full", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.producthunt.com/posts/sustainable-me?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-sustainable-me", target: "_blank", rel: "noopener noreferrer", "aria-label": "View SustainableMe on Product Hunt", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=840733&theme=light&t=1738549052103", alt: "SustainableMe featured on Product Hunt", width: "250", height: "54", className: "w-[250px] h-[54px]", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-xl border-2 border-black p-6 md:p-8 h-full flex flex-col", style: { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06)" }, __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", role: "img", "aria-label": "Target icon", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "🎯"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-sans font-semibold mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Track Your Impact"), /*#__PURE__*/ React.createElement("p", { className: "font-sans mb-6 flex-grow", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Upload photos of your spaces and get personalized sustainability recommendations."), /*#__PURE__*/ React.createElement("div", { className: "mt-auto", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, user ? /*#__PURE__*/ React.createElement(StylizedButton, { text: "Get Started", onClick: ()=>window.location.href = "/sustainableme", "aria-label": "Start tracking your sustainability impact", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement(StylizedButton, { text: "Sign Up", onClick: ()=>window.location.href = "/account/signup", "aria-label": "Sign up to start tracking your impact", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-xl border-2 border-black p-8", style: { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06)" }, __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "📊"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-sans font-semibold mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Organize By Category"), /*#__PURE__*/ React.createElement("p", { className: "font-sans mb-6", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Sort your sustainability goals by different areas of your life: home, work, car, and fun."), user ? /*#__PURE__*/ React.createElement(StylizedButton, { text: "View Categories", onClick: ()=>window.location.href = "/sustainableme", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement(StylizedButton, { text: "Sign In", onClick: ()=>window.location.href = "/account/signin", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-xl border-2 border-black p-8", style: { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06)" }, __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "✅"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-sans font-semibold mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Smart Checklists"), /*#__PURE__*/ React.createElement("p", { className: "font-sans mb-6", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Get AI-powered checklists based on your uploaded images to improve your sustainability.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/80 backdrop-blur-sm rounded-xl border-2 border-black p-8", style: { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06)" }, __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, "🌍"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-sans font-semibold mb-4", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Make a Difference"), /*#__PURE__*/ React.createElement("p", { className: "font-sans mb-6", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, "Small changes add up. Start your journey towards a more sustainable lifestyle today."))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 text-center", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white font-sans text-lg mb-4", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, "Ready to make a positive impact on the environment?"), !user && /*#__PURE__*/ React.createElement(StylizedButton, { text: "Join Now", onClick: ()=>window.location.href = "/account/signup", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this })))); }