function MainComponent() { const [restaurants, setRestaurants] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [totalPages, setTotalPages] = useState(1); const restaurantsPerPage = 9; const fetchRestaurants = async (page)=>{ setIsLoading(true); setError(null); try { const response = await fetch(`/api/list-restaurants-by-category`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ page, perPage: restaurantsPerPage, features: [ 'Waterfront' ] }) }); if (!response.ok) { throw new Error('Failed to fetch waterfront restaurants'); } const data = await response.json(); setRestaurants(data.restaurants); setTotalPages(Math.ceil(data.total / restaurantsPerPage)); } catch (err) { console.error('Error fetching restaurants:', err); setError('Failed to load restaurants. Please try again.'); } finally{ setIsLoading(false); } }; useEffect(()=>{ fetchRestaurants(currentPage); }, [ currentPage ]); const handlePageChange = (page)=>{ setCurrentPage(page); window.scrollTo(0, 0); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Waterfront Dining in Ocean City"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Enjoy spectacular water views while dining at Ocean City's finest waterfront restaurants")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-md mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, error), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 6 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-2", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, restaurants.map((restaurant)=>/*#__PURE__*/ React.createElement("div", { key: restaurant.id, className: "bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-48", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: restaurant.image || '/images/restaurant-placeholder.jpg', alt: `Waterfront view at ${restaurant.name}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }), restaurant.price_range && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 bg-white px-3 py-1 rounded-full text-sm font-semibold", __source: { fileName: "", lineNumber: 88, columnNumber: 21 }, __self: this }, '$'.repeat(restaurant.price_range))), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, restaurant.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, restaurant.description), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-500", __source: { fileName: "", lineNumber: 104, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt w-5", __source: { fileName: "", lineNumber: 105, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 106, columnNumber: 23 }, __self: this }, restaurant.address)), restaurant.phone && /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-500", __source: { fileName: "", lineNumber: 110, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone w-5", __source: { fileName: "", lineNumber: 111, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 112, columnNumber: 25 }, __self: this }, restaurant.phone)), restaurant.hours && /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-500", __source: { fileName: "", lineNumber: 117, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock w-5", __source: { fileName: "", lineNumber: 118, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 119, columnNumber: 25 }, __self: this }, restaurant.hours))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, restaurant.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: 126, columnNumber: 23 }, __self: this }, feature))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex gap-4", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, restaurant.website && /*#__PURE__*/ React.createElement("a", { href: restaurant.website, target: "_blank", rel: "noopener noreferrer", className: "flex-1 text-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 137, columnNumber: 23 }, __self: this }, "Visit Website"), restaurant.menu_url && /*#__PURE__*/ React.createElement("a", { href: restaurant.menu_url, target: "_blank", rel: "noopener noreferrer", className: "flex-1 text-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }, "View Menu")))))), restaurants.length === 0 && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 text-gray-500", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "No waterfront restaurants found."), totalPages > 1 && /*#__PURE__*/ React.createElement("div", { className: "mt-12 flex justify-center gap-2", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, [ ...Array(totalPages) ].map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handlePageChange(index + 1), className: `px-4 py-2 rounded-md ${currentPage === index + 1 ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`, __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, index + 1))))); }