function MainComponent() { const [selectedCourse, setSelectedCourse] = React.useState(null); const isMobile = true; const courseList = [ { id: 1, title: 'Basic Techniques', description: 'Learn the fundamentals of skating.', price: '19.99', image: './images/basic-skating.jpg', alt: 'Basic Skating Techniques course with fundamental skills' }, { id: 2, title: 'Advanced Moves', description: 'Take your skills to the next level.', price: '29.99', image: './images/advanced-skating.jpg', alt: 'Advanced Skating Moves course for skill enhancement' }, { id: 3, title: 'Tricks & Stunts', description: 'Master complex tricks and stunts.', price: '39.99', image: './images/skating-tricks.jpg', alt: 'Skating Tricks and Stunts course for mastering complexity' } ]; const handleSelectCourse = (course)=>{ setSelectedCourse(course); }; const handlePayment = (event)=>{ event.preventDefault(); // Payment processing integration would go here }; const courseElements = courseList.map((course)=>/*#__PURE__*/ React.createElement("div", { key: course.id, className: "border rounded-lg p-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: course.image, alt: course.alt, className: "w-full h-40 object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, course.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#686868]", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, course.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelectCourse(course), className: "w-full bg-[#ffcd05] text-[#121212] mt-3 py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "$", course.price, " - Purchase")))); return /*#__PURE__*/ React.createElement("div", { className: isMobile ? 'p-4' : 'container mx-auto p-8', __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center border-b-2 border-gray-300 mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "SkateMaster Courses"), /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#007bff] text-white px-6 py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] text-white px-6 py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Register"))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, selectedCourse ? /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Payment for ", selectedCourse.title), /*#__PURE__*/ React.createElement("form", { onSubmit: handlePayment, className: "bg-white p-4 border rounded-lg shadow-md", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#686868] font-roboto mb-1", htmlFor: "cardInfo", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Card Information"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardInfo", className: "w-full px-3 py-2 border rounded-md font-roboto text-[#121212] bg-gray-100", placeholder: "Card Number", required: true, __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007bff] text-white py-2 rounded-md font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Pay $", selectedCourse.price))) : /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-lg font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Featured Courses:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, courseElements))), /*#__PURE__*/ React.createElement("footer", { className: "text-center text-sm font-roboto text-[#686868] py-4 border-t-2 border-gray-300", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, "© 2023 SkateMaster Inc. All rights reserved."), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, ` body { background-color: #f7fafc; } `)); }