function Navigation({ links, isOpen, setIsOpen, cartItemCount }) { return /*#__PURE__*/ React.createElement("nav", { className: "bg-white dark:bg-gray-800 shadow", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, "Gumelia")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex md:items-center md:ml-6 md:space-x-8", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, links.map((link)=>/*#__PURE__*/ React.createElement("a", { key: link.href, href: link.href, className: "text-gray-900 dark:text-white hover:text-green-600 dark:hover:text-green-400", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, link.label)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-4 flow-root lg:ml-6", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/cart", className: "group -m-2 p-2 flex items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, cartItemCount))))))); } function NavigationStory() { const [isOpen, setIsOpen] = useState(false); const cartItemCount = 0; const links = [ { href: "/", label: "Home" }, { href: "/about", label: "About" }, { href: "/products", label: "Products" }, { href: "/contact", label: "Contact" } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-gray-100 dark:bg-gray-800", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { links: links, isOpen: isOpen, setIsOpen: setIsOpen, cartItemCount: cartItemCount, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Example navigation"))); } function MainComponent() { const [cartItems, setCartItems] = useState([]); const [isOpen, setIsOpen] = useState(false); const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "", preference: "email" }); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); const cartItemCount = cartItems.length; const links = [ { href: "/", label: "Home" }, { href: "/about", label: "About" }, { href: "/products", label: "Products" }, { href: "/contact", label: "Contact" } ]; const locations = [ { city: "Tehran", address: "Valiasr Street, Tehran Province", hours: "9:00 - 21:00", phone: "+98 21 1234 5678" }, { city: "Dubai", address: "Dubai Mall, Downtown Dubai", hours: "10:00 - 22:00", phone: "+971 4 123 4567" } ]; const socialLinks = [ { icon: "fa-instagram", url: "https://instagram.com/Gummelia_official" }, { icon: "fa-whatsapp", url: "https://wa.me/971582391891" } ]; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); // Clear any previous errors when user starts typing setError(null); }; const validateForm = ()=>{ if (!formData.name.trim()) { setError("Please enter your name"); return false; } if (!formData.email.trim()) { setError("Please enter your email"); return false; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())) { setError("Please enter a valid email address"); return false; } if (!formData.message.trim()) { setError("Please enter your message"); return false; } return true; }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!validateForm()) return; setIsSubmitting(true); setError(null); try { const response = await fetch("/api/send-contact-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData) }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || "Failed to send message"); } setSubmitted(true); } catch (err) { setError(err.message || "Unable to submit form. Please try again later."); console.error(err); } finally{ setIsSubmitting(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { links: links, isOpen: isOpen, setIsOpen: setIsOpen, cartItemCount: cartItems.length, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 mt-16", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-16", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-inter font-bold text-gray-900 dark:text-white mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "Luxury Concierge Support"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter leading-relaxed", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "Our dedicated team of luxury concierge specialists is available to assist you with personalized service and expert guidance. Experience the epitome of luxury care.")), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, locations.map((location, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-l-2 border-gray-200 dark:border-gray-700 pl-6", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-inter font-bold text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 133, columnNumber: 19 }, __self: this }, location.city), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter mb-1", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, location.address), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter mb-1", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, "Hours: ", location.hours), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, location.phone)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-inter font-bold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, "Follow Us"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, socialLinks.map((social, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: social.url, target: "_blank", rel: "noopener noreferrer", className: "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fab ${social.icon} text-2xl`, __source: { fileName: "", lineNumber: 162, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-800 p-8 rounded-lg", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, submitted ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-5xl text-green-500 mb-4", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-inter font-bold text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, "Thank You"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, "We'll be in touch with you shortly.")) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 dark:text-gray-300 font-inter mb-2", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, "Name *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 dark:bg-gray-700 dark:text-white", required: true, __source: { fileName: "", lineNumber: 186, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 dark:text-gray-300 font-inter mb-2", __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this }, "Email *"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 dark:bg-gray-700 dark:text-white", required: true, __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 dark:text-gray-300 font-inter mb-2", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }, "Message *"), /*#__PURE__*/ React.createElement("textarea", { name: "message", value: formData.message, onChange: handleInputChange, rows: "4", className: "w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 dark:bg-gray-700 dark:text-white", required: true, __source: { fileName: "", lineNumber: 214, columnNumber: 19 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 font-inter text-sm bg-red-50 dark:bg-red-900/20 p-3 rounded", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: "w-full bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-inter py-3 rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, isSubmitting ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 236, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 237, columnNumber: 23 }, __self: this }), "Sending...") : "Send Message"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 250, columnNumber: 7 }, __self: this }, ` @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .grid > div { animation: fadeInUp 0.8s ease-out forwards; } .grid > div:nth-child(2) { animation-delay: 0.2s; } `)); }