function MainComponent() { const hotels = [ { name: "The Grand Resort", location: "Malibu", price: "$350/night", rating: 5, imageUrl: "images/hotel1.jpg", roomTypes: [ "Standard", "Suite", "Deluxe" ] }, { name: "Oceanview Inn", location: "Monterey", price: "$220/night", rating: 4, imageUrl: "images/hotel2.jpg", roomTypes: [ "Standard", "Oceanview" ] }, { name: "Mountain Escape", location: "Aspen", price: "$450/night", rating: 5, imageUrl: "images/hotel3.jpg", roomTypes: [ "Standard", "Mountain View", "Suite" ] }, { name: "Beachside Paradise", location: "Maui", price: "$400/night", rating: 4, imageUrl: "images/hotel4.jpg", roomTypes: [ "Beachfront", "Suite" ] }, { name: "Urban Dreams", location: "New York", price: "$350/night", rating: 5, imageUrl: "images/hotel5.jpg", roomTypes: [ "Standard", "Suite", "Penthouse" ] }, { name: "Country Charm", location: "Nashville", price: "$200/night", rating: 3, imageUrl: "images/hotel6.jpg", roomTypes: [ "Standard", "Suite" ] } ]; const hotelCards = hotels.map((hotel, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "max-w-md rounded overflow-hidden shadow-lg m-4 bg-white flex flex-col", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[200px] object-cover", src: hotel.imageUrl, alt: `Image of ${hotel.name}`, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4 flex-1", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, hotel.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, hotel.location), /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 font-semibold", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, hotel.price), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, [ ...Array(hotel.rating) ].map((_, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "text-yellow-500", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "⭐")))), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `room-type-${index}`, className: "font-medium leading-5", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Room type:"), /*#__PURE__*/ React.createElement("select", { id: `room-type-${index}`, name: "roomType", className: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none sm:text-sm rounded-md", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, hotel.roomTypes.map((type, i)=>/*#__PURE__*/ React.createElement("option", { key: i, value: type, __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, type)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Book Now"))))); const responsiveHotelCards = /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, hotelCards); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto py-8 px-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-3xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Explore Our Hotels"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-[#555] mb-8", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Find your perfect stay from our luxury accommodations."), responsiveHotelCards)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, ` .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } `)); }