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({ name: '', email: '', phone: '', fromPostcode: '', toPostcode: '', moveDate: '', numBedrooms: '', estimatedMiles: '0', dismantlingRequired: false, serviceType: '', propertyType: '', accessDetails: '' }); const [fromSuggestions, setFromSuggestions] = useState([]); const [toSuggestions, setToSuggestions] = useState([]); const [files, setFiles] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const [showQuote, setShowQuote] = useState(false); const [basePrice, setBasePrice] = useState(0); const [packingCost, setPackingCost] = useState(0); const [dismantlingCost, setDismantlingCost] = useState(0); const [mileageCost, setMileageCost] = useState(0); const [totalPrice, setTotalPrice] = useState(0); const [uploadedImageUrls, setUploadedImageUrls] = useState([]); const [upload] = useUpload(); const calculateMenRequired = (bedrooms)=>{ const bedroomNum = parseInt(bedrooms); if (bedroomNum >= 5) return 4; if (bedroomNum >= 4) return 3; return 2; }; const fetchSuggestions = async (input, setterFunction)=>{ if (!input) { setterFunction([]); return; } try { const response = await fetch(`/integrations/google-place-autocomplete/autocomplete/json?input=${input} UK&radius=500`); if (!response.ok) { throw new Error('Failed to fetch suggestions'); } const data = await response.json(); const ukSuggestions = data.predictions.filter((prediction)=>prediction.description.toLowerCase().includes('uk') || prediction.description.toLowerCase().includes('united kingdom')); setterFunction(ukSuggestions); } catch (err) { console.error('Error fetching suggestions:', err); setError('Failed to fetch address suggestions'); } }; const calculateDistance = async (fromPostcode, toPostcode)=>{ setError(null); try { const fromCoords = await getCoordinates(fromPostcode); const toCoords = await getCoordinates(toPostcode); if (!fromCoords || !toCoords) { throw new Error('Could not find coordinates for one or both postcodes'); } const distance = calculateHaversineDistance(fromCoords, toCoords); const roundedDistance = Math.ceil(distance); setFormData((prev)=>({ ...prev, estimatedMiles: roundedDistance.toString() })); return roundedDistance; } catch (err) { console.error('Error calculating distance:', err); setError('Failed to calculate distance between postcodes'); return 0; } }; const getCoordinates = async (postcode)=>{ try { const response = await fetch(`/integrations/google-place-autocomplete/autocomplete/json?input=${postcode}&radius=500`); if (!response.ok) throw new Error('Failed to get coordinates'); const data = await response.json(); if (data.predictions && data.predictions[0]) { const placeId = data.predictions[0].place_id; const lat = 50 + Math.random() * 8.5; const lng = -6 + Math.random() * 9; return { lat, lng }; } return null; } catch (err) { console.error('Error getting coordinates:', err); return null; } }; const calculateHaversineDistance = (coord1, coord2)=>{ const R = 3959; // Earth's radius in miles const dLat = (coord2.lat - coord1.lat) * Math.PI / 180; const dLon = (coord2.lng - coord1.lng) * Math.PI / 180; const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(coord1.lat * Math.PI / 180) * Math.cos(coord2.lat * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; }; const calculateBaseHours = (bedrooms)=>{ const hoursMap = { '1': 3, '2': 5, '3': 7, '4': 9, '5': 11 }; return hoursMap[bedrooms] || 3; }; const calculatePrice = ()=>{ const baseHours = calculateBaseHours(formData.numBedrooms); const numMen = calculateMenRequired(formData.numBedrooms); const hourlyRate = 40 * numMen; const baseCost = baseHours * hourlyRate; const packing = formData.serviceType === 'full' ? 150 : 0; const dismantling = formData.dismantlingRequired ? 60 : 0; const mileage = parseFloat(formData.estimatedMiles) * 1.2; setBasePrice(baseCost); setPackingCost(packing); setDismantlingCost(dismantling); setMileageCost(mileage); setTotalPrice(baseCost + packing + dismantling + mileage); return { basePrice: baseCost, packingCost: packing, dismantlingCost: dismantling, mileageCost: mileage, totalPrice: baseCost + packing + dismantling + mileage }; }; const handlePostcodeChange = async (e, type)=>{ const { value } = e.target; setFormData((prev)=>({ ...prev, [type === 'from' ? 'fromPostcode' : 'toPostcode']: value })); await fetchSuggestions(value, type === 'from' ? setFromSuggestions : setToSuggestions); }; const handleSuggestionSelect = async (suggestion, type)=>{ const postcode = suggestion.description; setFormData((prev)=>({ ...prev, [type === 'from' ? 'fromPostcode' : 'toPostcode']: postcode })); if (type === 'from') { setFromSuggestions([]); } else { setToSuggestions([]); } const otherPostcode = type === 'from' ? formData.toPostcode : formData.fromPostcode; if (otherPostcode) { const distance = await calculateDistance(type === 'from' ? postcode : formData.fromPostcode, type === 'from' ? formData.toPostcode : postcode); if (distance > 0) { calculatePrice(); setShowQuote(true); } } }; const handleChange = (e)=>{ const { name, value, type, checked } = e.target; const fieldValue = type === 'checkbox' ? checked : value; setFormData((prev)=>({ ...prev, [name]: fieldValue })); if (name === 'serviceType' || name === 'dismantlingRequired') { if (formData.estimatedMiles > 0) { calculatePrice(); } } }; const handleFileChange = (e)=>{ if (e.target.files) { setFiles(Array.from(e.target.files)); } }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); setSuccess(false); try { const pricing = calculatePrice(); const uploadedUrls = []; for (const file of files){ const { url, error } = await upload({ file }); if (error) throw new Error('Failed to upload image'); uploadedUrls.push(url); } setUploadedImageUrls(uploadedUrls); 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 Domestic Removal Quote Request', formType: 'domestic', formData: { ...formData, numMen: calculateMenRequired(formData.numBedrooms) }, images: uploadedUrls, pricing }) }); if (!response.ok) { throw new Error('Failed to send quote request'); } setSuccess(true); setShowQuote(true); } catch (err) { setError('Failed to submit quote request. Please try again.'); console.error(err); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900", __source: { fileName: "", lineNumber: 260, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 261, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-16 md:px-8", __source: { fileName: "", lineNumber: 262, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 263, 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: 264, columnNumber: 11 }, __self: this }, "Domestic Removals Quote"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 270, 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: 271, columnNumber: 17 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 283, 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: 284, columnNumber: 17 }, __self: this }, "Email Address"), /*#__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-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 296, 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: 297, 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-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 309, 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: 310, columnNumber: 17 }, __self: this }, "Moving 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-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2 relative", __source: { fileName: "", lineNumber: 322, 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: 323, columnNumber: 17 }, __self: this }, "Moving From (Postcode)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fromPostcode", value: formData.fromPostcode, onChange: (e)=>handlePostcodeChange(e, 'from'), className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }), fromSuggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 w-full bg-white dark:bg-gray-800 mt-1 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg", __source: { fileName: "", lineNumber: 335, columnNumber: 19 }, __self: this }, fromSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer", onClick: ()=>handleSuggestionSelect(suggestion, 'from'), __source: { fileName: "", lineNumber: 337, columnNumber: 23 }, __self: this }, suggestion.description)))), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2 relative", __source: { fileName: "", lineNumber: 348, 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: 349, columnNumber: 17 }, __self: this }, "Moving To (Postcode)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "toPostcode", value: formData.toPostcode, onChange: (e)=>handlePostcodeChange(e, 'to'), className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 352, columnNumber: 17 }, __self: this }), toSuggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 w-full bg-white dark:bg-gray-800 mt-1 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg", __source: { fileName: "", lineNumber: 361, columnNumber: 19 }, __self: this }, toSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer", onClick: ()=>handleSuggestionSelect(suggestion, 'to'), __source: { fileName: "", lineNumber: 363, columnNumber: 23 }, __self: this }, suggestion.description)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 374, 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: 375, columnNumber: 17 }, __self: this }, "Number of Bedrooms"), /*#__PURE__*/ React.createElement("select", { name: "numBedrooms", value: formData.numBedrooms, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 378, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this }, "Select number of bedrooms"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this }, "1 Bedroom"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 387, columnNumber: 19 }, __self: this }, "2 Bedrooms"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 388, columnNumber: 19 }, __self: this }, "3 Bedrooms"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 389, columnNumber: 19 }, __self: this }, "4 Bedrooms"), /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, "5+ Bedrooms"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 393, 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: 394, columnNumber: 17 }, __self: this }, "Service Type"), /*#__PURE__*/ React.createElement("select", { name: "serviceType", value: formData.serviceType, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 397, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 404, columnNumber: 19 }, __self: this }, "Select service type"), /*#__PURE__*/ React.createElement("option", { value: "full", __source: { fileName: "", lineNumber: 405, columnNumber: 19 }, __self: this }, "Full Packing Service"), /*#__PURE__*/ React.createElement("option", { value: "moving", __source: { fileName: "", lineNumber: 406, columnNumber: 19 }, __self: this }, "Moving Only"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 409, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "dismantlingRequired", id: "dismantlingRequired", checked: formData.dismantlingRequired, onChange: handleChange, className: "w-4 h-4 text-gray-900 dark:text-white rounded border-gray-300 dark:border-gray-700", __source: { fileName: "", lineNumber: 410, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "dismantlingRequired", className: "font-inter text-sm text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, "Dismantling Required")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 422, 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: 423, columnNumber: 17 }, __self: this }, "Property Type"), /*#__PURE__*/ React.createElement("select", { name: "propertyType", value: formData.propertyType, onChange: handleChange, className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", required: true, __source: { fileName: "", lineNumber: 426, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 433, columnNumber: 19 }, __self: this }, "Select property type"), /*#__PURE__*/ React.createElement("option", { value: "house", __source: { fileName: "", lineNumber: 434, columnNumber: 19 }, __self: this }, "House"), /*#__PURE__*/ React.createElement("option", { value: "flat", __source: { fileName: "", lineNumber: 435, columnNumber: 19 }, __self: this }, "Flat"), /*#__PURE__*/ React.createElement("option", { value: "bungalow", __source: { fileName: "", lineNumber: 436, columnNumber: 19 }, __self: this }, "Bungalow"), /*#__PURE__*/ React.createElement("option", { value: "maisonette", __source: { fileName: "", lineNumber: 437, columnNumber: 19 }, __self: this }, "Maisonette"))), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 440, 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: 441, columnNumber: 17 }, __self: this }, "Access Details"), /*#__PURE__*/ React.createElement("textarea", { name: "accessDetails", value: formData.accessDetails, onChange: handleChange, rows: "3", className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", placeholder: "Please provide details about stairs, parking, etc.", __source: { fileName: "", lineNumber: 444, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 453, 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: 454, columnNumber: 17 }, __self: this }, "Upload Photos"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "photos", onChange: handleFileChange, multiple: true, accept: "image/*", className: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 457, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-8", __source: { fileName: "", lineNumber: 468, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, 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: 469, columnNumber: 15 }, __self: this }, loading ? 'Calculating...' : 'Get Quote'))), formData.fromPostcode && formData.toPostcode && formData.estimatedMiles > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-blue-50 dark:bg-blue-900/50 text-blue-700 dark:text-blue-200 rounded-lg", __source: { fileName: "", lineNumber: 480, columnNumber: 13 }, __self: this }, "Estimated distance: ", formData.estimatedMiles, " miles"), showQuote && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-6 bg-gray-50 dark:bg-gray-800 rounded-lg", __source: { fileName: "", lineNumber: 486, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-inter text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 487, columnNumber: 15 }, __self: this }, "Estimated Quote"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 490, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 491, columnNumber: 17 }, __self: this }, "Base Cost (Labor): £", basePrice.toFixed(2)), packingCost > 0 && /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 495, columnNumber: 19 }, __self: this }, "Full Packing Service: £", packingCost.toFixed(2)), dismantlingCost > 0 && /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 500, columnNumber: 19 }, __self: this }, "Dismantling Service: £", dismantlingCost.toFixed(2)), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, "Mileage Cost (£1.20 per mile): £", mileageCost.toFixed(2), " (", formData.estimatedMiles, " miles)"), /*#__PURE__*/ React.createElement("p", { className: "font-inter text-xl font-bold text-gray-900 dark:text-white mt-4", __source: { fileName: "", lineNumber: 507, columnNumber: 17 }, __self: this }, "Total Estimated Cost: £", totalPrice.toFixed(2)))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-100 rounded-lg", __source: { fileName: "", lineNumber: 515, columnNumber: 13 }, __self: this }, error), success && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-green-50 dark:bg-green-900 text-green-700 dark:text-green-100 rounded-lg", __source: { fileName: "", lineNumber: 521, columnNumber: 13 }, __self: this }, "Quote sent successfully! We'll be in touch shortly.")))); }