function MainComponent() { const [activities, setActivities] = useState([]); const [activeType, setActiveType] = useState("all"); const [activeLocation, setActiveLocation] = useState("all"); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const activityTypes = [ { id: "all", name: "All Activities", icon: "fa-water" }, { id: "jetski", name: "Jet Skiing", icon: "fa-water" }, { id: "parasailing", name: "Parasailing", icon: "fa-parachute-box" }, { id: "kayaking", name: "Kayaking", icon: "fa-ship" }, { id: "sup", name: "Stand Up Paddleboarding", icon: "fa-water" }, { id: "surfing", name: "Surfing", icon: "fa-water" }, { id: "fishing", name: "Fishing", icon: "fa-fish" } ]; const locations = [ { id: "all", name: "All Locations" }, { id: "bayside", name: "Bayside" }, { id: "oceanside", name: "Oceanside" }, { id: "inlet", name: "Inlet" }, { id: "assateague", name: "Assateague Island" } ]; const fetchActivities = async ()=>{ setIsLoading(true); setError(null); try { const response = await fetch("/api/water-sports", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ activity_type: activeType === "all" ? null : activeType, location: activeLocation === "all" ? null : activeLocation }) }); if (!response.ok) throw new Error("Failed to fetch water sports activities"); const data = await response.json(); setActivities(data.data || []); } catch (err) { console.error("Error fetching activities:", err); setError("Failed to load activities. Please try again."); } finally{ setIsLoading(false); } }; useEffect(()=>{ fetchActivities(); }, [ activeType, activeLocation ]); return /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Water Sports & Activities in Ocean City"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-8", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Experience thrilling water adventures on Maryland's coast"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, activityTypes.map((type)=>/*#__PURE__*/ React.createElement("button", { key: type.id, onClick: ()=>setActiveType(type.id), className: `flex items-center gap-2 px-6 py-3 rounded-full transition-colors ${activeType === type.id ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${type.icon}`, __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }), type.name))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-3 mb-12", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, locations.map((location)=>/*#__PURE__*/ React.createElement("button", { key: location.id, onClick: ()=>setActiveLocation(location.id), className: `px-6 py-3 rounded-full transition-colors ${activeLocation === location.id ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, location.name))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-md mb-6", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, isLoading ? Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }))) : activities.map((activity)=>/*#__PURE__*/ React.createElement("div", { key: activity.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, activity.image && /*#__PURE__*/ React.createElement("img", { src: activity.image, alt: `${activity.name} in Ocean City`, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 119, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 126, columnNumber: 21 }, __self: this }, activity.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 127, columnNumber: 21 }, __self: this }, activity.description), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 129, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 130, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt w-6", __source: { fileName: "", lineNumber: 131, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 132, columnNumber: 25 }, __self: this }, activity.location)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 135, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dollar-sign w-6", __source: { fileName: "", lineNumber: 136, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 137, columnNumber: 25 }, __self: this }, activity.pricing)), activity.duration && /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 141, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock w-6", __source: { fileName: "", lineNumber: 142, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 143, columnNumber: 27 }, __self: this }, activity.duration)), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 rounded-lg p-4", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-blue-900 mb-2", __source: { fileName: "", lineNumber: 148, columnNumber: 25 }, __self: this }, "Safety Information"), /*#__PURE__*/ React.createElement("ul", { className: "text-blue-800 text-sm space-y-1", __source: { fileName: "", lineNumber: 151, columnNumber: 25 }, __self: this }, activity.safety_info?.map((info, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 153, columnNumber: 29 }, __self: this }, "• ", info)))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-4", __source: { fileName: "", lineNumber: 158, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 25 }, __self: this }, "Equipment Provided"), /*#__PURE__*/ React.createElement("ul", { className: "text-gray-600 text-sm space-y-1", __source: { fileName: "", lineNumber: 162, columnNumber: 25 }, __self: this }, activity.equipment?.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 164, columnNumber: 29 }, __self: this }, "• ", item)))), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4 mt-4", __source: { fileName: "", lineNumber: 169, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 170, columnNumber: 25 }, __self: this }, "Booking Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 text-gray-600", __source: { fileName: "", lineNumber: 173, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 174, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone mr-2", __source: { fileName: "", lineNumber: 175, columnNumber: 29 }, __self: this }), activity.phone), activity.website && /*#__PURE__*/ React.createElement("a", { href: activity.website, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline block", __source: { fileName: "", lineNumber: 179, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-globe mr-2", __source: { fileName: "", lineNumber: 185, columnNumber: 31 }, __self: this }), "Visit Website")))))))), !isLoading && activities.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, "No activities found for the selected filters."))); }