function Header1({ menuItems = [ { label: "HOME", href: "/" }, { label: "OVER ONS", href: "/over-ons" }, { label: "PROJECTEN", href: "/projecten" }, { label: "CONTACT", href: "/contact" }, { label: "OFFERTE AANVRAGEN", href: "/offerte-aanvragen" } ], logoUrl = "https://ucarecdn.com/34e2a232-4993-46e2-9b55-225e5a348e49/-/format/auto/", logoAlt = "Netwerk Dakdekkers Logo", phoneNumber = "035 234 0130", slogan = "NETWERK DAKDEKKERS UW PARTNER IN DAKZAKEN!", openingHours = { weekdays: "08:00 - 17:00", weekend: "Gesloten" } }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isOpen, setIsOpen] = useState(false); const [statusColor, setStatusColor] = useState('gray'); const [systemStatus, setSystemStatus] = useState({ loading: true }); const [showStatusDetails, setShowStatusDetails] = useState(false); const checkSystemStatus = useCallback(async ()=>{ try { const response = await fetch('/api/system-health', { method: 'POST' }); if (!response.ok) throw new Error('System status check failed'); const status = await response.json(); setSystemStatus(status); } catch (error) { setSystemStatus({ overall: 'critical', database: { status: 'error' }, fallback: { status: 'error' } }); } }, []); const checkOpeningStatus = useCallback(()=>{ const now = new Date(); const day = now.getDay(); const hour = now.getHours(); const minutes = now.getMinutes(); const currentTime = hour * 60 + minutes; const openTime = 8 * 60; const closeTime = 17 * 60; const almostCloseTime = 16 * 60 + 30; if (day >= 1 && day <= 5) { if (currentTime >= openTime && currentTime < almostCloseTime) { setIsOpen(true); setStatusColor('green'); } else if (currentTime >= almostCloseTime && currentTime < closeTime) { setIsOpen(true); setStatusColor('orange'); } else { setIsOpen(false); setStatusColor('red'); } } else { setIsOpen(false); setStatusColor('red'); } }, []); useEffect(()=>{ checkOpeningStatus(); checkSystemStatus(); const openingInterval = setInterval(checkOpeningStatus, 60000); const systemInterval = setInterval(checkSystemStatus, 300000); return ()=>{ clearInterval(openingInterval); clearInterval(systemInterval); }; }, [ checkOpeningStatus, checkSystemStatus ]); const getStatusText = ()=>{ if (statusColor === 'green') return 'Nu open'; if (statusColor === 'orange') return 'Sluit bijna'; return 'Nu gesloten'; }; const getSystemStatusColor = ()=>{ if (systemStatus.loading) return 'gray'; switch(systemStatus.overall){ case 'healthy': return 'green'; case 'degraded': return 'yellow'; case 'critical': return 'red'; default: return 'gray'; } }; const getSystemStatusText = ()=>{ if (systemStatus.loading) return 'Systeem status laden...'; switch(systemStatus.overall){ case 'healthy': return 'Systeem online'; case 'degraded': return 'Beperkte functionaliteit'; case 'critical': return 'Systeem offline'; default: return 'Status onbekend'; } }; return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#38AAE1] text-white py-2 px-4 relative z-50", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base font-medium", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, slogan), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-4", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center cursor-pointer", __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-3 h-3 rounded-full bg-${statusColor}-500 mr-2`, __source: { fileName: "", lineNumber: 118, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 119, columnNumber: 21 }, __self: this }, getStatusText())), /*#__PURE__*/ React.createElement("div", { className: "absolute hidden group-hover:block right-0 mt-2 w-64 bg-white text-gray-700 rounded-lg shadow-lg p-4 z-50", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 122, columnNumber: 21 }, __self: this }, "Openingstijden:"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 123, columnNumber: 21 }, __self: this }, "Maandag - Vrijdag: ", openingHours.weekdays), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, "Zaterdag - Zondag: ", openingHours.weekend))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowStatusDetails(!showStatusDetails), className: "flex items-center space-x-2 text-sm", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full bg-${getSystemStatusColor()}-500`, __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, getSystemStatusText())), showStatusDetails && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-72 bg-white text-gray-700 rounded-lg shadow-lg p-4 z-50", __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 139, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 140, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 141, columnNumber: 27 }, __self: this }, "Database:"), /*#__PURE__*/ React.createElement("span", { className: `text-${systemStatus.database?.status === 'healthy' ? 'green' : 'red'}-500`, __source: { fileName: "", lineNumber: 142, columnNumber: 27 }, __self: this }, systemStatus.database?.status === 'healthy' ? 'Online' : 'Offline')), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 146, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 147, columnNumber: 27 }, __self: this }, "Fallback systeem:"), /*#__PURE__*/ React.createElement("span", { className: `text-${systemStatus.fallback?.status === 'healthy' ? 'green' : 'red'}-500`, __source: { fileName: "", lineNumber: 148, columnNumber: 27 }, __self: this }, systemStatus.fallback?.status === 'healthy' ? 'Online' : 'Offline')), systemStatus.overall !== 'healthy' && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 mt-2", __source: { fileName: "", lineNumber: 153, columnNumber: 27 }, __self: this }, "Sommige functies zijn mogelijk beperkt beschikbaar"))))), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, phoneNumber)))))), /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md relative z-40", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-20", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoUrl, alt: logoAlt, className: "h-12", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex items-center space-x-6", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: item.href, className: "text-gray-700 hover:text-[#38AAE1] font-medium tracking-wide transition-colors", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, item.label))), /*#__PURE__*/ React.createElement("button", { className: "md:hidden text-gray-700 hover:text-[#38AAE1] transition-colors", onClick: ()=>setIsMenuOpen(!isMenuOpen), "aria-label": "Toggle menu", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? 'fa-times' : 'fa-bars'} text-2xl`, __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }))), isMenuOpen && /*#__PURE__*/ React.createElement("nav", { className: "md:hidden py-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: item.href, className: "block py-2 text-gray-700 hover:text-[#38AAE1] font-medium tracking-wide transition-colors", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, item.label)), /*#__PURE__*/ React.createElement("div", { className: "py-2 border-t border-gray-200 mt-2", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-3 h-3 rounded-full bg-${statusColor}-500 mr-2`, __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }, getStatusText())), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 mt-1", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, "Maandag - Vrijdag: ", openingHours.weekdays), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this }, "Zaterdag - Zondag: ", openingHours.weekend)), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex items-center", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full bg-${getSystemStatusColor()}-500 mr-2`, __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 224, columnNumber: 19 }, __self: this }, getSystemStatusText())))))), systemStatus.overall === 'critical' && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border-t border-red-200 py-2 px-4", __source: { fileName: "", lineNumber: 233, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 234, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-700 text-sm text-center", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, "Er zijn momenteel technische problemen. We werken aan een oplossing. Voor dringende zaken kunt u ons bereiken op ", phoneNumber, ".")))); } function Header1Story() { const defaultMenuItems = [ { label: "HOME", href: "/" }, { label: "OVER ONS", href: "/over-ons" }, { label: "PROJECTEN", href: "/projecten" }, { label: "CONTACT", href: "/contact" }, { label: "OFFERTE AANVRAGEN", href: "/offerte-aanvragen" } ]; const shortMenuItems = [ { label: "HOME", href: "/" }, { label: "CONTACT", href: "/contact" } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 261, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 262, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }, "Default Header (System Online)"), /*#__PURE__*/ React.createElement(Header1, { menuItems: defaultMenuItems, slogan: "NETWERK DAKDEKKERS UW PARTNER IN DAKZAKEN!", logoUrl: "https://ucarecdn.com/34e2a232-4993-46e2-9b55-225e5a348e49/-/format/auto/", phoneNumber: "035 234 0130", __source: { fileName: "", lineNumber: 264, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 272, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 273, columnNumber: 9 }, __self: this }, "Header with System Issues"), /*#__PURE__*/ React.createElement(Header1, { menuItems: shortMenuItems, phoneNumber: "020 - 123 4567", slogan: "Quality roofing solutions", openingHours: { weekdays: "09:00 - 18:00", weekend: "Closed" }, __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 285, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 286, columnNumber: 9 }, __self: this }, "Header with Degraded Service"), /*#__PURE__*/ React.createElement(Header1, { logoUrl: "https://example.com/custom-logo.png", logoAlt: "Custom Logo", menuItems: defaultMenuItems, phoneNumber: "030 - 987 6543", slogan: "Professional roofing services", openingHours: { weekdays: "07:00 - 19:00", weekend: "10:00 - 16:00" }, __source: { fileName: "", lineNumber: 287, columnNumber: 9 }, __self: this }))); } function ErrorBoundary({ error, errorInfo, onReset }) { const [formData, setFormData] = useState({ name: '', email: '', message: '' }); useEffect(()=>{ if (error) { console.error('Error caught by boundary:', error); console.error('Error info:', errorInfo); } }, [ error, errorInfo ]); const handleSubmit = async (e)=>{ e.preventDefault(); try { const response = await fetch('/api/create-formulier-inzending', { method: 'POST', body: JSON.stringify({ ...formData, formulier_type: 'error_report', error: error?.message, errorInfo: errorInfo?.componentStack }) }); if (!response.ok) throw new Error('Kon formulier niet verzenden'); setFormData({ name: '', email: '', message: '' }); } catch (err) { console.error('Fout bij verzenden:', err); } }; if (!error) return null; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/34e2a232-4993-46e2-9b55-225e5a348e49/-/format/auto/", alt: "Netwerk Dakdekkers Logo", className: "h-16 mx-auto mb-6", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Er is iets misgegaan"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-600 mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Onze excuses voor het ongemak. We hebben de fout geregistreerd en werken aan een oplossing."), /*#__PURE__*/ React.createElement("button", { onClick: onReset, className: "inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#38AAE1] hover:bg-[#38AAE1]/90", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo mr-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), "Pagina opnieuw laden")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-6 mb-8", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Direct contact opnemen"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-[#38AAE1] mr-3", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "tel:035-234-0130", className: "text-gray-600 hover:text-[#38AAE1]", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, "035-234-0130")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-[#38AAE1] mr-3", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: "mailto:info@netwerkdakdekkers.org", className: "text-gray-600 hover:text-[#38AAE1]", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, "info@netwerkdakdekkers.org")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Fout melden"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "Naam"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: formData.name, onChange: (e)=>setFormData((prev)=>({ ...prev, name: e.target.value })), className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3", __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, "E-mail"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", value: formData.email, onChange: (e)=>setFormData((prev)=>({ ...prev, email: e.target.value })), className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Bericht"), /*#__PURE__*/ React.createElement("textarea", { name: "message", id: "message", rows: "3", value: formData.message, onChange: (e)=>setFormData((prev)=>({ ...prev, message: e.target.value })), className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#38AAE1] text-white py-2 px-4 rounded-md hover:bg-[#38AAE1]/90", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, "Verstuur"))))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center text-[#38AAE1] hover:text-[#38AAE1]/90", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }), "Terug naar homepage")))); } function ErrorBoundaryStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 151, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, "Normal State (No Error)"), /*#__PURE__*/ React.createElement(ErrorBoundary, { __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, "With Error"), /*#__PURE__*/ React.createElement(ErrorBoundary, { error: new Error('Test error'), errorInfo: { componentStack: 'Test component stack' }, onReset: ()=>window.location.reload(), __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, "With Network Error"), /*#__PURE__*/ React.createElement(ErrorBoundary, { error: new Error('Failed to fetch'), errorInfo: { componentStack: 'Network error stack' }, onReset: ()=>window.location.reload(), __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }))); } function CallToAction({ title = "Klaar om uw dakproject te starten?", primaryButtonText = "OFFERTE AANVRAGEN", primaryButtonHref = "/offerte-aanvragen", secondaryButtonText = "NEEM CONTACT OP", secondaryButtonHref = "/contact", backgroundColor = "#38AAE1", showSecondaryButton = true }) { return /*#__PURE__*/ React.createElement("div", { className: `bg-[${backgroundColor}] py-8 px-4`, __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-3xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: primaryButtonHref, className: "inline-block bg-white text-[#38AAE1] px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition-colors", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, primaryButtonText), showSecondaryButton && /*#__PURE__*/ React.createElement("a", { href: secondaryButtonHref, className: "inline-block border-2 border-white text-white px-8 py-3 rounded-md font-medium hover:bg-white hover:text-[#38AAE1] transition-colors", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, secondaryButtonText)))); } function CallToActionStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Default Call To Action"), /*#__PURE__*/ React.createElement(CallToAction, { __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Single Button Variant"), /*#__PURE__*/ React.createElement(CallToAction, { title: "Vraag direct een offerte aan!", primaryButtonText: "OFFERTE AANVRAGEN", showSecondaryButton: false, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Custom Colors"), /*#__PURE__*/ React.createElement(CallToAction, { title: "Begin vandaag nog met uw dakproject", backgroundColor: "#1A1A1A", primaryButtonText: "START NU", secondaryButtonText: "MEER INFO", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Custom Links"), /*#__PURE__*/ React.createElement(CallToAction, { title: "Heeft u vragen over uw dakproject?", primaryButtonText: "BEL ONS", primaryButtonHref: "tel:035-234-0130", secondaryButtonText: "STUUR EMAIL", secondaryButtonHref: "mailto:info@netwerkdakdekkers.nl", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }))); } function ContactFormulier({ type = 'contact', title = "Neem Contact Met Ons Op", subtitle = "Heeft u vragen of wilt u meer informatie? Vul het onderstaande formulier in en wij nemen zo spoedig mogelijk contact met u op.", onSuccess, notificationEmail = "info@netwerkdakdekkers.org" }) { const [userType, setUserType] = useState('consument'); const [formData, setFormData] = useState({ naam: '', email: '', telefoon: '', bedrijfsnaam: '', onderwerp: '', bericht: '', type: 'consument', kvkNummer: '', werkgebied: '', specialisatie: '' }); const [status, setStatus] = useState({ loading: false, success: false, error: null }); const handleSubmit = async (e)=>{ e.preventDefault(); setStatus({ loading: true, success: false, error: null }); try { const response = await fetch('/api/formulier-inzendingen/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...formData, type: userType }) }); const data = await response.json(); if (data.success) { setStatus({ loading: false, success: true, error: null }); setFormData({ naam: '', email: '', telefoon: '', bedrijfsnaam: '', onderwerp: '', bericht: '', type: 'consument', kvkNummer: '', werkgebied: '', specialisatie: '' }); if (onSuccess) onSuccess(data); } else { throw new Error(data.error || 'Er ging iets mis bij het versturen'); } } catch (error) { console.error('Fout bij versturen:', error); setStatus({ loading: false, success: false, error: error.message || 'Er is een fout opgetreden bij het versturen van het formulier' }); } }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; if (status.success) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-50 p-6 rounded-lg text-center", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-green-700 text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Bedankt voor uw bericht!"), /*#__PURE__*/ React.createElement("p", { className: "text-green-600", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "We hebben uw aanvraag succesvol ontvangen en nemen zo spoedig mogelijk contact met u op."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStatus({ loading: false, success: false, error: null }); setFormData({ naam: '', email: '', telefoon: '', bedrijfsnaam: '', onderwerp: '', bericht: '', type: 'consument', kvkNummer: '', werkgebied: '', specialisatie: '' }); }, className: "mt-4 bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700 transition-colors", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Nieuw formulier"))); } return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 119, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, subtitle)), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex rounded-md shadow-sm", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setUserType('consument'), className: `flex-1 px-4 py-3 text-sm font-medium rounded-l-md border ${userType === 'consument' ? 'bg-[#38AAE1] text-white border-[#38AAE1]' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'}`, __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }), "Consument"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setUserType('dakdekker'), className: `flex-1 px-4 py-3 text-sm font-medium rounded-r-md border ${userType === 'dakdekker' ? 'bg-[#38AAE1] text-white border-[#38AAE1]' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'}`, __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hard-hat mr-2", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }), "Dakdekker"))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, "Naam *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "naam", value: formData.naam, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "E-mailadres *"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, "Telefoonnummer ", userType === 'dakdekker' && '*'), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "telefoon", value: formData.telefoon, onChange: handleInputChange, required: userType === 'dakdekker', className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this })), userType === 'dakdekker' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, "Bedrijfsnaam *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bedrijfsnaam", value: formData.bedrijfsnaam, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, "KVK Nummer *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "kvkNummer", value: formData.kvkNummer, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, "Werkgebied *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "werkgebied", value: formData.werkgebied, onChange: handleInputChange, required: true, placeholder: "bijv. Noord-Holland, Utrecht", className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }, "Specialisatie *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "specialisatie", value: formData.specialisatie, onChange: handleInputChange, required: true, placeholder: "bijv. Dakpannen, EPDM, Bitumen", className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }))), userType === 'consument' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, "Onderwerp *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "onderwerp", value: formData.onderwerp, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 266, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 277, columnNumber: 17 }, __self: this }, "Uw bericht *"), /*#__PURE__*/ React.createElement("textarea", { name: "bericht", value: formData.bericht, onChange: handleInputChange, required: true, rows: 5, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 280, columnNumber: 17 }, __self: this }))), status.error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 border border-red-200 text-red-700 rounded-md", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 294, columnNumber: 15 }, __self: this }, "Er is een fout opgetreden:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, status.error)), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: status.loading, className: "w-full bg-[#38AAE1] text-white px-6 py-3 rounded-md font-medium hover:bg-[#38AAE1]/90 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 299, columnNumber: 11 }, __self: this }, status.loading ? 'Bezig met verzenden...' : userType === 'dakdekker' ? 'Aanmelden als dakdekker' : 'Verstuur bericht')))); } function ContactFormulierStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 space-y-8", __source: { fileName: "", lineNumber: 314, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 315, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, "Standaard Contact Formulier"), /*#__PURE__*/ React.createElement(ContactFormulier, { __source: { fileName: "", lineNumber: 317, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 320, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 321, columnNumber: 9 }, __self: this }, "Aangepast Contact Formulier"), /*#__PURE__*/ React.createElement(ContactFormulier, { title: "Contact Opnemen", subtitle: "Heeft u een specifieke vraag? Laat het ons weten!", notificationEmail: "contact@example.com", __source: { fileName: "", lineNumber: 322, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 329, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 330, columnNumber: 9 }, __self: this }, "Dakdekker Registratie Formulier"), /*#__PURE__*/ React.createElement(ContactFormulier, { type: "dakdekker", title: "Word onderdeel van ons netwerk", subtitle: "Bent u een professionele dakdekker? Meld u aan bij ons netwerk en ontvang kwalitatieve opdrachten.", __source: { fileName: "", lineNumber: 331, columnNumber: 9 }, __self: this }))); } function DakdekkerCard() { return null; } function DakdekkerCardStory() { return null; } function WhyChooseUsSection({ title = "Waarom Kiezen voor Netwerk Dakdekkers BV?", backgroundColor = "bg-white", reasons = [ { icon: "fas fa-check-circle", title: "Ervaring", description: "Jarenlange ervaring in de dakbedekkingssector zorgt voor expertise en vakmanschap bij elk project." }, { icon: "fas fa-check-circle", title: "Kwaliteit", description: "Gebruik van de beste materialen en vakmanschap verzekerd door strenge kwaliteitscontroles." }, { icon: "fas fa-check-circle", title: "Betrouwbaarheid", description: "Altijd op tijd en binnen budget, met duidelijke communicatie gedurende het hele project." } ] }) { return /*#__PURE__*/ React.createElement("section", { className: `py-16 px-6 md:px-8 ${backgroundColor}`, __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-[#1A1A1A] mb-4 tracking-wide", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, title)), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-8", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, reasons.map((reason, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-start bg-gray-50 p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#38AAE1] mr-5 mt-1", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${reason.icon} text-2xl`, __source: { fileName: "", lineNumber: 33, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-[#1A1A1A] mb-2 tracking-normal", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, reason.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-lg leading-relaxed font-normal", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, reason.description)))))))); } function WhyChooseUsSectionStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "Default Why Choose Us Section"), /*#__PURE__*/ React.createElement(WhyChooseUsSection, { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-12 border-t border-gray-300", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Custom Why Choose Us Section"), /*#__PURE__*/ React.createElement(WhyChooseUsSection, { title: "Waarom Wij de Beste Keuze Zijn", backgroundColor: "bg-gray-50", reasons: [ { icon: "fas fa-medal", title: "Gecertificeerde Professionals", description: "Al onze dakdekkers zijn volledig gecertificeerd en hebben jarenlange ervaring in de branche." }, { icon: "fas fa-shield-alt", title: "Garantie op Werkzaamheden", description: "Wij bieden uitgebreide garanties op al onze werkzaamheden voor uw gemoedsrust." }, { icon: "fas fa-clock", title: "Snelle Service", description: "Wij reageren snel op aanvragen en zorgen voor een efficiënte uitvoering van elk project." }, { icon: "fas fa-hand-holding-usd", title: "Concurrerende Prijzen", description: "Hoogwaardige dienstverlening tegen eerlijke en transparante prijzen zonder verborgen kosten." } ], __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-12 border-t border-gray-300", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Minimal Why Choose Us Section"), /*#__PURE__*/ React.createElement(WhyChooseUsSection, { title: "Onze Voordelen", reasons: [ { icon: "fas fa-thumbs-up", title: "Klanttevredenheid", description: "Onze klanten waarderen onze professionele aanpak en kwaliteit van werk." }, { icon: "fas fa-star", title: "Topkwaliteit", description: "Wij streven naar perfectie bij elke opdracht, groot of klein." } ], __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }))); } function ProjectAanmeldingsFormulier() { return null; } function ProjectAanmeldingsFormulierStory() { return null; } function ProjectCard() { return null; } function ProjectCardStory() { return null; } function KostenCalculator1() { const [formData, setFormData] = useState({ bedrijfstype: '', aantalWerknemers: 1, omzetJaar1: '', omzetJaar2: '', omzetJaar3: '', gekozenModules: [], kortingscode: '' }); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleModuleToggle = (module)=>{ setFormData((prev)=>({ ...prev, gekozenModules: prev.gekozenModules.includes(module) ? prev.gekozenModules.filter((m)=>m !== module) : [ ...prev.gekozenModules, module ] })); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); try { const response = await fetch('/api/bereken-kosten', { method: 'POST', body: JSON.stringify(formData) }); if (!response.ok) { throw new Error('Er is een fout opgetreden bij het berekenen van de kosten'); } const data = await response.json(); setResult(data); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "Bereken uw kosten"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Type bedrijf"), /*#__PURE__*/ React.createElement("select", { name: "bedrijfstype", value: formData.bedrijfstype, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", required: true, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Selecteer type"), /*#__PURE__*/ React.createElement("option", { value: "zzp_zonder", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "ZZP'er zonder personeel"), /*#__PURE__*/ React.createElement("option", { value: "zzp_met", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "ZZP'er met personeel"), /*#__PURE__*/ React.createElement("option", { value: "bv", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "BV"), /*#__PURE__*/ React.createElement("option", { value: "loondienst", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "In loondienst"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Aantal werknemers"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "aantalWerknemers", min: "1", value: formData.aantalWerknemers, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", required: true, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Omzet jaar 1"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "omzetJaar1", value: formData.omzetJaar1, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", required: true, __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Omzet jaar 2"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "omzetJaar2", value: formData.omzetJaar2, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", required: true, __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Omzet jaar 3"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "omzetJaar3", value: formData.omzetJaar3, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", required: true, __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, "Extra modules"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, [ 'marketing', 'website', 'offertes', 'klantenservice', 'inkopen', 'verzekering', 'werkkleding', 'gereedschap' ].map((module)=>/*#__PURE__*/ React.createElement("label", { key: module, className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: formData.gekozenModules.includes(module), onChange: ()=>handleModuleToggle(module), className: "h-4 w-4 text-[#38AAE1] focus:ring-[#38AAE1] border-gray-300 rounded", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-700 capitalize", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, module))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, "Kortingscode"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "kortingscode", value: formData.kortingscode, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", placeholder: "Optioneel", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 text-red-600 p-4 rounded-md", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-[#38AAE1] text-white px-6 py-3 rounded-md font-medium hover:bg-[#38AAE1]/90 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, loading ? 'Berekenen...' : 'Bereken kosten')), result && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-6 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 187, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, "Kostenberekening"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, "Eenmalige kosten:"), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, "€", result.eenmaligeKosten.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, "Maandelijkse kosten:"), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, "€", result.maandelijkseKosten.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "* Alle bedragen zijn exclusief BTW"))))); } function KostenCalculator1Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 212, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 213, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }, "Default KostenCalculator"), /*#__PURE__*/ React.createElement(KostenCalculator1, { __source: { fileName: "", lineNumber: 215, columnNumber: 9 }, __self: this }))); } function AboutSection({ title = "Netwerk Dakdekkers BV", subtitle = "De beste match tussen opdrachtgever en dakdekker", description = "Netwerk Dakdekkers is een professioneel netwerk van gekwalificeerde dakdekkers die voldoen aan strenge kwaliteitseisen. Wij zorgen voor de perfecte match tussen opdrachtgevers en vakbekwame dakdekkers, zodat elk dakproject met de hoogste kwaliteit wordt uitgevoerd.", address = "Torenlaan 5A, 1402 AT Bussum", backgroundColor = "bg-white" }) { return /*#__PURE__*/ React.createElement("section", { className: `py-16 px-6 md:px-8 ${backgroundColor}`, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-[#1A1A1A] mb-4 tracking-wide", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-[#1A1A1A] font-medium tracking-normal", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, subtitle)), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto text-center", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-lg leading-relaxed mb-8 font-normal", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, description), address && /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-lg font-normal", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "font-semibold", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, "Adres:"), " ", address)))); } function AboutSectionStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Default About Section"), /*#__PURE__*/ React.createElement(AboutSection, { __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-12 border-t border-gray-300", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Custom About Section"), /*#__PURE__*/ React.createElement(AboutSection, { title: "Over Ons", subtitle: "Uw betrouwbare partner voor dakwerkzaamheden", description: "Met meer dan 15 jaar ervaring in de dakdekkersindustrie, hebben wij een uitgebreid netwerk van gekwalificeerde professionals opgebouwd. Onze missie is om kwaliteit en betrouwbaarheid te garanderen bij elk project, groot of klein.", address: "Hoofdstraat 123, 1234 AB Amsterdam", backgroundColor: "bg-gray-50", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-12 border-t border-gray-300", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "About Section Without Address"), /*#__PURE__*/ React.createElement(AboutSection, { title: "Onze Geschiedenis", subtitle: "Een traditie van vakmanschap sinds 2010", description: "Netwerk Dakdekkers is ontstaan uit de behoefte om kwaliteit in de dakdekkersbranche te waarborgen. Door de jaren heen hebben we ons ontwikkeld tot een toonaangevend platform dat opdrachtgevers verbindt met de beste vakspecialisten in Nederland.", address: "", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }))); } function Footer1() { return /*#__PURE__*/ React.createElement(React.Fragment, null); } function Footer1Story() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Default Footer"), /*#__PURE__*/ React.createElement(Footer1, { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Minimal Footer"), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Full Featured Footer"), /*#__PURE__*/ React.createElement(React.Fragment, null))); } function DakdekkerAanmeldFormulier() { const [formData, setFormData] = useState({ bedrijfsnaam: '', kvk_nummer: '', btw_nummer: '', contactpersoon_naam: '', contactpersoon_functie: '', email: '', telefoon: '', website: '', straat: '', huisnummer: '', postcode: '', plaats: '', aantal_medewerkers: '', opgericht_jaar: '', certificeringen: '', specialisaties: '', werkgebied: '', notification_email: 'info@netwerkdakdekkers.org' }); const [status, setStatus] = useState({ loading: false, error: null, success: false }); const handleSubmit = async (e)=>{ e.preventDefault(); setStatus({ loading: true, error: null, success: false }); try { const response = await fetch('/api/create-dakdekker-aanmelding', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); if (!response.ok) { throw new Error('Er ging iets mis bij het versturen van het formulier'); } const data = await response.json(); if (data.success) { setStatus({ loading: false, error: null, success: true }); setFormData((prev)=>({ ...prev, bedrijfsnaam: '', kvk_nummer: '', btw_nummer: '', contactpersoon_naam: '', contactpersoon_functie: '', email: '', telefoon: '', website: '', straat: '', huisnummer: '', postcode: '', plaats: '', aantal_medewerkers: '', opgericht_jaar: '', certificeringen: '', specialisaties: '', werkgebied: '', notification_email: 'info@netwerkdakdekkers.org' })); } } catch (error) { setStatus({ loading: false, error: error.message, success: false }); } }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; if (status.success) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 text-center", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-green-600 text-5xl mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "Bedankt voor uw aanmelding!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "We hebben uw aanmelding ontvangen en nemen binnen 2 werkdagen contact met u op.")); } return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, "Dakdekker Aanmeldformulier"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Bedrijfsnaam *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bedrijfsnaam", value: formData.bedrijfsnaam, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "KvK nummer *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "kvk_nummer", value: formData.kvk_nummer, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "BTW nummer *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "btw_nummer", value: formData.btw_nummer, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, "Naam contactpersoon *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "contactpersoon_naam", value: formData.contactpersoon_naam, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, "Functie contactpersoon *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "contactpersoon_functie", value: formData.contactpersoon_functie, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "E-mailadres *"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "Telefoonnummer *"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "telefoon", value: formData.telefoon, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, "Website"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "website", value: formData.website, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 212, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "Straat *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "straat", value: formData.straat, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 225, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, "Huisnummer *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "huisnummer", value: formData.huisnummer, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, "Postcode *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "postcode", value: formData.postcode, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 253, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 263, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, "Plaats *"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "plaats", value: formData.plaats, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, "Aantal medewerkers *"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "aantal_medewerkers", value: formData.aantal_medewerkers, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 281, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 291, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, "Jaar van oprichting *"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "opgericht_jaar", value: formData.opgericht_jaar, onChange: handleInputChange, required: true, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 305, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, "Certificeringen"), /*#__PURE__*/ React.createElement("textarea", { name: "certificeringen", value: formData.certificeringen, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 309, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, "Specialisaties"), /*#__PURE__*/ React.createElement("textarea", { name: "specialisaties", value: formData.specialisaties, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 321, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 329, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 330, columnNumber: 13 }, __self: this }, "Werkgebied"), /*#__PURE__*/ React.createElement("textarea", { name: "werkgebied", value: formData.werkgebied, onChange: handleInputChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 333, columnNumber: 13 }, __self: this }))), status.error && /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 text-red-600 rounded-md", __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }, status.error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: status.loading, className: "w-full bg-[#38AAE1] text-white px-6 py-3 rounded-md font-medium hover:bg-[#38AAE1]/90 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 348, columnNumber: 9 }, __self: this }, status.loading ? 'Bezig met verzenden...' : 'Aanmelden als dakdekker'))); } function DakdekkerAanmeldFormulierStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-50", __source: { fileName: "", lineNumber: 362, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 363, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(DakdekkerAanmeldFormulier, { __source: { fileName: "", lineNumber: 364, columnNumber: 9 }, __self: this }))); } function ProjectWizard() { return null; } function ProjectWizardStory() { return null; } function Hero1({ title = "Netwerk Dakdekkers BV", subtitle = "De beste match tussen opdrachtgever en dakdekker", description = "Wij verbinden u met gekwalificeerde dakdekkers uit ons netwerk voor al uw dakwerkzaamheden. Van kleine reparaties tot complete dakvernieuwing.", backgroundImage = "https://ucarecdn.com/d847da10-f57b-42e7-9839-f4fef76d0d67/-/format/auto/", primaryButtonText = "PROJECT AANMELDEN", primaryButtonHref = "/offerte-aanvragen", secondaryButtonText = "DAKDEKKER AANMELDEN", secondaryButtonHref = "/dakdekkers-registratie" }) { return /*#__PURE__*/ React.createElement("section", { className: "relative bg-[#38AAE1] py-20 px-6 md:px-8", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: backgroundImage, alt: "Professionele dakdekkers team", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/40", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto relative z-10", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl md:text-3xl text-white mb-8", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, subtitle), /*#__PURE__*/ React.createElement("p", { className: "text-lg md:text-xl text-white mb-8", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: primaryButtonHref, className: "inline-block bg-white text-[#38AAE1] px-8 py-4 rounded-md font-bold text-lg hover:bg-gray-100 transition-colors", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, primaryButtonText), /*#__PURE__*/ React.createElement("a", { href: secondaryButtonHref, className: "inline-block border-2 border-white text-white px-8 py-4 rounded-md font-bold text-lg hover:bg-white hover:text-[#38AAE1] transition-colors", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, secondaryButtonText))))); } function Hero1Story() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Default Hero"), /*#__PURE__*/ React.createElement(Hero1, { __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-12 border-t border-gray-300", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Custom Hero"), /*#__PURE__*/ React.createElement(Hero1, { title: "Professioneel dakwerk voor uw woning", subtitle: "Vakkundig uitgevoerd door ervaren specialisten", description: "Ontdek ons netwerk van ervaren dakdekkers die klaar staan om uw project vakkundig uit te voeren. Wij garanderen kwaliteit en betrouwbaarheid.", primaryButtonText: "DIRECT AANVRAGEN", secondaryButtonText: "MEER INFORMATIE", backgroundImage: "https://ucarecdn.com/3d3c8ed5-cf83-42d4-96b0-618a2d951703/-/format/auto/", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-12 pt-12 border-t border-gray-300", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Alternative Hero"), /*#__PURE__*/ React.createElement(Hero1, { title: "Betrouwbare dakdekkers in uw regio", subtitle: "Snel en vakkundig uw dakproject gerealiseerd", description: "Wij zorgen voor een perfecte match tussen uw dakproject en gekwalificeerde vakspecialisten. Ontdek het gemak van werken met ons netwerk.", primaryButtonText: "START NU", secondaryButtonText: "BEKIJK PROJECTEN", secondaryButtonHref: "/projecten", backgroundImage: "https://ucarecdn.com/182f9531-9cc4-4ca7-bd5b-82fdb966709b/-/format/auto/", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [submitted, setSubmitted] = useState(false); const [formData, setFormData] = useState({ naam: "", email: "", telefoon: "", postcode: "", huisnummer: "", project_type: "", dak_type: "", oppervlakte: "", start_datum: "", bericht: "", is_spoed: false, contact_voorkeur: "telefoon", fotos: [] }); const projectTypes = [ "Dakrenovatie", "Daklekkage", "Dakisolatie", "Dakkapel plaatsing", "Dakraam plaatsing", "Gevelrenovatie", "Schoorsteen renovatie", "Groendak aanleg", "Duurzame oplossingen", "Anders" ]; const dakTypes = [ "Pannendak", "Plat dak", "Bitumen", "EPDM", "Zinken dak", "Leien dak", "Riet", "Weet ik niet" ]; const [upload, { loading: uploadLoading }] = useUpload(); const handleFileUpload = async (e)=>{ const files = Array.from(e.target.files); setLoading(true); try { const uploadedUrls = []; for (const file of files){ const { url, error } = await upload({ file }); if (error) throw new Error(error); uploadedUrls.push(url); } setFormData((prev)=>({ ...prev, fotos: [ ...prev.fotos, ...uploadedUrls ] })); } catch (err) { console.error("Fout bij het uploaden van foto's:", err); setError("Er is een fout opgetreden bij het uploaden van de foto's. Probeer het later opnieuw."); } finally{ setLoading(false); } }; const removePhoto = (indexToRemove)=>{ setFormData((prev)=>({ ...prev, fotos: prev.fotos.filter((_, index)=>index !== indexToRemove) })); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); try { const response = await fetch("/api/create-formulier-inzending", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...formData, formulier_type: "offerte" }) }); if (!response.ok) { throw new Error(`Er is een fout opgetreden bij het verzenden van het formulier: [${response.status}] ${response.statusText}`); } setSubmitted(true); window.scrollTo({ top: 0, behavior: "smooth" }); } catch (err) { console.error(err); setError("Er is een fout opgetreden bij het verzenden van het formulier. Probeer het later opnieuw."); } finally{ setLoading(false); } }; const handleChange = (e)=>{ const { name, value, type, checked } = e.target; setFormData((prev)=>({ ...prev, [name]: type === "checkbox" ? checked : value })); }; if (submitted) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-green-500 text-5xl mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "Bedankt voor uw aanvraag!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-8", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "We nemen binnen 24 uur contact met u op om uw project te bespreken."), /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-block bg-[#38AAE1] text-white px-6 py-3 rounded-md font-medium hover:bg-[#38AAE1]/90 transition-colors", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "Terug naar homepage")))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 151, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, "Offerte Aanvragen"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "Vul het formulier in en ontvang binnen 24 uur een passende offerte")), error && /*#__PURE__*/ React.createElement("div", { className: "mb-6 bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-md", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, error)), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white shadow-lg rounded-lg p-6 mb-6", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "naam", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this }, "Naam *"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "naam", name: "naam", required: true, value: formData.naam, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, "E-mailadres *"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", required: true, value: formData.email, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "telefoon", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "Telefoonnummer *"), /*#__PURE__*/ React.createElement("input", { type: "tel", id: "telefoon", name: "telefoon", required: true, value: formData.telefoon, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "contact_voorkeur", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, "Contactvoorkeur"), /*#__PURE__*/ React.createElement("select", { id: "contact_voorkeur", name: "contact_voorkeur", value: formData.contact_voorkeur, onChange: handleChange, className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#38AAE1] focus:border-[#38AAE1]", __source: { fileName: "

Offerte Aanvragen

Waarom kiezen voor Netwerk Dakdekkers?