function PaymentOptions({ onSelectPayment, selectedPayment }) { const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const paymentOptions = [ { id: "paypal", icon: "fa-brands fa-paypal", label: "PayPal" }, { id: "cash", icon: "fa-solid fa-money-bill", label: "Cash" }, { id: "card", icon: "fa-solid fa-credit-card", label: "Card" } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "Select Payment Method"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, paymentOptions.map((option)=>/*#__PURE__*/ React.createElement("button", { key: option.id, onClick: ()=>onSelectPayment(option.id), className: `flex items-center justify-center p-4 rounded-lg border-2 transition-all ${selectedPayment === option.id ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-blue-300"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${option.icon} text-2xl`, __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, option.label))))))); } function PaymentOptionsStory() { const [selectedPayment, setSelectedPayment] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PaymentOptions, { onSelectPayment: setSelectedPayment, selectedPayment: selectedPayment, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } function CoinBalance({ points = 0 }) { return /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center bg-[#1a1a1a] rounded-full py-2 px-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-coins text-yellow-400 mr-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, points, " points")); } function CoinBalanceStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CoinBalance, { points: 150, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CoinBalance, { points: 1250, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CoinBalance, { points: 0, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function BarberCard({ image, name, rating, location }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-md p-4 bg-white w-[300px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Barber ${name}`, className: "w-full h-[200px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-yellow-400 mr-1", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, rating)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, location))); } function BarberCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(BarberCard, { image: "/barber1.jpg", name: "John Smith", rating: "4.8", location: "123 Main St, New York, NY", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(BarberCard, { image: "/barber2.jpg", name: "Sarah Johnson", rating: "4.9", location: "456 Park Ave, New York, NY", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [searchTerm, setSearchTerm] = useState(""); const featuredBarbers = [ { name: "Hassan Mokhtar", rating: 4.8, reviews: 120, image: "/barber1.jpg", location: "Casablanca" }, { name: "Youssef Amrani", rating: 4.9, reviews: 89, image: "/barber2.jpg", location: "Rabat" }, { name: "Karim Benali", rating: 4.7, reviews: 156, image: "/barber3.jpg", location: "Marrakech" } ]; const cities = [ "Casablanca", "Rabat", "Marrakech", "Fez", "Tangier", "Agadir", "Meknes", "Oujda", "Kenitra", "Tetouan", "El Jadida", "Safi", "Mohammedia", "Khouribga", "Beni Mellal", "Nador", "Taza", "Settat" ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center gap-2 bg-gray-900 text-white px-6 py-2 rounded-lg hover:bg-gray-700 hover:scale-105 active:bg-gray-950 active:scale-95 transition-all duration-200 shadow-md hover:shadow-lg font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), "Barber Login")), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 relative", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-6", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-48 rounded-full bg-gradient-to-b from-[#FF69B4] via-white to-[#FF69B4] relative overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 animate-slide", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full w-full bg-[repeating-linear-gradient(45deg,#FF69B4_0px,#FF69B4_20px,white_20px,white_40px)]", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-crimson-text text-gray-900 mb-2 flex items-center gap-4", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "Hala9i", /*#__PURE__*/ React.createElement("i", { className: "fas fa-scissors text-[#FF69B4] transform hover:rotate-45 transition-transform duration-300", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-16 h-48 rounded-full bg-gradient-to-b from-[#FF69B4] via-white to-[#FF69B4] relative overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 animate-slide", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full w-full bg-[repeating-linear-gradient(45deg,#FF69B4_0px,#FF69B4_20px,white_20px,white_40px)]", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl md:text-6xl font-bold font-crimson-text text-gray-900 mb-6", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Find Your Perfect Barber"), /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full px-12 py-4 rounded-full border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-200 focus:border-gray-400 shadow-sm hover:shadow-md transition-all duration-200 font-roboto", placeholder: "Search for barbers on Hala9i...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), name: "search", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "mb-16", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-crimson-text text-gray-900 mb-8", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Featured Barbers"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, featuredBarbers.map((barber, index)=>/*#__PURE__*/ React.createElement(BarberCard, { key: index, image: barber.image, name: barber.name, rating: barber.rating, location: barber.location, __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold font-crimson-text text-gray-900 mb-8", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "Popular Cities"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, cities.map((city, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-md p-6 text-center hover:bg-gray-50 hover:scale-105 active:scale-95 cursor-pointer transition-all duration-200 hover:shadow-lg", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-city text-2xl text-gray-400 mb-3 group-hover:text-gray-600", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-900", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, city)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, ` @keyframes slide { from { transform: translateY(0); } to { transform: translateY(-50%); } } .animate-slide { animation: slide 8s linear infinite; } `)); }