import { n as __toESM } from "../_runtime.mjs";
import { u as require_react } from "../_libs/@floating-ui/react-dom+[...].mjs";
import { p as require_jsx_runtime } from "../_libs/@radix-ui/react-checkbox+[...].mjs";
import { r as Input, t as Button } from "./categories-MJJjwt1u.mjs";
import { n as toast } from "../_libs/sonner.mjs";
import { A as MapPin, T as Phone, W as Clock, j as Mail } from "../_libs/lucide-react.mjs";
import { l as Header, n as CheckoutFlow, t as CartDrawer, u as SignInModal } from "./Modals-PUPoXlMv.mjs";
import { t as Footer } from "./Footer-VqEE5AJo.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/contact-DC_2gWlv.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
function ContactPage() {
	const [signInOpen, setSignInOpen] = (0, import_react.useState)(false);
	const [cartOpen, setCartOpen] = (0, import_react.useState)(false);
	const [checkoutOpen, setCheckoutOpen] = (0, import_react.useState)(false);
	const [form, setForm] = (0, import_react.useState)({
		name: "",
		email: "",
		subject: "",
		topic: "General",
		message: ""
	});
	const [submitting, setSubmitting] = (0, import_react.useState)(false);
	const set = (k) => (e) => setForm((f) => ({
		...f,
		[k]: e.target.value
	}));
	const submit = (e) => {
		e.preventDefault();
		if (!form.name || !form.email || !form.message) {
			toast.error("Please fill in your name, email and message.");
			return;
		}
		setSubmitting(true);
		setTimeout(() => {
			setSubmitting(false);
			setForm({
				name: "",
				email: "",
				subject: "",
				topic: "General",
				message: ""
			});
			toast.success("Message sent! We'll get back to you within 24 hours.");
		}, 700);
	};
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "min-h-screen",
		style: { backgroundColor: "#f0f2f5" },
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignInModal, {
				open: signInOpen,
				onOpenChange: setSignInOpen
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartDrawer, {
				open: cartOpen,
				onOpenChange: setCartOpen,
				onCheckout: () => {
					setCartOpen(false);
					setCheckoutOpen(true);
				}
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckoutFlow, {
				open: checkoutOpen,
				onOpenChange: setCheckoutOpen
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Header, {
				onOpenCart: () => setCartOpen(true),
				onOpenSignIn: () => setSignInOpen(true)
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", {
				className: "max-w-[1200px] mx-auto px-4 py-6",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-xs text-neutral-500 mb-3",
						children: ["Home / ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "text-neutral-800",
							children: "Contact Us"
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "bg-gradient-to-r from-orange-500 to-orange-400 rounded-md p-6 text-white mb-4",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
							className: "text-2xl font-bold",
							children: "Contact Us"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
							className: "text-sm opacity-95 mt-1",
							children: "Questions, feedback, or need help with an order? We're here for you."
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "grid grid-cols-1 md:grid-cols-3 gap-4",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", {
							className: "md:col-span-1 space-y-3",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoCard, {
									icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Phone, { className: "w-5 h-5" }),
									title: "Call us",
									lines: ["081 0265 8259", "Mon–Sat, 8am–7pm"]
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoCard, {
									icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mail, { className: "w-5 h-5" }),
									title: "Email",
									lines: ["support@sulejamarket.ng", "vendors@sulejamarket.ng"]
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoCard, {
									icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "w-5 h-5" }),
									title: "Address",
									lines: ["Suleja, Niger State", "Nigeria"]
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoCard, {
									icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clock, { className: "w-5 h-5" }),
									title: "Support hours",
									lines: ["Mon–Fri: 8am–7pm", "Sat: 9am–5pm"]
								})
							]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
							className: "md:col-span-2 bg-white rounded-md p-5",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
									className: "font-semibold text-lg mb-1",
									children: "Send us a message"
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
									className: "text-sm text-neutral-500 mb-4",
									children: "Fill out the form and our team will respond within 24 hours."
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
									onSubmit: submit,
									className: "space-y-3",
									children: [
										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "grid grid-cols-1 md:grid-cols-2 gap-3",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
												label: "Full name *",
												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
													value: form.name,
													onChange: set("name"),
													placeholder: "Jane Doe"
												})
											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
												label: "Email *",
												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
													type: "email",
													value: form.email,
													onChange: set("email"),
													placeholder: "you@example.com"
												})
											})]
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "grid grid-cols-1 md:grid-cols-2 gap-3",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
												label: "Topic",
												children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
													value: form.topic,
													onChange: set("topic"),
													className: "w-full h-9 px-3 rounded-md border border-neutral-200 bg-white text-sm",
													children: [
														/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "General" }),
														/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Order issue" }),
														/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Returns & refunds" }),
														/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Vendor inquiry" }),
														/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Feedback" })
													]
												})
											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
												label: "Subject",
												children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
													value: form.subject,
													onChange: set("subject"),
													placeholder: "How can we help?"
												})
											})]
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
											label: "Message *",
											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
												value: form.message,
												onChange: set("message"),
												rows: 6,
												placeholder: "Tell us more...",
												className: "w-full px-3 py-2 rounded-md border border-neutral-200 bg-white text-sm resize-y"
											})
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "flex items-center justify-between pt-1",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
												className: "text-xs text-neutral-500",
												children: "We'll never share your email."
											}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
												type: "submit",
												disabled: submitting,
												className: "bg-orange-500 hover:bg-orange-600 text-white",
												children: submitting ? "Sending..." : "Send message"
											})]
										})
									]
								})
							]
						})]
					})
				]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Footer, {})
		]
	});
}
function InfoCard({ icon, title, lines }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "bg-white rounded-md p-4 flex gap-3",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "w-9 h-9 rounded-full bg-orange-50 text-orange-500 flex items-center justify-center shrink-0",
			children: icon
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "text-sm font-semibold text-neutral-800",
			children: title
		}), lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "text-xs text-neutral-500",
			children: l
		}, i))] })]
	});
}
function Field({ label, children }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
		className: "block",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
			className: "block text-xs font-medium text-neutral-700 mb-1",
			children: label
		}), children]
	});
}
//#endregion
export { ContactPage as component };
