function MainComponent() { const [seats, setSeats] = React.useState([ { id: 1, route: "Hargeisa to Wajaale", status: "available" }, { id: 2, route: "Wajaale to Hargeisa", status: "sold out" }, { id: 3, route: "Hargeisa to Gabiley", status: "available" }, { id: 4, route: "Gabiley to Hargeisa", status: "sold out" } ]); const [busSeats, setBusSeats] = React.useState(Array.from({ length: 14 }).fill({ status: "available" })); const handleSeatClick = (index)=>{ setBusSeats((currentSeats)=>currentSeats.map((seat, i)=>i === index ? { ...seat, status: seat.status === "available" ? "selected" : "available" } : seat)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phoneNumber", placeholder: "Phone Number", className: "w-full", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-[#007bff] text-white rounded-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Register"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mt-10 p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Book Your Ticket"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "origin", className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Hargeisa", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Hargeisa"), /*#__PURE__*/ React.createElement("option", { value: "Gabiley", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Gabiley"), /*#__PURE__*/ React.createElement("option", { value: "Wajaale", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Wajaale")), /*#__PURE__*/ React.createElement("select", { name: "destination", className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Hargeisa", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Hargeisa"), /*#__PURE__*/ React.createElement("option", { value: "Gabiley", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Gabiley"), /*#__PURE__*/ React.createElement("option", { value: "Wajaale", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Wajaale"))), /*#__PURE__*/ React.createElement("div", { className: "grid sm:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", name: "departureDate", className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "passengers", placeholder: "Passengers", className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between py-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-8 py-2 bg-[#007bff] text-white rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Search")))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mt-10 p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Routes & Fares"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto max-h-[400px]", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "Route"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "Departure"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Arrival"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "Fare"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "Booking"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, seats.map((seat)=>/*#__PURE__*/ React.createElement("tr", { key: seat.id, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, seat.route), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "TBD"), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, "TBD"), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "TBD"), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 text-white rounded-lg ${seat.status === "available" ? "bg-[#007bff]" : "bg-[#dc3545]"}`, __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this }, seat.status === "available" ? "Book Now" : "Sold Out")))))))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mt-10 p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Payment & Analytics"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "paymentMethod", className: "w-1/2 p-3 border rounded-lg bg-white", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Zaad", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Zaad"), /*#__PURE__*/ React.createElement("option", { value: "Edahab", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Edahab"), /*#__PURE__*/ React.createElement("option", { value: "Cash", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Cash")), /*#__PURE__*/ React.createElement("button", { className: "px-8 py-3 bg-[#ffc107] text-white rounded-lg", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Pay Now"), /*#__PURE__*/ React.createElement("button", { className: "px-8 py-3 bg-[#6c757d] text-white rounded-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "View Reports"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mt-10 p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-center text-[#121212] mb-6", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "Select Seats"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, busSeats.map((seat, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `w-12 h-12 flex items-center justify-center rounded-full ${seat.status === "available" ? "bg-green-200" : seat.status === "selected" ? "bg-blue-500" : "bg-yellow-500"}`, onClick: ()=>handleSeatClick(index), __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, seat.status === "selected" ? '✓' : index + 1))))); }

Route	Departure	Arrival	Fare
Hargeisa to Wajaale	TBD	TBD	TBD
Wajaale to Hargeisa	TBD	TBD	TBD
Hargeisa to Gabiley	TBD	TBD	TBD
Gabiley to Hargeisa	TBD	TBD	TBD