function MainComponent() { const [selectedGame, setSelectedGame] = useState(null); const games = [ { title: "2048", url: "https://play2048.co/", thumbnail: "/images/2048.jpg", description: "Slide numbered tiles to create 2048" }, { title: "Tetris", url: "https://tetris.com/play-tetris", thumbnail: "/images/tetris.jpg", description: "Classic block stacking puzzle game" }, { title: "Snake", url: "https://playsnake.org/", thumbnail: "/images/snake.jpg", description: "Guide the snake to eat and grow longer" }, { title: "Pac-Man", url: "https://www.google.com/logos/2010/pacman10-i.html", thumbnail: "/images/pacman.jpg", description: "Eat dots while avoiding ghosts" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8 text-center font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "🎮 Unblocked Games Hub"), !selectedGame ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, games.map((game)=>/*#__PURE__*/ React.createElement("div", { key: game.title, onClick: ()=>setSelectedGame(game), className: "bg-[#2a2a2a] rounded-lg p-4 cursor-pointer transform hover:scale-105 transition duration-200 ease-in-out", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: game.thumbnail, alt: `${game.title} game thumbnail`, className: "w-full h-48 object-cover rounded-md mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white mb-2 font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, game.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, game.description)))) : /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-lg p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, selectedGame.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedGame(null), className: "bg-[#3a3a3a] text-white px-4 py-2 rounded-md hover:bg-[#4a4a4a] font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Back to Games")), /*#__PURE__*/ React.createElement("iframe", { src: selectedGame.url, className: "w-full h-[80vh] rounded-lg", title: selectedGame.title, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })))); }