function MainComponent() { const [events, setEvents] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const annualEvents = [ { id: "springfest", name: "Springfest", date: "May 2-5, 2025", description: "Kick off the summer season with food, music, and crafts at the Inlet Lot.", image: "/images/springfest.jpg", icon: "sun", category: "Festival" }, { id: "cruisin", name: "Cruisin' Ocean City", date: "May 16-19, 2025", description: "Classic cars and hot rods take over the streets of Ocean City.", image: "/images/cruisin.jpg", icon: "car-side", category: "Auto Show" }, { id: "airshow", name: "OC Air Show", date: "June 15-16, 2025", description: "Watch amazing aerial performances over the beach and boardwalk.", image: "/images/airshow.jpg", icon: "plane", category: "Entertainment" }, { id: "artx", name: "ArtX", date: "August 24-25, 2025", description: "Fine art festival featuring artists, music, and food at Northside Park.", image: "/images/artx.jpg", icon: "palette", category: "Arts" }, { id: "marlinopen", name: "White Marlin Open", date: "August 5-9, 2025", description: "World's largest billfish tournament with millions in prize money.", image: "/images/marlin.jpg", icon: "fish", category: "Sports" }, { id: "bikeweek", name: "OC BikeFest", date: "September 10-14, 2025", description: "Motorcycle rally featuring concerts, vendors, and custom bikes.", image: "/images/bikefest.jpg", icon: "motorcycle", category: "Festival" }, { id: "winefest", name: "Wine on the Beach", date: "September 27-28, 2025", description: "Wine tasting festival on the beach featuring local and regional wines.", image: "/images/winefest.jpg", icon: "wine-glass-alt", category: "Food & Drink" }, { id: "sunfest", name: "Sunfest", date: "October 17-20, 2025", description: "Ocean City's biggest and oldest festival with food, crafts, and entertainment.", image: "/images/sunfest.jpg", icon: "sun", category: "Festival" }, { id: "winterfest", name: "Winterfest of Lights", date: "November 21, 2025 - December 31, 2025", description: "Holiday light spectacular at Northside Park.", image: "/images/winterfest.jpg", icon: "snowflake", category: "Holiday" } ]; useEffect(()=>{ const fetchEvents = async ()=>{ setIsLoading(true); try { const response = await fetch('/api/events'); if (!response.ok) throw new Error('Failed to fetch events'); const data = await response.json(); setEvents([ ...annualEvents, ...data.data || [] ]); } catch (err) { console.error('Error fetching events:', err); setEvents(annualEvents); } finally{ setIsLoading(false); } }; fetchEvents(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "Ocean City Events"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Experience the best annual events in Ocean City, Maryland")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-md mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __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: 122, columnNumber: 7 }, __self: this }, isLoading ? Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-48 rounded-t-lg", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-b-lg", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-2", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded w-1/2", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this })))) : events.map((event)=>/*#__PURE__*/ React.createElement("a", { key: event.id, href: `/events/${event.id}`, className: "bg-white rounded-lg shadow-md overflow-hidden transform transition-transform hover:scale-105", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-48", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: event.image, alt: `${event.name} in Ocean City`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 bg-blue-600 text-white text-xs px-2 py-1 rounded", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, event.category)), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${event.icon} text-blue-600 mr-2`, __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold text-gray-900", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, event.name)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-blue-600 mb-2", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, event.date), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, event.description))))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 bg-blue-50 rounded-lg p-6", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle text-blue-600 mr-2", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }), "Planning Your Visit"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar text-blue-600 text-2xl mb-2", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "Event Schedule"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, "Check dates and plan ahead for your favorite events.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ticket-alt text-blue-600 text-2xl mb-2", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "Tickets"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, "Many events offer advance ticket sales with special pricing.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hotel text-blue-600 text-2xl mb-2", __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "Accommodations"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "Book your stay early during major event weekends."))))); }