function MainComponent() { const [locations, setLocations] = useState([]); const [activeCategory, setActiveCategory] = useState("all"); const [searchQuery, setSearchQuery] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [showMap, setShowMap] = useState(false); const categories = [ { id: "all", name: "All Locations", icon: "fa-shopping-bag" }, { id: "mall", name: "Shopping Malls", icon: "fa-store" }, { id: "outlet", name: "Outlets", icon: "fa-tags" }, { id: "boutique", name: "Boutiques", icon: "fa-tshirt" }, { id: "souvenir", name: "Souvenir Shops", icon: "fa-gift" }, { id: "specialty", name: "Specialty Stores", icon: "fa-star" }, { id: "boardwalk", name: "Boardwalk Shops", icon: "fa-umbrella-beach" } ]; const features = [ "Parking Available", "Wheelchair Accessible", "Public Restrooms", "Food Court", "ATM", "Free WiFi" ]; const fetchLocations = async ()=>{ setIsLoading(true); setError(null); try { const response = await fetch("/api/shopping-locations", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ category: activeCategory === "all" ? null : activeCategory, search: searchQuery }) }); if (!response.ok) throw new Error("Failed to fetch shopping locations"); const data = await response.json(); setLocations(data.data || []); } catch (err) { console.error("Error fetching locations:", err); setError("Failed to load shopping locations. Please try again."); } finally{ setIsLoading(false); } }; useEffect(()=>{ fetchLocations(); }, [ activeCategory, searchQuery ]); const filteredLocations = locations.filter((location)=>location.name.toLowerCase().includes(searchQuery.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Shopping in Ocean City"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-8", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Discover the best shopping destinations in Ocean City"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto mb-8", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Search for shops, brands, or items...", className: "w-full px-6 py-4 rounded-lg border-2 border-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-xl", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>setActiveCategory(category.id), className: `flex items-center gap-2 px-6 py-3 rounded-full transition-colors ${activeCategory === category.id ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${category.icon}`, __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }), category.name))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-6", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMap(!showMap), className: "flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${showMap ? "fa-list" : "fa-map-marked-alt"}`, __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }), showMap ? "Show List View" : "Show Map View")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-md mb-6", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, error), showMap ? /*#__PURE__*/ React.createElement("div", { className: "h-[600px] bg-gray-100 rounded-lg mb-8", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "Map view will be implemented with Google Maps integration")) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, isLoading ? Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 130, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-2", __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 132, columnNumber: 21 }, __self: this }))) : filteredLocations.map((location)=>/*#__PURE__*/ React.createElement("div", { key: location.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, location.image && /*#__PURE__*/ React.createElement("img", { src: location.image, alt: location.name, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 141, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 147, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 148, columnNumber: 23 }, __self: this }, location.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 149, columnNumber: 23 }, __self: this }, location.description), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 152, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 153, columnNumber: 27 }, __self: this }), location.address), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 156, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2", __source: { fileName: "", lineNumber: 157, columnNumber: 27 }, __self: this }), location.hours), location.phone && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 161, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone mr-2", __source: { fileName: "", lineNumber: 162, columnNumber: 29 }, __self: this }), location.phone)), location.features && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 169, columnNumber: 25 }, __self: this }, location.features.map((feature)=>/*#__PURE__*/ React.createElement("span", { key: feature, className: "text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 171, columnNumber: 29 }, __self: this }, feature))), location.seasonal_sale && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-3 rounded-md mb-4", __source: { fileName: "", lineNumber: 182, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tag mr-2", __source: { fileName: "", lineNumber: 183, columnNumber: 27 }, __self: this }), location.seasonal_sale), location.website && /*#__PURE__*/ React.createElement("a", { href: location.website, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline text-sm flex items-center", __source: { fileName: "", lineNumber: 189, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt mr-2", __source: { fileName: "", lineNumber: 195, columnNumber: 27 }, __self: this }), "Visit Website"))))), !isLoading && filteredLocations.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500", __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }, "No shopping locations found matching your criteria."))); }