function MainComponent() { const reels = [ { id: 1, category: "woodworking", title: "Basic Woodworking Tips", videoSrc: "path/to/woodworking_video.mp4" }, { id: 2, category: "gardening", title: "Gardening for Beginners", videoSrc: "path/to/gardening_video.mp4" }, { id: 3, category: "plumbing", title: "Fixing a Leaky Faucet", videoSrc: "path/to/plumbing_video.mp4" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-crimson-text", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Hornbach AG Learning Reel-Based App")), /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2 font-semibold", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-scroll pb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-2 rounded shadow text-center w-[100px]", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Woodworking"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-2 rounded shadow text-center w-[100px]", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Gardening"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-2 rounded shadow text-center w-[100px]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Plumbing"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2 font-semibold", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Educational Reels"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, reels.map((reel)=>/*#__PURE__*/ React.createElement("div", { key: reel.id, className: "bg-white p-4 rounded shadow relative", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("video", { className: "w-full h-[200px] mb-2", src: reel.videoSrc, controls: true, __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, reel.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Category: ", reel.category))))), /*#__PURE__*/ React.createElement("footer", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded shadow-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Create Your Own Reel")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, ` body { @apply bg-gray-100; } `)); }