function MainComponent() { const [parks, setParks] = useState([]); const [selectedType, setSelectedType] = useState("all"); const [selectedFeatures, setSelectedFeatures] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const parkTypes = [ { id: "all", name: "All Parks", icon: "fa-ferris-wheel" }, { id: "theme", name: "Theme Parks", icon: "fa-hat-wizard" }, { id: "water", name: "Water Parks", icon: "fa-water" }, { id: "family", name: "Family Entertainment", icon: "fa-child" }, { id: "adventure", name: "Adventure Parks", icon: "fa-mountain" } ]; const features = [ "Roller Coasters", "Water Rides", "Kids Rides", "Family Rides", "Thrill Rides", "Food Court", "Gift Shops", "Arcade", "Live Shows", "Character Meet & Greet" ]; const fetchParks = async ()=>{ setIsLoading(true); setError(null); try { const response = await fetch("/api/amusement-parks"); if (!response.ok) throw new Error("Failed to fetch amusement parks"); const data = await response.json(); setParks(data); } catch (err) { console.error("Error fetching parks:", err); setError("Failed to load amusement parks. Please try again."); } finally{ setIsLoading(false); } }; useEffect(()=>{ fetchParks(); }, []); const filteredParks = parks.filter((park)=>{ const typeMatch = selectedType === "all" || park.type === selectedType; const featureMatch = selectedFeatures.length === 0 || selectedFeatures.every((feature)=>park.features.includes(feature)); return typeMatch && featureMatch; }); const toggleFeature = (feature)=>{ setSelectedFeatures((prev)=>prev.includes(feature) ? prev.filter((f)=>f !== feature) : [ ...prev, feature ]); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Ocean City Amusement Parks"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Discover thrilling rides and family fun in Ocean City")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, parkTypes.map((type)=>/*#__PURE__*/ React.createElement("button", { key: type.id, onClick: ()=>setSelectedType(type.id), className: `flex items-center gap-2 px-6 py-3 rounded-full transition-colors ${selectedType === type.id ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${type.icon}`, __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }), type.name))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-3 mb-8", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, features.map((feature)=>/*#__PURE__*/ React.createElement("button", { key: feature, onClick: ()=>toggleFeature(feature), className: `px-4 py-2 rounded-full text-sm transition-colors ${selectedFeatures.includes(feature) ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, feature)))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-md mb-6", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, isLoading ? Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-2", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }))) : filteredParks.map((park)=>/*#__PURE__*/ React.createElement("div", { key: park.id, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }, park.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, park.description), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 137, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 23 }, __self: this }, "Operating Hours"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 whitespace-pre-line", __source: { fileName: "", lineNumber: 142, columnNumber: 23 }, __self: this }, park.hours)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 147, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 148, columnNumber: 23 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 whitespace-pre-line", __source: { fileName: "", lineNumber: 151, columnNumber: 23 }, __self: this }, park.pricing)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 157, columnNumber: 23 }, __self: this }, "Features"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 160, columnNumber: 23 }, __self: this }, park.features.map((feature)=>/*#__PURE__*/ React.createElement("span", { key: feature, className: "px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm", __source: { fileName: "", lineNumber: 162, columnNumber: 27 }, __self: this }, feature)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 173, columnNumber: 23 }, __self: this }, "Popular Attractions"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside text-gray-600", __source: { fileName: "", lineNumber: 176, columnNumber: 23 }, __self: this }, park.attractions.map((attraction)=>/*#__PURE__*/ React.createElement("li", { key: attraction, __source: { fileName: "", lineNumber: 178, columnNumber: 27 }, __self: this }, attraction)))), /*#__PURE__*/ React.createElement("div", { className: "pt-4", __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: park.website, target: "_blank", rel: "noopener noreferrer", className: "inline-block w-full text-center px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 184, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt mr-2", __source: { fileName: "", lineNumber: 190, columnNumber: 25 }, __self: this }), "Visit Website"))))))), !isLoading && filteredParks.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-gray-500", __source: { fileName: "", lineNumber: 201, columnNumber: 9 }, __self: this }, "No amusement parks found matching your filters. Try adjusting your selection.")); }