function CycleCard({ image, modelName, condition, hourlyRate }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-md overflow-hidden w-[300px] bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image || "/cycle.jpg", alt: "Rental bicycle", className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, modelName || "Mountain Bike Pro"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Condition: ", condition || "Excellent"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "₹", hourlyRate || "49", "/hour"))); } function CycleCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CycleCard, { image: "/cycle.jpg", modelName: "Mountain Bike Pro", condition: "Excellent", hourlyRate: "49", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function BookingForm({ onSubmit, defaultHours = 1 }) { const [hours, setHours] = useState(defaultHours); const depositAmount = 1000; const hourlyRate = 49; const handleSubmit = (e)=>{ e.preventDefault(); onSubmit?.({ hours, depositAmount, hourlyRate }); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Deposit Amount:"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "₹", depositAmount)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Hourly Rate:"), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "₹", hourlyRate)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "hours", className: "font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Number of Hours:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "hours", name: "hours", min: "1", value: hours, onChange: (e)=>setHours(parseInt(e.target.value)), className: "border rounded-md p-2", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Submit"))); } function BookingFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BookingForm, { onSubmit: console.log, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function MainComponent() { const cycles = [ { id: 1, name: "Mountain Bike", price: "25/day", image: "/mountain-bike.jpg" }, { id: 2, name: "City Cruiser", price: "20/day", image: "/city-bike.jpg" }, { id: 3, name: "Road Bike", price: "30/day", image: "/road-bike.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#f8fafc] py-16 px-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto text-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-montserrat text-4xl md:text-6xl font-bold text-[#1e293b] mb-6", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Explore the City on Two Wheels"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl text-[#475569] mb-8 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Rent premium quality bikes for your adventures. Whether you're a casual rider or an enthusiast, we've got the perfect cycle for you."), /*#__PURE__*/ React.createElement("a", { href: "#rent-now", className: "bg-[#3b82f6] text-white font-roboto px-8 py-4 rounded-lg text-lg hover:bg-[#2563eb] transition-colors", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Rent a Bike Now"))), /*#__PURE__*/ React.createElement("main", { className: "py-16 px-4", id: "rent-now", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-3xl font-bold text-center mb-12 text-[#1e293b]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Available Cycles"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, cycles.map((cycle)=>/*#__PURE__*/ React.createElement(React.Fragment, null))))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#f8fafc] py-16 px-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto text-center", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-3xl font-bold mb-6 text-[#1e293b]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Ready to Start Your Journey?"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#475569] mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Book your bike now and get ready for an amazing cycling experience!"), /*#__PURE__*/ React.createElement(React.Fragment, null)))); }