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 [loading, setLoading] = useState(false); const [formData, setFormData] = useState({ fullName: '', email: '', phone: '', address: '', wasteType: '', accessDetails: '', notes: '', collectionDate: '', volume: '' }); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const [upload, { loading: uploading }] = useUpload(); const [images, setImages] = useState([]); 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', subject: 'New Waste Clearance Enquiry', formType: 'waste', formData, images }) }); if (!response.ok) { throw new Error('Failed to send email'); } setSuccess(true); setFormData({ fullName: '', email: '', phone: '', address: '', wasteType: '', accessDetails: '', notes: '', collectionDate: '', volume: '' }); setImages([]); } catch (err) { console.error('Error:', err); setError('Failed to submit enquiry. Please try again.'); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 px-4 py-16 md:px-8 lg:px-16", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold font-inter text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Waste Clearance Form"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-gray-700 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Get an instant quote for your waste clearance needs")), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 md:p-8", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, "Full Name", /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", value: formData.fullName, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 107, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, "Email", /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 118, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, "Phone", /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: formData.phone, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "Type of Waste", /*#__PURE__*/ React.createElement("select", { name: "wasteType", value: formData.wasteType, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, "Select waste type"), /*#__PURE__*/ React.createElement("option", { value: "mixed", __source: { fileName: "", lineNumber: 146, columnNumber: 21 }, __self: this }, "Mixed Waste"), /*#__PURE__*/ React.createElement("option", { value: "household", __source: { fileName: "", lineNumber: 147, columnNumber: 21 }, __self: this }, "Household Waste"), /*#__PURE__*/ React.createElement("option", { value: "garden", __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, "Garden Waste"), /*#__PURE__*/ React.createElement("option", { value: "construction", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, "Construction Waste"), /*#__PURE__*/ React.createElement("option", { value: "electronic", __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }, "Electronic Waste"), /*#__PURE__*/ React.createElement("option", { value: "metal", __source: { fileName: "", lineNumber: 151, columnNumber: 21 }, __self: this }, "Metal Waste"))), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, "Volume Estimate (m³)", /*#__PURE__*/ React.createElement("input", { type: "number", name: "volume", min: "1", value: formData.volume, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", placeholder: "Enter estimated volume", __source: { fileName: "", lineNumber: 156, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "Collection Address", /*#__PURE__*/ React.createElement("textarea", { name: "address", rows: "3", value: formData.address, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", placeholder: "Enter collection address", __source: { fileName: "", lineNumber: 168, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, "Access Details", /*#__PURE__*/ React.createElement("textarea", { name: "accessDetails", rows: "2", value: formData.accessDetails, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", placeholder: "Provide any access instructions or restrictions", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "Additional Notes", /*#__PURE__*/ React.createElement("textarea", { name: "notes", rows: "2", value: formData.notes, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", placeholder: "Any additional information", __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, "Preferred Collection Date", /*#__PURE__*/ React.createElement("input", { type: "date", name: "collectionDate", value: formData.collectionDate, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-inter text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }, "Upload Photos"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleFileUpload, className: "hidden", id: "image-upload", __source: { fileName: "", lineNumber: 213, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "image-upload", className: "inline-block px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-md cursor-pointer font-inter text-sm text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700", __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this }, uploading ? 'Uploading...' : 'Upload Photos'), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 226, columnNumber: 29 }, __self: this }, error), images.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 mt-4", __source: { fileName: "", lineNumber: 228, columnNumber: 21 }, __self: this }, images.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: `Waste image ${index + 1}`, className: "w-full h-32 object-cover rounded-md", __source: { fileName: "", lineNumber: 230, columnNumber: 25 }, __self: this }))))), success && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-green-100 dark:bg-green-900 text-green-900 dark:text-green-100 rounded", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "Your waste clearance enquiry has been submitted successfully! We'll be in touch shortly to discuss your requirements."), error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-red-100 dark:bg-red-900 text-red-900 dark:text-red-100 rounded", __source: { fileName: "", lineNumber: 249, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full md:w-auto px-6 py-3 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 duration-200", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, loading ? 'Submitting...' : 'Submit Enquiry')))))); }