function MainComponent() { const [searchParams, setSearchParams] = useState({ postcode: "", plaats: "", specialisatie: "" }); const [dakdekkers, setDakdekkers] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const specialisaties = [ "dakisolatie", "dakreparatie", "dakonderhoud", "groendak", "dakkapellen", "zonnepanelen", "bitumen", "epdm", "dakpannen", "lichtkoepels", "dakgoten" ]; const handleSearch = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); try { const response = await fetch("/api/zoek-dakdekkers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(searchParams) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); if (result.success) { setDakdekkers(result.dakdekkers); } else { setError(result.error); } } catch (error) { setError("Er is een fout opgetreden bij het zoeken naar dakdekkers"); console.error("Search error:", error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg fixed w-full z-50", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-20", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/7fa88336-1612-4018-a0c8-aa2f4be11ec0/-/format/auto/", alt: "Netwerk Dakdekkers Logo", className: "h-16 mx-auto", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/dakdekkers", className: "hover:text-[#38B5E6]", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Dakdekkers Home"), /*#__PURE__*/ React.createElement("a", { href: "tel:085-5055366", className: "bg-[#38B5E6] text-white px-4 py-2 rounded-md hover:bg-[#2d91b8]", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "085 - 505 5366"))))), /*#__PURE__*/ React.createElement("main", { className: "pt-24 pb-16", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-8", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Zoek een Dakdekker"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "space-y-4 md:space-y-0 md:flex md:gap-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "Postcode"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "postcode", value: searchParams.postcode, onChange: (e)=>setSearchParams({ ...searchParams, postcode: e.target.value }), className: "w-full p-2 border rounded", placeholder: "1234 AB", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, "Plaats"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "plaats", value: searchParams.plaats, onChange: (e)=>setSearchParams({ ...searchParams, plaats: e.target.value }), className: "w-full p-2 border rounded", placeholder: "Amsterdam", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, "Specialisatie"), /*#__PURE__*/ React.createElement("select", { name: "specialisatie", value: searchParams.specialisatie, onChange: (e)=>setSearchParams({ ...searchParams, specialisatie: e.target.value }), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, "Alle specialisaties"), specialisaties.map((spec)=>/*#__PURE__*/ React.createElement("option", { key: spec, value: spec, __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }, spec.charAt(0).toUpperCase() + spec.slice(1))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-end", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full md:w-auto bg-[#38B5E6] text-white px-6 py-2 rounded-md hover:bg-[#2d91b8]", disabled: loading, __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 153, columnNumber: 21 }, __self: this }) : "Zoeken")))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 text-red-800 p-4 rounded-lg mb-8", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, error), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#38B5E6] text-4xl", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this })) : dakdekkers.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 text-gray-600", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, "Geen resultaten gevonden") : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, dakdekkers.map((dakdekker)=>/*#__PURE__*/ React.createElement("div", { key: dakdekker.id, className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 183, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 184, columnNumber: 21 }, __self: this }, dakdekker.bedrijfsnaam), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 188, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#38B5E6] font-bold mr-2", __source: { fileName: "", lineNumber: 189, columnNumber: 25 }, __self: this }, dakdekker.rating.toFixed(1)), /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-[#38B5E6]", __source: { fileName: "", lineNumber: 192, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 194, columnNumber: 23 }, __self: this }, dakdekker.aantal_reviews, " reviews"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 201, columnNumber: 21 }, __self: this }, "Specialisaties"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 202, columnNumber: 21 }, __self: this }, dakdekker.specialisaties.map((spec)=>/*#__PURE__*/ React.createElement("span", { key: spec, className: "bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 204, columnNumber: 25 }, __self: this }, spec)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 214, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "flex items-center", __source: { fileName: "", lineNumber: 215, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt w-6 text-[#38B5E6]", __source: { fileName: "", lineNumber: 216, columnNumber: 23 }, __self: this }), dakdekker.plaats), /*#__PURE__*/ React.createElement("p", { className: "flex items-center", __source: { fileName: "", lineNumber: 219, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone w-6 text-[#38B5E6]", __source: { fileName: "", lineNumber: 220, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: `tel:${dakdekker.telefoon}`, className: "hover:text-[#38B5E6]", __source: { fileName: "", lineNumber: 221, columnNumber: 23 }, __self: this }, dakdekker.telefoon)), /*#__PURE__*/ React.createElement("p", { className: "flex items-center", __source: { fileName: "", lineNumber: 228, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope w-6 text-[#38B5E6]", __source: { fileName: "", lineNumber: 229, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: `mailto:${dakdekker.email}`, className: "hover:text-[#38B5E6]", __source: { fileName: "", lineNumber: 230, columnNumber: 23 }, __self: this }, dakdekker.email)))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-50 py-8 text-center", __source: { fileName: "", lineNumber: 245, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 246, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "tel:085-5055366", className: "block text-[#38B5E6] hover:text-[#2d91b8] font-bold", __source: { fileName: "", lineNumber: 247, columnNumber: 11 }, __self: this }, "085 - 505 5366"), /*#__PURE__*/ React.createElement("a", { href: "mailto:info@netwerkdakdekkers.nl", className: "block text-[#38B5E6] hover:text-[#2d91b8]", __source: { fileName: "", lineNumber: 253, columnNumber: 11 }, __self: this }, "info@netwerkdakdekkers.nl")))); }