function MainComponent() { const { data: user } = useUser(); const { signOut } = useAuth(); const [query, setQuery] = useState(''); const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [selectedCategory, setSelectedCategory] = useState('All Products'); const categories = [ 'All Products', 'Bathroom & Personal Care', 'Kitchen & Cleaning', 'Storage & Organization', 'Baby Care', 'Garden', 'Office', 'Food Storage', 'Water', 'Electronics', 'Clothing & Textiles', 'Paper Products' ]; const searchProducts = useCallback(async (searchQuery)=>{ try { const response = await fetch('/api/search-products', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: searchQuery }) }); if (!response.ok) { throw new Error(`Failed to fetch products (${response.status} ${response.statusText})`); } const data = await response.json(); setProducts(data.products || []); setError(null); } catch (err) { console.error('Search products error:', err); setError('Unable to load products. Please try again later.'); setProducts([]); } finally{ setLoading(false); } }, []); const handleCategorySelect = (category)=>{ setSelectedCategory(category); if (query) { searchProducts(query); } }; useEffect(()=>{ setLoading(true); searchProducts(''); }, [ searchProducts ]); const filteredProducts = useMemo(()=>{ if (!products.length) return []; return products.filter((product)=>{ const matchesCategory = selectedCategory === 'All Products' || product.category === selectedCategory; const searchTerms = query.toLowerCase().trim(); if (!searchTerms) return matchesCategory; const matchesSearch = product.conventional_product.toLowerCase().includes(searchTerms) || product.eco_alternative.toLowerCase().includes(searchTerms) || product.category.toLowerCase().includes(searchTerms) || (product.keywords || []).some((keyword)=>keyword.toLowerCase().includes(searchTerms)); return matchesCategory && matchesSearch; }); }, [ products, selectedCategory, query ]); const groupedProducts = useMemo(()=>{ const groups = {}; filteredProducts.forEach((product)=>{ if (!groups[product.category]) { groups[product.category] = []; } groups[product.category].push(product); }); const categoryPriority = { 'Kitchen & Cleaning': 1, 'Paper Products': 2, 'Storage & Organization': 3, 'Bathroom & Personal Care': 4, 'Office': 5, 'Food Storage': 6, 'Water': 7, 'Electronics': 8, 'Clothing & Textiles': 9, 'Garden': 10, 'Baby Care': 11 }; return Object.entries(groups).sort(([categoryA], [categoryB])=>{ const matchesQueryA = categoryA.toLowerCase().includes(query.toLowerCase()); const matchesQueryB = categoryB.toLowerCase().includes(query.toLowerCase()); if (matchesQueryA && !matchesQueryB) return -1; if (!matchesQueryA && matchesQueryB) return 1; return (categoryPriority[categoryA] || 999) - (categoryPriority[categoryB] || 999); }).reduce((acc, [category, products])=>{ acc[category] = products; return acc; }, {}); }, [ filteredProducts, query ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 118, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 z-10 bg-white dark:bg-gray-900 shadow-sm", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-3", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, user ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-700 dark:text-gray-300 truncate max-w-[150px]", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, user.email), /*#__PURE__*/ React.createElement("button", { onClick: ()=>signOut({ callbackUrl: "/", redirect: true }), className: "px-3 py-2 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 active:scale-95 transition-transform", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, "Sign Out")) : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "px-4 py-2 text-sm rounded-md bg-[#4B7F52] text-white hover:bg-[#3d6642] active:scale-95 transition-transform", __source: { fileName: "", lineNumber: 133, columnNumber: 5 }, __self: this }, "Sign In")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-4xl md:text-5xl font-bold text-[#4B7F52] dark:text-[#6BAF77] text-center font-inter mb-3", __source: { fileName: "", lineNumber: 141, columnNumber: 1 }, __self: this }, "Welcome to EcoSwap"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-700 dark:text-gray-300 text-center font-inter mb-8 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 144, columnNumber: 1 }, __self: this }, "Discover eco-friendly alternatives to everyday products"), /*#__PURE__*/ React.createElement("div", { className: "relative mb-8", __source: { fileName: "", lineNumber: 147, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full px-4 py-3 text-base rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter focus:outline-none focus:border-[#4B7F52] focus:ring-1 focus:ring-[#4B7F52]", placeholder: "Search products (e.g., plates, bags)", value: query, onChange: (e)=>{ setQuery(e.target.value); searchProducts(e.target.value); }, name: "search", __source: { fileName: "", lineNumber: 148, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>searchProducts(query), className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-[#4B7F52] text-white px-4 py-2 rounded-md hover:bg-[#3d6642] active:scale-95 transition-transform text-sm", __source: { fileName: "", lineNumber: 159, columnNumber: 3 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "mb-6 px-4", __source: { fileName: "", lineNumber: 166, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden sm:grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2", __source: { fileName: "", lineNumber: 167, columnNumber: 3 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, onClick: ()=>handleCategorySelect(category), className: `px-4 py-2.5 rounded-full text-sm font-medium transition-all text-center ${selectedCategory === category ? 'bg-[#4B7F52] text-white' : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700'}`, __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { className: "sm:hidden -mx-4 px-4", __source: { fileName: "", lineNumber: 182, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto pb-4 hide-scrollbar gap-2", __source: { fileName: "", lineNumber: 183, columnNumber: 5 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category, onClick: ()=>handleCategorySelect(category), className: `px-4 py-2.5 rounded-full whitespace-nowrap text-sm font-medium transition-all ${selectedCategory === category ? 'bg-[#4B7F52] text-white' : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700'}`, __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, category))))))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-6 max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 203, columnNumber: 7 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { className: "space-y-4 px-2", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, [ 1, 2, 3 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse bg-gray-100 dark:bg-gray-800 rounded-lg p-4 h-24", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 dark:text-red-400 text-center py-4 font-inter", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, error), !loading && !error && filteredProducts.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 font-inter mb-4", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, query ? `No products found matching "${query}"${selectedCategory !== 'All Products' ? ` in ${selectedCategory}` : ''}` : `No products found in ${selectedCategory}`), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400 font-inter", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, selectedCategory !== 'All Products' ? 'Try selecting "All Products" or using different search terms' : 'Try using different search terms')), !loading && !error && filteredProducts.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, Object.entries(groupedProducts).map(([category, categoryProducts])=>/*#__PURE__*/ React.createElement("div", { key: category, __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white font-inter mb-3 px-2", __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, category), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, categoryProducts.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-800 hover:border-[#4B7F52] transition-colors", __source: { fileName: "", lineNumber: 243, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#4B7F52] dark:text-[#6BAF77] font-inter mb-1", __source: { fileName: "", lineNumber: 247, columnNumber: 23 }, __self: this }, product.category), /*#__PURE__*/ React.createElement("h3", { className: "text-gray-900 dark:text-white font-semibold font-inter mb-2", __source: { fileName: "", lineNumber: 250, columnNumber: 23 }, __self: this }, product.conventional_product), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 text-sm font-inter mb-2", __source: { fileName: "", lineNumber: 253, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 254, columnNumber: 25 }, __self: this }, "Eco Alternative:"), " ", product.eco_alternative), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400 text-sm font-inter", __source: { fileName: "", lineNumber: 256, columnNumber: 23 }, __self: this }, product.environmental_impact)))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 268, columnNumber: 7 }, __self: this }, ` .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hide-scrollbar::-webkit-scrollbar { display: none; } `)); }