function MainComponent() { const [selectedCity, setSelectedCity] = React.useState(null); const cities = [ 'City1', 'City2', 'City3', 'City4', 'City5', 'City6' ]; const attractions = selectedCity ? [ 'Attraction1', 'Attraction2', 'Attraction3' ] : []; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, !selectedCity && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mt-6", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Choose Your City"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mt-8 w-full px-4", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, cities.map((city)=>/*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded", key: city, onClick: ()=>setSelectedCity(city), __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, city)))), selectedCity && /*#__PURE__*/ React.createElement("div", { className: "mt-12 w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-[600px] h-[400px]", src: "https://www.google.com/maps", title: "City Map", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8 w-full px-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, attractions.map((attraction)=>/*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-md w-full flex flex-col items-center", key: attraction, __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${attraction.toLowerCase()}.jpg`, alt: `Image of ${attraction}`, className: "w-[200px] h-[200px] mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, attraction), /*#__PURE__*/ React.createElement("audio", { controls: true, className: "mt-4 w-full", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: `./audio/${attraction.toLowerCase()}.mp3`, type: "audio/mp3", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }), "Your browser does not support the audio tag."), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, "Transcript for ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 57, columnNumber: 36 }, __self: this }, attraction), " goes here."))))))); }