function MainComponent() { const sportsList = [ { name: "Football", rules: "Football rules" }, { name: "Lacrosse", rules: "Lacrosse rules" }, { name: "Boxing", rules: "Boxing rules" } ]; const foodList = [ { name: "Burger", image: "images/burger.jpg" }, { name: "Hot dog", image: "images/hotdog.jpg" }, { name: "BBQ Rib", image: "images/bbq-rib.jpg" }, { name: "Bigmac", image: "images/bigmac.jpg" }, { name: "Fries", image: "images/fries.jpg" }, { name: "Cheesy fries", image: "images/cheesy-fries.jpg" }, { name: "Curry fries", image: "images/curry-fries.jpg" } ]; const contactDetails = { phone: "(123) 456-7890", email: "contact@westgresssports.com" }; const reviews = [ { author: "Jane Doe", content: "Great experience, the sports facilities are top-notch!" }, { author: "John Smith", content: "Loved the food selection, especially the curry fries!" }, { author: "Alex Johnson", content: "Fantastic place for family and sports enthusiasts alike." } ]; const [activeRule, setActiveRule] = React.useState(null); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#123456] text-white p-4 text-3xl md:text-4xl flex justify-between items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Westgress Sports Hall"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-sm", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-phone", __source: { fileName: "", lineNumber: 45, columnNumber: 45 }, __self: this }), " ", contactDetails.phone), /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-sm", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope", __source: { fileName: "", lineNumber: 46, columnNumber: 45 }, __self: this }), " ", contactDetails.email))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "my-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Sports"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, sportsList.map((sport, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 rounded-lg shadow-md bg-white", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2 font-bold", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, sport.name), /*#__PURE__*/ React.createElement("button", { className: `font-semibold ${activeRule === sport.rules ? 'bg-[#0056b3] text-white' : 'text-[#007bff] hover:text-[#0056b3]'} focus:outline-none`, onClick: ()=>setActiveRule(activeRule === sport.rules ? null : sport.rules), __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, activeRule === sport.rules ? 'Hide Rules' : 'Show Rules'), /*#__PURE__*/ React.createElement("p", { className: `transition-opacity duration-500 ease-in-out ${activeRule === sport.rules ? 'opacity-100' : 'opacity-0 h-0 overflow-hidden'}`, __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, sport.rules)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } `)); }