function NavigationBar() { const [isOpen, setIsOpen] = useState(false); const toggleMenu = ()=>{ setIsOpen(!isOpen); }; return /*#__PURE__*/ React.createElement("nav", { className: "bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 9, 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: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between h-16", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "inline-flex items-center justify-center p-2 rounded-md text-black hover:text-gray-700 focus:outline-none", "aria-expanded": "false", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-2xl", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: `${isOpen ? 'block' : 'hidden'} md:hidden`, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-2 pt-2 pb-3 space-y-1 bg-white border-b border-gray-200", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/domestic-quote", className: "block px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Domestic Removals"), /*#__PURE__*/ React.createElement("a", { href: "/corporate-quote", className: "block px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Commercial Removals"), /*#__PURE__*/ React.createElement("a", { href: "/waste-quote", className: "block px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Waste Clearance"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "ml-10 flex items-baseline space-x-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/domestic-quote", className: "px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Domestic Removals"), /*#__PURE__*/ React.createElement("a", { href: "/corporate-quote", className: "px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Commercial Removals"), /*#__PURE__*/ React.createElement("a", { href: "/waste-quote", className: "px-3 py-2 rounded-md text-base font-inter text-black hover:bg-gray-100", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Waste Clearance")))); } function NavigationBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this })); } function MainComponent() { const [formData, setFormData] = useState({ businessName: '', contactName: '', email: '', phone: '', fromAddress: '', toAddress: '', moveDate: '', facilityType: '', squareFootage: '', equipmentNeeded: '', storageRequired: '', accessDetails: '', details: '' }); const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const [upload, { loading: uploading }] = useUpload(); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleFileUpload = async (e)=>{ const file = e.target.files[0]; if (!file) return; try { const { url, error } = await upload({ file }); if (error) throw error; setImages((prev)=>[ ...prev, url ]); } catch (err) { setError('Failed to upload image'); console.error(err); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); setSuccess(false); try { const response = await fetch('/api/resend-api-function', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ to: 'sales@npremovals.co.uk', from: 'onboarding@resend.dev', subject: 'New Commercial Removal Quote Request', formType: 'commercial', formData, images }) }); if (!response.ok) { throw new Error('Failed to send email'); } setSuccess(true); setFormData({ businessName: '', contactName: '', email: '', phone: '', fromAddress: '', toAddress: '', moveDate: '', facilityType: '', squareFootage: '', equipmentNeeded: '', storageRequired: '', accessDetails: '', details: '' }); setImages([]); } catch (err) { console.error('Error:', err); setError('Failed to submit quote request. Please try again.'); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-16 md:px-8", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold font-inter text-gray-900 dark:text-white mb-8", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Commercial Removals Form"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "Business Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "businessName", value: formData.businessName, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, "Contact Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "contactName", value: formData.contactName, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: formData.phone, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, "Current Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fromAddress", value: formData.fromAddress, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "Destination Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "toAddress", value: formData.toAddress, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 180, columnNumber: 17 }, __self: this }, "Facility Type"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "facilityType", value: formData.facilityType, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", placeholder: "e.g. Office, Warehouse, Retail", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "Square Footage"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "squareFootage", value: formData.squareFootage, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, "Preferred Move Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "moveDate", value: formData.moveDate, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, "Equipment Requirements"), /*#__PURE__*/ React.createElement("textarea", { name: "equipmentNeeded", value: formData.equipmentNeeded, onChange: handleChange, rows: "2", className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", placeholder: "Describe any specific equipment needs for the move...", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, "Storage Requirements"), /*#__PURE__*/ React.createElement("textarea", { name: "storageRequired", value: formData.storageRequired, onChange: handleChange, rows: "2", className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", placeholder: "Describe any storage requirements...", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "Access Details"), /*#__PURE__*/ React.createElement("textarea", { name: "accessDetails", value: formData.accessDetails, onChange: handleChange, rows: "2", className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", placeholder: "Describe access details, restrictions, or special requirements...", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, "Additional Notes"), /*#__PURE__*/ React.createElement("textarea", { name: "details", value: formData.details, onChange: handleChange, rows: "4", className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", placeholder: "Please provide any additional information about your move...", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, "Upload Images"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleFileUpload, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }), images.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 279, columnNumber: 19 }, __self: this }, images.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: `Uploaded image ${index + 1}`, className: "w-full h-32 object-cover rounded-lg", __source: { fileName: "", lineNumber: 281, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end mt-8 space-y-4", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 bg-red-50 dark:bg-red-900/50 text-red-700 dark:text-red-200 rounded-lg", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, error), success && /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 bg-green-50 dark:bg-green-900/50 text-green-700 dark:text-green-200 rounded-lg", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this }, "Quote request sent successfully! We'll be in touch shortly."), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || uploading, className: "px-6 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-md font-inter hover:bg-gray-700 dark:hover:bg-gray-100 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, loading ? 'Sending...' : 'Submit Enquiry')))))); }