function MainComponent() { const [selectedCity, setSelectedCity] = React.useState(""); const provinces = { Lazio: [ "Rome", "Frosinone", "Latina" ], Lombardy: [ "Milan", "Bergamo", "Brescia" ] }; const cityDetails = { Rome: { education: 90, realEstate: 80, crimeRate: 20, source: "ISTAT", updateDate: "2023-04-01" }, Frosinone: { education: 70, realEstate: 60, crimeRate: 40, source: "ISTAT", updateDate: "2023-04-01" }, Latina: { education: 75, realEstate: 65, crimeRate: 35, source: "ISTAT", updateDate: "2023-04-01" }, Milan: { education: 95, realEstate: 85, crimeRate: 30, source: "ISTAT", updateDate: "2023-04-01" }, Bergamo: { education: 80, realEstate: 70, crimeRate: 50, source: "ISTAT", updateDate: "2023-04-01" }, Brescia: { education: 78, realEstate: 67, crimeRate: 45, source: "ISTAT", updateDate: "2023-04-01" } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, Object.entries(provinces).map(([province, cities])=>/*#__PURE__*/ React.createElement("div", { key: province, className: "mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] text-lg font-semibold", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, province), /*#__PURE__*/ React.createElement("ul", { className: "list-none pl-0 mt-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, cities.map((city)=>/*#__PURE__*/ React.createElement("li", { key: city, className: "relative", onMouseEnter: ()=>setSelectedCity(city), onMouseLeave: ()=>setSelectedCity(""), __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, city), selectedCity === city && cityDetails[city] && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-0 w-[250px] p-4 bg-white shadow-lg border border-gray-200", style: { zIndex: 10 }, __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 37, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 38, columnNumber: 23 }, __self: this }, "Education: ", cityDetails[city].education || "N/A", "%"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 39, columnNumber: 23 }, __self: this }, "Real Estate: ", cityDetails[city].realEstate || "N/A", "%"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 40, columnNumber: 23 }, __self: this }, "Crime Rate: ", cityDetails[city].crimeRate || "N/A", "%"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 41, columnNumber: 23 }, __self: this }, "Source: ", cityDetails[city].source || "N/A", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 42, columnNumber: 68 }, __self: this }), "Updated: ", cityDetails[city].updateDate || "N/A"))))))))); }